How to save selected drop-down value in product page to cart?

[Rohtaas]

Hi all,

I am adding a select drop-down box on our Shopify store's product page. This is the lenses store and a select drop-down would get the eyesight number of the customer.

I have successfully added the select drop-down box on the product page. The problem is that this box is not sending the selected value to the cart page. The value selected is also not being saved and shown anywhere.

Please see the this video for complete details of the problem.  https://www(.)gorgow(.)com/temp/shopify(.)php

Our store address is www(.)bellacontactlens(.)pk

Any help will be awesome.

Regards

Rohtaas

[PaulNewton]

Hi @Rohtaas this is html form basics.

The inputs aren't neither inside a form or connected to a form through a form attribute.

If a form input is external to a form it must use a form attribute on the input whose value is the id of the relevant form to associate the input to that form.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form 

I.e.

<form id="someform"></form>
....
....
<input form="someform" />

if using liquid for example in dawn based themes the form_id is generated with this liquid:

{%- assign product_form_id = 'product-form-' | append: section.id-%}
<input form="{{ product_form_id }}" />

💣You have to figure out what logic your specific theme uses for it's form ids.

 

Shopify form API basics

You can't just slap in any input name for a form submission, to integrate with the shopify API each custom input for a line-item-property must have a specific name format:

<input type="text" id="someid" name="properties[PROPERTYNAME]">

https://shopify.dev/docs/api/liquid/objects#line_item-properties 

https://community.shopify.com/c/shopify-design/product-pages-get-customization-information-for-produ... 

Development note when design pages avoid div-itis there are more tags than just the <div> element that can drasticaly simplify performance ( 💣 see deep element nesting ) , communication, development, future maintenance and debugging.

If you need this customization fixed then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

[Rohtaas]

Thank you for your reply. This is a more detailed and informative answer but I am new in Shopify. 

[websensepro · Accepted solution]

You can use this https://websensepro.com/shopify-ui-elements-generator-free/ free tool for generating UI Elements (Drop down fields, radio buttons, text field and many more). There is a Youtube tutorial also available for that, check below:

[Rohtaas]

Thank you for your reply, it worked for me.

[CGHOME]

When I. select the option to make this a required field it does not make it a required field. Why is that? 

[made4Uo]

Hi @CGHOME.

When you try to place the Shopify UI element in your store, the code varies on the location where you are pasting them. You can easily placed your Shopify UI elements in product, cart, and even in contact form with our enhanced Shopify UI Elements generator tool. The code provided will solve your issue. Check the video below.