This is part of a much larger feature of implementing an ecommerce shop and then managing orders for each garden in both Users and Admin. This is the first ticket of the User's Shop front. Up next will be the cart, and checkout!
Checkout the Figma wireframes so you can see exactly what you are building. If you have any questions after reading the ticket please make sure you have asked for questions before starting!!
We need to make the shop component and files in the following folder.
Shop.jsx will render when the user hits /gardens/:id/shop
We will only have two items to begin with - a large seasonal box and a small seasonal box. However the back end will simultaneously be being built so this will need to be dummied.
[ ] Date contract and API route: '/api/v1/shop/:id'
[{ id: 1,
productId: 2
name: 'large veggie box',
description: 'a large box filled with fresh seasonal produce grown at your local garden',
price: 29,
image: 'www.linktowhereeverthisimageis.com',
stock: 15,
}]
[ ] Write an API which consumes (using consume.js) the get route for your shop stock. This will be put in a new file called shopHelper.js. Have a look at the other helperfunctions in other views to get an idea of how to use consume(). NOTE: you will need to use Promise.Resolve to fake a data response while you wait for the backend to complete the routes.
[ ] Once you have gotten some dummy data you can use, begin to build out the front end. You may need to create subcomponents for this. They will live in the folder client/subcomponents. The shop page should show:
[ ] Purchasable small and large food boxes with:
[ ] Title, photo and price.
[ ] Quantity number field and increase/decrease button
[ ] Bag / Cart button with price indicator which adds the products to local state
The functionality above will store the necessary product data into local state which will then be passed into the cart (issue ##). Use Sweet as Organics as a reference except this time we will not be using redux! (its actually unnecessary for what we are doing)
[ ] Style the shop component to match the figma as much as possible
This is part of a much larger feature of implementing an ecommerce shop and then managing orders for each garden in both Users and Admin. This is the first ticket of the User's Shop front. Up next will be the cart, and checkout!
Checkout the Figma wireframes so you can see exactly what you are building. If you have any questions after reading the ticket please make sure you have asked for questions before starting!!
We need to make the shop component and files in the following folder.
Shop.jsx will render when the user hits /gardens/:id/shop
We will only have two items to begin with - a large seasonal box and a small seasonal box. However the back end will simultaneously be being built so this will need to be dummied.
[ ] Date contract and API route: '/api/v1/shop/:id'
[ ] Write an API which consumes (using consume.js) the get route for your shop stock. This will be put in a new file called shopHelper.js. Have a look at the other helperfunctions in other views to get an idea of how to use consume(). NOTE: you will need to use Promise.Resolve to fake a data response while you wait for the backend to complete the routes.
[ ] Once you have gotten some dummy data you can use, begin to build out the front end. You may need to create subcomponents for this. They will live in the folder client/subcomponents. The shop page should show:
The functionality above will store the necessary product data into local state which will then be passed into the cart (issue ##). Use Sweet as Organics as a reference except this time we will not be using redux! (its actually unnecessary for what we are doing)