COLLECTION PAGE CLS - CAUSED BY DYNAMIC PRODUCT GRID

Makeitperfect
Tourist
18 0 3

Hi all, 

@oscprofessional 

Hope someone can help out with this as I am running in circles, Ive made some progress but I do find other things that need fixing as a consequence of the codes I am trying to implement to fix the CLS in my collection pages.

The content weirdly loads from bottom to top causing anything that is " RELATIVE " to shift from bottom to top until it set in its position which causes CLS. A fix I know is to give whatever is pushing the content min-height or similar so there is a predetermined height for it and thus avoid CLS. It does work however because that is also a responsive grid setting a min-height at one VIEWPORT width doesnt solve the issue at another viewport width. 

So what I've done is I've adjusted my liquid code a little bit and added a javascript to theme to tackle this. 

The code is below as follows : 


This is my main-collection-product-grid.liquid - the code below is modified by me, Ive tried to implement the logic of the padding top and bottom lines so that it multiplies an integer that gives a min-height or similar to pages where we have different product counts. 

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

 

/* Initial min-height for the medium expected element */
.min-height-small {
min-height: {{ 610 | times: 1.393 | round: 0 }}px;
}

/* Initial min-height for the medium expected element */
.min-height-medium {
min-height: {{ 1100 | times: 1.5 | round: 0 }}px;
}


/* Initial min-height for the largest expected element */
.min-height-large {
min-height: {{ 1350 | times: 1.44444 | round: 0 }}px;
}


{%- endstyle -%}

 

<div class="section-{{ section.id }}-padding gradient color-{{ section.settings.color_scheme }}
{% if collection.products_count > 8 %}
min-height-large
{% elsif collection.products_count > 4 %}
min-height-medium
{% else %}
min-height-small
{% endif %}
">
{%- paginate collection.products by section.settings.products_per_page -%}


This so far is working and it's setting the correct classes based on product count. To make this better I went step further and wanted to make this min-height dynamic so I added a piece of javascript that would adjust the min-height dynamically between viewport breakpoints I have for my website. I've started working from my screen size 2048px 21.5 inch iMac down to mobile below 450px. 

With these 2 pieces of code my min-height gets set based on product count and it assigned classes as such you see in the codes which then give an initial min-height which is then dynamically reduced as you resize the viewport size.

This to an extent is fixing the issue, there is no CLS, I can only see it in dev tools under very slow 3g simulation but its a hit and miss, sometimes its there sometimes it isnt. General usage of the site is pretty fast and I can barely see any CLS in these pages but I am not sure if I ve done this correctly. Maybe this is too much code and there is simpler solution. 

The issue I have with this one is that I have filters in the pages and so if the page starts with > 8 products as per the link https://f424af-2.myshopify.com/collections/ready-to-wear  then it gives it the class min-height-large, with initial height of 1950px and then starts reducing it down as you resize the browser. And if I click on the filters and select an option that changes the product count to 1 or similar then it maintains that initial height of 1950px and doesnt register the change on the page to set a different class which should be min-height-small.  

In reality I am writing this so that someone can shed some light into this and whether there is actually another approach of setting min-heights to dynamic containers like the product grid because those products are dynamically injected there, at least thats what I think as it takes time to download them and doesnt know the height until the content is there. 

If there is a simpler solution of providing min-height to the product collection page product grid please please help me out. I am looking for the responsive solution. 

 

{% if template contains 'collection' %}

<script>
document.addEventListener('DOMContentLoaded', function() {
const scalingFactors = {
small: 850 / 2048,
medium: 1650 / 2048,
large: 1950 / 2048
};

function updateMinHeight(className, baseMinHeight, scalingFactor, columnAdjustments) {
const currentWidth = window.innerWidth;
let newMinHeight;

if (currentWidth >= 1201) {
// Maintain 4 columns
newMinHeight = currentWidth * scalingFactor;
} else if (currentWidth >= 990) {
// Adjust for 3 columns
newMinHeight = currentWidth * scalingFactor * columnAdjustments.threeColumns;
} else {
// Adjust for 2 columns
newMinHeight = currentWidth * scalingFactor * columnAdjustments.twoColumns;
}

newMinHeight = Math.max(newMinHeight, baseMinHeight); // Ensure it doesn't fall below the base min-height

// Apply the calculated min-height to all elements with the specified class name
const elements = document.querySelectorAll(className);
elements.forEach(function(element) {
element.style.minHeight = `${newMinHeight}px`;
});
}

// Run the function for each class on initial load
updateMinHeight('.min-height-small', 580, scalingFactors.small, { threeColumns: 1.41, twoColumns: 3.90 });
updateMinHeight('.min-height-medium', 1100, scalingFactors.medium, { threeColumns: 2.08, twoColumns: 4 });
updateMinHeight('.min-height-large', 1350, scalingFactors.large, { threeColumns: 2.014, twoColumns: 3.608 });

// Re-run the function whenever the window is resized
window.addEventListener('resize', function() {
updateMinHeight('.min-height-small', 580, scalingFactors.small, { threeColumns: 1.41, twoColumns: 3.90 });
updateMinHeight('.min-height-medium', 1100, scalingFactors.medium, { threeColumns: 2.08, twoColumns: 4 });
updateMinHeight('.min-height-large', 1350, scalingFactors.large, { threeColumns: 2.014, twoColumns: 3.608 });
});
});

</script>

{% endif %}

 

Reply 1 (1)

Makeitperfect
Tourist
18 0 3

Anybody gonna help with this please?

Would appreciate the direction or perhaps even a sit down on how to do this would be great! 

Thank you in advance