Display label based on custom collection filter

AlexBeaudetAlexBeaudet Member Posts: 25

Hi,

Lets say I created a custom Filter for my products named "demo". How could I retrieve this filter's value for the product?

My goal is to set this filter to "yes" on Demo products and display a label highlighting that it is a demo product.

thank you!

6 comments

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

    Hi @AlexBeaudet

    There is no easy way of doing this as the filter information is not available on the product level, only the collection itself.

    My recommendation would be to use Custom Template data (data_01) to show a specific label.

    Hope this helps, otherwise let me know in more detail what you are looking to create.

    eCom Support Team
    Lightspeed HQ
  • AlexBeaudetAlexBeaudet Member Posts: 25

    Thank you for the reply! I hadn't read about that Custom data and it's nice to know it is there.

    For the moment we took a simpler approach by adding "Demo" to the title of demo products. I then match the product.title string where needed to display visual labels to catch customers' eyes.

    Looks like this for now :


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

    Ah, yes that is also a good solution and it looks great!

    eCom Support Team
    Lightspeed HQ
  • AlexBeaudetAlexBeaudet Member Posts: 25

    I'm new to integrating lightspeed and will make a few other posts with brain scratchers I have cought so far... hopefully you and others cant shed some light like you just did!

    Hopefully these threads will further help other newbies :P

  • CliffyPCliffyP Member Posts: 3

    Wow... That's great Alex...

    I would love to see the code you used for that.

    I would like to do the same for our Clearance & OpenBox product. Currently we use "TAGS" & Data_01 for clearance Items and have a clearance Menu Item to display them all. I wonder if I could apply the same style code so they too could have a Highlighted label like yours.

  • AlexBeaudetAlexBeaudet Member Posts: 25

    Hi Cliffy you certainly could! here's the basic idea to get you going :)


    Settings.CSS.Rain : Here I simply copied the CSS classes the "new" label and renamed them "demo". I chose to stick with the Theme's new color variable so it could be changed easily later on.


    .products .product .product-label.demo,

    .products .product-list .product-label.demo {

     background:{{ theme.products_new_color }};

    }


    Then you need to edit multiple rain files depending where you want to show this new "demo" label.

    product-list.rain : This is used with the "list" layout for the products pages.

    here just add your DIV and a label defined by the required product conditions at the right "spot" on your page. In my case right after the product-label sale DIV.

          <div class="product-label demo">

           {% if 'DÉMO' in product.title|upper or 'DEMO' in product.title|upper %}

           DEMO

           {% endif %}

            </div>


    products.rain : This is the standard grid view for the products pages.

    Same code as above in the same spot!


    ***infinite scroll* ** : I found this out the hard and long way. Once infinite scroll is activated all "scrolled" items will be redrawn with Javascript and whatever code is present in the rain file will not matter anymore (i.e : if your starting grid is 12 items then items 13+ will be redrawn via Javascript). To make the infinite scroll work the same you need to adjust the following function in Global.JS --> function infiniteCollectionLoad(url, mode).This is trickier but I managed to reproduce all my customizations from the rain file here for the InfiniteScroll to work properly. Just look at the function and toy around with it to figure out where to modify what you need.

    quick example :

    var labelDemo = ""; //empty label for starters

    //if product title contains "DÉMO" or "DEMO" then label will be filled.

       if ( (product_title.indexOf('DÉMO') !== -1) || (product_title.indexOf('DEMO') !== -1)) {var labelDemo = 'DEMO';}

    //Find the right object in the productObject to append it's HTML and add a new DIV with the required classes to display the Demo Label.

     productObject.find('.product-labels').append('<div class="product-label demo">'+labelDemo+'</div>');//();

Sign In or Register to comment.