Solved

Add to Cart script not working with Upcart

  • 8 April 2024
  • 3 replies
  • 57 views

Badge

Hello,

So i’ve tried second and third method from this doc as the first one wasn’t working. Both second/third worked with default cart drawer. However, when i installed upcart app for add to cart drawer which disables the default drawer, the add to cart event isn’t triggering in klaviyo.

Doc link: https://help.klaviyo.com/hc/en-us/articles/115001396711

This is the script i’m using on main-product.liquid in my dawn 12 theme:

<script type="text/javascript">
var _learnq = _learnq || [];
var classname = document.getElementsByClassName("product-form__submit");
var addToCart = function() {
_learnq.push(['track', 'Added to Cart', item]);
}; for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', addToCart, false);
}
</script>

It’s working fine with default shopify drawer but not with upcart drawer.

I also read another post related to this topic but that said to change the endpoint in the script from /cart/add.js to /cart/add.js?upcart=1 but i can’t seem to find these endpoints in my script.

icon

Best answer by StefanUE 8 April 2024, 08:35

View original

3 replies

Userlevel 5
Badge +18

@Daddy hey, thanks for your question and welcome to the community!

You’ve installed Snippet 3, is that correct?

Below the instructions on how to implement that snippet, you’ll also find this:
This snippet will likely need to be modified, because the Add to Cart variable in the snippet needs to match the class used on your site.

  1. Open up one of your site’s product pages.
  2. Right-click your "Add to Cart" button and select Inspect.
  3. The console will open, showing the source code of your "Add to Cart" button. The following image shows the class of the "Add to Cart" button highlighted in the console.
    Add to cart button code in console with class equals btn product-form_cart-submit btn--secondary-accent highlighted in yellow
  4. Compare your button code in between the quotations, highlighted in the above example, with the contents in between the parentheses after getElementsByClassName in the code snippet above. For example, the class listed in the screenshot is btn product-form_cart-submit btn--secondary-accent and the variable listed in the snippet is add-to-cart.
  5. If they don’t match, modify the snippet to match the class of your button. Our example’s modified snippet looks like this: 


    Perhaps installing Upcart changes the class name in your snippet, so you basically just have to repeat the whole process after switching it on, then trying again to see if it works.


    ​​​​​​​Hope this helps, happy to chat further!

Badge

I’ve tried that but the class name is still same and it’s not working.

 

 

I read this post which said to change the endpoints however i can’t seem to find the endpoints in my script. Can you help with this?

Userlevel 7
Badge +36

Hi @Daddy!

Can you explain a little more about what you mean when you say that the functionality isn’t working? 

 

Are you seeing any error messages in your testing, or is it just that nothing is happening at all?

- Brian

Reply