Barcode Update with Variant select

Solved
Tourist
13 0 1

Im trying to make my Barcode update on my product page, 

This code update as it should when I change variant

<span class="variant-barcode">{{ current_variant.barcode }}</span>

But this code do NOT update when I change variant, and this is the code I need since I need the barcode to be in the box...

<input type="text" name="quantity" value = "{{ current_variant.barcode }}" size="4" style="width:60px;">

 Any free help?

0 Likes
Highlighted
Shopify Expert
2686 67 694

Depending on what theme you use, it may already have code to output and update SKU.

My recommendation would be to add a similar element (with a different class, of course) and duplicate the line of javascript code which actually updates the SKU to update barcode, using this different class.

Then just add a border to the barcode field with CSS.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
Tourist
13 0 1

I have duplicated the SKU code and changed it to Barcode, and this works
for (Code1) listed below.
But I need the Barcode value to be displayed in the "Quantity field",
The field where you can enter how many items you like to add to chart.
This way it is always ready to click "Add to Chart" and the min Quantity
will be added, this is (Code 2) and this do not update....
It seams to me as the class = Variant in code 1 is the one
that makes the "current_variant.barcode" update, but I can't include "class = "
in code 2
(Code 1) work with update

<span class="variant-barcode">{{ current_variant.barcode }}</span>


(Code 2) Do not work works with update

is Min. Quantity <input type="text" name="quantity" value = "{{ current_variant.barcode }}" size="4" style="width:60px;">

 

0 Likes
Highlighted
Tourist
13 0 1
Before select variant
 
Before switch.jpg
 
After select variant
 
After switch.jpg
 
 
0 Likes
Highlighted
Shopify Expert
2686 67 694

Ah I see you want to use Barcode for minimum order quantity.

Can you share a preview link to your store -- it will be easier this way.

 

you may try something like 

$('.quantity').val( current_variant.barcode ); 

in your javascript (but needs adaptation to your particular variable names).

 

This will, however, reset the quantity field with every variant change, so if your MOQ is 10 and I want to buy 20 Rose things, but then decide to get Blue ones, the qty will be reset to 10 as I change from Rose to Blue, which is not the best. Plus it does not prevent me from changing back to 5 and adding to cart only 5?

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
Tourist
13 0 1

Yes I want to use the barcode for this, since I do not use it for anything.

But you cant see it on my site unless you register, I have block on price and variant select if not approved register

Store is https://www.indoexport.com/ 

0 Likes
Highlighted
Tourist
13 0 1

 

 

P


@tim wrote:

Ah I see you want to use Barcode for minimum order quantity.

Can you share a preview link to your store -- it will be easier this way.

 

you may try something like 

$('.quantity').val( current_variant.barcode ); 

in your javascript (but needs adaptation to your particular variable names).

 

This will, however, reset the quantity field with every variant change, so if your MOQ is 10 and I want to buy 20 Rose things, but then decide to get Blue ones, the qty will be reset to 10 as I change from Rose to Blue, which is not the best. Plus it does not prevent me from changing back to 5 and adding to cart only 5?


It is not a problem that one can change the number to 5, on the page it say "Min. Quantity is" (hereafter the barcode value is displayed)

Eks Min. Quantity is 10

If you decide to change the number to 5 and add to chart, you will get a warning in you chart, that this product needs to be in multiply of 10 before you can check out

0 Likes
Highlighted

Success.

Shopify Expert
2686 67 694

Ok, in your theme.js (theme.js.liquid) find this code:

        // Show SKU
        this.selectors.$SKU.html(variant.sku);

and change it to

        // Show SKU
        this.selectors.$SKU.html(variant.sku);
// change quantity field to barcode this.$container.find('[name="quantity"]').val( variant.barcode );
Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
Tourist
13 0 1

That was smooth, works like a charm

0 Likes
Highlighted
Tourist
13 0 1

However, my other site the code in theme.js do not look the same, where should I place the code ?

// Show SKU
this.selectors.$SKU.html(variant.sku);
} 
else {
// The variant doesn't exist, disable submit button and change the text.
// This may be an error or notice that a specific variant is not available.
this.selectors.$addToCartBtn.prop('disabled', true);
this.selectors.$addToCartText.html(theme.strings.unavailable);
this.selectors.$shopifyPaymentButton.hide();
}
},
0 Likes