The name of this series is coding an eCommerce project website with just 1 product using OOP in JavaScript. I divide this project into a couple of articles where I will try to describe the whole journey from the beginning to an end. In this first article I would like to introduce the project itself and also the features I plan to implement.

What I would like to build?

The goal of this mini-project is to try to come up with an e-shop with one product where the customer can customize the order. Before I dive into details I would like to mention that the project is related to my father’s job. He is hand cutting the crystal glass. We come up with the first e-shop like roughly 4-5 years ago but we decided to go with ready-made solution.

After couple of years of experience with customers I decided to make the idea of one product e-shop real and it would help me to understand Object-oriented programming better and also bring a new project to my portfolio.

From the wide range of products available, I chose the most successful Whisky set which consists of a bottle and glasses. Look at the picture of a product down below.

Coding eCommerce project: This is one of the versions of the Whisky set that could be created. The pattern which is hand cut into crystal glass is called Ares.

What should the one-product e-shop look like?

I decided to create multiple pages:

  1. Home page with the photo of the product, name of the product, and button that will lead to the product detail page. In the upper right corner will be an icon of the cart and in the upper left corner the logo of the company.
  2. Product detail page will consist of 2 columns and contain the photo of the product, the name of the product, and a description of the product. At the bottom of the description, it will be possible to choose from different possibilities/variants that could be ordered by the customer.
  3. The customer will have an option to choose whether he wants the bottle in the set, the glasses in the set, which pattern would he prefer, and also whether he would like to put some customization – letters of the name on the bottle.
  4. When choosing the pattern of the set the photos displayed will change according to what he chooses.
  5. The price will be also updating its value during configuration
  6. After he chooses and customizes 1 set he can add it to the cart and then add another set with a different or the same configuration. After adding to the cart there will be a short product detail page overlay that will announce that the product was added to the cart and there will be 2 buttons available: He could continue shopping and choose another configuration of the set or continue to cart.
  7. When clicking on Add to cart button an object with all the particular product specifications is created, it will save the product into the cart object and create an element to display it in the cart
  8. The cart page will display all the products within the cart and customers can update the particular parts of the product or simply delete the product from the cart. All of this will could have an impact on the price and it will change the price if applicable.
  9. After clicking on the button Continue to shipping and payment in the cart, the whole cart content will save to the object Order
  10. On the page devoted to the Shipping and payment option, I need to create a couple of Shipping options also with the implementation of one API. The payment options will be without the card payment, but I will try to accept Bitcoin. Shipping and Payment options will also be saved to the object order. *
  11. The next page will contain the HTML form for shipping and invoice addresses. All this info is going to the Order object after clicking on the Order with the obligation of payment. *
  12. After clicking on the button Order with the obligation of payment 2 emails will be sent – to an e-shop and to the customer. *
  13. The last website is the summary of the whole order *

    * Retrospective from future: in the points number 10,11,12,13 I wanted to build something that I did not have knowledge about and that is why I did not fulfill my goal from the beginning 🙂

What are the next steps?

I have already started with the coding of the home page and product page. I have already gone through OOP in the JavaScript course on Udemy and right now I will be trying to implement it.

so that was the first part of the Coding eCommerce project. In the next article, I will try to share my first experience with this project.

If you would be interested in my father’s work you can check his Instagram or Facebook or write to info@pechocrystal.sk

Stay tuned!

Good luck and thanks for reading

Follow me on socials or write me an email or message on Linkedin

Sorry for any mistakes. If you find any please let me know. You can find my contact info down below.

Photo used in this article is from Pecho Crystal

Photo on cover by Carlos Muza on Unsplash

Tags: