366 posts
  • Has referred 50+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+5 more
PixelStores says

Hi,

So i want my user to be able to use the same shortcode multiple of times on the same page with different settings, to allow this my wp_localize_script must pass a unique id ‘handle’ to the javascript, this is what i got,

/* <![CDATA[ */
var carouselvars0 = {"autoscroll":"0","caorouseldiv":"#0-owl-example"};
var carouselvars1 = {"autoscroll":"1","caorouseldiv":"#1-owl-example"};
/* ]]> */

In my JS file,

jQuery(document).ready(function($) {
    var settingObj = carouselvars1;
    var owldiv = $(settingObj.caorouseldiv);

    if(settingObj.autoscroll == 1) {settingObj.autoscroll = true;} else {settingObj.autoscroll = false;}

    $(settingObj.caorouseldiv).owlCarousel({
        autoPlay: settingObj.autoscroll,
    });

    $(".next").click(function(){
        owldiv.trigger('owl.next');
    })
    $(".prev").click(function(){
        owldiv.trigger('owl.prev');
    })
});

I’m not sure how i can call the settingObj variable to represent the handle set in the wp_localize_script?

Hope i make sense, help very much appreciated :)

Cheers

9 posts
  • Has sold $10,000+ on Envato Market
  • Sells items exclusively on Envato Market
atticthemes says

If i understood your question correctly, this is how i would do it then:

var carousels = {
    '0-owl-example': {
        'autoPlay': '0'
    },
    '1-owl-example': {
        'autoPlay': '1',
        'other_option' : '10'
    }
};

And in your JS file:

jQuery(document).ready(function($) {
    //loop over the carousels settings
    for( var carousel_id in carousels ) {
        var carousel = carousels[ carousel_id ];
        var selector = '#' + carousel_id;
        //instantiate a new MyOwlCarousel Object with proper settings
        new MyOwlCarousel( selector, {
            autoPlay: carousel.autoscroll === '1' ? true : false,
            //en exaple of some other option you would need
            other_option: !isNaN(parseInt(carousel.other_option)) ? parseInt(carousel.other_option) : 0
        });
    }

    function MyOwlCarousel( selector, settings ) {
        //return false if neither the selector nor the settings were set 
        if( !selector || !settings ) { return false; }
        //select the element (div)
        this.carousel = $( selector );
        //return false if the element wasn't successfully selected
        if( this.carousel.length === 0 ) { return false; }
        //init the owlCarousel with the settings
        this.carousel.owlCarousel( settings );
        //find the .next .prev elements inside this carousel DIV and handle the click event
        this.carousel.find('.next').click(function(){
            this.carousel.trigger('owl.next');
        });
        this.carousel.find('.prev').click(function(){
            this.carousel.trigger('owl.prev');
        });

    }
});

This way, you would only need to add the settings in your PHP – wp_localize_script(). The JS will loop over the object (carousels) keys and instantiate a new MyOwlCarousel Object each with different settings. Hope this helps.

EDIT: Clear up the code a bit, change the MyOwlCarousel arguments and added some comments.

Cheers

1477 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+3 more
OriginalEXE says

It makes no sense to it this way. Instead, print parameters as a data attributes for your shortcode container and then read them with jQuery.

3231 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in United States
  • Has been part of the Envato Community for over 4 years
+1 more
organicbee says

It makes no sense to it this way. Instead, print parameters as a data attributes for your shortcode container and then read them with jQuery.

I second this

9 posts
  • Has sold $10,000+ on Envato Market
  • Sells items exclusively on Envato Market
atticthemes says

It makes no sense to it this way. Instead, print parameters as a data attributes for your shortcode container and then read them with jQuery.

This is definitely a better idea.

366 posts
  • Has referred 50+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+5 more
PixelStores says

Hi guys,

Thankyou for your feedback, i’m kinda confused on what exactly to do regarding printing the parameters as data attributes then read them with jQuery, perhaps taking a look at the shortcode function.

