refactor: product price displaying (#1870)

* refactor: display prices properly

* feat: apply price logic into theme

* chore: tests coverage

* chore: types

Co-authored-by: Patryk Tomczyk <13100280+patzick@users.noreply.github.com>

api/helpers.api.md

@@ -5,6 +5,7 @@
 ```ts
 
 import { Aggregations } from '@shopware-pwa/commons';
+import { CalculatedPrice } from '@shopware-pwa/commons';
 import { Category } from '@shopware-pwa/commons';
 import { CmsBlock } from '@shopware-pwa/commons';
 import { CmsPageResponse } from '@shopware-pwa/commons';
@@ -48,6 +49,9 @@ export function getProductCalculatedPrice(product: Product): number | undefined;
 // @public
 export function getProductFreeShipping(product?: Product): boolean;
 
+// @beta (undocumented)
+export function getProductFromPrice(product: Product): number | undefined;
+
 // @public
 export function getProductMainImageUrl(product: Product): string;
 
@@ -83,6 +87,9 @@ export function getProductProperties({ product, }?: {
 // @public
 export function getProductRatingAverage(product: Product): number | null;
 
+// @beta (undocumented)
+export function getProductRealPrice(product: Product): CalculatedPrice | undefined;
+
 // @public
 export function getProductReviews({ product, }?: {
     product?: Product;
@@ -97,6 +104,9 @@ export function getProductTierPrices(product: Product): TierPrice[];
 // @public
 export function getProductUrl(product: Product | null): string;
 
+// @beta (undocumented)
+export function getProductVariantsFromPrice(product: Product): number | undefined;
+
 // @public
 export function getTranslatedProperty<T>(element: T, property: keyof T): string;
 

docs/landing/resources/api/helpers.getproductfromprice.md

@@ -0,0 +1,26 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@shopware-pwa/helpers](./helpers.md) &gt; [getProductFromPrice](./helpers.getproductfromprice.md)
+
+## getProductFromPrice() function
+
+> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+
+<b>Signature:</b>
+
+```typescript
+export declare function getProductFromPrice(product: Product): number | undefined;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  product | Product |  |
+
+<b>Returns:</b>
+
+number \| undefined
+

docs/landing/resources/api/helpers.getproductrealprice.md

@@ -0,0 +1,26 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@shopware-pwa/helpers](./helpers.md) &gt; [getProductRealPrice](./helpers.getproductrealprice.md)
+
+## getProductRealPrice() function
+
+> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+
+<b>Signature:</b>
+
+```typescript
+export declare function getProductRealPrice(product: Product): CalculatedPrice | undefined;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  product | Product |  |
+
+<b>Returns:</b>
+
+CalculatedPrice \| undefined
+

docs/landing/resources/api/helpers.getproductvariantsfromprice.md

@@ -0,0 +1,26 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@shopware-pwa/helpers](./helpers.md) &gt; [getProductVariantsFromPrice](./helpers.getproductvariantsfromprice.md)
+
+## getProductVariantsFromPrice() function
+
+> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+
+<b>Signature:</b>
+
+```typescript
+export declare function getProductVariantsFromPrice(product: Product): number | undefined;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  product | Product |  |
+
+<b>Returns:</b>
+
+number \| undefined
+

docs/landing/resources/api/helpers.md

@@ -18,6 +18,7 @@
 |  [getProductCalculatedListingPrice(product)](./helpers.getproductcalculatedlistingprice.md) | <b><i>(BETA)</i></b> Get the calculated list price |
 |  [getProductCalculatedPrice(product)](./helpers.getproductcalculatedprice.md) | <b><i>(BETA)</i></b> Get the calculated list price |
 |  [getProductFreeShipping(product)](./helpers.getproductfreeshipping.md) | Get product free shipping property |
+|  [getProductFromPrice(product)](./helpers.getproductfromprice.md) | <b><i>(BETA)</i></b> |
 |  [getProductMainImageUrl(product)](./helpers.getproductmainimageurl.md) | gets the cover image |
 |  [getProductMediaGallery({ product, })](./helpers.getproductmediagallery.md) | Get the media gallery of a product as ui-interfaces |
 |  [getProductName({ product })](./helpers.getproductname.md) | <b><i>(BETA)</i></b> |
@@ -27,10 +28,12 @@
 |  [getProductPriceDiscountPercentage(product)](./helpers.getproductpricediscountpercentage.md) | <b><i>(BETA)</i></b> Get the percentage value of discount |
 |  [getProductProperties({ product, })](./helpers.getproductproperties.md) | Get product properties as ui-interfaces |
 |  [getProductRatingAverage(product)](./helpers.getproductratingaverage.md) | Get product rating average property |
