Announcement

Collapse
No announcement yet.

Reusing The What's Popular Carousel

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Reusing The What's Popular Carousel

    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.
    :: The Office Dealer - http://www.theofficedealer.com
    :: ph/fax: 888-809-8893
    :: http://twitter.com/theofficedealer
    :: http://www.linkedin.com/in/bretsutherland

    #2
    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:
    Code:
    // ---- Product Carousel ---- //
    cornerstoneUX.sharedFunctions.productsCarousels('#js-whats-popular-carousel');
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      Re: Reusing The What's Popular Carousel

      Thanks, Matt!

      And great work on the theme.
      :: The Office Dealer - http://www.theofficedealer.com
      :: ph/fax: 888-809-8893
      :: http://twitter.com/theofficedealer
      :: http://www.linkedin.com/in/bretsutherland

      Comment


        #4
        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?

        Comment


          #5
          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.
          Matt Zimmermann

          Miva Web Developer
          Alchemy Web Development
          https://www.alchemywebdev.com
          Site Development - Maintenance - Consultation

          Miva Certified Developer
          Miva Professional Developer

          https://www.dev4web.net | Twitter

          Comment


            #6
            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 :)
            James Byrne, (USMC Vet.)
            After Dark Grafx
            "We Work After Dark So You Don't Have To!"
            E-Commerce - Design - Hosting - Printing
            Miva Standard Partner. Get up and running fast!
            http://www.afterdarkgrafx.com :: sales [ at ] afterdarkgrafx.com

            Comment


              #7
              Re: Reusing The What's Popular Carousel

              Originally posted by Matt Zimmermann View Post
              @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

              Comment


                #8
                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?
                Matt Zimmermann

                Miva Web Developer
                Alchemy Web Development
                https://www.alchemywebdev.com
                Site Development - Maintenance - Consultation

                Miva Certified Developer
                Miva Professional Developer

                https://www.dev4web.net | Twitter

                Comment


                  #9
                  Re: Reusing The What's Popular Carousel

                  Originally posted by Matt Zimmermann View Post
                  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

                  Comment


                    #10
                    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.
                    Matt Zimmermann

                    Miva Web Developer
                    Alchemy Web Development
                    https://www.alchemywebdev.com
                    Site Development - Maintenance - Consultation

                    Miva Certified Developer
                    Miva Professional Developer

                    https://www.dev4web.net | Twitter

                    Comment


                      #11
                      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

                      Comment


                        #12
                        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
                        Matt Zimmermann

                        Miva Web Developer
                        Alchemy Web Development
                        https://www.alchemywebdev.com
                        Site Development - Maintenance - Consultation

                        Miva Certified Developer
                        Miva Professional Developer

                        https://www.dev4web.net | Twitter

                        Comment


                          #13
                          Re: Reusing The What's Popular Carousel


                          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

                          Comment


                            #14
                            What about for Levels framework? I tried to follow the same steps, but it did not work.
                            Thank you, Bill Davis

                            Comment

                            Working...
                            X