Announcement

Collapse
No announcement yet.

Displaying cattree images in the subcategory_listing

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

  • Displaying cattree images in the subcategory_listing

    I'm having issues with the lazyImage not firing when I try to use the coding in the subcategory_listing

    <mvt:foreach array="cattree_categories" iterator="cattree_category">
    <mvt:if expr="l.settings:cattree_category:parent_id EQ l.settings:category:id">
    <mvt:assign name="l.null" value="miva_array_insert(l.settings:subcats, l.settings:cattree_category, -1)" />
    </mvt:if>
    </mvt:foreach>
    <mvt:assign name="l.settings:subcat_count" value="miva_array_elements(l.settings:subcats)" />

    <mvt:if expr="l.settings:subcats GT 0 OR l.settings:category_listing:products_on_page_count GT 1">
    <hr class="border--secondary h-nm">

    <mvt:if expr="l.settings:subcats GT 0">
    <section class="cmp-product-list">
    <mvt:foreach iterator="sub_category" array="subcats">
    <article class="cmp-product-list__item _category-list bg--white" data-scroll="once toggle(.ani_fade-in, .ani_fade-out)" data-scroll-showCallback="lazyImage">
    <a href="&mvte:sub_category:link;">
    <figure class="cmp-product-list__image">
    <img src="&mvt:sub_category:image;" alt="&mvt:sub_category:name;" title="&mvt:sub_category:name;" /><br>
    <figcaption class="cmp-product-list__name color--black font--uppercase secondary-font">&mvte:sub_category:name;</figcaption>
    </figure>
    </a>
    </article>
    </mvt:foreach>

    </section>
    <!-- end .cmp-subcategories -->
    </mvt:if>
    <!-- end .cmp-subcategories-filtering -->
    </mvt:if>
    The image is there but class="is--loaded" isn't fired, so the opacity stays at 0 and the visibility is still hidden. The site is behind a wall.

    I get this weird error in the console

    [QUOTE]shop-by-product.htm:1 Unchecked runtime.lastError: The message port closed before a response was received./QUOTE]



    Leslie Kirk
    Miva 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

  • Hi Leslie,

    Is this the case in all browsers or just in Chrome?
    Matt Zimmermann
    Director of UI/UX Standards and Theme Development
    / Miva, Inc.

    Comment


    • On this page, I get a console error

      Unchecked runtime.lastError: The message port closed before a response was received.
      I have no idea what it means. But I wonder, am I having an issue because I am using the same code that displays the product thumbnails for the category page for the subcategory images?


      Here's the code for the (pertinent) category images

      Code:
      <section class="cmp-product-list">
          <mvt:foreach iterator="product" array="category_listing:products">
       <article class="cmp-product-list__item" data-scroll="once toggle(.ani_fade-in, .ani_fade-out)" data-scroll-showCallback="lazyImage">
                  <a href="&mvte:product:link;" data-mm-linktype="product-list-link">
                      <header class="cmp-product-list__name font--uppercase secondary-font">&mvte:product:name;</header>
       <figure class="cmp-product-list__image">
                          <img data-src="&mvte:product:imagetypes:main;" src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" title="&mvte:product:name;" width="&mvt:category_listing:b_width;" height="&mvt:category_listing:b_height;" style="border: 1px solid #000;">
                      </figure>
                      <mvt:if expr="l.settings:product:base_price GT l.settings:product:price">
                          <footer class="cmp-product-list__price secondary-font"><span class="cmp-product-list__original-price"><mvt:eval expr="gettoken(l.settings:product:formatted_base_price, asciichar(46), 1)"/><sup><mvt:eval expr="gettoken(l.settings:product:formatted_base_price, asciichar(46), 2)"/></sup></span>
      
      <span style="color:#ff0000;"><mvt:eval expr="gettoken(l.settings:product:formatted_price, asciichar(46), 1)"/><sup><mvt:eval expr="gettoken(l.settings:product:formatted_price, asciichar(46), 2)"/></sup></span>
      </footer>
                      <mvt:else>
                          <footer class="cmp-product-list__price secondary-font">Starting at: <mvt:eval expr="gettoken(l.settings:product:formatted_price, asciichar(46), 1)"/><sup><mvt:eval expr="gettoken(l.settings:product:formatted_price, asciichar(46), 2)"/></sup></footer>
                      </mvt:if>
                  </a>
                  <div class="cmp-product-list__swatches"></div>
              </article>
      
          </mvt:foreach>
      
      </section>
      <!-- end .cmp-product-list -->

      Here is what I'm using to display the images for the subcats

      Code:
      <mvt:foreach array="cattree_categories" iterator="cattree_category">
          <mvt:if expr="l.settings:cattree_category:parent_id EQ l.settings:category:id">
              <mvt:assign name="l.null" value="miva_array_insert(l.settings:subcats, l.settings:cattree_category, -1)" />
          </mvt:if>
      </mvt:foreach>
      <mvt:assign name="l.settings:subcat_count" value="miva_array_elements(l.settings:subcats)" />
      
      <mvt:if expr="l.settings:subcats GT 0 OR l.settings:category_listing:products_on_page_count GT 1">
          <hr class="border--secondary h-nm">
      
              <mvt:if expr="l.settings:subcats GT 0">
       <section class="cmp-product-list">
                  <mvt:foreach iterator="sub_category" array="subcats">
      <article class="cmp-product-list__item _category-list bg--white" data-scroll="once toggle(.ani_fade-in, .ani_fade-out)" data-scroll-showCallback="lazyImage">
                                      <a href="&mvte:sub_category:link;">
       <figure class="cmp-product-list__image">
      <img src="&mvt:sub_category:image;" alt="&mvt:sub_category:name;" title="&mvt:sub_category:name;" />                    
                              </figure>
      <figcaption class="cmp-product-list__name color--black font--uppercase secondary-font">&mvte:sub_category:name;</figcaption>
                                      </a>
                              </article>
                          </mvt:foreach>
                      </section>
                  <!-- end .cmp-subcategories -->
              </mvt:if>
          <!-- end .cmp-subcategories-filtering -->
      </mvt:if>
      On the product listing the image gets dynamically tagged with the class="is--loaded" but that isn't getting added to the img for the subcats

      Is that perhaps because the product thumbnail has a data-src= and the subcat img does not?





      Leslie Kirk
      Miva 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


      • To answer my last question - yes.
        Leslie Kirk
        Miva 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


        • Did you add data-src and did that work? Is this only happening in Chrome?
          Matt Zimmermann
          Director of UI/UX Standards and Theme Development
          / Miva, Inc.

          Comment


          • Originally posted by Matt Zimmermann View Post
            Did you add data-src and did that work? Is this only happening in Chrome?
            Yes, I added the data-src and no it was happening in all browsers that I tested in.

            Leslie Kirk
            Miva 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