vue j.s.

Product page Vue.js app

Product Page

This is a simple application I built in “Vue.js” to demonstrate how some of the key functionality of this JavaScript framework works. Below I have highlighted some of the key functions in this simple product page app.

Variants

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.

Product reviews

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.


See the Pen Vue.js Product app (vueMastery.com) by Armani Appolon (@Armania) on CodePen.


Conclusion

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.

Written by 

The Armani.

Featured Posts

Leave a Reply