EAN Barcode on Product Pages

Lienime
New Member
7 0 0

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

0 Likes
markdc
Tourist
9 0 7

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

0 Likes
Lienime
New Member
7 0 0

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

Thanks anyway!!

0 Likes
dbp
Excursionist
16 0 2

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

0 Likes
Lienime
New Member
7 0 0

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

0 Likes