From 5b6b7a57fdde7e63dd99c63e9cfdf0bcc55ec792 Mon Sep 17 00:00:00 2001
From: mkucmus <maciejkucmus@gmail.com>
Date: Mon, 24 Apr 2023 14:19:40 +0200
Subject: [PATCH 1/4] feat(composables): new total price property for
 useCartItem composable

---
 .changeset/cyan-yaks-return.md                |  5 ++
 .changeset/warm-snakes-sort.md                |  5 ++
 packages/composables/src/useCartItem.ts       | 69 ++++++++++++---
 .../components/checkout/CheckoutCartItem.vue  | 88 ++++++++-----------
 4 files changed, 104 insertions(+), 63 deletions(-)
 create mode 100644 .changeset/cyan-yaks-return.md
 create mode 100644 .changeset/warm-snakes-sort.md

diff --git a/.changeset/cyan-yaks-return.md b/.changeset/cyan-yaks-return.md
new file mode 100644
index 000000000..e9b34cdcf
--- /dev/null
+++ b/.changeset/cyan-yaks-return.md
@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Display cart item total price instead of unit price
diff --git a/.changeset/warm-snakes-sort.md b/.changeset/warm-snakes-sort.md
new file mode 100644
index 000000000..9739070fd
--- /dev/null
+++ b/.changeset/warm-snakes-sort.md
@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/composables-next": patch
+---
+
+Add item total price property for useCartItem composable
diff --git a/packages/composables/src/useCartItem.ts b/packages/composables/src/useCartItem.ts
index b7d067e72..c9af57b51 100644
--- a/packages/composables/src/useCartItem.ts
+++ b/packages/composables/src/useCartItem.ts
@@ -1,6 +1,6 @@
-import { computed, ComputedRef, Ref, unref } from "vue";
+import { computed, ComputedRef, Ref } from "vue";
 import { removeCartItem, getProduct } from "@shopware-pwa/api-client";
