Add to cart notification (message)

AlexBeaudetAlexBeaudet Member Posts: 25

I would like to modify the message content when adding a product to the cart. By default it uses the product.fulltitle and I want to use product.title. I haven't been able to find where in .rain or .js this particular message is formatted.

Anyone has this info? thank you!


Example of the notification message :


4 comments

  • VanessaDVanessaD Moderator, Lightspeed Staff Posts: 714 moderator

    Hey @AlexBeaudet !


    Thanks for reaching out! We appreciate the feedback.


    In the eCom popup notification, it's normal that it takes the  product.fulltitle. It's something that is set up by default and currently cannot be modified.


    I'll note it down since I do see where this could be useful and want to make sure that your voice is heard!


    Thank you so much for your interest in making Lightspeed the best it can be!

    ———


    If you have any further questions Please do not hesitate to contact LightSpeed support or check out our Support Page.


    All the best!

    Vanessa

    Lightspeed Retail Support

    866-932-1801 ext. 2 (Toll-Free)

    514-907-1801 ext. 2 (Montreal)

  • AlexBeaudetAlexBeaudet Member Posts: 25

    Alright thanks for the feedback!

  • tawamantawaman Member Posts: 1
    edited November 2020

    Sorry to revive an old thread, but I recently had the same problem and found a solution for it using window.localStorage. Its hacky, but it works.

    This is a basic explanation. It assumes you understand how the custom theming stuff works.

    On your 'add to cart' element, add a data attr to store brand names.

    ex.

    <a class='add-to-cart' data-brand='{{product.brand.title}}' ... > ... </a>
    

    use some js grab that brand name and store it in localstorage. this way you can access it after the page refreshes.

    ex (using jquery).

     $(document).ready(function(){
      $('.add-to-cart').click(function() {
         window.localStorage.setItem('brand-added', $(this).attr('data-brand'));
      });
    });
    
    

    Add a class to the message box items, so you can easily target the message contents. Then use some js to filter out the brand from the notification

    ex.

    {% if page.messages.info %}
      <ul class="info">
      {% for message in page.messages.info %}
        <li class='system-message'>{{ message }}</li>
      {% endfor %}
       </ul>
    {% endif %}
    
    
    $(document).ready(function () {
     var brand = window.localStorage.getItem('brand-added');
        var message = $('.system-message')[0];
          if (brand) {
           //removes the first occurance of brand from message.
           message.innerHTML = message.innerHTML.replace(brand, ''); 
           // destroy the cookie
           window.localStorage.removeItem('brand-added');
          }
    });
    

    Your message box may briefly show the full title before changing to the brand-free title. If that's an issue, you can hide the change by setting disaply:none (css) and using setTimeout (js) to make it show up after the text has changed.

  • AlexBeaudetAlexBeaudet Member Posts: 25

    Wow! Pretty hacky indeed I love it :P

    Will add this to my to-do and try to implement it on my end just for kicks.

    thank you for taking the time!

Sign In or Register to comment.