Reusing The What's Popular Carousel

[theofficedealer]

I wanted to create a second product carousel based on the "What's Popular" product listing and template but the second carousel displays products vertically instead of horizontally. Is it necessary to replicate and rename the 2nd instance of the carousel or is there something simple I'm overlooking?

The second carousel is for "On Sale" and it uses the same template but pulls from a different category.

[Matt Zimmermann]

Re: Reusing The What's Popular Carousel

@theofficedealer - You will need to create a new initialization string to fire off the JavaScript. In your scripts.js file, copy this initialization within the jsSFNT function and change the call to the ID of the new carousel:

// ---- Product Carousel ---- //
cornerstoneUX.sharedFunctions.productsCarousels('#js-whats-popular-carousel');

[theofficedealer]

Re: Reusing The What's Popular Carousel

Thanks, Matt!

And great work on the theme.

[kitdang]

Re: Reusing The What's Popular Carousel

@Matt,

Just curious. How does the js scripts (ex: jsSFNT function or jsCTGY fuction) get triggered on the respective page? Is it when the page first load? Also, does the js code only apply to certain div tag with the page or anything within the body tag?

[Matt Zimmermann]

Re: Reusing The What's Popular Carousel

@theofficedealer - The various functions in the scripts.js file are triggered when the DOM is ready. There is a set of global functions, at the top of the file, that run on every page load. The various, page specific, functions are then triggered based on the ID of the page in the BODY tag.

[afterdark]

Re: Reusing The What's Popular Carousel

So for anyone having this issue... (and assuming that you have already have copied over the template from the best sellers)

HOW TO:
a) locate the folder in your mm5 or miva public folder called js (this where my scripts are installed)
b) find the file called scripts.js (make a backup of course)
c) edit that file with a text editor. and do a find for this string

// ---- Product Carousel ---- //
cornerstoneUX.sharedFunctions.productsCarousels('# js-whats-popular-carousel');
it will look like this...

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


},


I have FEATURED PRODUCTS and NEW ARRIVALS product sliders on my homepage.

so I added this and change the ID # to your ID in your product listing file in the them (see below)

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


},




d) Save the file and upload it back to the server /mm5/js/scripts.js

e) Next Login to Miva Admin
f) Click on the MENU top left
h) Then select the ARROW to the right of UTILITIES
i) Your theme comes up --> select PRODUCT LISTINGS
j) 4th line of code down look for this

<div id="js-whats-popular-carousel" class="column whole float-none whats-popular-carousel">

and change it to

<div id="js-featured-carousel" class="column whole float-none featured-carousel">

notice by bolded entries above are the same referenced names as the code placed in the scripts.js file above. If not the same this won't work. the ID="js-features-carousel" is the most important. The second one featured-carousel is for specific css styling.

k) Save the setting - then refresh your homepage and your sliders should work.

Just though it would be nice to put a how to! Of course you could just hire us :)

[Shakatime]

Re: Reusing The What's Popular Carousel

@theofficedealer - The various functions in the scripts.js file are triggered when the DOM is ready. There is a set of global functions, at the top of the file, that run on every page load. The various, page specific, functions are then triggered based on the ID of the page in the BODY tag.

Aloha Matt,

How can I use an email form and the at the same time a carousel in a page.

I can only use <body id="jsSFNT" > to work with the carousel, or <body id="jsCTUS" > for the email form but not both.

Thanks,

Carlos

[Matt Zimmermann]

Re: Reusing The What's Popular Carousel

Hi Carlos,

I don't quite understand the question. Are you trying to add a carousel to your Contact Us page?

[Shakatime]

Re: Reusing The What's Popular Carousel

Hi Carlos,

I don't quite understand the question. Are you trying to add a carousel to your Contact Us page?

Aloha Matt,

I created a page http://www.shakatime.com/wholesale-h...-clothing.html and I am using the <body id="jsCTUS"> for the email form to work.

I wan to add a carousel to the same page but if I use the <body id="jsSTFN"> for the carousel to work, then the email form doesn't work.

What I like to know is how can I get to work both the email form and the carousel in the sane page.

I hope this is much clear.

Thanks,

carlos

[Matt Zimmermann]

Re: Reusing The What's Popular Carousel

Hi Carlos,

The best approach would be to use the built-in Miva BODY element. This will create the proper ID for the BODY on this page. Then, in your "scripts.js" file, you would create a new function called "jsWholesaleHawaiianClothing" where you would place a copy of the form function from jsCTUS and the carousel from jsSFNT.

[Shakatime]

Re: Reusing The What's Popular Carousel

Thank you Matt,

Is there any documentation on how to implement the New Wish List.

Please let me know.

Carlos

[Matt Zimmermann]

Re: Reusing The What's Popular Carousel

http://www.miva.com/whats-new-version-9-4

http://docs.miva.com/docs/using-the-wish-list-feature

[Shakatime]

Re: Reusing The What's Popular Carousel

http://www.miva.com/whats-new-version-9-4

http://docs.miva.com/docs/using-the-wish-list-feature

Aloha Matt,

I guest I don't see the wish list link since I am using the Suvian theme. I access my account and is no link there either.

I have to add manually then.

Thank you,

Carlos

[William Davis]

What about for Levels framework? I tried to follow the same steps, but it did not work.