More than one carousel on the SFNT

[lesliekirk]

I need to put more than one carousel on the SFNT. Just adding this to the scripts.js file doesn't seem to be all of what might need to be done.

jsSFNT: function () {		// ---- Product Carousel ---- //
		cornerstoneUX.sharedFunctions.productsCarousels('#js-new-arrivals-carousel');
	},

What else am I missing? I was truly hoping this was going to be more along the lines of plug and play - create the content in ReadyTheme and place the token. Guess I was wrong

[rajnishsi]

Re: More than one carousel on the SFNT

If your HTML is setup correctly, this should be all to get the new carousel, Are you getting any error in browser console?

[lesliekirk]

Re: More than one carousel on the SFNT

I am seeing an error related to the prototype.js "element.dispatchEvent is not a function" but would that be related to this?

The first scroller fires, but the second one does not - it's not receiving any of the CSS needed

The first one:

<div id="js-best-seller-carousel" class="column whole float-none best-seller-carousel slick-initialized slick-slider">

The second one:

<div id="js-new-arrivals-carousel" class="column whole float-none new-arrivals-carousel"></div>

Obviously, without the insert of slick-initialized slick-slider the layout wrong. That's why I'm wondering if I don't have all the javascript needed for a second carousel.

[rajnishsi]

Re: More than one carousel on the SFNT

That error should not be there unless you're having prototype.js library along with the jQuery, are you?
That would be problematic, because they both use same character $ for processing and conflict upon its usage.

[lesliekirk]

Re: More than one carousel on the SFNT

Okay, the site has a number of other functions that seem to require the prototype.js file. After I commented it out I got a whole slew of errors and the second slider still didn't fire.

[lesliekirk]

Re: More than one carousel on the SFNT

I just went in and removed all the additional javascript that is used on this site's storefront, trying to rule out a conflict, and the second carousel is still not firing. Something else must be missing.

[rajnishsi]

Re: More than one carousel on the SFNT

Can you give the URL where this is happening, or some similar HTML code of that page?
Prototype can work with jQuery but that require special handling of $. One more thing, on a page where JS code is in execution, if an error arise within the JS code, browsers do not execute the JS thereafter, so it's possible that some other errors in your page are stopping that carousel to work.

[lesliekirk]

Re: More than one carousel on the SFNT

Many thanks! This fix worked very well.

jsSFNT: function () {
    // ---- Product Carousel ---- //
    cornerstoneUX.sharedFunctions.productsCarousels('#js-new-arrivals-carousel');
    cornerstoneUX.sharedFunctions.productsCarousels('#js-best-seller-carousel');
},