To help us persist the products in the basket throughout the app, we are going to be storing the user's selected products in the Vuex store. This will be in the form of an array of objects. Each object will contain several key pieces of information that will allow us to display the products in the basket without having to query the Vuex store each time. It also allows us to store details about the current state of the product page—remembering the image updates when a variant is selected.
The details we're going to store for each product added to the basket are as follows:
- Product title
- Product handle, so we can link back to the product
- Selected variation title (as it appears in the select box)
- Currently selected image, so we can show an appropriate image in the Checkout
- Variation details, this contains price and weight along...
