arahimawan wrote: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
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'