Announcement

Collapse
No announcement yet.

Image Roundabout?

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

  • Image Roundabout?

    In the Shadows ReadyThem, Is there something I need to do to activat the Roundabout
    Product / Image Carousel?


    Is there any instruction on this feature?
    Stephen Scheer
    Digital Visuals

  • Hi Stephen,

    The Roundabout instructions are part of the Elements Framework documentation https://docs.miva.com/elements/exten...oduct-carousel
    Matt Zimmermann
    Director of UI/UX Standards and Theme Development
    / Miva, Inc.

    Comment


    • Thanks Matt, I think I was asking for the wrong feature, All though I will use the code you sent me. I guess I am looking for a way to scroll or arrow click through the product page images like it is done at
      https://luxe.mivareadythemes.com/floral-silk-tie.html
      Stephen Scheer
      Digital Visuals

      Comment


      • Hi Stephen,

        At this time, I have not coded up this functionality. There will be an extension created for a future ReadyTheme which will be able to be added to a Shadows based site.
        Matt Zimmermann
        Director of UI/UX Standards and Theme Development
        / Miva, Inc.

        Comment


        • Originally posted by Matt Zimmermann View Post
          Hi Stephen,

          The Roundabout instructions are part of the Elements Framework documentation https://docs.miva.com/elements/exten...oduct-carousel
          I think I did something wrong, I am trying to use the autoStart: true, function, but it doesn't seem to want to scroll, it just does a little stutter.
          Leslie Kirk
          Miva Merchant Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment


          • Hi Leslie,

            Can you post a link to the site?
            Matt Zimmermann
            Director of UI/UX Standards and Theme Development
            / Miva, Inc.

            Comment


            • Originally posted by Matt Zimmermann View Post
              Hi Leslie,

              Can you post a link to the site?
              I wish I could - it's behind a protective wall. I can PM you the access if you like
              Leslie Kirk
              Miva Merchant Certified Developer
              Miva Merchant Specialist since 1997
              Previously of Webs Your Way
              (aka Leslie Nord leslienord)

              Email me: [email protected]
              www.lesliekirk.com

              Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

              Comment


              • Hi Leslie,

                It looks like you might have an extra element in your code. Can you post the code you are using?
                Matt Zimmermann
                Director of UI/UX Standards and Theme Development
                / Miva, Inc.

                Comment


                • This is the ReadyTheme Product Listing featured products
                  Code:
                  <section class="x-product-list x-product-list--carousel">
                      <mvt:do name="l.result" file="g.Module_Library_DB" value="Category_Load_Code(l.settings:readytheme:productlisting:prod_cat, l.settings:product_list_category)" />
                      <mvt:assign name="l.uri:store_id" value="g.Store:id" />
                      <mvt:assign name="l.uri:screen" value="''" />
                      <mvt:assign name="l.uri:page_id" value="0" />
                      <mvt:assign name="l.uri:cat_id" value="l.settings:product_list_category:id" />
                      <mvt:assign name="l.uri:product_id" value="0" />
                      <mvt:do file="g.Module_Feature_URI_DB" name="l.have_uri" value="URI_Load_Item_Canonical(l.uri, l.settings:canonical_uri)" />
                      <mvt:comment>
                          The above code will load the category code used to pull the category name and then load the cannonical URI.
                      </mvt:comment>
                      <h4 class="c-heading-delta u-text-bold u-text-center u-text-uppercase x-product-list__heading">&mvt:product_list_category:name;</h4>
                      <div class="x-carousel" data-hook="product-carousel">
                          <button class="x-carousel__button u-icon-triangle-left" data-hook="carousel__button-previous"></button>
                          <div class="x-carousel__container x-carousel--animate" data-hook="carousel__container">
                              <mvt:foreach iterator="product" array="readytheme:products">
                                  <div class="o-layout__item u-width-6 u-width-3--m u-text-center x-product-list__item">
                                      <a class="u-block x-product-list__link" href="&mvte:product:link;" title="&mvte:product:name;">
                                          <img class="x-product-list__image" src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;">
                                          <strong class="x-product-list__name">&mvte:product:name;</strong>
                                          <mvt:if expr="l.settings:product:base_price GT l.settings:product:price">
                                              <span class="x-product-list__price u-color-gray-30">Was: <s>&mvt:product:formatted_base_price;</s></span>
                                              <span class="x-product-list__price u-text-bold u-color-red">Now: &mvt:product:formatted_price;</span>
                                          <mvt:else>
                                              <span class="x-product-list__price">&mvt:product:formatted_price;</span>
                                          </mvt:if>
                                      </a>
                                  </div>
                              </mvt:foreach>
                          </div>
                          <button class="x-carousel__button x-carousel__button-right u-icon-triangle-right" data-hook="carousel__button-next"></button>
                      </div>
                  
                  </section>
                  <br>
                  Leslie Kirk
                  Miva Merchant Certified Developer
                  Miva Merchant Specialist since 1997
                  Previously of Webs Your Way
                  (aka Leslie Nord leslienord)

                  Email me: [email protected]
                  www.lesliekirk.com

                  Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                  Comment


                  • Hi Leslie,

                    Looks like there might be a couple of things going on here.Since you have grouping enabled in your script call and only have four items in the carousel, there is no "next" to go to.I would recommend adding more products to the featured category and see if the issue clears up.
                    Matt Zimmermann
                    Director of UI/UX Standards and Theme Development
                    / Miva, Inc.

                    Comment


                    • Originally posted by Matt Zimmermann View Post
                      Hi Leslie,

                      Looks like there might be a couple of things going on here. Since you have grouping enabled in your script call and only have four items in the carousel, there is no "next" to go to.I would recommend adding more products to the featured category and see if the issue clears up.

                      Wait, what? All I did was use the code posted in the docs, minus the link to the "Shop All"

                      I have more than 4 items assigned, there are 7 products.
                      Leslie Kirk
                      Miva Merchant Certified Developer
                      Miva Merchant Specialist since 1997
                      Previously of Webs Your Way
                      (aka Leslie Nord leslienord)

                      Email me: [email protected]
                      www.lesliekirk.com

                      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                      Comment


                      • Hi Leslie,

                        Let's see if removing grouping will show all seven product:
                        Code:
                        $.loadScript(theme_path + 'extensions/carousel/roundabout.js', function () {
                            $.hook('product-carousel').roundabout({
                                autoStart: true
                            });
                        });
                        Matt Zimmermann
                        Director of UI/UX Standards and Theme Development
                        / Miva, Inc.

                        Comment


                        • Well, getting warmer, the arrows now appear, it doesn't auto scroll and only one item displays at a time.

                          Leslie Kirk
                          Miva Merchant Certified Developer
                          Miva Merchant Specialist since 1997
                          Previously of Webs Your Way
                          (aka Leslie Nord leslienord)

                          Email me: [email protected]
                          www.lesliekirk.com

                          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                          Comment


                          • Originally posted by lesliekirk View Post
                            Well, getting warmer, the arrows now appear, it doesn't auto scroll and only one item displays at a time.
                            Do I need to edit the roundabout.js to fix this?
                            Leslie Kirk
                            Miva Merchant Certified Developer
                            Miva Merchant Specialist since 1997
                            Previously of Webs Your Way
                            (aka Leslie Nord leslienord)

                            Email me: [email protected]
                            www.lesliekirk.com

                            Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                            Comment


                            • I'm looking at the roundabout.js and it looks okay

                              Code:
                              (function (window, document, undefined) {
                                  var ride = function () {
                                      'use strict';
                              
                                      var defaults = {
                                          autoStart: false,
                                          carouselDelay: 5000,
                                          group: false,
                                          groupClass: 'x-carousel__item',
                                          groupTiny: 2,
                                          groupSmall: 2,
                                          groupMedium: 4,
                                          groupLarge: 4,
                                          groupWide: 4,
                                          groupWrapper: 'figure'
                                      };

                              But it's only displaying 1 product instead of 4
                              Leslie Kirk
                              Miva Merchant Certified Developer
                              Miva Merchant Specialist since 1997
                              Previously of Webs Your Way
                              (aka Leslie Nord leslienord)

                              Email me: [email protected]
                              www.lesliekirk.com

                              Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                              Comment

                              Working...
                              X

                              This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

                              This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

                              Accept