Challenge: Implementing Carting System with Snipcart

In our e-commerce application, we have succeeded in displaying all our products with React and fetching them from Hygraph. Now, we want to implement a cart management system so users can add products to the cart and checkout. On the SingleProduct page and CategoryPage, we display products, and these products have the "Add to cart" button. For this e-commerce application to work as desired, users must be able to add products to the cart from any page where products are listed.

With Snipcart, it is easy to implement carting by adding a class to the button markup and then using some attributes to get values from the button. We then pass these values on to Snipcart to set up our checkout page and get statistics of each product, sales, and so on.

Define the products with Snipcart

snipcart-add-item to the "Add to cart" button and then add the following attributes with their respective values:

• data-item-id

• data-item-name

• data-item-price

• data-item-image

Challenge 1: Product definition for SingleProduct page