Shopify themes, liquid, logos, and UX
Hi!
I'm currently trying to make the barcode of the selected variant show and it works great, except for one small detail.
For some reason the barcode won't update when I switch variants, even though my SKU version of the exact same code works just fine.
Does anyone happen to have any experience with this particular issue? I would absolutely love to hear how you solved it! 🙏
<p>
{% assign current_variant = product.selected_or_first_available_variant %}
{% if current_variant.sku != blank %}
<span class="price-item price-item--regular">SKU: </span><span class="variant-sku">{{ current_variant.sku }}
</span>
{% endif %}
{% if current_variant.barcode != blank %}
<br><span class="price-item price-item--regular">EAN: </span><span class="variant-barcode">{{
current_variant.barcode }}</span>
{% endif %}
</p>
EDIT: The barcode updates if I refresh my page after I switch variants, but then it's frozen on that one.
Solved! Go to the solution
This is an accepted solution.
DISCLAIMER: I am not an expert at working with themes, I simply mirrored the code Debut uses to update the SKUs to make sure that the barcode variable is also updated when the current variant is selected. If you happen to know more about these things and have an alternate way of solving this, please feel free to leave a comment!
I managed to figure this out by myself, by modifying a solution for a different theme. Hopefully this is easy enough to understand for someone new to working with code.
DISCLAIMER 2: Make sure to make a backup of your theme by clicking Actions -> Download theme file before making any changes to the code.
This is how I did it with the Debut version out right now:
1. Open up theme.js
2. Find this line of code (search for "_updateSKU: function(variant)"
_updateSKU: function(variant) {
if (variant.sku === this.currentVariant.sku) {
return;
}
this.container.dispatchEvent(
new CustomEvent('variantSKUChange', {
detail: {
variant: variant
},
bubbles: true,
cancelable: true
})
);
},
3. Paste this modified snippet of code right below it:
_updateBarcode: function(variant) {
if (variant.barcode === this.currentVariant.barcode) {
return;
}
this.container.dispatchEvent(
new CustomEvent('variantBarcodeChange', {
detail: {
variant: variant
},
bubbles: true,
cancelable: true
})
);
},
4. Find this line of code:
SKU: '.variant-sku',
5. Add the following line of code right below it:
barcode: '.variant-barcode',
6. Find this code (search for "_updateSKU: function(evt)"):
_updateSKU: function(evt) {
var variant = evt.detail.variant;
// Update the sku
var sku = document.querySelector(this.selectors.SKU);
if (!sku) return;
sku.innerHTML = variant.sku;
},
7. Paste this code right below it:
_updateBarcode: function(evt) {
var variant = evt.detail.variant;
// Update the barcode
var barcode = document.querySelector(this.selectors.barcode);
if (!barcode) return;
barcode.innerHTML = variant.barcode;
},
8. Find this code (search for "_updateSKU: function(variant)"):
_updateSKU: function(variant) {
if (variant.sku === this.currentVariant.sku) {
return;
}
this.container.dispatchEvent(
new CustomEvent('variantSKUChange', {
detail: {
variant: variant
},
bubbles: true,
cancelable: true
})
);
},
9. Add this code right below it:
_updateBarcode: function(variant) {
if (variant.barcode === this.currentVariant.barcode) {
return;
}
this.container.dispatchEvent(
new CustomEvent('variantBarcodeChange', {
detail: {
variant: variant
},
bubbles: true,
cancelable: true
})
);
},
10. Find this code:
this.eventHandlers.updateBarcode = this._updateBarcode.bind(this);
11. Add this below it:
this.eventHandlers.updateBarcode = this._updateBarcode.bind(this);
12. Find this code (searching for "variantSKUChange" worked for me):
this.container.addEventListener(
'variantSKUChange',
this.eventHandlers.updateSKU
);
13. Add this below it:
this.container.addEventListener(
'variantBarcodeChange',
this.eventHandlers.updateBarcode
);
14. Find this code:
this.container.removeEventListener(
'variantSKUChange',
this.eventHandlers.updateSKU
);
15. Add this right below it:
this.container.removeEventListener(
'variantBarcodeChange',
this.eventHandlers.updateBarcode
);
16. Find this code:
this._updateSKU(variant);
17. Add this below it:
this._updateBarcode(variant);
As previously mentioned, this worked for me and I hope that it might someone else out there who is struggling with this.
This is an accepted solution.
DISCLAIMER: I am not an expert at working with themes, I simply mirrored the code Debut uses to update the SKUs to make sure that the barcode variable is also updated when the current variant is selected. If you happen to know more about these things and have an alternate way of solving this, please feel free to leave a comment!
I managed to figure this out by myself, by modifying a solution for a different theme. Hopefully this is easy enough to understand for someone new to working with code.
DISCLAIMER 2: Make sure to make a backup of your theme by clicking Actions -> Download theme file before making any changes to the code.
This is how I did it with the Debut version out right now:
1. Open up theme.js
2. Find this line of code (search for "_updateSKU: function(variant)"
_updateSKU: function(variant) {
if (variant.sku === this.currentVariant.sku) {
return;
}
this.container.dispatchEvent(
new CustomEvent('variantSKUChange', {
detail: {
variant: variant
},
bubbles: true,
cancelable: true
})
);
},
3. Paste this modified snippet of code right below it:
_updateBarcode: function(variant) {
if (variant.barcode === this.currentVariant.barcode) {
return;
}
this.container.dispatchEvent(
new CustomEvent('variantBarcodeChange', {
detail: {
variant: variant
},
bubbles: true,
cancelable: true
})
);
},
4. Find this line of code:
SKU: '.variant-sku',
5. Add the following line of code right below it:
barcode: '.variant-barcode',
6. Find this code (search for "_updateSKU: function(evt)"):
_updateSKU: function(evt) {
var variant = evt.detail.variant;
// Update the sku
var sku = document.querySelector(this.selectors.SKU);
if (!sku) return;
sku.innerHTML = variant.sku;
},
7. Paste this code right below it:
_updateBarcode: function(evt) {
var variant = evt.detail.variant;
// Update the barcode
var barcode = document.querySelector(this.selectors.barcode);
if (!barcode) return;
barcode.innerHTML = variant.barcode;
},
8. Find this code (search for "_updateSKU: function(variant)"):
_updateSKU: function(variant) {
if (variant.sku === this.currentVariant.sku) {
return;
}
this.container.dispatchEvent(
new CustomEvent('variantSKUChange', {
detail: {
variant: variant
},
bubbles: true,
cancelable: true
})
);
},
9. Add this code right below it:
_updateBarcode: function(variant) {
if (variant.barcode === this.currentVariant.barcode) {
return;
}
this.container.dispatchEvent(
new CustomEvent('variantBarcodeChange', {
detail: {
variant: variant
},
bubbles: true,
cancelable: true
})
);
},
10. Find this code:
this.eventHandlers.updateBarcode = this._updateBarcode.bind(this);
11. Add this below it:
this.eventHandlers.updateBarcode = this._updateBarcode.bind(this);
12. Find this code (searching for "variantSKUChange" worked for me):
this.container.addEventListener(
'variantSKUChange',
this.eventHandlers.updateSKU
);
13. Add this below it:
this.container.addEventListener(
'variantBarcodeChange',
this.eventHandlers.updateBarcode
);
14. Find this code:
this.container.removeEventListener(
'variantSKUChange',
this.eventHandlers.updateSKU
);
15. Add this right below it:
this.container.removeEventListener(
'variantBarcodeChange',
this.eventHandlers.updateBarcode
);
16. Find this code:
this._updateSKU(variant);
17. Add this below it:
this._updateBarcode(variant);
As previously mentioned, this worked for me and I hope that it might someone else out there who is struggling with this.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024