382 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Located in New Zealand
  • Had an item featured 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

64 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

1554 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.

3439 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Achieved the monthly Community Superstar Award
  • Located in United States
+2 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

64 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.

382 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Located in New Zealand
  • Had an item featured 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

64 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

382 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Located in New Zealand
  • Had an item featured 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