371 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

29 posts
  • Had an item featured on Envato Market
  • Pulled off some great moustache to raise money or awareness for Movember Australia
  • Helped protect Envato Market against copyright violations
  • Has sold $10,000+ on Envato Market
+3 more
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

1509 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
+2 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.

3437 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

29 posts
  • Had an item featured on Envato Market
  • Pulled off some great moustache to raise money or awareness for Movember Australia
  • Helped protect Envato Market against copyright violations
  • Has sold $10,000+ on Envato Market
+3 more
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.

371 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

29 posts
  • Had an item featured on Envato Market
  • Pulled off some great moustache to raise money or awareness for Movember Australia
  • Helped protect Envato Market against copyright violations
  • Has sold $10,000+ on Envato Market
+3 more
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

371 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

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by