Announcement

Collapse
No announcement yet.

ReadyTheme Productlisting not Displaying Product Carousel

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

    ReadyTheme Productlisting not Displaying Product Carousel

    So I have following this https://docs.miva.com/elements/extensions.html to create a Product Carousel

    When I view source where I inserted the productlisting I see all of the products being generated in the source but the productlisting area is blank like it is hidden. I have 12 products assigned to the featured Category. there is a product listing for Featured products and that displays fine but when I try and implement the Product Carousel no go.. Any help would be appreciated.

    Code:
    <mvt:item name="readytheme" param="Load_ProductListing('prod_carousel', g.prod_carousel_test )" />     <<< This I do not think is necessary? I
     <mvt:item name="readytheme" param="productlisting( 'prod_carousel' )" />

    HTML is generated
    Code:
    <section class="x-product-list x-product-list--carousel">
    <h4 class="c-heading-delta u-text-bold u-text-center u-text-uppercase x-product-list__heading">Featured Products</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">
    <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="http://ttt.mivamerchantdev.com/One-Tri-Safety-Gear-Adult-3-Pack-Large-Black.html" title="1-Tri Adult 3-Pack - Large Black">
    <img class="x-product-list__image" src="graphics/00000001/large_68644_TriPads_Black_360x360.jpg" alt="1-Tri Adult 3-Pack - Large Black">
    <strong class="x-product-list__name">1-Tri Adult 3-Pack - Large Black</strong>
    <span class="x-product-list__price">$34.95</span>
    </a>
    </div>
    <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="http://ttt.mivamerchantdev.com/One-Tri-Safety-Gear-Adult-3-Pack-Large-Stripes.html" title="1-Tri Adult 3-Pack - Large Stripes">
    <img class="x-product-list__image" src="graphics/00000001/large_68647_TriPads_Striped_360x360.jpg" alt="1-Tri Adult 3-Pack - Large Stripes">
    <strong class="x-product-list__name">1-Tri Adult 3-Pack - Large Stripes</strong>
    <span class="x-product-list__price">$38.95</span>
    </a>
    </div>
    <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="http://ttt.mivamerchantdev.com/One-Tri-Safety-Gear-Adult-3-Pack-Medium-Stripes.html" title="1-Tri Adult 3-Pack - Medium Stripes">
    <img class="x-product-list__image" src="graphics/00000001/large_68646_TriPads_Striped_360x360.jpg" alt="1-Tri Adult 3-Pack - Medium Stripes">
    <strong class="x-product-list__name">1-Tri Adult 3-Pack - Medium Stripes</strong>
    <span class="x-product-list__price">$38.95</span>
    </a>
    </div>
    <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="http://ttt.mivamerchantdev.com/One-Tri-Safety-Gear-Adult-3-Pack-XL-Stripes.html" title="1-Tri Adult 3-Pack - XL Stripes">
    <img class="x-product-list__image" src="graphics/00000001/large_68648_TriPads_Striped_360x360.jpg" alt="1-Tri Adult 3-Pack - XL Stripes">
    <strong class="x-product-list__name">1-Tri Adult 3-Pack - XL Stripes</strong>
    <span class="x-product-list__price">$38.95</span>
    </a>
    </div>
    <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="http://ttt.mivamerchantdev.com/1-Tri-Adult-Max-Comfort-Knee-Elbow-2-Pack-Light-Blue.html" title="1-Tri Adult Max Comfort Knee/Elbow 2 Pack - Light Blue">
    <img class="x-product-list__image" src="graphics/00000001/large_89327_Safety-Gear-1TRI-Knee-Blue-Combo1_360x360.jpg" alt="1-Tri Adult Max Comfort Knee/Elbow 2 Pack - Light Blue">
    <strong class="x-product-list__name">1-Tri Adult Max Comfort Knee/Elbow 2 Pack - Light Blue</strong>
    <span class="x-product-list__price">$42.95</span>
    </a>
    </div>
    <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="http://ttt.mivamerchantdev.com/1-Tri-Adult-Max-Comfort-Knee-Elbow-2-Pack-Navy-Blue.html" title="1-Tri Adult Max Comfort Knee/Elbow 2 Pack - Navy Blue">
    <img class="x-product-list__image" src="graphics/00000001/large_89329_Safety-Gear-1TRI-Knee-Navy-Combo1_360x360.jpg" alt="1-Tri Adult Max Comfort Knee/Elbow 2 Pack - Navy Blue">
    <strong class="x-product-list__name">1-Tri Adult Max Comfort Knee/Elbow 2 Pack - Navy Blue</strong>
    <span class="x-product-list__price">$42.95</span>
    </a>
    </div>
    <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="http://ttt.mivamerchantdev.com/1-Tri-Adult-Max-Comfort-Knee-Elbow-2-Pack-Wine.html" title="1-Tri Adult Max Comfort Knee/Elbow 2 Pack - Wine">
    <img class="x-product-list__image" src="graphics/00000001/large_89328_Safety-Gear-1TRI-Knee-Wine-Combo1_360x360.jpg" alt="1-Tri Adult Max Comfort Knee/Elbow 2 Pack - Wine">
    <strong class="x-product-list__name">1-Tri Adult Max Comfort Knee/Elbow 2 Pack - Wine</strong>
    <span class="x-product-list__price">$42.95</span>
    </a>
    </div>
    <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="http://ttt.mivamerchantdev.com/1-Tri-Jr-Max-Comfort-3-Pack-Light-Blue.html" title="1-Tri Jr Max Comfort 3 Pack - Light Blue">
    <img class="x-product-list__image" src="graphics/00000001/large_89319_1TRI-Jr-Knee-Blue-Combo_360x360.jpg" alt="1-Tri Jr Max Comfort 3 Pack - Light Blue">
    <strong class="x-product-list__name">1-Tri Jr Max Comfort 3 Pack - Light Blue</strong>
    <span class="x-product-list__price">$42.95</span>
    </a>
    </div>
    <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="http://ttt.mivamerchantdev.com/1-Tri-Jr-Max-Comfort-3-Pack-Navy-Blue.html" title="1-Tri Jr Max Comfort 3 Pack - Navy Blue">
    <img class="x-product-list__image" src="graphics/00000001/large_89326_1TRI-Jr-Knee-Navy-Combo_360x360.jpg" alt="1-Tri Jr Max Comfort 3 Pack - Navy Blue">
    <strong class="x-product-list__name">1-Tri Jr Max Comfort 3 Pack - Navy Blue</strong>
    <span class="x-product-list__price">$42.95</span>
    </a>
    </div>
    <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="http://ttt.mivamerchantdev.com/1-Tri-Jr-Max-Comfort-3-Pack-Wine.html" title="1-Tri Jr Max Comfort 3 Pack - Wine">
    <img class="x-product-list__image" src="graphics/00000001/large_89324_1TRI-Jr-Knee-Wine-Combo_360x360.jpg" alt="1-Tri Jr Max Comfort 3 Pack - Wine">
    <strong class="x-product-list__name">1-Tri Jr Max Comfort 3 Pack - Wine</strong>
    <span class="x-product-list__price">$42.95</span>
    </a>
    </div>
    </div>
    <button class="x-carousel__button x-carousel__button-right u-icon-triangle-right" data-hook="carousel__button-next"></button>
    </div>
    <p class="o-layout__item u-width-12 u-text-center x-product-list__action">
    <a class="c-button c-button--huge u-bg-gray-50 u-color-white u-font-small u-text-bold u-text-uppercase" href="/featured-products.html">Shop All</a>
    </p>
    </section>

    #2
    Can you post a link the site?
    Matt Zimmermann
    Front-End Development Director / Miva, Inc.

    Comment


      #3
      Hi Mike,

      It looks like you are not initializing the script in your theme.js file. In your theme.js file, within the jsSFNT function, add the following code:
      Code:
              /**
               * Load and initialize the Roundabout extension
               */
              $.loadScript(theme_path + 'extensions/carousel/roundabout.js', function () {
                  $.hook('product-carousel').roundabout({
                      group: true
                  });
              });
      Matt Zimmermann
      Front-End Development Director / Miva, Inc.

      Comment


        #4
        Yep that was it. I did see the same code in the theme.js in the jsPROD: function() so it looks like whomever installed my initial readytheme had this within the wrong function. Thanks for your help appreciated! Now Working.

        Comment

        Working...
        X