Adding a second carousel to storefront.

[William Davis]

Tried adding a second carousel to storefront by duplicating the "featured-products" product listing carousel with hopes of then just editing its contents displayed, but it displayed its contents vertically instead of horizontally. Where did I go wrong, or its not that simple?

<div class="sfnt-hero hide medium-show">
    <mvt:item name="readytheme" param="image( 'sfnt_hero' )" />
</div>

<div class="sfnt-hero show medium-hide">
    <mvt:item name="readytheme" param="image( 'sfnt_mobile_hero' )" />
</div>

<div class="breaker clear"></div>

<div class="column whole medium-one-third align-center sfnt-promo">
    <mvt:item name="readytheme" param="image( 'sfnt_promo_left' )" />
    <div class="breaker show medium-hide"></div>
</div>
<div class="column whole medium-one-third align-center sfnt-promo">
    <mvt:item name="readytheme" param="image( 'sfnt_promo_middle' )" />
    <div class="breaker show medium-hide"></div>
</div>
<div class="column whole medium-one-third align-center sfnt-promo">
    <mvt:item name="readytheme" param="image( 'sfnt_promo_right' )" />
</div>
<div class="breaker clear"></div>

<h2 class="column whole align-center uppercase navy hide medium-show">
    <mvt:item name="readytheme" param="banner( 'storefront-message' )" />
</h2>
<div class="breaker clear"></div>

<mvt:item name="readytheme" param="productlisting( 'featured-products' )" />
<div class="breaker"></div>
<div class="hide medium-show">

<div class="breaker clear"></div>

<mvt:item name="readytheme" param="productlisting( 'featured-products' )" />
<div class="breaker"></div>
<div class="hide medium-show">

    <mvt:item name="readytheme" param="banner( 'storefront-about-us' )" />
</div>
<div class="breaker clear"></div>

[koala]

I had the same results, too. Hoping to play with this some more soon, seems like it should have just "worked"

[lesliekirk]

You'll need to add a unique div ID to the second carousel, then you will need to edit the scripts.js file and add a second shared function:

    jsSFNT: function () {
        // ---- Product Carousel ---- //
        cornerstoneUX.sharedFunctions.productsCarousels('#js-whats-popular-carousel');
cornerstoneUX.sharedFunctions.productsCarousels('#js-whats-popular-carousel2');

[rpk4]

What if you wanted the second carousel to be different, say only show 2 products rather than the default 4 as defined in the scripts.js file?

sharedFunctions: {
        // ---- Product Carousels ---- //
        productsCarousels: function (carousel, append) {
            var carousel = $(carousel);
            if (append === true) {
                var appendArrowsTo = $(carousel.selector).parent();
            }
            else if (append === 'undefined') {
                var appendArrowsTo = $(carousel.selector);
            };

            $.ajax({
                cache: true,
                crossDomain: true,
                dataType: 'script',
                url: '../js/jquery.slick.min.js'
            }).done(function () {
                function equalImageWraps() {
                    var currentHeight = 0,
                        rowDivs = new Array();

                    carousel.find('.flag').each(function() {
                        $(this).height('auto');
                        rowDivs.push($(this));
                        currentHeight = (currentHeight < $(this).height()) ? ($(this).height()) : (currentHeight);
                        for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
                            rowDivs[currentDiv].height(currentHeight);
                        };
                    });
                };
                equalImageWraps();
                carousel.slick({
                    appendArrows: appendArrowsTo,
                    draggable: false,
                    slidesToScroll: 4,
                    slidesToShow: 4,
                    responsive: [
                        {
                            breakpoint: 1040,
                            settings: {
                                slidesToScroll: 3,
                                slidesToShow: 3
                            }
                        },
                        {
                            breakpoint: 800,
                            settings: {
                                slidesToScroll: 2,
                                slidesToShow: 2
                            }
                        },
                        {
                            breakpoint: 512,
                            settings: {
                                slidesToScroll: 1,
                                slidesToShow: 1
                            }
                        }
                    ]
                });
            });
        },

[Matt Zimmermann]

To have a second carousel that has different options than the default one, you would need to call it in with its own script like this:

// ---- New Product Carousel ---- //
var newCarousel = $('#js-whats-popular-carousel2');

$.ajax({
    cache: true,
    crossDomain: true,
    dataType: 'script',
    url: '../js/jquery.slick.min.js'
}).done(function () {
    function equalImageWraps() {
        var currentHeight = 0,
            rowDivs = new Array();

        newCarousel.find('.flag').each(function() {
            $(this).height('auto');
            rowDivs.push($(this));
            currentHeight = (currentHeight < $(this).height()) ? ($(this).height()) : (currentHeight);
            for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
                rowDivs[currentDiv].height(currentHeight);
            }
        });
    }
    equalImageWraps();
    newCarousel.slick({
        draggable: false,
        slidesToScroll: 2,
        slidesToShow: 2,
        responsive: [
            {
                breakpoint: 512,
                settings: {
                    slidesToScroll: 1,
                    slidesToShow: 1
                }
            }
        ]
    });
});