Custom field + Variations

[nigeltangg]

Just gonna try my luck here an hopefully I can get someones help. I’ve been trying for a long time and it’s getting frustrating as I am no JS expert and still unable to get it to work after trying various methods. I am currently using Snipcart on Webflow.

1.) Product variations & pricing – How do I have the different pricing of the variations to display without the brackets. Right now it is showing as “Walnut [+70]” instead of “Walnut +$70”.

2.) I would like the customer to be able to input on a custom field on the products page instead and have the inputs reflected in the cart instead of having them input on the cart itself. I would love to have data-item-custom1-name=“Custom Name” on the products page instead in the cart.

Really appreciate the help!

[Michael]

Hi @nigeltangg

We don’t show the price modifier for the product variation in the dropdown. Could you send us a link to your store or paste your product definition here? We’ll take a look at what’s going on.

Concerning your second question, you can create an external dropdown and update the data-item-customX-value attribute dynamically to set a default value to the custom field. We have an example in this section of our documentation.

Let me know if that helps,

Cheers!

[dominic]

2.) I would like the customer to be able to input on a custom field on the products page instead and have the inputs reflected in the cart instead of having them input on the cart itself. I would love to have data-item-custom1-name=“Custom Name” on the products page instead in the cart.

Here is an example for this exact use case:

Update custom field value - CodeSandbox

Hope this helps!

[nigeltangg]

Hi Dominic

Thanks for the quick help! Sorry, maybe I have worded my example wrongly. I’ve got the selector part working. What I would like is to have an input field on my product page where the customer can type in any custom information such as name,gift messages etc. Thank you!

[nigeltangg]

Hi Michael,

Yes I found it weird that it is showing as well and I couldn’t get rid of it. Right now, it is only showing on the dropdown on my products page but not on the cart. Here’s the link to the product page Ring Bearer Box.

For the second question. Sorry, maybe I have worded my example wrongly. I’ve got the selector part working. What I would like is to have an input field on my product page where the customer can type in any custom information such as name,gift messages etc. Thank you!

[dominic]

Hi @nigeltangg

Do you mean you want a text custom field instead of (or in addition to) the dropdown custom field? If so, you can apply the same principle as the example.

Let me know if I’m still not getting it

As for your first point, here is the issue:

The value attribute is what is used to set Snipcart’s custom field value,
the text between your <option> tag is only for the customer.

This means you could write your options like this:
<option value="Oak (L)">Oak (L)</option>

Cheers!

[nigeltangg]

Hi Dominic

So sorry for the late reply. I actually got the custom field to work after knowing that the same principle applies! Thank you so much for that.

For the value attribute issue. I currently have the values pull from Webflow’s CMS and this is how i’ve input them into the field.

[dominic]

Hey @nigeltangg

Glad you could make it work!

For the text of your select box, you are correctly removing the price [+X.XX] part of the option for option.value but not for option.text. You could reuse the same logic for both and it would work as you want.

const valueWithoutPrice = c.includes('[') ? c.substring(0, c.indexOf('[')) : c;
option.value = valueWithoutPrice;
option.text = valueWithoutPrice;

For Oak (L)[+60.00], This would output the following HTML:
<option value="Oak (L)">Oak (L)</option>

[nigeltangg]

You’re an absolute lifesaver! Thank you so much Dominic!