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

api/Api.ts

@@ -5283,7 +5283,7 @@ export class Api<
         method: "POST",
         body: data,
         secure: true,
-        type: ContentType.UrlEncoded,
+        type: ContentType.Json,
         ...params,
       }),
 

components/ProductDescription.vue

@@ -42,10 +42,6 @@
       @click="addToCartBtn()"
     />
 
-    currentSize
-    <pre>
-    {{ currentSize }}
-    </pre>
     <UAccordion :items="items" />
   </div>
 </template>

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}`) }}
+        <div>{{ t(`colors.${color}`) }} {{ t(`materials.${material}`) }}</div>
-        {{ t(`materials.${material}`) }}
+        <div>{{ `размер ${size}` }}</div>
-        {{ `размер ${size}` }}
       </div>
 
       <div>
@@ -67,7 +62,7 @@ const deleteItem = (item) => {
 
   &__attributes {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: space-between;
   }
 }

layouts/default.vue

@@ -11,11 +11,18 @@
           PAXTON
         </h1>
 
-        <Icon
+        <div
-          name="lucide:shopping-cart"
+          class="header__cart"
-          class="cursor-pointer mr20 w-6 h-6 text-gray-700"
           @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 {

pages/cart.vue

@@ -8,12 +8,14 @@
         <CartItem :cart-item="cartItem" />
       </div>
     </div>
-  </div>
 
-  <div>
+    <div class="cart__create-order">
-    <UButton @click="createOrder">
+      <div>{{ `Товары: ${cart?.line_items?.length}` }}</div>
-      Оформить заказ
+
-    </UButton>
+      <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>