Is it possible to use images as variant selectors when choosing products?

Question

I am fleshing out all the main parts of my commerce site and going through all the requirements needed.

I have installed the Craft Commerce plugin and set it up with required shipping, delivery, etc.

One thing I am trying to fathom and work out now is the ability to customise the variant selector. I want to use images from the fields in the product editor so you can select the variant colour/material/size as a different dropdown so we may have all three in one product.

When they are selected it would:

1. Change the image to the selected one
2. Also change price
3. Remember when added to cart that the selected items are the correct ones for the basket

Can this be done in Craft Commerce?

Answer 1

I am sure you've worked this out by now, but in general terms, how you build this is entirely up to you, in front end terms. You can make it as fancy or as simple as you like, in terms of the UI. From simple checkboxes to some totally flash JS based UI, it's entirely up to you, as long as the form then submits the right values. You can display any fields you wish (including images and prices) - from both the product and the specific variant(s) you're showing.

The only thing Commerce actually cares about is the purchasableId and quantity (qty) that you pass when you POST the updateCart form.

Again, when it comes to display of the basket, you will get a lineItem with the chosen purchasableId and from there can get back to the product and all its fields easily enough. But how you choose to actually display this is again entirely up to you - you can, for example, create a basket that allows the customer to change the variant on the fly (you'd perhaps send an ajax remove item followed by an ajax add of the newly chosen purchasableId and qty).