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

api/endpoints/orders/postOrdersCreate.ts

@@ -1,4 +1,4 @@
 import api from '~/api/instance'
 
-export const postOrdersCreate = async (parent_id: number | undefined) =>
-  await api.wc.v3OrdersCreate({ parent_id })
+export const postOrdersCreate = async (line_items: object[]) =>
+  await api.wc.v3OrdersCreate({ line_items })

api/mutations/usePostOrdersCreate.ts

@@ -7,12 +7,12 @@ export const usePostOrdersCreate = () => {
   const queryClient = useQueryClient()
 
   return useMutation({
-    mutationFn: (params: { parent_id: MaybeRef<number | undefined> }) =>
-      postOrdersCreate(unref(params.parent_id)),
+    mutationFn: (params: { line_items: MaybeRef<object[]> }) =>
+      postOrdersCreate(unref(params.line_items)),
 
     onSuccess: (data, variables) => {
       queryClient.invalidateQueries({
-        queryKey: ['post-orders-create', unref(variables.parent_id)],
+        queryKey: ['post-orders-create', unref(variables.line_items)],
       })
     },
   })

components/ProductDescription.vue

@@ -39,9 +39,13 @@
       class="justify-content-center"
       label="Добавить в корзину"
       size="xl"
-      @click="addToCartBtn"
+      @click="addToCartBtn()"
     />
 
+    currentSize
+    <pre>
+    {{ currentSize }}
+    </pre>
     <UAccordion :items="items" />
   </div>
 </template>
@@ -51,7 +55,7 @@ import ProductVariations from '~/components/ProductVariations.vue'
 import { useCurrentProduct, useProduct } from '~/composables'
 
 const { t } = useI18n()
-const { addToCart } = useCart()
+const { cartAddItem } = useCart()
 
 const { productsData, colors, getAttribute } = useProduct()
 const { currentVariant, currentColor, currentMaterial } = useCurrentProduct()
@@ -87,7 +91,7 @@ const items = computed(() => [
 ])
 
 function addToCartBtn() {
-  addToCart(currentSize?.value?.id)
+  cartAddItem({ variation_id: currentSize?.value?.id })
 }
 </script>
 

components/cart/CartItem.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="cart-item">
+    <NuxtLink :to="`/product/${productsData?.parent_id}`">
+      <img
+        class="cart-item__image"
+        :src="productsData?.images[0]?.src"
+        alt="cart?.image"
+      >
+    </NuxtLink>
+
+    <pre>
+
+    {{ variations }}
+    </pre>
+    <div>
+      {{ productsData?.name }}
+
+      <div class="d-flex align-items-center">
+        {{ productsData?.price }}
+        <Icon name="ph:currency-rub" />
+      </div>
+
+      <div class="cart-item__attributes">
+        {{ t(`colors.${color}`) }}
+        {{ t(`materials.${material}`) }}
+        {{ `размер ${size}` }}
+      </div>
+
+      <div>
+        <UButton
+          icon="i-lucide-trash"
+          @click="deleteItem(cartItem)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  cartItem: {
+    type: String,
+    required: true,
+  },
+})
+
+const { t } = useI18n()
+const { cartRemoveItem } = useCart()
+const { productsData, color, material, size } = useProduct(props?.cartItem?.variation_id)
+
+const deleteItem = (item) => {
+  cartRemoveItem({ variation_id: item?.variation_id })
+}
+</script>
+
+<style lang="scss">
+.cart-item {
+  max-width: 600px;
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+
+  &__image {
+    width: 120px;
+    cursor: pointer;
+  }
+
+  &__attributes {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+</style>

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,

pages/cart.vue

@@ -1,9 +1,16 @@
 <template>
   <div class="cart">
-    <div v-if="cartProducts">
-      {{ cartProducts }}
+    <div class="cart__items">
+      <div
+        v-for="cartItem in cart?.line_items"
+        :key="cartItem.variation_id"
+      >
+        <CartItem :cart-item="cartItem" />
+      </div>
     </div>
+  </div>
 
+  <div>
     <UButton @click="createOrder">
       Оформить заказ
     </UButton>
@@ -13,15 +20,23 @@
 <script setup lang="ts">
 import { usePostOrdersCreate } from '~/api/mutations'
 
-const { getCart } = useCart()
-const cartProducts = getCart()
+const { cart } = useCart()
 const { mutateAsync } = usePostOrdersCreate()
 
 const createOrder = () => {
-  mutateAsync(cartProducts)
+  mutateAsync(cart)
 }
 </script>
 
 <style lang="scss">
+.cart {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 
+  &__items {
+    display: flex;
+    flex-direction: column;
+  }
+}
 </style>