Frontend

Model of page of the E-commerce Site

For user interaction model we have selected a model of five steps to guide the final customer is guided into adjusting the initial parameters of the project. The example is taken from Personaliza tu pared. This is explained here:

  1. Background image selection
  2. A set of images is offered (scenes) that can be stored in the E-Commerce Site, or be reachable in a third party provider, for example an image data bank like Fotolia, or Big Stock Photo.

  3. Object image selection
  4. A set of images and vector objects are presented for the foreground. Most preferably in PNG interlaced format. They can also be stored in the own E-Commerce Site, or come from a third party provider like before.

  5. Sign In or Sign Up of final users
  6. In this step we ask the login of existing users or allow registration of new ones. All the data are kept in the database and also through this process they stay within the session variables.

  7. Selection of format and wall sizes
  8. Next we select some of the formats available for the final product (wallcovering or canvas poster). This value is also passed to the designer component by a GET call. Likewise we introduce the sizes of the wall, so that we pass them through a GET call as well for designer to create the custom project with these values.

  9. Entering the designer simulator
  10. In this moment we have all the values needed to call the simulator. Let’s prepare a button with the following URL:

    https://designer.hpwallart.com/e-commerce-site?web_link=true&sku=WA_WC&size=400x300&content_context_token=c61d62c1f3acb10e076df16b30a7658e

    Siendo: