AddToCart Snippet on Shopify Collection Pages

Okay David, I will try, as sound I will have the time, to feed a _learnq myself for each product dynamically, I should manage to find my way like that but it could be a good thing if a compliant snippet get public from Klaviyo for that… If I find the time to do it I will not hesitate to share it...

Hey everyone. I am running into an error when I have already pasted my ‘add-to-cart-button’ code onto the Shopify product page. 

The error is “item can not be found”. 
Here is what I have checked previously before I post here. The button doesn’t have ID so I guess that’s why I am using the Class version. 

https://help.klaviyo.com/hc/en-us/articles/115001396711-Create-a-Custom-Add-to-Cart-Event-for-Shopify

Hi @Akselpd,

Thanks for sharing this with the Klaviyo community.

First, you will need to paste the added to cart snippet in your main product.liquid file in addition to any custom product.liquid files. Keep in mind that anywhere the Viewed Product code is located (which should also be in these files) you will need to place the Added to Cart code below it in the code. For more information on pasting the Viewed Product code for Shopify, I recommend reviewing our article on this topic here. Additionally, using ID vs class (or vice versa) will not impact the ability of the code to locate the item. Can you confirm that this item is in fact located on a product page and not another type of file/page? That may also be a reason for this error.

In addition, I strongly recommend reviewing the thread below for potential solutions:

If you still have questions after reviewing all of the above information, can you show us a screenshot of where you are seeing this error exactly? Please redact any sensitive information such as email addresses or API keys. 

Thank you!

Hi there, @Dov, 

Thanks for you answer! I love that you mentioned View Product snipped because apparently that is what I have just found missing. 

So I went to add it onto the product.liquid file in Shopify theme. Here is a screenshot. 

Can I know why Klaviyo flows aren’t still working? 

I have run a check through the Klaviyo Wizard setup and I still can’t find problems. What is still there to be solved? 

Hello @Akselpd,

Glad to hear the Viewed Product portion of the solution was helpful.

Ok - I would try using just “add-to-cart-button” between the quotes, so this portion of the snippet looks like the following:

document.getElementsByClassName("add-to-cart-button");

and the whole snippet will look like:

script type="text/javascript">
  var _learnq = _learnq || [];
  var classname = document.getElementsByClassName("add-to-cart-button");
  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> 

then, before you test adding an item to your cart, ensure you are cookied in the browser (which can be achieved through filling out a Klaviyo sign-up form on your site or clicking through a Klaviyo email) and see if an “Added to Cart” event is recorded on the Klaviyo profile. The event will be located on the same profile (email address) you filled the sign-up form with. If this event is showing up on the profile but the flow is still not working, then I recommend checking out this article below on why users may not be entering a flow:

Hi @Dov,

I have a similar case with a different client. How do I escape and solve that systemic issue?

I have posted pictures and the problem here.

 

 Thank you!

Yours,
Alex

Hi @Akselpd,

Here is an alternative solution, replacing the current Added to Cart snippet with the following snippet (using the classes from your other post):

<script type="text/javascript">
  var _learnq = _learnq || [];
  document.querySelector('.btn.product-form__cart-submit.btn--secondary-accent').addEventListener('click',function (){
    _learnq.push(['track', 'Added to Cart', item]);
  });
</script>

Essentially, this involves adding a period before the opening class, and separating all subsequent classes by a period. I would copy and paste the classes directly from the source code on the page to your liquid file in Shopify and then add in the periods after (to make sure the classes are 100% correct) since I typed the classes out based on your screenshots. From there, run through the usual steps to cookie the browser and add an item to the cart.

What do you mean by copy/paste the classes directly from the source code on the page to my product.liquid file in Shopify? 

I am little confused. So I substitute my current ‘Add to cart’ code with the one you have just provide above for me. Is there anything else I need to add to it so it works? 

Where can I find that source code to copy the classes from my previous post? 
Where can do I need to put the period again? 

Thank you for the patience and the empathy I am highly depended on your support to finish this client’s case. My technical skills are on the edge. 

Yours,
Alex 

Hi @Akselpd,

Sorry I think I added more confusion than was necessary there. All I meant by “copy/paste the classes directly from the source code on the page to my product.liquid file in Shopify” was to copy the existing classes for the button from the console and paste them into the product.liquid file.

The simplest solution here is to simply replace your existing snippet for Add to Cart with the following code:

<script type="text/javascript">
  var _learnq = _learnq || [];
  document.querySelector('.btn.product-form__cart-submit.btn--secondary-accent').addEventListener('click',function (){
    _learnq.push(['track', 'Added to Cart', item]);
  });
</script>

Then run through the usual steps to cookie the browser and adding an item to the cart to trigger the event.