-
Notifications
You must be signed in to change notification settings - Fork 119
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(category): move products loading to onMount hook to avoid caching…
… prices (#793) * refactor(prices): make prices non cachable - add usePrice composable in catalog module - rework category page to load prices onMounted lifecycle to avoid caching * refactor(home): make new product carousel non cachable - load products data onMounted to avoid price caching * fix(theme): mobile store banner - replace SfButton with SfLink so we can have images inside elements without breaking hydration * refactor(theme): change the way related and upsell products are loaded - upsell/related products on the PDP will be now loaded onMounted hook M2-306
- Loading branch information
1 parent
2c7c501
commit e9c2bc1
Showing
9 changed files
with
166 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
packages/theme/modules/catalog/pricing/__tests__/usePrice.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import { usePrice } from '~/modules/catalog/pricing/usePrice'; | ||
| import { useApi } from '~/composables/useApi'; | ||
| import getPricesQuery from '~/modules/catalog/pricing/getPricesQuery.gql'; | ||
|
|
||
| jest.mock('~/composables/useApi', () => ({ | ||
| useApi: jest.fn(), | ||
| })); | ||
|
|
||
| describe('usePrice', () => { | ||
| it('Factory returns required methods', () => { | ||
| const actual = usePrice(); | ||
| expect(actual).toHaveProperty('getPricesBySku'); | ||
| expect(actual).toHaveProperty('getPrices'); | ||
| }); | ||
|
|
||
| it('getPrices', async () => { | ||
| const { getPrices } = usePrice(); | ||
| const pageSize = 20; | ||
| const currentPage = 1; | ||
| const variables = { filter: { sku: { eq: 'test' } }, pageSize, currentPage }; | ||
| const expectedResult = { items: [] }; | ||
| const useApiMock = { query: jest.fn(() => (expectedResult)) }; | ||
|
|
||
| useApi.mockReturnValue(useApiMock); | ||
| const actualResult = await getPrices(variables); | ||
|
|
||
| expect(useApiMock.query).toBeCalledTimes(1); | ||
| expect(useApiMock.query).toBeCalledWith(getPricesQuery, variables); | ||
| expect(expectedResult).toMatchObject(actualResult); | ||
| }); | ||
|
|
||
| it('getPricesBySku', async () => { | ||
| const { getPricesBySku } = usePrice(); | ||
| const pageSize = 20; | ||
| const currentPage = 1; | ||
| const skus = ['sku1', 'sku2']; | ||
| const expectedVariables = { filter: { sku: { in: skus } }, pageSize, currentPage }; | ||
| const expectedResult = { items: [] }; | ||
| const useApiMock = { query: jest.fn(() => (expectedResult)) }; | ||
|
|
||
| useApi.mockReturnValue(useApiMock); | ||
| const actualResult = await getPricesBySku(skus, pageSize, currentPage); | ||
|
|
||
| expect(useApiMock.query).toBeCalledTimes(1); | ||
| expect(useApiMock.query).toBeCalledWith(getPricesQuery, expectedVariables); | ||
| expect(expectedResult).toMatchObject(actualResult); | ||
| }); | ||
| }); |
33 changes: 33 additions & 0 deletions
33
packages/theme/modules/catalog/pricing/getPricesQuery.gql.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { gql } from 'graphql-request'; | ||
|
|
||
| export default gql` | ||
| query productsList($search: String = "", $filter: ProductAttributeFilterInput, $pageSize: Int = 20, $currentPage: Int = 1, $sort: ProductAttributeSortInput) { | ||
| products(search: $search, filter: $filter, pageSize: $pageSize, currentPage: $currentPage, sort: $sort) { | ||
| items { | ||
| sku | ||
| price_range { | ||
| maximum_price { | ||
| final_price { | ||
| currency | ||
| value | ||
| } | ||
| regular_price { | ||
| currency | ||
| value | ||
| } | ||
| } | ||
| minimum_price { | ||
| final_price { | ||
| currency | ||
| value | ||
| } | ||
| regular_price { | ||
| currency | ||
| value | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { useApi } from '~/composables/useApi'; | ||
| import getPricesQuery from '~/modules/catalog/pricing/getPricesQuery.gql'; | ||
| import { PriceRange } from '~/modules/GraphQL/types'; | ||
| import { GetProductSearchParams } from '~/composables/types'; | ||
|
|
||
| export interface PriceItem { | ||
| price_range: PriceRange; | ||
| sku: String; | ||
| } | ||
|
|
||
| export interface PriceItems { | ||
| items: PriceItem[] | ||
| } | ||
|
|
||
| export const usePrice = () => { | ||
| const getPrices = async (variables: GetProductSearchParams): Promise<PriceItems> => { | ||
| const { query } = useApi(); | ||
| const { products } = await query(getPricesQuery, variables); | ||
|
|
||
| return products ?? { items: [] }; | ||
| }; | ||
|
|
||
| const getPricesBySku = async (skus: string[], pageSize = 20, currentPage = 1): Promise<PriceItems> => getPrices( | ||
| { filter: { sku: { in: skus } }, pageSize, currentPage }, | ||
| ); | ||
|
|
||
| return { getPricesBySku, getPrices }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters