This product has 3 variants. Each variant has its own properties that include color, Quantity, Sale, and shipping price. If you click on any of the color circles the active product variant changes to that variant id. You will notice the product image will change, the shipping price, the “inStock” or “out of stock” text will change. There is also a “on sale” message that will display if the item is on sale.
Add product to cart
When you click the “add to cart” button the active variant will be added to the cart and you will notice the cart amount number, located in upper right corner of the page, will increase. If you click on the remove from cart button all the items of the “active variant will be removed from the car.
Below the “add to cart” button you will notice two tabs, “reviews” and “write a review”. Hover over either tab and the content below will change. By default, the “write a review” is the active tab.
Under the review tab you will notice that a message displayed stating “Sorry, there are no reviews yet. :-(“. Use the “write a review” tab to submit a review. After submitting a review this message will disappear and any submitted review will display.
This application is in its first edition. There are many improvements I plan to make to the functionality and the design of this Vuejs app. These upgrades will include…
- Update product images
- Add a list of of items in cart
- Display different prices for each variant
- Add multiple products
Return back soon to see updates to this application.