Shopify themes, liquid, logos, and UX
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.
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?
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) {
}
Hello @metagals
You can add some Javascript code that listens to the variant select change and update the SKU in the input accordingly.
Do you have any idea how I would structure this? Thank you!
It really depends on your theme structure. Can you share your store URL?
Live Site: thelostco.com
Shopify URL: mister-lost-bike-shop.myshopify.com
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.
I am having trouble getting this to work, are you available to hire to help implement?
Just following up here, let me know if you are available to hire to help us complete this code!
Hello @metagals
Sorry for the late reply. You can reach us at support@zenobuilder.com for free help at no cost.
Amazing, I just sent an email!
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024