Displaying cattree images in the subcategory_listing

[lesliekirk]

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]

[Matt Zimmermann]

Hi Leslie,

Is this the case in all browsers or just in Chrome?

[lesliekirk]

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

<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

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

[lesliekirk]

To answer my last question - yes.

[Matt Zimmermann]

Did you add data-src and did that work? Is this only happening in Chrome?

[lesliekirk]

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.