создаю телегу товаров

composables/useCart.ts

@@ -1,19 +1,30 @@
+import { useStorage } from '@vueuse/core'
+
+export interface ICartItem {
+  variation_id: number
+}
+
+export interface ICart {
+  line_items: ICartItem[]
+}
+
 export const useCart = () => {
-  const addToCart = (item: any) => {
-    if (process.client) {
-      localStorage.setItem('cart', JSON.stringify(item))
-    }
+  const cart = useStorage<ICart>('cart', { line_items: [] })
+
+  const cartAddItem = (item: ICartItem) => {
+    cart.value.line_items.push(item)
   }
 
-  const getCart = () => {
-    if (process.client) {
-      return localStorage.getItem('cart')
-    }
-    return null
+  const cartRemoveItem = (item: ICartItem) => {
+    cart?.value?.line_items
+      ?.splice(cart?.value?.line_items
+        ?.findIndex((cartItem: ICartItem) =>
+          cartItem?.variation_id === item?.variation_id), 1)
   }
 
   return {
-    addToCart,
-    getCart,
+    cart,
+    cartAddItem,
+    cartRemoveItem,
   }
 }

composables/useProduct.ts

@@ -1,8 +1,8 @@
 import { useGetProductsDetail, useGetProductsVariationsList } from '~/api/queries'
 
-export const useProduct = () => {
+export const useProduct = (variantId) => {
   const route = useRoute()
-  const currentId = ref<number>(route.params.id)
+  const currentId = ref<number>(route.params.id ?? variantId)
 
   const { data: productsData } = useGetProductsDetail(currentId)
   const { data: productsVariationsData } = useGetProductsVariationsList(currentId)
@@ -24,6 +24,10 @@ export const useProduct = () => {
   const materials = computed(() => getAttribute(productsData?.value?.attributes, 'material')?.options)
   const sizes = computed(() => getAttribute(productsData?.value?.attributes, 'size')?.options)
 
+  const color = computed(() => getAttribute(productsData?.value?.attributes, 'color')?.option)
+  const material = computed(() => getAttribute(productsData?.value?.attributes, 'material')?.option)
+  const size = computed(() => getAttribute(productsData?.value?.attributes, 'size')?.option)
+
   function getIdentifier(productVariant) {
     const color = getAttribute(productVariant?.attributes, 'color')?.option
     const material = getAttribute(productVariant?.attributes, 'material')?.option
@@ -60,6 +64,10 @@ export const useProduct = () => {
     materials,
     sizes,
 
+    color,
+    material,
+    size,
+
     variations,
 
     getAttribute,