Solved

Update displayed Barcode when switching Variant

DouglasHolm
Visitor
2 1 0

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.

Accepted Solution (1)

DouglasHolm
Visitor
2 1 0

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.

View solution in original post

Reply 1 (1)

DouglasHolm
Visitor
2 1 0

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.