bluvertigo
10/29/2014 - 12:00 PM

Shortcode - Effetto categorie a scorrimento utilizzando owl-carousel

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;
}