Solved

Added To Cart Snippet on Shopify - changing class

  • 14 April 2022
  • 9 replies
  • 112 views

Badge +2

Hi team - 

I’m working with a new client.

She has a Shopify store, Klaviyo integration was already there. I started setting things up and noticed the Viewed Product didn’t fire since August and Added To Cart metric wasn’t even there.

 

Viewed Product

There was a website update, since then the VP wasn’t firing anymore. I wanted to re-instal, but couldn’t find product.liquid, but product.json. In stead I pasted the Viewed Product snippet in main-product.liquid and it is working right now.

Please let me know if there’s another best practice in this case.

 

Added To Cart

I’ve read the documentation and watched the video’s. 

No Button ID. So looking for the class notation. Unfortunately, I found that the class notation is changing, Every product has it’s own.

​​​​​​

Extra information

  • The store offers pre-orders as well as ‘direct orders’ (?)

Would appreciate any help. Feel free to reach out with questions. 

 

/ RA

 

 

 

 

icon

Best answer by Manny Singh 28 April 2022, 21:31

View original

9 replies

Userlevel 6
Badge +52

Hey @raWildflows 

Thanks you for all the info and some great questions! 

Do you know what theme on Shopify the client is using? Some of the themes have different titles for the files, but as long as it is working I would keep it in main-product.liquid file. As for the add to cart question, there are two different snippets you can use, one for buttons and another for class notation, like yours above. Is this the snippet that is installed for class name?

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

Hi Stephen,

She’s using the Showcase theme. That’s Shopify 2.0 if I’m not mistaken - added the Active On Site snippet in a custom liquid block on product level and it works like a charm :) - thanks @alex.hong 😁.

Now I’m still struggling with the ATC snippet. 

They (unfortunately) don’t come with a button ID. So I’m using the “Alternate Snippet for "Add to Cart" Button without a Button ID” using the class notation. 

The problem I’m facing is that the class notation isn’t static, like the example in this article:

“btn product-form_cart-submit btn--secondary-accent”

The class notations are changing every time I’m refreshing the page. So they’re unique/variable/ever-changing. 

Before refresh:

class="button pn-button-1cwmu5w1yhr"

After refresh: 

class="button pn-button-wkwye3xd1p9"

Same product.

Here’s a link to a product page

/RA

Badge +2

bump bump bump 

Userlevel 7
Badge +36

Hey @raWildflows, are you able to go into the liquid theme files and add a static class to that button as well (won’t change the styling, just for the purpose to work with with the snippet)?

Userlevel 6
Badge +52

Hey @raWildflows 

I was waiting for some guidance on this myself but @Mailbox Manny suggestion would be best case scenario. Were you able to add a static class to the button?

Badge +2

It worked! Thank you so much @Mailbox Manny and @stephen.trumble. Needed the help of a developer to find the button, but we did it! Enjoy your weekends :)

Userlevel 6
Badge +52

Awesome @raWildflows! So glad you were able to finally get a solution that work. Thanks @Mailbox Manny for having really great answers all the time!

Badge

It worked! Thank you so much @Mailbox Manny and @stephen.trumble. Needed the help of a developer to find the button, but we did it! Enjoy your weekends :)

How did you add the class? please help me

Badge

Hey @raWildflows 

I was waiting for some guidance on this myself but @Mailbox Manny suggestion would be best case scenario. Were you able to add a static class to the button?

how do i add class code? can you help me ?

Reply