From bb195777c31b571c0351207edc543e14fd60758e Mon Sep 17 00:00:00 2001
From: alsaze <veselov@alfabit.com>
Date: Wed, 1 Oct 2025 16:35:25 +0300
Subject: [PATCH] =?UTF-8?q?=D1=81=D0=BE=D0=B7=D0=B4=D0=B0=D1=8E=20=D1=82?=
 =?UTF-8?q?=D0=B5=D0=BB=D0=B5=D0=B3=D1=83=20=D1=82=D0=BE=D0=B2=D0=B0=D1=80?=
 =?UTF-8?q?=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/Api.ts                        |  2 +-
 components/ProductDescription.vue |  4 ---
 components/cart/CartItem.vue      | 11 +++-----
 layouts/default.vue               | 43 +++++++++++++++++++++++++------
 pages/cart.vue                    | 36 +++++++++++++++++++++-----
 5 files changed, 69 insertions(+), 27 deletions(-)

diff --git a/api/Api.ts b/api/Api.ts
index b5c7b06..2051d0d 100644
--- a/api/Api.ts
+++ b/api/Api.ts
@@ -5283,7 +5283,7 @@ export class Api<
         method: "POST",
         body: data,
         secure: true,
-        type: ContentType.UrlEncoded,
+        type: ContentType.Json,
         ...params,
       }),
 
diff --git a/components/ProductDescription.vue b/components/ProductDescription.vue
index 05476cd..3ef1df4 100644
--- a/components/ProductDescription.vue
+++ b/components/ProductDescription.vue
@@ -42,10 +42,6 @@
       @click="addToCartBtn()"
     />
 
-    currentSize
-    <pre>
-    {{ currentSize }}
-    </pre>
     <UAccordion :items="items" />
   </div>
 </template>
diff --git a/components/cart/CartItem.vue b/components/cart/CartItem.vue
index 8b33b92..a29b415 100644
--- a/components/cart/CartItem.vue
+++ b/components/cart/CartItem.vue
@@ -8,10 +8,6 @@
       >
     </NuxtLink>
 
-    <pre>
-
-    {{ variations }}
-    </pre>
     <div>
       {{ productsData?.name }}
 
@@ -21,9 +17,8 @@
       </div>
 
       <div class="cart-item__attributes">
-        {{ t(`colors.${color}`) }}
-        {{ t(`materials.${material}`) }}
-        {{ `размер ${size}` }}
+        <div>{{ t(`colors.${color}`) }} {{ t(`materials.${material}`) }}</div>
+        <div>{{ `размер ${size}` }}</div>
       </div>
 
       <div>
@@ -67,7 +62,7 @@ const deleteItem = (item) => {
 
   &__attributes {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: space-between;
   }
 }
diff --git a/layouts/default.vue b/layouts/default.vue
index ea36cd8..1159861 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -11,11 +11,18 @@
           PAXTON
         </h1>
 
-        <Icon
-          name="lucide:shopping-cart"
-          class="cursor-pointer mr20 w-6 h-6 text-gray-700"
+        <div
+          class="header__cart"
           @click="router.push(`/cart`)"
-        />
+        >
+          <Icon
+            name="lucide:shopping-cart"
+            class="cursor-pointer w-6 h-6 text-gray-700"
+          />
+          <div v-if="cart?.line_items?.length" class="header__cart-count">
+            {{ cart.line_items.length }}
+          </div>
+        </div>
       </div>
     </header>
 
@@ -33,6 +40,7 @@
 
 <script setup lang="ts">
 const router = useRouter()
+const { cart } = useCart()
 </script>
 
 <style lang="scss" scoped>
@@ -45,7 +53,6 @@ const router = useRouter()
 .container {
   --ui-container: 100%;
   max-width: 100%;
-
   margin: 0;
   padding: 0;
 }
@@ -67,16 +74,36 @@ const router = useRouter()
     align-items: center;
     justify-content: space-between;
     text-align: center;
+    padding: 0 16px;
   }
 
   &__headline {
-    display: flex;
-    align-items: center;
-    height: 100%;
     font-size: 32px;
     color: black;
     cursor: pointer;
   }
+
+  &__cart {
+    position: relative;
+    display: inline-block;
+  }
+
+  &__cart-count {
+    cursor: pointer;
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    background: red;
+    color: white;
+    font-size: 12px;
+    font-weight: bold;
+    border-radius: 50%;
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 
 .main {
diff --git a/pages/cart.vue b/pages/cart.vue
index 386774d..4e3bf73 100644
--- a/pages/cart.vue
+++ b/pages/cart.vue
@@ -8,12 +8,14 @@
         <CartItem :cart-item="cartItem" />
       </div>
     </div>
-  </div>
 
-  <div>
-    <UButton @click="createOrder">
-      Оформить заказ
-    </UButton>
+    <div class="cart__create-order">
+      <div>{{ `Товары: ${cart?.line_items?.length}` }}</div>
+
+      <UButton class="w-100 d-flex" @click="createOrder">
+        Перейти к оформлению
+      </UButton>
+    </div>
   </div>
 </template>
 
@@ -24,19 +26,41 @@ const { cart } = useCart()
 const { mutateAsync } = usePostOrdersCreate()
 
 const createOrder = () => {
-  mutateAsync(cart)
+  mutateAsync({ line_items: cart.value.line_items })
 }
 </script>
 
 <style lang="scss">
+@use '~/assets/scss/utils' as *;
+
 .cart {
+  margin-top: 120px;
+  margin-inline: auto;
+  max-width: 1200px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 
+  @include mobile {
+    margin-top: 20px;
+    flex-direction: column;
+  }
+
   &__items {
     display: flex;
     flex-direction: column;
   }
+
+  &__create-order {
+    box-shadow: 1px 1px 8px 0 black;
+    border-radius: 10px;
+    padding: 10px;
+    max-width: 360px;
+
+    display: inline-flex;
+    flex-direction: column;
+    gap: 20px;
+    max-height: 100px;
+  }
 }
 </style>