Shop Product design

[sidraghavan]

I am looking to create an e-commerce site which looks like the attached wireframe. Can any one help me how I can create this page?

[odeda]

Hi,

Couple of questions:

1. Will all the products in your store have the above design with the exact same options?
2. I assume the selection of the various options would affect the final price?
3. Would you require inventory tracking for each option?
4. What should clicking on “change design” do? Select from a preset of designs (like all the other options)?
5. The “buy 3 for 1500”, to the time being, product options can affect the price, but quantity cannot. You can however use coupons if that works for you.

Thanks,
Oded

[sidraghavan]

Thank you for replying, sure I can explain the above questions.

1. The above picture is a wireframe but I would like the UX functionality to be the same as above.
2. Yes the final price should reflect after all the features are selected by the customer.
3. Inventory tracking is something I would not add at this point. But would be added on a much later date.
4. The change design should open a selection of cover designs for the customer to choose from. Which effects the price as well.
5. The “Buy 3 for 1500” is just there was information basis. But like you recommended I would like coupon codes to give my customers a better deal.

Also,
The Bottom part of the page is where the customer can select the various features, after which two more forms would appear as provided in the attached document

[odeda]

Hi,

Let’s start with the product page itself.
Generally speaking once you build that UI using editor components you will need to do 3 things:

1. Define the product in store manager with all the product options (ruling, binding type) and set the surcharge for each option.
2. Once the user selected all the options, you will need to call https://www.wix.com/code/reference/wix-stores-backend.html#getProductOptionsAvailability in order to get the price given all the options selected (as well as the inventory once you need it)
3. You can then use CartIcon - Velo API Reference - Wix.com and add the product the the cart, with the options.

There are however some limitations with the above and the other stuff you are trying to do:

1. A product can have up to 6 options, and each option up to 30 choices. You seem to need more then 6. There are 2 ways to get around that. If some of the selections do not affect the price, you don’t have to define them as product options and then you can set them on customTextField when you add the product to the cart (and that’s unlimited). If that doesn’t work for you, you can combine 2 options into 1 (e.g have a cover+size option, which choices are Soft+A4, Soft+A5 …), notice that I’m only talking about how you define things in store manager, you do not have to change the UI
2. You can’t really have a “place order” button, it has to be an “add to cart” button and the user will still have to go to the cart like it does today and then click on checkout.
3. Order preview isn’t really doable as there’s no API to get the shopping cart. Also, given the fact that the buyer goes through the cart page anyway where he will see this exact info you might not want to have it
4. Billing info page also isn’t doable, obviously you can create the page, but there’s no API to set the billing info on the cart, this is done during the checkout process.
5. Coupon codes can be entered on the cart page, and only there

Please let me know if you have further questions,
Oded

[Shan]

For Added Functionality, You can create an entire E-Com Website with Wix Code though.

Your Products Page which supports Multi Currency Products

An Options Selection Stage before adding an Item to a Cart where you can apply Item Specific Discounts via Coupon Codes

A Full Fledged Mini Cart where you can Delete an Item from your Cart

Finally Your Main Cart where you can enter Discount Codes applicable on the Total Amount and then decide which payment API to redirect your user to

Entirely made with Wix Code