Solved

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

Rohtaas
New Member
5 0 0

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

 

 

Accepted Solution (1)

websensepro
Shopify Partner
1047 146 153

This is an 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:

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

View solution in original post

Replies 6 (6)

PaulNewton
Shopify Partner
6339 580 1350

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.

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Rohtaas
New Member
5 0 0

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

websensepro
Shopify Partner
1047 146 153

This is an 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:

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Rohtaas
New Member
5 0 0

Thank you for your reply, it worked for me.

CGHOME
New Member
5 0 0

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

made4Uo
Shopify Partner
3833 716 1167

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. 




If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free