Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Input Value Attribute Not Changing with Variant

Input Value Attribute Not Changing with Variant

metagals
Shopify Partner
29 1 0

I created a product inquiry form on our product pages that autofills with the product SKU so that our admin can know which product the user is inquiry about. 

Screen Shot 2023-07-13 at 11.07.21 AM.png

The problem I am having is that the SKU does not change when a user changes the variant selection. I realized this is because it needs to be wrapped in  <span class="variant-sku">

 

However, this is an input value attribute and cannot be wrapped in a <span>. I tried creating a liquid snippet and rendering it within the input value but this did not work. 

 

Here is my code for the input field in the form:

 

 

 

 

{% assign current_variant = product.selected_or_first_available_variant %}

<input type="text" id="contact_form_name" readonly="readonly" onfocus="this.blur();" name="contact[sku]" value= "{{ current_variant.sku }}">

 

 

 

 

Any suggestions? 

Replies 10 (10)

Transcy
Shopify Partner
285 19 87

Hello @metagals ,

 

You can try to modify the code to update the input field value dynamically when the variant selection changes like this

const variantSelector = document.getElementById('variant-select');
const skuInput = document.getElementById('contact_form_name');

variantSelector.addEventListener('change', function() {
  const selectedVariant = variantSelector.value;

  const sku = getSKUForVariant(selectedVariant); 

  skuInput.value = sku;
});

function getSKUForVariant(variant) {
}

 

 

Transcy - The #1 Translation and Currency Converter
- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog

ZenoPageBuilder
Shopify Partner
1052 203 227

Hello @metagals 

You can add some Javascript code that listens to the variant select change and update the SKU in the input accordingly.

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
metagals
Shopify Partner
29 1 0

Do you have any idea how I would structure this? Thank you!

ZenoPageBuilder
Shopify Partner
1052 203 227

It really depends on your theme structure. Can you share your store URL?

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
metagals
Shopify Partner
29 1 0

Live Site: thelostco.com

Shopify URL: mister-lost-bike-shop.myshopify.com 

ZenoPageBuilder
Shopify Partner
1052 203 227

The rough code looks like this

 

 

{% assign current_variant = product.selected_or_first_available_variant %}

<input type="text" id="contact_form_name" readonly="readonly" onfocus="this.blur();" name="contact[sku]" value= "{{ current_variant.sku }}">

<script>
    var product = {{ product | json }}
    var variantSelect = document.querySelector('#SingleOptionSelector-0')
    var inputSKU = document.querySelector('input[contact[sku]]')

    updateSKU()
    variantSelect.addEventListener('change', updateSKU)

    function updateSKU() {
        var variant = variantSelect.value
        // TODO: You need to code this part
        // Using the product object declared above, and extract the correct SKU
        var variantSKU = ''
     
        inputSKU.value = variantSKU
    }
</script>

 

Please implement the TODO in the code above.

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
metagals
Shopify Partner
29 1 0

I am having trouble getting this to work, are you available to hire to help implement?

metagals
Shopify Partner
29 1 0

Just following up here, let me know if you are available to hire to help us complete this code!

ZenoPageBuilder
Shopify Partner
1052 203 227

Hello @metagals 

Sorry for the late reply. You can reach us at support@zenobuilder.com for free help at no cost.

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
metagals
Shopify Partner
29 1 0

Amazing, I just sent an email!