Can EAN code change with different variants on Shopify product pages?

Lienime
Tourist
7 0 2

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!!!

Replies 4 (4)

markdc
Shopify Partner
23 0 22

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. =]

Lienime
Tourist
7 0 2

Hi there! I tried this, but most of those codes are nowhere on my theme 😞

Thanks anyway!!

dbp
Shopify Partner
21 0 3

This didn't work for me either. Did you ever end up finding a working solution for this Lienime?

Lienime
Tourist
7 0 2

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...