Good morning,
For a shopify theme, I have built a shipping announcement bar for a website which informs customers to increase their total order value in order to qualify for free shipping. I have written the required HTML/Liquid for the shipping bar to appear on the site, but it only updates after a page load event (refresh, user navigates to a different page on the shopify site etc.)
To make this better, I am writing some additional javascript so that it automatically updates when the contents of the cart are changed (e.g. customer adds an item to their basket, or increases/reduces quantity of an existing item). Admittedly Javascript is not my strong point, so I have been following the steps to build this using the ‘Update free shipping bar without page reload’ tutorial by Coding with Jan, which you can view here: https://www.youtube.com/watch?v=1EgQRtgKytM
There are two things I’ve done slightly differently to the tutorial, which could be related to the issue, they are:
- The code is being implemented into an ajax cart (side cart), rather than on a static cart page
- The shipping announcement bar HTML/CSS/LIQUID has been written into its own snippet rather than directly into the liquid file for the sidecart - I’ve used the render tag to display the content within the sidecart liquid file. This is for my client’s convenience, in case they want to make any code changes without having to endlessly scroll through a huge liquid file.
Despite this I’ve been following the tutorial without any issues, but - at ~15m07secs - the tutorial asks you to manually execute the new Javascript function you’ve built to check the shipping announcement updates.
When I attempt this in the Devtools console, the function I’ve built ‘update’ cannot be accessed and isn’t being recognised. The error I receive is:
VM168:1 Uncaught TypeError: theme.ShippingAnnouncement.update is not a function
at <anonymous>:1:29
theme.ShippingAnnouncement is being recognised when I type it into the console (it shows in a dropdown list as I type), but theme.ShippingAnnouncement.update does not.
The javascript I have written, added into theme.js.liquid, can be found below. The function is clearly referenced in the code and there are no reports of syntax errors in the console when the page loads. Can someone explain to me why my theme.ShippingAnnouncement.update function isn’t being recognised and why I can’t test it?
theme.ShippingAnnouncement = (function() {
var announcement = document.querySelector('.shipping_progress');
var upsell_message = announcement.dataset.upsell;
var unlocked_message = announcement.dataset.unlocked;
var threshold = announcement.dataset.threshold;
function update(){
jQuery.getJSON('/cart.js').then(
function(cart) {
var value_left = threshold - cart.total_price;
var value_left_money = theme.Currency.formatMoney(value_left,theme.moneyFormat);
if(value_left <= 0){
announcement.innerHTML = '<p id="progress-message">' + unlocked_message + '</p>';
}
else{
announcement.innerHTML = '<p id="progress-message">' + upsell_message.replace('[value]',value_left_money) + '</p>';
}
}
);
}
return { update:update }
});
Here is what I’ve already tried beyond the tutorial, based on some googling:
- changed $.getJSON to jQuery.getJSON for my update function (including the jQuery library)
- Included a line in my theme.liquid file to load jQuery on site load
- checked the rest of the theme.js.liquid file for any other functions named ‘update’, in case there is a clash (there isn’t)
- Checked for any missing or extra parentheses, braces, or semicolons that could affect the code’s correctness - devtools console reports no syntax errors
Thank you kindly!