How do I get variant SKU to pre-fill in a contact form from the product page?

wen-industries
Tourist
8 0 1

Hi,

 

I added code to my contact form page to pre-fill the product from which a customer selects the 'request a quote' button. For example, if the customer is looking at our WEN500MT, when they select 'request a quote' it brings them to our contact page with the 'product' field filled in with 'WEN500MT"

 

However, I have since added a variant to the product with its own SKU (WEN500MT-PK) I want the variant SKU to pre-fill in the contact form but cannot figure out how to pull it from the product page into the contact form URL

 

Current code in my contact-form-custom.liquid file - 

 

<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams (queryString);
const product = urlParams.get ('product');

let textArea = document.getElementById ('ContactForm-product');
textArea.value = product;
</script>

 

I've tried changing the "const product = urlParams.get ('product');" part to pull the SKU but can't get it to work.. 

 

Any ideas?

 

Thank you

 

Screenshot 2024-01-23 at 1.33.02 PM.pngScreenshot 2024-01-23 at 1.34.33 PM.png

Replies 5 (5)

wen-industries
Tourist
8 0 1

Also, current code in the product template file - 

 

"custom_liquid_CpWQbY": {
"type": "custom_liquid",
"settings": {
"custom_liquid": "<a href=\"\/pages\/contact-us?product={{product.selected_or_first_available_variant.sku}}\" class=\" button button--full-width button--primary\">Request a Quote<\/a>"
}
},

YOD_Solutions
Shopify Partner
206 23 30

You will need to add a JavaScript code that updates the href attribute of the "Request a Quote" button whenever a user selects a variant. Your current code contains an href attribute that is prefilled with the default variant or the first available variant sku - it will not change when a user selects another variant.

Founder @ JsRates: Custom Shipping Rates
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more about JsRates visit the JsRates home page or JsRates documentation
- Find JsRates on Shopify app store
wen-industries
Tourist
8 0 1

Thank you - I'm not sure how to do that.. I've tried changing "product.selected_or_first_available_variant.sku" to "current_variant.sku" and it doesn't work..

YOD_Solutions
Shopify Partner
206 23 30

You will need to use JavaScript to update the button url address when users select a variant. If you are not familiar with JavaScript, you might need help from a developer. The task is a relatively simple one - it shouldn't take more than 30 minutes.

Founder @ JsRates: Custom Shipping Rates
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more about JsRates visit the JsRates home page or JsRates documentation
- Find JsRates on Shopify app store
wen-industries
Tourist
8 0 1

Yes, help from a developer is what I made this post for. I was hoping, since it's something so simple, that someone would be able to help me here. Thanks anyway