-import {
+import type {
   LineItem,
   LineItemType,
   ClientApiError,
@@ -13,14 +13,45 @@ import { getMainImageUrl } from "@shopware-pwa/helpers-next";
 import { useShopwareContext, useCart } from ".";
 
 export type UseCartItemReturn = {
+  /**
+   * Calculated price {number} for the current item
+   */
   itemRegularPrice: ComputedRef<number | undefined>;
+  /**
+   * Calculated price {number} for the current item if list price is set
+   */
   itemSpecialPrice: ComputedRef<number | undefined>;
+  /**
+   * Total price for the current item of given quantity in the cart
+   */
+  itemTotalPrice: ComputedRef<number | undefined>;
+  /**
+   * Thumbnail url for the current item's entity
+   */
   itemImageThumbnailUrl: ComputedRef<string>;
+  /**
+   * Options (of variation) for the current item
+   */
   itemOptions: ComputedRef<PropertyGroupOptionCart[]>;
+  /**
+   * Type of the current item: "product" or "promotion"
+   */
   itemType: ComputedRef<LineItemType | undefined>;
+  /**
+   * Determines if the current item is a product
+   */
   isProduct: ComputedRef<boolean>;
+  /**
+   * Determines if the current item is a promotion
+   */
   isPromotion: ComputedRef<boolean>;
+  /**
+   * Stock information for the current item
+   */
   itemStock: ComputedRef<number | undefined>;
+  /**
+   * Quantity of the current item in the cart
+   */
   itemQuantity: ComputedRef<number | undefined>;
   /**
    * Changes the current item quantity in the cart
@@ -32,6 +63,8 @@ export type UseCartItemReturn = {
   removeItem(): Promise<void>;
   /**
    * Get SEO data for the current item
+   *
+   * @deprecated
    */
   getProductItemSeoUrlData(): Promise<ProductResponse | undefined>;
 };
@@ -52,19 +85,25 @@ export function useCartItem(cartItem: Ref<LineItem>): UseCartItemReturn {
   const itemQuantity = computed(() => cartItem.value.quantity);
   const itemImageThumbnailUrl = computed(() => getMainImageUrl(cartItem.value));
 
-  // TODO: use helper instead
-
-  const itemRegularPrice = computed(() => cartItem.value.price?.unitPrice);
+  const itemRegularPrice = computed(
+    () =>
+      cartItem.value?.price?.listPrice?.price ||
+      cartItem.value?.price?.unitPrice,
+  );
 
   const itemSpecialPrice = computed(
-    () => cartItem.value.price?.listPrice && cartItem.value.price.unitPrice
+    () =>
+      cartItem.value?.price?.listPrice?.price &&
+      cartItem.value?.price?.unitPrice,
   );
 
+  const itemTotalPrice = computed(() => cartItem.value.price?.totalPrice);
+
   const itemOptions = computed(
     () =>
       (cartItem.value.type === "product" &&
         (cartItem.value.payload as CartProductItem)?.options) ||
-      []
+      [],
   );
 
   const itemStock = computed(() => cartItem.value.deliveryInformation?.stock);
@@ -76,19 +115,20 @@ export function useCartItem(cartItem: Ref<LineItem>): UseCartItemReturn {
   const isPromotion = computed(() => cartItem.value.type === "promotion");
 
   async function removeItem() {
-    const result = await removeCartItem(cartItem.value.id, apiInstance);
-    // broadcastUpcomingErrors(result);
-    await refreshCart();
+    await removeCartItem(cartItem.value.id, apiInstance);
+    refreshCart();
   }
 
   async function changeItemQuantity(quantity: number): Promise<void> {
-    await changeProductQuantity({
+    changeProductQuantity({
       id: cartItem.value.id,
       quantity: quantity,
     });
-    // broadcastUpcomingErrors(result);
   }
 
+  /**
+   * @deprecated Method is not used anymore and the case should be solved on project level instead due to performance reasons.
+   */
   async function getProductItemSeoUrlData(): Promise<
     ProductResponse | undefined
   > {
@@ -104,13 +144,13 @@ export function useCartItem(cartItem: Ref<LineItem>): UseCartItemReturn {
           // associations: (getDefaults() as any).getProductItemsSeoUrlsData
           //   .associations,
         },
-        apiInstance
+        apiInstance,
       );
       return result.product as unknown as ProductResponse;
     } catch (error) {
       console.error(
         "[useCart][getProductItemsSeoUrlsData]",
-        (error as ClientApiError).messages
+        (error as ClientApiError).messages,
       );
     }
 
@@ -123,6 +163,7 @@ export function useCartItem(cartItem: Ref<LineItem>): UseCartItemReturn {
     getProductItemSeoUrlData,
     itemRegularPrice,
     itemSpecialPrice,
+    itemTotalPrice,
     itemOptions,
     itemStock,
     itemQuantity,
diff --git a/templates/vue-demo-store/components/checkout/CheckoutCartItem.vue b/templates/vue-demo-store/components/checkout/CheckoutCartItem.vue
index 80df6058a..5e878624a 100644
--- a/templates/vue-demo-store/components/checkout/CheckoutCartItem.vue
+++ b/templates/vue-demo-store/components/checkout/CheckoutCartItem.vue
@@ -1,51 +1,51 @@
 <script setup lang="ts">
-import { getSmallestThumbnailUrl } from "@shopware-pwa/helpers-next";
-import { LineItem } from "@shopware-pwa/types";
+  import { getSmallestThumbnailUrl } from "@shopware-pwa/helpers-next";
+  import { LineItem } from "@shopware-pwa/types";
 
-const props = withDefaults(
-  defineProps<{
-    cartItem: LineItem;
-    maxQty?: number;
-  }>(),
-  {
-    maxQty: 100,
-  }
-);
+  const props = withDefaults(
+    defineProps<{
+      cartItem: LineItem;
+      maxQty?: number;
+    }>(),
+    {
+      maxQty: 100,
+    },
+  );
 
-const { cartItem } = toRefs(props);
+  const { cartItem } = toRefs(props);
 
-const isLoading = ref(false);
+  const isLoading = ref(false);
 
-const {
-  itemOptions,
-  removeItem,
-  itemRegularPrice,
-  itemQuantity,
-  isPromotion,
-  changeItemQuantity,
-} = useCartItem(cartItem);
+  const {
+    itemOptions,
+    removeItem,
+    itemTotalPrice,
+    itemQuantity,
+    isPromotion,
+    changeItemQuantity,
+  } = useCartItem(cartItem);
 
-const quantity = ref();
-syncRefs(itemQuantity, quantity);
+  const quantity = ref();
+  syncRefs(itemQuantity, quantity);
 
-const updateQuantity = async (quantity: number | undefined) => {
-  if (quantity === itemQuantity.value) return;
+  const updateQuantity = async (quantity: number | undefined) => {
+    if (quantity === itemQuantity.value) return;
 
-  isLoading.value = true;
+    isLoading.value = true;
 
-  await changeItemQuantity(Number(quantity));
+    await changeItemQuantity(Number(quantity));
 
-  isLoading.value = false;
-};
-const debounceUpdate = useDebounceFn(updateQuantity, 800);
+    isLoading.value = false;
+  };
+  const debounceUpdate = useDebounceFn(updateQuantity, 800);
 
-watch(quantity, () => debounceUpdate(quantity.value));
+  watch(quantity, () => debounceUpdate(quantity.value));
 
-const removeCartItem = async () => {
-  isLoading.value = true;
-  await removeItem();
-  isLoading.value = false;
-};
+  const removeCartItem = async () => {
+    isLoading.value = true;
+    await removeItem();
+    isLoading.value = false;
+  };
 </script>
 
 <template>
@@ -67,11 +67,11 @@ const removeCartItem = async () => {
         class="flex flex-col lg:flex-row justify-between text-base font-medium text-gray-900"
       >
         <h3 class="text-base" data-testid="cart-product-name">
-          {{ cartItem.label }}
+          {{ cartItem.label }} <span v-if="isPromotion" class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded-full dark:bg-green-900 dark:text-green-300">Promotion</span>
         </h3>
         <SharedPrice
-          v-if="itemRegularPrice"
-          :value="itemRegularPrice"
+          v-if="itemTotalPrice"
+          :value="itemTotalPrice"
           data-testid="cart-product-price"
         />
       </div>
@@ -90,7 +90,6 @@ const removeCartItem = async () => {
       v-if="!isPromotion"
       class="flex flex-1 items-end justify-between text-sm"
     >
-      <!-- v-if="itemStock && itemStock > 0" - example of using it on item when you want to block editing quantity -->
       <input
         v-model="quantity"
         type="number"
@@ -102,15 +101,6 @@ const removeCartItem = async () => {
         name="quantity"
         class="w-18 mt-1 inline-block py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
       />
-      <!-- disabled quantity edition -->
-      <!-- <div v-else>
-        <div
-          data-testid="cart-product-qty"
-          class="w-18 mt-1 inline-block py-2 px-3 border border-gray-300 bg-white opacity-50 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
-        >
-          {{ quantity }}
-        </div>
-      </div> -->
       <div class="flex">
         <button
           v-if="!isPromotion"

From 7d09fa9c47f87dcc1a42a0aad311210feb5cee7c Mon Sep 17 00:00:00 2001
From: Maciek Kucmus <maciejkucmus@gmail.com>
Date: Tue, 25 Apr 2023 11:24:20 +0200
Subject: [PATCH 2/4] Update packages/composables/src/useCartItem.ts

Co-authored-by: Patryk Tomczyk <13100280+patzick@users.noreply.github.com>
---
 packages/composables/src/useCartItem.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/composables/src/useCartItem.ts b/packages/composables/src/useCartItem.ts
index c9af57b51..0536e3798 100644
--- a/packages/composables/src/useCartItem.ts
+++ b/packages/composables/src/useCartItem.ts
@@ -120,7 +120,7 @@ export function useCartItem(cartItem: Ref<LineItem>): UseCartItemReturn {
   }
 
   async function changeItemQuantity(quantity: number): Promise<void> {
-    changeProductQuantity({
+    await changeProductQuantity({
       id: cartItem.value.id,
       quantity: quantity,
     });

From 8cc98e1e1e1fafd73f44cc06c071fd3dcf6f9572 Mon Sep 17 00:00:00 2001
From: mkucmus <maciejkucmus@gmail.com>
Date: Tue, 25 Apr 2023 11:33:54 +0200
Subject: [PATCH 3/4] chore: changes after CR

---
 .changeset/sour-sheep-smile.md                |   5 +
 packages/composables/src/useCart.ts           |  22 ++-
 packages/composables/src/useCartItem.ts       |   4 +-
 .../components/checkout/CheckoutCartItem.vue  | 160 +++++++-----------
 4 files changed, 85 insertions(+), 106 deletions(-)
 create mode 100644 .changeset/sour-sheep-smile.md

diff --git a/.changeset/sour-sheep-smile.md b/.changeset/sour-sheep-smile.md
new file mode 100644
index 000000000..95464a18a
--- /dev/null
+++ b/.changeset/sour-sheep-smile.md
@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/composables-next": patch
+---
+
+getProductItemSeoUrlData method of useCart marked as deprecated
diff --git a/packages/composables/src/useCart.ts b/packages/composables/src/useCart.ts
index 10f7a5cee..e612bfc55 100644
--- a/packages/composables/src/useCart.ts
+++ b/packages/composables/src/useCart.ts
@@ -49,8 +49,9 @@ export type UseCartReturn = {
   count: ComputedRef<number>;
   /**
    * Refreshes the cart object and related data
+   * If @param newCart is provided, it will be used as a new cart object
    */
-  refreshCart(): Promise<Cart>;
+  refreshCart(newCart?: Cart): Promise<Cart>;
   /**
    * Removes the provided LineItem from the cart
    */
@@ -95,7 +96,12 @@ export function useCartFunction(): UseCartReturn {
 
   const _storeCart = _useContext<Cart | undefined>("swCart");
 
-  async function refreshCart(): Promise<Cart> {
+  async function refreshCart(newCart?: Cart): Promise<Cart> {
+    if (newCart) {
+      _storeCart.value = newCart;
+      return newCart;
+    }
+
     const result = await getCart(apiInstance);
     _storeCart.value = result;
     return result;
@@ -108,7 +114,7 @@ export function useCartFunction(): UseCartReturn {
     const addToCartResult = await addProductToCart(
       params.id,
       params.quantity,
-      apiInstance
+      apiInstance,
     );
     _storeCart.value = addToCartResult;
     return addToCartResult;
@@ -126,7 +132,7 @@ export function useCartFunction(): UseCartReturn {
     const result = await changeCartItemQuantity(
       params.id,
       params.quantity,
-      apiInstance
+      apiInstance,
     );
     _storeCart.value = result;
   }
@@ -179,14 +185,14 @@ export function useCartFunction(): UseCartReturn {
         // associations: (getDefaults() as any).getProductItemsSeoUrlsData
         //   .associations,
       },
-      apiInstance
+      apiInstance,
     );
     return result?.elements || [];
   }
 
   const appliedPromotionCodes = computed(() => {
     return cartItems.value.filter(
-      (cartItem: LineItem) => cartItem.type === "promotion"
+      (cartItem: LineItem) => cartItem.type === "promotion",
     );
   });
 
@@ -202,7 +208,7 @@ export function useCartFunction(): UseCartReturn {
         lineItem.type === "product"
           ? lineItem.quantity + accumulator
           : accumulator,
-      0
+      0,
     );
   });
 
@@ -226,7 +232,7 @@ export function useCartFunction(): UseCartReturn {
   });
 
   const cartErrors: ComputedRef<EntityError[]> = computed(
-    () => (cart.value?.errors && Object.values(cart.value.errors)) || []
+    () => (cart.value?.errors && Object.values(cart.value.errors)) || [],
   );
 
   const isVirtualCart = computed(() => {
diff --git a/packages/composables/src/useCartItem.ts b/packages/composables/src/useCartItem.ts
index 0536e3798..53f0522df 100644
--- a/packages/composables/src/useCartItem.ts
+++ b/packages/composables/src/useCartItem.ts
@@ -115,8 +115,8 @@ export function useCartItem(cartItem: Ref<LineItem>): UseCartItemReturn {
   const isPromotion = computed(() => cartItem.value.type === "promotion");
 
   async function removeItem() {
-    await removeCartItem(cartItem.value.id, apiInstance);
-    refreshCart();
+    const newCart = await removeCartItem(cartItem.value.id, apiInstance);
+    await refreshCart(newCart);
   }
 
   async function changeItemQuantity(quantity: number): Promise<void> {
diff --git a/templates/vue-demo-store/components/checkout/CheckoutCartItem.vue b/templates/vue-demo-store/components/checkout/CheckoutCartItem.vue
index 5e878624a..7c3dcb0e2 100644
--- a/templates/vue-demo-store/components/checkout/CheckoutCartItem.vue
+++ b/templates/vue-demo-store/components/checkout/CheckoutCartItem.vue
@@ -1,116 +1,84 @@
 <script setup lang="ts">
-  import { getSmallestThumbnailUrl } from "@shopware-pwa/helpers-next";
-  import { LineItem } from "@shopware-pwa/types";
+import { getSmallestThumbnailUrl } from "@shopware-pwa/helpers-next";
+import { LineItem } from "@shopware-pwa/types";
 
-  const props = withDefaults(
-    defineProps<{
-      cartItem: LineItem;
-      maxQty?: number;
-    }>(),
-    {
-      maxQty: 100,
-    },
-  );
+const props = withDefaults(
+  defineProps<{
+    cartItem: LineItem;
+    maxQty?: number;
+  }>(),
+  {
+    maxQty: 100,
+  },
+);
 
-  const { cartItem } = toRefs(props);
+const { cartItem } = toRefs(props);
 
-  const isLoading = ref(false);
+const isLoading = ref(false);
 
-  const {
-    itemOptions,
-    removeItem,
-    itemTotalPrice,
-    itemQuantity,
-    isPromotion,
-    changeItemQuantity,
-  } = useCartItem(cartItem);
+const {
+  itemOptions,
+  removeItem,
+  itemTotalPrice,
+  itemQuantity,
+  isPromotion,
+  changeItemQuantity,
+} = useCartItem(cartItem);
 
-  const quantity = ref();
-  syncRefs(itemQuantity, quantity);
+const quantity = ref();
+syncRefs(itemQuantity, quantity);
 
-  const updateQuantity = async (quantity: number | undefined) => {
-    if (quantity === itemQuantity.value) return;
+const updateQuantity = async (quantity: number | undefined) => {
+  if (quantity === itemQuantity.value) return;
 
-    isLoading.value = true;
+  isLoading.value = true;
 
-    await changeItemQuantity(Number(quantity));
+  await changeItemQuantity(Number(quantity));
 
-    isLoading.value = false;
-  };
-  const debounceUpdate = useDebounceFn(updateQuantity, 800);
+  isLoading.value = false;
+};
+const debounceUpdate = useDebounceFn(updateQuantity, 800);
 
-  watch(quantity, () => debounceUpdate(quantity.value));
+watch(quantity, () => debounceUpdate(quantity.value));
 
-  const removeCartItem = async () => {
-    isLoading.value = true;
-    await removeItem();
-    isLoading.value = false;
-  };
+const removeCartItem = async () => {
+  isLoading.value = true;
+  await removeItem();
+  isLoading.value = false;
+};
 </script>
 
 <template>
-  <div
-    v-if="!isPromotion"
-    class="mr-4 h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200"
-  >
-    <img
-      :src="getSmallestThumbnailUrl(cartItem.cover)"
-      alt="Salmon orange fabric pouch with match zipper, gray zipper pull, and adjustable hip belt."
-      class="h-full w-full object-cover object-center"
-      data-testid="cart-product-image"
-    />
-  </div>
+    <div v-if="!isPromotion" class="mr-4 h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">
+      <img :src="getSmallestThumbnailUrl(cartItem.cover)"
+        alt="Salmon orange fabric pouch with match zipper, gray zipper pull, and adjustable hip belt."
+        class="h-full w-full object-cover object-center" data-testid="cart-product-image" />
+    </div>
 
-  <div class="flex flex-1 flex-col">
-    <div>
-      <div
-        class="flex flex-col lg:flex-row justify-between text-base font-medium text-gray-900"
-      >
-        <h3 class="text-base" data-testid="cart-product-name">
-          {{ cartItem.label }} <span v-if="isPromotion" class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded-full dark:bg-green-900 dark:text-green-300">Promotion</span>
-        </h3>
-        <SharedPrice
-          v-if="itemTotalPrice"
-          :value="itemTotalPrice"
-          data-testid="cart-product-price"
-        />
-      </div>
+    <div class="flex flex-1 flex-col">
+      <div>
+        <div class="flex flex-col lg:flex-row justify-between text-base font-medium text-gray-900">
+          <h3 class="text-base" data-testid="cart-product-name">
+            {{ cartItem.label }} <span v-if="isPromotion"
+              class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded-full dark:bg-green-900 dark:text-green-300">Promotion</span>
+          </h3>
+          <SharedPrice v-if="itemTotalPrice" :value="itemTotalPrice" data-testid="cart-product-price" />
+        </div>
 
-      <p
-        v-if="itemOptions"
-        class="mt-1 text-sm text-gray-500"
-        data-testid="cart-product-options"
-      >
-        <span v-for="option in itemOptions" :key="option.group" class="mr-2">
-          {{ option.group }}: {{ option.option }}
-        </span>
-      </p>
-    </div>
-    <div
-      v-if="!isPromotion"
-      class="flex flex-1 items-end justify-between text-sm"
-    >
-      <input
-        v-model="quantity"
-        type="number"
-        :disabled="isLoading"
-        :min="cartItem.quantityInformation?.minPurchase || 1"
-        :max="cartItem.quantityInformation?.maxPurchase || maxQty"
-        :step="cartItem.quantityInformation?.purchaseSteps || 1"
-        data-testid="cart-product-qty-select"
-        name="quantity"
-        class="w-18 mt-1 inline-block py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
-      />
-      <div class="flex">
-        <button
-          v-if="!isPromotion"
-          type="button"
-          :disabled="isLoading"
-          class="font-medium text-brand-dark"
-          :class="{ 'text-gray-500': isLoading }"
-          data-testid="product-remove-button"
-          @click="removeCartItem"
-        >
+        <p v-if="itemOptions" class="mt-1 text-sm text-gray-500" data-testid="cart-product-options">
+          <span v-for="option in itemOptions" :key="option.group" class="mr-2">
+            {{ option.group }}: {{ option.option }}
+          </span>
+        </p>
+      </div>
+      <div v-if="!isPromotion" class="flex flex-1 items-end justify-between text-sm">
+        <input v-model="quantity" type="number" :disabled="isLoading" :min="cartItem.quantityInformation?.minPurchase || 1"
+          :max="cartItem.quantityInformation?.maxPurchase || maxQty"
+          :step="cartItem.quantityInformation?.purchaseSteps || 1" data-testid="cart-product-qty-select" name="quantity"
+          class="w-18 mt-1 inline-block py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
+        <div class="flex">
+          <button v-if="!isPromotion" type="button" :disabled="isLoading" class="font-medium text-brand-dark"
+            :class="{ 'text-gray-500': isLoading }" data-testid="product-remove-button" @click="removeCartItem">
           Remove
         </button>
       </div>

From 3f6a958fa70e6f1d0f23e982248f42545a9b1174 Mon Sep 17 00:00:00 2001
From: Patryk Tomczyk <13100280+patzick@users.noreply.github.com>
Date: Wed, 26 Apr 2023 08:29:52 +0200
Subject: [PATCH 4/4] Update .changeset/sour-sheep-smile.md

---
 .changeset/sour-sheep-smile.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/sour-sheep-smile.md b/.changeset/sour-sheep-smile.md
index 95464a18a..490fbe5dd 100644
--- a/.changeset/sour-sheep-smile.md
+++ b/.changeset/sour-sheep-smile.md
@@ -2,4 +2,4 @@
 "@shopware-pwa/composables-next": patch
 ---
 
-getProductItemSeoUrlData method of useCart marked as deprecated
+`getProductItemSeoUrlData` method of `useCart` marked as deprecated