360 posts
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • Has been a member for 4-5 years
  • New Zealand
  • Referred between 10 and 49 users
  • Bought between 10 and 49 items
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
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

3 posts
  • Exclusive Author
  • Has been a member for 0-1 years
  • Sold between 5 000 and 10 000 dollars
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

1399 posts
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Croatia
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.

3117 posts
  • Sold between 5 000 and 10 000 dollars
  • United States
  • Bought between 10 and 49 items
  • Has been a member for 3-4 years
  • Exclusive Author
chrisakelley 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

3 posts
  • Exclusive Author
  • Has been a member for 0-1 years
  • Sold between 5 000 and 10 000 dollars
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.

360 posts
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • Has been a member for 4-5 years
  • New Zealand
  • Referred between 10 and 49 users
  • Bought between 10 and 49 items
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
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

3 posts
  • Exclusive Author
  • Has been a member for 0-1 years
  • Sold between 5 000 and 10 000 dollars
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

360 posts
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • Has been a member for 4-5 years
  • New Zealand
  • Referred between 10 and 49 users
  • Bought between 10 and 49 items
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
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