Shortcode - Effetto categorie a scorrimento utilizzando owl-carousel
/* Woocommerce - Lista Categorie Impostate per OWL CAROUSEL */
function woocommerce_subcats_from_parentcat_by_name($parent_cat_NAME) {
$IDbyNAME = get_term_by('slug', $parent_cat_NAME, 'product_cat');
$product_cat_ID = $IDbyNAME->term_id;
$args = array(
'hierarchical' => 1,
'show_option_none' => '',
'hide_empty' => 0,
'parent' => $product_cat_ID,
'taxonomy' => 'product_cat'
);
$subcats = get_categories($args);
echo '<div id="owl-demo" class="owl-carousel owl-theme">';
foreach ($subcats as $sc) {
$link = get_term_link( $sc->slug, $sc->taxonomy );
$thumbnail_id = get_woocommerce_term_meta( $sc->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
echo '<div class="item"><a href="'. $link .'">';
echo '<img src="' . $image . '" alt="" />';
echo $sc->name.'</a></div>';
}
echo '</div>';
}
// Add Shortcode
function lista_categorie( $atts ) {
// Attributes
$attr = shortcode_atts(
array(
'parent' => '',
), $atts );
// Code
woocommerce_subcats_from_parentcat_by_name($atts['parent']);
}
add_shortcode( 'categorie_prodotti', 'lista_categorie' );
// Add owl-carousel JS and CSS
wp_enqueue_script( 'owlcarousel', get_stylesheet_directory_uri() . '/owl-carousel/owl.carousel.min.js', array( 'jquery' ) );
// Register style sheet.
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );
function register_plugin_styles() {
wp_register_style( 'owlcarouselcss', get_stylesheet_directory_uri().'/owl-carousel/owl.carousel.css' );
wp_enqueue_style( 'owlcarouselcss' );
wp_register_style( 'owlcarouselthemecss', get_stylesheet_directory_uri().'/owl-carousel/owl.theme.css' );
wp_enqueue_style( 'owlcarouselthemecss' );
}
<script type="text/javascript">
jQuery(document).ready(function() {
var owl = jQuery("#owl-demo");
owl.owlCarousel({
items : 6, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0
autoPlay : 2500,
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
// Custom Navigation Events
jQuery(".next").click(function(){
owl.trigger('owl.next');
})
jQuery(".prev").click(function(){
owl.trigger('owl.prev');
})
jQuery(".play").click(function(){
owl.trigger('owl.play',1000); //owl.play event accept autoPlay speed as second parameter
})
jQuery(".stop").click(function(){
owl.trigger('owl.stop');
})
});</script>
/* OWL Carousel */
#owl-demo .item{
background: #FFF;
padding: 30px 0px;
margin: 10px;
color: #000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: left;
padding: 10px;
}