Solved

Add to Cart event using Shopify and ShineOn integration, Please help!


Badge +1

I’m hoping someone can help me with the add to cart on my Klaviyo. A little background so you know what I’m working with. I use Shopify Debut theme. I POD with ShineOn and they have their own product pages that has a .liquid file in the theme. I’ve watched all the videos and read the articles(the videos and articles are different. The articles say paste in theme.liquid while Youtube videos say product.liquid). Nothing seems to be working.
My preview item event is already set up(no code was required since it was just a click of a box. Thank you Klaviyo).
One of the issues I’m running into is figuring out the button ID/class. Because I’m using ShineOn for my product pages it has it’s own .liquid file called product.shineon.liquid. This is also the location of the preview item script. When I right-click the add to cart button and inspect, here is the code I have for the button:

<button id="so-btn-add-to-cart-7686243221717" class="so-form-btn-cta-main so-btn-add-to-cart" style="background-color: #000000;
              border: 1px solid #000000;
              color: #ffffff;
              font-size: 20px" data-add-to-cart="">

            <span class="so-btn-add-to-cart-vanity-copy" id="so-btn-add-to-cart-copy">Add to shopping bag </span>

        </button>
So the big questions are: Am I using button ID or button class? What add to cart variable should I use?Which .liquid file should I paste the code into (theme.liquid, product.liquid, product.shineon.liquid)?

Sorry this is insanely long, I’ve been working all night and can’t get it to work. Thanks for any help!

icon

Best answer by Dov 19 May 2022, 15:32

View original

4 replies

Userlevel 7
Badge +61

Hi @tmuldrow,

Thanks for sharing this question with us.

Sorry to hear about the inconsistencies you’ve been experiencing on where to paste the Added to Cart code. The answer (like most things in life) really is - it depends. We (very) recently updated our help center article: How to Create an Added to Cart Event for Shopify that will have the latest up-to-date information. I would use that as your primary point of reference on where to paste your snippet. Specifically, see where should I paste my snippet. I would start with custom.liquid or, if that’s not available, paste the universal snippet into the main theme.liquid file (assuming your add to cart button does not re-direct elsewhere).

Here’s the universal snippet:

<script type="text/javascript">
var _learnq = _learnq || [];
function addedToCart() {
fetch(`${window.location.origin}/cart.js`)
.then(res => res.clone().json().then(data => {
var cart = {
total_price: data.total_price/100,
$value: data.total_price/100,
total_discount: data.total_discount,
original_total_price: data.original_total_price/100,
items: data.items
}
if (item !== 'undefined') {
cart = Object.assign(cart, item)
}
_learnq.push(['track', 'Added to Cart', cart])
}))
}
(function (ns, fetch) {
ns.fetch = function() {
const response = fetch.apply(this, arguments);
response.then(res => {
if (`${window.location.origin}/cart/add.js`
.includes(res.url)) {
addedToCart()
}
});
return response
}
}(window, window.fetch))
$(document).ajaxComplete(function(event, request, settings){
if(settings.url == "/cart/add.js"){
addedToCart()
}
})</script>

I think some confusion on product.liquid vs theme.liquid originated from the “traditional” method of utilizing Added to Cart where we instructed users to paste the snippet (where you adjust the button ID or class) in the same file as Viewed Product which was in the product.liquid file. Our “new” primary method to utilize Added to Cart uses a universal snippet, to be pasted either the custom.liquid block or the theme.liquid file. 

So in short, I’d first start by adding the universal snippet into the custom liquid blocks, if that’s not possible, add it to the main theme.liquid file for your theme (should be theme.liquid). This is assuming your button does not re-direct to the cart page. If it does, you should leverage the other snippet in the doc and target the button ID which looks to be: “so-btn-add-to-cart-7686243221717”

<script type="text/javascript">
var _learnq = _learnq || [];
document.getElementById("so-btn-add-to-cart-7686243221717").addEventListener('click',function (){
_learnq.push(['track', 'Added to Cart', item]);
});</script>

I hope that’s helpful. 

Badge +1

@Dov thanks so much for your reply! I got it to work! Sort of. I’m now seeing my issue. The button ID has that sequence of numbers on the end. It turns out, that each product has a different set of numbers, making each product have a different Button ID😮. Is there any way around this? A universal ID so to speak?

Userlevel 7
Badge +61

Hi @tmuldrow,

Of course, happy to help. I’m glad we’re making progress!

Sort of - instead of trying to target a universal ID (since one doesn’t exist), the best alternative solution is to target the class notation to pull in a class from the button element that exists across all products. Essentially we’re looking for the “common denominator” for class now instead of ID. 

So you should have a look (inspect the various “add to cart” buttons) on your site and see which class is “common” across all of them. You may have multiple classes within a single button, each class will be separated by a space, here’s an example of a button with two separate classes (we just want to target the common one across the various buttons).

Two classes in a single “add to cart” button

Insert that common class element into the following snippet (in place of your existing snippet):

<script type="text/javascript">
window.onload = function() {
var _learnq = window._learnq || [];
document.querySelector('.CLASS_NAME_HERE').addEventListener('click',function (){
_learnq.push(['track', 'Added to Cart', item]);
});
};
</script>

Like the example above, ensure you have the period preceding the class name in this snippet.

I hope that’s helpful.

 

Badge +1

@Dov It worked!! Thank you so much! I can finally sleep at night. This was so helpful. Thank you again!

Reply