+|  [getProductRealPrice(product)](./helpers.getproductrealprice.md) | <b><i>(BETA)</i></b> |
 |  [getProductReviews({ product, })](./helpers.getproductreviews.md) | Format product reviews to ui-interfaces |
 |  [getProductThumbnailUrl(product)](./helpers.getproductthumbnailurl.md) | <b><i>(BETA)</i></b> get the thumbnail image URL with the smallest width |
 |  [getProductTierPrices(product)](./helpers.getproducttierprices.md) | <b><i>(BETA)</i></b> Get the prices depending on quantity added to cart. Tier prices can be set in <code>Advanced pricing</code> tab in <code>Product view</code> (admin panel) |
 |  [getProductUrl(product)](./helpers.getproducturl.md) | Get product url. The priority is SEO url and then technical url. |
+|  [getProductVariantsFromPrice(product)](./helpers.getproductvariantsfromprice.md) | <b><i>(BETA)</i></b> |
 |  [getTranslatedProperty(element, property)](./helpers.gettranslatedproperty.md) | Get translated property from the given object. |
 |  [isProductSimple({ product, })](./helpers.isproductsimple.md) | <b><i>(BETA)</i></b> |
 |  [loadScript(src)](./helpers.loadscript.md) | <b><i>(BETA)</i></b> Helper for plugins to load external scripts for plugins |

packages/commons/interfaces/models/content/product/Product.ts

