feat: add to cart btn functionality

[AkashPaloju]

Overview

1. This PR fixes or fixes part of #90 .
2. This PR does the following: makes the 'Add to Cart' and 'Remove from cart(Cross X)',increment (+) and decrement(-) buttons functional. The Cart page now displays the items added to the cart by the user by retrieving data from Vuex store. The Vuex store is persisted across browser refreshes/sessions as it is saved in the local storage of the browser. The User is notified about adding/removing/increments/decrements of products through informative toast notifications.

Essential Checklist

• [x] The PR title starts with "Fix #bugnum: ", followed by a short, clear summary of the changes. (If this PR fixes part of an issue, prefix the title with "Fix part of #bugnum: ...".)
• [x] "Allow edits from maintainers" is checked. (See here for instructions on how to enable it.)
• [x] The PR is made from a branch that's not called "main/master".

Proof that changes are correct

https://github.com/bsoc-bitbyte/GetIt/assets/119884665/9c93d256-3d4d-41b7-b822-180a6f707d94

this below preview is for "storing on local storage"

https://github.com/bsoc-bitbyte/GetIt/assets/119884665/ea9cf6f6-365f-4816-bb0b-22df73d32260

PR Pointers

@tushitshukla03 PTAL

[netlify[bot]]

✅ Deploy Preview for merch-site ready!

Name	Link
🔨 Latest commit	5de23986ca354da31dc49edd4d2753943252a41b
🔍 Latest deploy log	https://app.netlify.com/sites/merch-site/deploys/64c4e55c74d8f90008610d3a
😎 Deploy Preview	https://deploy-preview-98--merch-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[AkashPaloju]

@AkashPaloju + - in the cart section is working but not refreshing the value and don't show total price here for product, just the item price and quantity don't multiply. In mobile view the content is going out of box in cart and make heading aligned. Fix the UI and rest is good

https://github.com/bsoc-bitbyte/GetIt/assets/119884665/3334ea3c-e376-4b59-b1ff-49096f80ad5e

@tushitshukla03 I opened above netlify deploy preview, I observed that + - is working fine. May be it is taking some time to load, if it is not working for the first time, then refreshing and trying + - may work fine I will do the rest of the things asap

[AkashPaloju]

https://github.com/bsoc-bitbyte/GetIt/assets/119884665/10bf6ab2-60be-4127-9599-ff43190644e2

@tushitshukla03 I have made the required changes

[AkashPaloju]

@tushitshukla03 It is working in the latest deployment also

https://github.com/bsoc-bitbyte/GetIt/assets/119884665/f90f6cb8-4541-42a0-b921-075126601b59

[tushitshukla03]

@AkashPaloju when it is added for the first time +- is not working only after refreshing it start working. And include size also in cart and if we add product of different size or colour then add that as a new entry instead of increasing quantity and remove the limit of 5. Image is still getting cut and in mobile view card is overflowing.

[AkashPaloju]

https://github.com/bsoc-bitbyte/GetIt/assets/119884665/aa4b72f5-4e7b-419c-9ed3-7ed4457ac88e above preview includes Firefox mobileviews

https://github.com/bsoc-bitbyte/GetIt/assets/119884665/ee4832fb-a1ec-4be0-8645-4fbb2ad22713 above preview includes Chrome mobileviews

@tushitshukla03 made the required changes again

[AkashPaloju]

@tushitshukla03 PTAL

[AkashPaloju]

Everything looks good, but the user can access the checkout page even if the cart is empty. So, could you do something, like ensuring that the user adds a product first before being able to proceed to checkout?

@prernadabi23 ok, i will do the required thing

[AkashPaloju]

@prernadabi23 PTAL the latest commit preview:

https://github.com/bsoc-bitbyte/GetIt/assets/119884665/07cc0a12-44b4-4079-83a3-65dd11d35aab

[AkashPaloju]

@prernadabi23 I rebased it,