function recent_products_slider_func($atts) {
    global $woocommerce_loop;
    static $count = 0;
    if (empty($atts)) return;

    extract(shortcode_atts(array(
        'title'            => 'Recent Products',
        'order'         => 'DESC',
        'orderby'         => 'date',
        'mousewheel'     => 'false',
        'autoscroll'     => '1',
        'swipe'         => 'false',
        'scroll'         => '1',
        'items'         => 6
    ), $atts));

    $args = array(
        'post_type'    => 'product',
        'post_status' => 'publish',
        'posts_per_page' => $items,
        'ignore_sticky_posts'    => 1,
        'orderby' => $orderby,
        'order' => $order,
        'meta_query' => array(
            array(
                'key'         => '_visibility',
                'value'     => array('catalog', 'visible'),
                'compare'     => 'IN'
            )
        )
    );
    wp_enqueue_script('owlcarouselcustom', get_template_directory_uri() . '/includes/pixelstores/shortcodes/js/' . 'owlcarousel.js');
    wp_localize_script('owlcarouselcustom', 'carouselvars', array(
      'autoscroll' => $autoscroll
      )
    );

    ob_start();

    $products = new WP_Query( $args );

    if ( $products->have_posts() ) : ?>

        <div class="row ps-carousel">
            <div class="col-xs-10">        
                <h3><?php echo $title; ?></h3>
            </div>
            <div class="col-xs-2">
                <div class="ps-carousel-btns">        
                    <a class="btn prev"><i class="fa fa-angle-left" /></a>
                    <a class="btn next"><i class="fa fa-angle-right" /></a>
                </div>    
            </div>    
        </div>

        <div class="row">
            <div id="owl-example" class="owl-carousel">
                <?php while ( $products->have_posts() ) : $products->the_post(); ?>
                    <?php if ( class_exists('woocommerce') ) {  woocommerce_get_template_part( 'content', 'product' ); } ?>
                <?php endwhile; ?>
            </div>
        </div>

    <?php endif; 

    wp_reset_query();       
    $count++;                  

    return ob_get_clean();
}                  
add_shortcode('recent_products_slider', 'recent_products_slider_func');   

Would be awesome to be able to provide a tutorial on the method you think works best, previously i was using iQuery within the shortcode itself.

Cheers

9 posts
  • Has sold $10,000+ on Envato Market
  • Sells items exclusively on Envato Market
atticthemes says

This is what OriginalEXE meant:

<div id="owl-example" class="owl-carousel" data-autoscroll="<?php echo $autoscroll; ?>" data-swipe="<?php echo $swipe; ?>">
...
</div>

And then you read the attributes with jQury like so:

var autoscroll = $("#owl-example").attr("data-autoscroll");
var swipe= $("#owl-example").attr("data-swipe");
...

Of course you can loop through all the .owl-carousel elements and apply the settings to each individual carousel.

$(".owl-carousel").each(function() {
    var carousel = $(this);
    var autoscroll = carousel.attr("data-autoscroll");
    //etc...
});

Cheers

366 posts
  • Has referred 50+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+5 more
PixelStores says

This is what OriginalEXE meant:
<div id="owl-example" class="owl-carousel" data-autoscroll="<?php echo $autoscroll; ?>" data-swipe="<?php echo $swipe; ?>">
...
</div>

And then you read the attributes with jQury like so:

var autoscroll = $("#owl-example").attr("data-autoscroll");
var swipe= $("#owl-example").attr("data-swipe");
...

Of course you can loop through all the .owl-carousel elements and apply the settings to each individual carousel.

$(".owl-carousel").each(function() {
    var carousel = $(this);
    var autoscroll = carousel.attr("data-autoscroll");
    //etc...
});
Cheers

Excellent! Thankyou for explaining so well, i understand :)

I had a hiccup on the way which using the owl-carousel class caused problems, but apart from that using data-attributes is the king don!

Cheers

by
by
by
by
by
by