Custom type "readonly" not working when custom options are present

When I add a product to cart the “readonly” is not applied and a dropdown with options appears.

  1. How can I only show the selected option on cart page?
  2. How to show custom values on checkout under each product?(currently none is showing)
<button class="snipcart-add-item "
               data-item-id="arte"
               data-item-price="4500.00"
               data-item-name="Arte"
               data-item-custom1-name="Stone"
               data-item-custom1-type="readonly"
               data-item-custom1-options="Carrara|Volakas[+700.00]|Arabescato[+900.00]"
               :data-item-custom1-value="stoneChoice"
               >Add to cart</button>

Hi @Kian, thanks for reaching out!

I’m not sure if I follow the use case. If the option is read only, why are there options? You want to set the option programmatically? We might need some customization depending on what you need.

Is it possible to give some more details?

Thanks :slight_smile:

Hi @nelitow

Based on the docs custom type readonly should show only custom value on the cart.
I pass this value using v-model in Vue without any issues and the reason I need options is that I need to add price/extras (like this: Volakas[+700]) on some options.
Also, I made the example as simple as possible while in real the products have 5 custom fields which will end up with 5 unnecessary dropdowns on the cart :sweat_smile:

Hi @Kian

At the moment, options are supported only for the dropdown type. In fact, if options are present, the type is automatically set as a dropdown. But I raised this question internally and opened a feature request so that we can add price modifiers to a readonly, checkbox or hidden field.

This feature is already underway, it should be available soon in a future release!

Let me know if you have further questions.

Thanks :slight_smile:

Thank you. Looking forward to it!

1 Like