diff --git a/src/products/components/ProductList/ProductList.tsx b/src/products/components/ProductList/ProductList.tsx index cbc8e4e37..8a0e48cd6 100644 --- a/src/products/components/ProductList/ProductList.tsx +++ b/src/products/components/ProductList/ProductList.tsx @@ -18,6 +18,7 @@ import { ProductListColumns } from "@saleor/config"; import { maybe, renderCollection } from "@saleor/misc"; import { getAttributeIdFromColumnValue, + getProductPriceRange, isAttributeColumnValue } from "@saleor/products/components/ProductListPage/utils"; import { AvailableInGridAttributes_grid_edges_node } from "@saleor/products/types/AvailableInGridAttributes"; @@ -372,13 +373,48 @@ export const ProductList: React.FC = props => { displayColumns={settings.columns} > - {maybe(() => product.basePrice) && - maybe(() => product.basePrice.amount) !== undefined && - maybe(() => product.basePrice.currency) !== undefined ? ( - - ) : ( - - )} + {maybe(() => { + const { max, min } = getProductPriceRange( + product.variants + ); + const currency = product.variants[0].price.currency; + + if (max === min) { + return ( + + ); + } else { + return ( + <> + {intl.formatMessage({ + defaultMessage: "From", + description: "from" + })}{" "} + {" "} + {intl.formatMessage({ + defaultMessage: "to", + description: "to" + })}{" "} + + + ); + } + }, )} diff --git a/src/products/components/ProductListPage/utils.ts b/src/products/components/ProductListPage/utils.ts index 2f0735182..9032fb8e0 100644 --- a/src/products/components/ProductListPage/utils.ts +++ b/src/products/components/ProductListPage/utils.ts @@ -1,3 +1,5 @@ +import { ProductList_products_edges_node_variants } from "@saleor/products/types/ProductList"; + const prefix = "attribute"; export function getAttributeColumnValue(id: string) { @@ -11,3 +13,21 @@ export function isAttributeColumnValue(value: string) { export function getAttributeIdFromColumnValue(value: string) { return value.substr(prefix.length + 1); } + +export function getProductPriceRange( + productVariants: ProductList_products_edges_node_variants[] +) { + let max = productVariants[0].price.amount; + let min = productVariants[0].price.amount; + + for (let i = 1, len = productVariants.length; i < len; i++) { + const price = productVariants[i].price; + max = price.amount > max ? price.amount : max; + min = price.amount < min ? price.amount : min; + } + + return { + max, + min + }; +} diff --git a/src/products/queries.ts b/src/products/queries.ts index 64971fb93..9e0f7c911 100644 --- a/src/products/queries.ts +++ b/src/products/queries.ts @@ -330,6 +330,12 @@ const productListQuery = gql` name } } + variants { + price { + amount + currency + } + } } } pageInfo { diff --git a/src/products/types/ProductList.ts b/src/products/types/ProductList.ts index 4f0fb7058..fc63e6d08 100644 --- a/src/products/types/ProductList.ts +++ b/src/products/types/ProductList.ts @@ -36,6 +36,17 @@ export interface ProductList_products_edges_node_attributes { values: (ProductList_products_edges_node_attributes_values | null)[]; } +export interface ProductList_products_edges_node_variants_price { + __typename: "Money"; + amount: number; + currency: string; +} + +export interface ProductList_products_edges_node_variants { + __typename: "ProductVariant"; + price: ProductList_products_edges_node_variants_price | null; +} + export interface ProductList_products_edges_node { __typename: "Product"; id: string; @@ -45,6 +56,7 @@ export interface ProductList_products_edges_node { isPublished: boolean; productType: ProductList_products_edges_node_productType; attributes: ProductList_products_edges_node_attributes[]; + variants: (ProductList_products_edges_node_variants | null)[] | null; } export interface ProductList_products_edges {