All things Shopify and commerce
Hi everybody. I have been searching for how to display SKU code and EAN code on the product pages. I found a way to make those 2 codes display on the product page BUT EAN code is not changing when you select a different variant 😞 SKU code changes with no issues.
Does anybody know how to make it change as SKU does?
This is the code (product.liquid):
{% assign current_variant = product.selected_or_first_available_variant %}
SKU: <span class="variant-sku">{{ current_variant.sku }}</span> |
EAN: <span class="variant-barcode">{{ current_variant.barcode }}</span>
You can see the page of a product in action here:
https://lapetitecentrale.myshopify.com/products/arrosoir-chat-de-la-fortune?variant=36388258349208
password is: ewheup
THANKS!!!
Someone might come along with an easier way to do this, but here's my solution for the Debut theme.
Open your theme.js file and add the following pieces of code in the right places:
Find
SKU: '.variant-sku',
Add beneath it
barcode: '.variant-barcode',
Find
this.$container.on(
'variantSKUChange' + this.settings.namespace,
this._updateSKU.bind(this)
);
Add beneath it
this.$container.on(
'variantBarcodeChange' + this.settings.namespace,
this._updateBarcode.bind(this)
);
Find
_updateSKU: function(evt) {
var variant = evt.variant;
// Update the sku
$(this.selectors.SKU).html(variant.sku);
},
Add beneath it
_updateBarcode: function(evt) {
var variant = evt.variant;
// Update the barcode
$(this.selectors.barcode).html(variant.barcode);
},
Find
this._updateSKU(variant);
Add beneath it
this._updateBarcode(variant);
Find
_updateSKU: function(variant) {
if (variant.sku === this.currentVariant.sku) {
return;
}
this.$container.trigger({
type: 'variantSKUChange',
variant: variant
});
},
Add beneath it
_updateBarcode: function(variant) {
if (variant.barcode === this.currentVariant.barcode) {
return;
}
this.$container.trigger({
type: 'variantBarcodeChange',
variant: variant
});
},
It's a lot of copy and paste, but it's working for me. =]
Hi there! I tried this, but most of those codes are nowhere on my theme 😞
Thanks anyway!!
This didn't work for me either. Did you ever end up finding a working solution for this Lienime?
Hi! I just ended up with a workaround writing it all in the SKU space in the products. Like this:
Réf: 47879 | EAN: 4040491478793
It work for us but it is not the ideal...
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