@@ -44,6 +44,7 @@ export interface CrossSelling {
  * @public
  */
 export interface Product {
+  calculatedCheapestPrice: CalculatedPrice;
   calculatedListingPrice: ListingPrice;
   calculatedPrices: CalculatedPrice[];
   calculatedPrice: CalculatedPrice;

packages/composables/src/internalHelpers/defaultApiParams.json

@@ -56,6 +56,7 @@
         "name",
         "description",
         "ratingAverage",
+        "calculatedCheapestPrice",
         "calculatedPrice",
         "calculatedPrices",
         "calculatedListingPrice",
@@ -110,6 +111,7 @@
       "product": [
         "name",
         "ratingAverage",
+        "calculatedCheapestPrice",
         "calculatedPrice",
         "calculatedPrices",
         "calculatedListingPrice",
@@ -150,6 +152,7 @@
         "calculatedPrice",
         "calculatedPrices",
         "calculatedListingPrice",
+        "calculatedCheapestPrice",
         "cover",
         "id",
         "translated",
@@ -263,10 +266,12 @@
     }
   },
   "useCustomerOrders": {
-    "sort": [{
-      "field": "createdAt",
-      "order": "desc"
-   }],
+    "sort": [
+      {
+        "field": "createdAt",
+        "order": "desc"
+      }
+    ],
     "associations": {},
     "includes": {
       "order": [
@@ -327,9 +332,7 @@
     }
   },
   "useCart": {
-    "includes": {
-
-    },
+    "includes": {},
     "associations": {},
     "getProductItemsSeoUrlsData": {
       "includes": {

packages/default-theme/src/components/SwProductCard.vue

@@ -7,8 +7,7 @@
     <SfProductCard
       :title="getName"
       :image="getImageUrl"
-      :special-price="formatPrice(getSpecialPrice)"
-      :regular-price="formatPrice(getRegularPrice)"
+      :regular-price="displayPrice"
       :max-rating="5"
       :score-rating="getProductRating"
       image-width="100%"
@@ -33,12 +32,25 @@
           @click.native="$router.push(getRouterLink)"
         />
       </template>
+      <template #price>
+        <SfPrice
+          v-if="displayVariantsFromPrice"
+          class="sw-product-card-price sf-product-card__price variants-price"
+          :regular="`${$t('Variants from')} ${displayVariantsFromPrice}`"
+        />
+        <SfPrice
+          v-if="displayFromPrice"
+          class="sw-product-card-price sf-product-card__price from-price"
+          :regular="`${$t('From')} ${displayFromPrice}`"
+        />
+      </template>
     </SfProductCard>
   </SwPluginSlot>
 </template>
 
 <script>
-import { SfProductCard } from "@storefront-ui/vue"
+import { unref } from "@vue/composition-api"
+import { SfProductCard, SfPrice } from "@storefront-ui/vue"
 import { useAddToCart, useWishlist } from "@shopware-pwa/composables"
 import {
   getProductThumbnailUrl,
@@ -48,16 +60,20 @@ import {
   getProductCalculatedPrice,
   getProductCalculatedListingPrice,
   getProductPriceDiscount,
+  getProductVariantsFromPrice,
+  getProductFromPrice,
+  getProductRealPrice,
 } from "@shopware-pwa/helpers"
 import getResizedImage from "@/helpers/images/getResizedImage.js"
-import { toRefs } from "@vue/composition-api"
+import { toRefs, computed } from "@vue/composition-api"
 import { usePriceFilter } from "@/logic/usePriceFilter.js"
 import SwPluginSlot from "sw-plugins/SwPluginSlot.vue"
 import SwImage from "@/components/atoms/SwImage.vue"
 
 export default {
   components: {
     SfProductCard,
+    SfPrice,
     SwPluginSlot,
     SwImage,
   },
@@ -69,6 +85,20 @@ export default {
     const { addToWishlist, removeFromWishlist, isInWishlist } = useWishlist({
       product,
     })
+    const filterPrice = usePriceFilter();
+    const variantsFromPrice = getProductVariantsFromPrice(props.product);
+    const fromPrice = getProductFromPrice(props.product);
+    const displayFromPrice = computed(() => {
+      if (fromPrice) {
+        return filterPrice(fromPrice)
+      }
+    })
+     const displayVariantsFromPrice = computed(() => {
+      if (variantsFromPrice) {
+        return filterPrice(variantsFromPrice)
+      }
+    })
+
     return {
       quantity,
       addToCart,
@@ -79,7 +109,8 @@ export default {
           ? removeFromWishlist(product.value.id)
           : addToWishlist(),
       isInWishlist,
-      formatPrice: usePriceFilter(),
+      displayFromPrice,
+      displayVariantsFromPrice
     }
   },
   props: {
@@ -135,4 +166,9 @@ export default {
   --image-width: 200px;
   --image-height: 400px;
 }
+.variants-price {
+  .sf-price__regular {
+    font-size: 0.9em;
+  }
+}
 </style>

packages/default-theme/src/components/SwProductCardHorizontal.vue

@@ -28,12 +28,24 @@
           @click.native="$router.push(getRouterLink)"
         />
       </template>
+      <template #price>
+        <SfPrice
+          v-if="displayVariantsFromPrice"
+          class="sw-product-card-price sf-product-card__price variants-price"
+          :regular="`${$t('Variants from')} ${displayVariantsFromPrice}`"
+        />
+        <SfPrice
+          v-if="displayFromPrice"
+          class="sw-product-card-price sf-product-card__price from-price"
+          :regular="`${$t('From')} ${displayFromPrice}`"
+        />
+      </template>
     </SfProductCardHorizontal>
   </SwPluginSlot>
 </template>
 
 <script>
-import { SfProductCardHorizontal } from "@storefront-ui/vue"
+import { SfProductCardHorizontal, SfPrice } from "@storefront-ui/vue"
 import { useAddToCart, useWishlist } from "@shopware-pwa/composables"
 import {
   getProductMainImageUrl,
@@ -43,15 +55,19 @@ import {
   getProductCalculatedListingPrice,
   getProductPriceDiscount,
   getProductName,
+  getProductVariantsFromPrice,
+  getProductFromPrice,
+  getProductRealPrice,
 } from "@shopware-pwa/helpers"
+import { computed } from "@vue/composition-api"
 import getResizedImage from "@/helpers/images/getResizedImage.js"
 import getPlaceholderImage from "@/helpers/images/getPlaceholderImage.js"
 import { usePriceFilter } from "@/logic/usePriceFilter.js"
 import SwPluginSlot from "sw-plugins/SwPluginSlot.vue"
 import SwImage from "@/components/atoms/SwImage.vue"
 
 export default {
-  components: { SfProductCardHorizontal, SwPluginSlot, SwImage },
+  components: { SfProductCardHorizontal, SwPluginSlot, SwImage, SfPrice },
   setup(props, { root }) {
     const { addToCart, quantity, getStock, isInCart } = useAddToCart({
       product: props.product,
@@ -65,6 +81,20 @@ export default {
         ? addToWishlist()
         : removeFromWishlist(props?.product?.id)
 
+    const filterPrice = usePriceFilter();
+    const variantsFromPrice = getProductVariantsFromPrice(props.product);
+    const fromPrice = getProductFromPrice(props.product);
+    const displayFromPrice = computed(() => {
+      if (fromPrice) {
+        return filterPrice(fromPrice)
+      }
+    })
+     const displayVariantsFromPrice = computed(() => {
+      if (variantsFromPrice) {
+        return filterPrice(variantsFromPrice)
+      }
+    })
+
     return {
       quantity,
       addToCart,
@@ -74,6 +104,8 @@ export default {
       toggleWishlist,
       isInWishlist,
       getPlaceholderImage,
+      displayFromPrice,
+      displayVariantsFromPrice
     }
   },
   props: {
@@ -135,4 +167,9 @@ export default {
     }
   }
 }
+.variants-price {
+  .sf-price__regular {
+    font-size: 0.9em;
+  }
+}
 </style>