I'm working on a theme that uses product.json and I found a solution that worked for me. We are also using Klayvio so here are the steps:
(Source: Klayvio)
It’s a different order than exactly outlined in the klaviyo example, but it’s the same end product. We don’t have product.liquid, instead we have product.json so we’re going to go directly through the liquid homepage.
In Shopify go to Online Store, then theme, edit theme.
Layout – then - theme.liquid
Go to the very bottom of page, just before </body> paste this code
{% if product %}
Add snippet here
{% endif %}
-Save this before adding the following snippet (this is a universal code.)
Snippet >>
<script>
window.addEventListener('load', function() {
var _learnq = window._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)
}
if (klAjax) {
_learnq.push(['track', 'Added to Cart', cart]);
klAjax = false;
}
}))
};
(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));
var klAjax = true;
var atcButtons = document.querySelectorAll("form[action*='/cart/add'] button[type='submit']");
for (var i = 0; i < atcButtons.length; i++) {
atcButtons[i].addEventListener("click", function() {
if (klAjax) {
_learnq.push(['track', 'Added to Cart', item]);
klAjax = false;
}
})
}
});
</script>
Now, TEST by adding an item to your cart. Do not go to checkout, just add the item.
--What should happen is when you go to Klaviyo. Click on the left under Analytics, and now, Metrics. Just below (active on site) you’ll see Added to Cart. This means it worked and you can stop here. Mine worked here so I didn't have to go any further.
If it doesn’t work try this snippet instead. Replace the other snippet entirely with this, which is the custom code from what our add to cart button says. Replace all the bold with your code.
<script type="text/javascript">
var _learnq = _learnq || [];
var classname = document.getElementsByClassName("INPUT CUSTOM ADD TO CART CODE HERE, ONLY IF ITS A CLASS**");
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>
**FIND YOUR custom button code by going to your product and where your add to cart button is located Right-click in the empty space and you'll see the code. for exact details click on the klaviyo link up top, they explain it better.
Hope this helps someone!
