Buy Product Wizard

Hello,

I am working on a NOP project where I have to add custom product attributes and allow the product customization in a step-by-step wizard before it can be added to the shopping cart.  The wizard I need to develop is very similar to the "Customize Computer" wizard on DELL or HP web sites.

I know about product attribute that I can add to the product variants, select the UI controls that should render but my requirement is to do it in a custom user interface thats implemented in a step-by-step wizard rather than a single screen.

Can someone out there tell me what is the best way to do such a task in NOP?

Thanks in advance.

-awan

arahimawan wrote:

Other than showing the attributes in a wizard, do you need to logic to determine the next step? For example, if I select attribute A in step 1, I should only be able to select attribute C, E on step two; or if I select attribute B in step 1 then I will skip step 2 to step 3.

IMHO, the best way to do this is by using a widget plugin, but with it might be a tricky task if you want to make this work across products. I don't think nopCommerce offer this kind of granularity, and you might end up hacking the source code.

For example, defining 'which attributes should be rendered at which step' is beyond what the plugin architecture of nopCommerce can achieve. The best way I can think of now is to write a really-complicated widget plugin, that:

Allows the admin to
- Pull in the product list
- Select which product to add the widget *
- Pull the corresponding attributes of the particular product
- Arrange the product attributes in steps (basically it's an editor for the wizard)
- Define the logic for each step

And when the widget is displayed in the front end
- Hide the original product attribute UI [can be done from the theme by mean of the Product Template, or just use CSS]
- Display the corresponding widget (this can be tricky, as you have to somehow make the Widget aware of the product the page is currently showing so that you can display the correct Widget, this can be done by examining the route)
- Use AJAX to walk through the widget
- Eventually submitting the form values to the server when the customer click 'add to cart'

Lam Woon Cherk,

Thanks you so much for the reply.  Current requirement is not that complex and all attributes will stay the same for all products on their corresponding step.  Will this simply the implementation any how?

One straight forward way I could think of was to open the source code of the home and product pages and modify it according to my needs but that didoes seem to be a clean solution which will break when a future upgrade of NOP is released and I need to upgrade the store.  

So it would be great if it could be implemented as a plugin but I am not sure how to do that.  How my plugin will integrate and hide/replace original functionality?  Can you please provide my some guide lines on this?

Thanks, -Awan.

arahimawan wrote:

If all you need is just to show the product attributes in a series of steps, and there is no complex logic as of which steps leads to which on what condition, then I think there are two ways of doing it.

- Create a widget where it is able to pull the product attributes from database, and display it in a series of steps in JavaScript. The original product attributes will be hidden either by removing it from the product template or hide using CSS
- Create a widget that will inject some JavaScript to somehow group the product attributes in different steps, there is no need to pull from the database, the JavaScript will just group reorganize the product attributes and present it in a Wizard way

You can read more about plugin development in this page: https://www.nopcommerce.com/documentation.aspx under Developer Documentation.

wooncherk wrote:
Hi Lam Woon Cherck:
Here are some ideas to add some logic to the attributes.

eadameg wrote:

Hi,

I have voted for it. :P