Infinite Scroll bug

AlexBeaudetAlexBeaudet Member Posts: 25
edited March 2020 in Theme and Design

Theme : Gibbon

When I activate the Infinite Scroll on my eCom site the products being displayed after the initial 12 don't have the right CSS applied to them. The first 12 will show the french word "solde X%" (as modified in products.rain snippet) and the other products will simply show "sale" (completely bypassing the modified CSS).


  • JoeyJoey Administrator, Moderator, Lightspeed Staff Posts: 277 moderator

    Hi again @AlexBeaudet

    This is might be a bug we have to look into, but are you using the French language for your shop (Settings -> Countries)? That would be the first step to make sure the french language is consistently used.

    You should also make sure any text added in the code is translatable, using the t filter: {{ sale | t }}

    Now you can use translations (under Content -> Translations) to translate this string into multiple languages.

    Also in regards to 12 products per page, you can up this to 24 in Settings -> Advanced -> Products per page.

    eCom Support Team
    Lightspeed HQ
  • AlexBeaudetAlexBeaudet Member Posts: 25

    We are indeed setup for french in Settings -> Countries.

    In products.rain the "sale" label isn't used with the '| T' by default. I added it custom (see code below) along with the percentage next to it (customer wants both).

    As for 24 products you are right and it works correctly. Would prefer infinite scroll thats works correctly with css though haha. Thank you for looking into it.

     <div class="product-label sale{% if theme.products_show_percentage %} percentage{% endif %}">

             {% if product.price.price_old %}

             {% if theme.products_show_percentage %}

             {{ (((product.price.price - product.price.price_old)/product.price.price_old)*100) | round(0) }}%

             {% else %}

            {# Sale #}

             {{ 'Sale' | t }} {{ (((product.price.price - product.price.price_old)/product.price.price_old)*100) | round(0) }}%

             {% endif %}

             {% endif %}


  • AlexBeaudetAlexBeaudet Member Posts: 25

    Alright so I dove into Global.JS and found the culprit and modified the function to get what I wanted.

    infiniteCollectionLoad(). This is where I toyed with the conditions and to write the "sale" label as to reflect the changes I had made in the products and products-list rain snippets.

    I all added code to display the DEMO label I added to certain products based on our conditions.

    //Look at product title (to UPPER) and if it contains DEMO or DÉMO then display the label
    var product_title = product.title;var product_title = product.title;
    product_title = product_title.toUpperCase();
    if ( (product_title.indexOf('DÉMO') !== -1) ||  (product_title.indexOf('DEMO') !== -1)) {var labelDemo = 'DEMO';}
    //Add the required div with the DEMO class to the product-labels DIV
    productObject.find('.product-labels').append('<div class="product-label demo">'+labelDemo+'</div>');

Sign In or Register to comment.