Skip to content

Instantly share code, notes, and snippets.

@jgodson
Last active November 30, 2020 21:39
Show Gist options
  • Save jgodson/d4460665ee6b9244ac0cd1dd68f75abe to your computer and use it in GitHub Desktop.
Save jgodson/d4460665ee6b9244ac0cd1dd68f75abe to your computer and use it in GitHub Desktop.
Show script discount messages in checkout on your Shopify store
(function() {
// The events to listen for to append the messages
// page:change is all we really need, but the page:load will fire sooner
// so the messages will be less likely to pop-in
var events = ['page:load', 'page:change'];
events.forEach(function(event) {
document.addEventListener(event, appendScriptMessages);
});
// The function that actually appends the messages
function appendScriptMessages() {
// Exit if discount messages are already shown
if (document.querySelector('.script-discount-message')) { return; }
var discountedItems = [
{% for line_item in checkout.line_items %}
{% if line_item.message != blank %}
{
id: {{ line_item.variant_id }},
message: '{{ line_item.message }}'
},
{% endif %}
{% endfor %}
];
for(var i = 0; i < discountedItems.length; i++) {
var productSelect = 'tr.product[data-variant-id="' + discountedItems[i].id + '"] .product__description';
var message = document.createElement('span');
message.className = 'script-discount-message';
message.innerText = discountedItems[i].message;
document.querySelector(productSelect).appendChild(message);
}
}
})();
@jgodson
Copy link
Author

jgodson commented Nov 20, 2018

Hey @srg-xx, this file is meant to be included in checkout.liquid as a snippet via {% include 'checkout-script-messages' %} near the closing </body> tag or you can just use the content directly in checkout.liquid

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment