Variant selection product page

[ghost]

Hello,

Nice plugin, snipcart seems very interesting and your implementation seems to be quite flexible to create a nice shop with it.

However, I wonder if it's possible to add variant selection of products directly on the product page instead of the cart.

For example, I don't think it's relevant to put variant if you sell clothes for example, the customer whant to be able to choose the color or the size before adding the product to the cart.

Thanks and continue that great work.

Regards,

Alex

[tobias-kuendig]

It is possible to add the custom fields directly to your website and update the plugin via JS onChange handlers.

Have a look at this blog post: https://snipcart.com/blog/4-common-configurations-checkout The first section shows how to do that manually. It would be possible to generate these fields via a component. Currently there is no support for it though.

[tekjava]

@tobias-kuendig , we could put the product component on the product page and then create a partial with a modified version of the product component code. The question I have is, how can we reference offline_snipcartshop_product_custom_fields and offline_snipcartshop_product_custom_field_options to include those in the modified button code? Just like in the article you referenced above. Maybe something like, if product custom field is true then show options, else do nothing. Thank you for the work you've put into the Snipcart plugin for OctoberCMS! Please see more detail question here: https://codepen.io/tekjava/pen/NgWXJj

[tobias-kuendig]

Check out version 1.0.18 (currently only available via edge updates). There is a working implementation of the custom fields on the product page. I'm planning to add a quantity input too before releasing this update.

(See https://github.com/OFFLINE-GmbH/oc-snipcartshop-plugin/commit/eecd845b9ba6914c56a2dd7362706f0c939f250b for changes)

[ghost]

Hello,

Can it be tested on your demo store ? I tried to log in the backend but I don't see any change.

Thanks

[tobias-kuendig]

You can now: https://snipcart.offline.swiss/en/product/opensuse

[ghost]

Good thanks, some bug report and modification suggestion :

• There are small bugs when you add several variant of the same product to the cart. In your example, if I add a standard support, and then, an extended one, I have 2 standard support in the cart. It works if I refresh the page after each action.

• It would be great to alter the price field dynamically depending on the chosen option. Actually you just see the price addition in the dropdown, but once selected, if it alter the price, it would be great to change the big price field.

But it's quite nice already ! Thanks for the update.

[tobias-kuendig]

There are small bugs when you add several variant of the same product to the cart.

This bug is on the side of snipcart. My plugin only adds the appropriate data attributes to the checkout button. When adding the product the first time the correct option is selected. If you add the product a second time without reloading the whole page the wrong option may be preselected.

It would be great to alter the price field dynamically depending on the chosen option.

This is implemented in version 1.0.23.

Thank you for your inputs!