product-card

api/endpoints/orders/index.ts

@@ -0,0 +1 @@
+export * from './postOrdersCreate'

api/endpoints/orders/postOrdersCreate.ts

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

api/mutations/index.ts

@@ -0,0 +1 @@
+export * from './usePostOrdersCreate'

api/mutations/usePostOrdersCreate.ts

@@ -0,0 +1,19 @@
+import type { MaybeRef } from 'vue'
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
+import { unref } from 'vue'
+import { postOrdersCreate } from '~/api/endpoints/orders'
+
+export const usePostOrdersCreate = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (params: { parent_id: MaybeRef<number | undefined> }) =>
+      postOrdersCreate(unref(params.parent_id)),
+
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ['post-orders-create', unref(variables.parent_id)],
+      })
+    },
+  })
+}

assets/scss/utils.scss

@@ -141,4 +141,8 @@ $indents: 0 2 4 5 6 8 10 12 15 16 18 20 24 25 28 30 32 36 40 48 50 52 60 64;
 
 .text-align-center  { text-align: center !important; }
 .text-align-left  { text-align: left !important; }
-.text-align-right  { text-align: right !important; }
+.text-align-right  { text-align: right !important; }
+
+.cursor-pointer { cursor: pointer !important; }
+.cursor-not-allowed { cursor: not-allowed !important; }
+.cursor-progress { cursor: progress !important; }

components/ProductDescription.vue

@@ -34,7 +34,13 @@
       </div>
     </div>
 
-    <UButton class="justify-content-center" label="Добавить в корзину" size="xl" />
+    <UButton
+      :disabled="!currentSize"
+      class="justify-content-center"
+      label="Добавить в корзину"
+      size="xl"
+      @click="addToCartBtn"
+    />
 
     <UAccordion :items="items" />
   </div>
@@ -45,11 +51,12 @@ import ProductVariations from '~/components/ProductVariations.vue'
 import { useCurrentProduct, useProduct } from '~/composables'
 
 const { t } = useI18n()
+const { addToCart } = useCart()
 
 const { productsData, colors, getAttribute } = useProduct()
 const { currentVariant, currentColor, currentMaterial } = useCurrentProduct()
 
-const currentSize = ref(0)
+const currentSize = ref(undefined)
 
 const items = computed(() => [
   {
@@ -78,6 +85,10 @@ const items = computed(() => [
     content: 'Возврат в течение 14 дней\nОбмен размера в течение 7 дней',
   },
 ])
+
+function addToCartBtn() {
+  addToCart(currentSize?.value?.id)
+}
 </script>
 
 <style lang="scss">

composables/index.ts

@@ -1,3 +1,4 @@
+export * from './useCart'
 export * from './useCurrentProduct'
 export * from './useProduct'
 export * from './useProductsList'

composables/useCart.ts

@@ -0,0 +1,19 @@
+export const useCart = () => {
+  const addToCart = (item: any) => {
+    if (process.client) {
+      localStorage.setItem('cart', JSON.stringify(item))
+    }
+  }
+
+  const getCart = () => {
+    if (process.client) {
+      return localStorage.getItem('cart')
+    }
+    return null
+  }
+
+  return {
+    addToCart,
+    getCart,
+  }
+}

layouts/default.vue

@@ -2,12 +2,20 @@
   <div class="layout">
     <header class="header">
       <div class="header__container">
+        <Icon name="lucide:menu" class="cursor-pointer ml20 w-6 h-6 text-gray-700" />
+
         <h1
           class="header__headline"
           @click="router.push(`/`)"
         >
           PAXTON
         </h1>
+
+        <Icon
+          name="lucide:shopping-cart"
+          class="cursor-pointer mr20 w-6 h-6 text-gray-700"
+          @click="router.push(`/cart`)"
+        />
       </div>
     </header>
 
@@ -57,7 +65,7 @@ const router = useRouter()
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     text-align: center;
   }
 

pages/cart.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="cart">
+    <div v-if="cartProducts">
+      {{ cartProducts }}
+    </div>
+
+    <UButton @click="createOrder">
+      Оформить заказ
+    </UButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { usePostOrdersCreate } from '~/api/mutations'
+
+const { getCart } = useCart()
+const cartProducts = getCart()
+const { mutateAsync } = usePostOrdersCreate()
+
+const createOrder = () => {
+  mutateAsync(cartProducts)
+}
+</script>
+
+<style lang="scss">
+
+</style>