How can I display changing EAN codes on product pages?

Shopify Discussion
1

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 :disappointed_face: 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: {{ current_variant.sku }} |
EAN: {{ current_variant.barcode }}

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

1 Like
2

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

3

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

Thanks anyway!!

4

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

5

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…