feat: add localStorage

src/entities/product/model/use-product-price.ts

@@ -13,9 +13,7 @@ export function useProductPrice(variants: CrmVariant[], id: string) {
     count: number
   }[]>('added-items', [])
 
-  const currentPriceForAll = computed(() => currentUnitPrice.value * amount.value)
-
-  const prevUnitPriceForAll = computed(() => prevUnitPrice.value * amount.value)
+  const storageProduct = computed(() => addedItems.value.find(item => item.id === id))
 
   const setInitCurrentPrice = () => {
     currentUnitPrice.value = Number(variants[0].price) / 100
@@ -43,27 +41,35 @@ export function useProductPrice(variants: CrmVariant[], id: string) {
       prevUnitPrice.value = undefined
     }
 
-    if (oldValue === 0 && value > 0) {
+    if (value === 0) {
+      addedItems.value = addedItems.value.filter(item => item.id !== id)
+
+      setInitCurrentPrice()
+
+      return
+    }
+
+    if (storageProduct.value) {
+      storageProduct.value.count = value
+      return
+    }
+
     addedItems.value.push({
       id,
       count: value,
     })
-    }
-
-    if (oldValue > 0 && value === 0) {
-      addedItems.value = addedItems.value.filter(item => item.id !== id)
-
-      setInitCurrentPrice()
-    }
   })
 
+  if (storageProduct.value) {
+    amount.value = storageProduct.value.count
+  }
+  else {
     setInitCurrentPrice()
+  }
 
   return {
     amount,
     currentUnitPrice,
     prevUnitPrice,
-    currentPriceForAll,
-    prevUnitPriceForAll,
   }
 }

src/entities/product/ui/ProductCard.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
   product: CrmProduct
 }>()
 
-const { amount, currentUnitPrice, prevUnitPriceForAll, prevUnitPrice } = useProductPrice(props.product.variants || [], props.product.id!)
+const { amount, currentUnitPrice, prevUnitPrice } = useProductPrice(props.product.variants || [], props.product.id!)
 
 function onImageClick() {
   navigateTo(
@@ -32,7 +32,7 @@ function onImageClick() {
           {{ currentUnitPrice }} ₽
         </div>
         <div v-if="prevUnitPrice" class="line-through text-slate-400">
-          {{ prevUnitPriceForAll }} ₽
+          {{ prevUnitPrice }} ₽
         </div>
       </div>
 

src/entities/product/ui/ProductPrice.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
   productId: string
 }>()
 
-const { amount, currentUnitPrice, prevUnitPrice, prevUnitPriceForAll } = useProductPrice(props.variants, props.productId)
+const { amount, currentUnitPrice, prevUnitPrice } = useProductPrice(props.variants, props.productId)
 </script>
 
 <template>
@@ -18,7 +18,7 @@ const { amount, currentUnitPrice, prevUnitPrice, prevUnitPriceForAll } = useProd
         {{ currentUnitPrice }} ₽
       </div>
       <div v-if="prevUnitPrice" class="line-through text-slate-400">
-        {{ prevUnitPriceForAll }} ₽
+        {{ prevUnitPrice }} ₽
       </div>
     </div>
     <div class="flex-1">

src/features/cart/index.ts

@@ -0,0 +1 @@
+export { CartButton } from './ui'

src/features/cart/ui/CartButton.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useStorage } from '@vueuse/core'
+
+const addedItems = useStorage<{
+  id: string
+  count: number
+}[]>('added-items', [])
+
+const addedItemsAmount = computed(() => addedItems.value.length)
+</script>
+
+<template>
+  <UButton
+    variant="soft"
+    size="xl"
+    class="border text-black border-pink-500"
+    icon="heroicons-shopping-cart"
+    :trailing-icon="addedItemsAmount ? 'badge' : undefined"
+  >
+    Корзина
+    <template #trailing>
+      <UBadge
+        v-if="addedItemsAmount"
+        size="xs" :label="addedItemsAmount"
+      />
+    </template>
+  </UButton>
+</template>

src/features/cart/ui/index.ts

@@ -0,0 +1 @@
+export { default as CartButton } from './CartButton.vue'

src/widgets/header/ui/Header.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { CartButton } from '~/src/features/cart'
+
 function goToCatalogPage() {
   navigateTo({
     path: '/catalog',
@@ -17,14 +19,7 @@ function goToCatalogPage() {
         Каталог
       </UButton>
       <UInputMenu placeholder="Поиск по каталогу" size="xl" class="w-full" leading-icon="heroicons-magnifying-glass" />
-      <UButton variant="soft" size="xl" class="border text-black border-pink-500" icon="heroicons-shopping-cart" trailing-icon="badge">
-        Корзина
-        <template #trailing>
-          <UBadge
-            size="xs" label="2"
-          />
-        </template>
-      </UButton>
+      <CartButton />
     </div>
   </div>
 </template>