-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
17 changed files
with
388 additions
and
104 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| # ProductSummaryList | ||
|
|
||
| The `list-context.product-list` interface is a instance of the `list-context` interfaces, which means its part of a set of special interfaces that enables you to create lists of content that can be edited via Site Editor. | ||
|
|
||
| In order to create a list of products, you need to use the `list-context.product-list` block and a `product-summary.shelf`. | ||
|
|
||
| ## product-list-block | ||
|
|
||
| This block is used to specify what variation of `product-summary` to be used to create the list of products, and the `list-context.product-list` you want as follows: | ||
|
|
||
| ```json | ||
| "product-summary.shelf#demo1": { | ||
| "children": [ | ||
| "stack-layout#prodsum", | ||
| "product-summary-name", | ||
| "product-rating-inline", | ||
| "product-summary-space", | ||
| "product-summary-price", | ||
| "product-summary-buy-button" | ||
| ] | ||
| }, | ||
| "list-context.product-list#demo1": { | ||
| "blocks": ["product-summary.shelf#demo1"], | ||
| "children": ["slider-layout#demo-products"] | ||
| }, | ||
| ``` | ||
|
|
||
| `list-context.product-list` is also responsible for performing the GraphQL query that fetches the list of products, so it can receive the following props: | ||
|
|
||
| | Prop name | Type | Description | Default value | | ||
| | ---------------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | | ||
| | `category` | `String` | Category ID of the listed items. For sub-categories, use "/" (e.g. "1/2/3") | - | | ||
| | `specificationFilters` | `Array({ id: String, value: String })` | Specification Filters of the listed items. | [] | | ||
| | `collection` | `String` | Filter by collection. | - | | ||
| | `orderBy` | `Enum` | Ordination type of the items. Possible values: `OrderByTopSaleDESC`, `OrderByReleaseDateDESC`, `OrderByBestDiscountDESC`, `OrderByPriceDESC`, `OrderByPriceASC`, `OrderByNameASC`, `OrderByNameDESC` | `OrderByTopSaleDESC` | | ||
| | `hideUnavailableItems` | `Boolean` | Hides items that are unavailable. | `false` | | ||
| | `maxItems` | `Number` | Maximum items to be fetched. | `10` | |
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
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,181 @@ | ||
| import React from 'react' | ||
| import { useQuery } from 'react-apollo' | ||
| import { ProductListContext } from 'vtex.product-list-context' | ||
| import { ExtensionPoint, useTreePath } from 'vtex.render-runtime' | ||
| import { useListContext, ListContextProvider } from 'vtex.list-context' | ||
|
|
||
| import { mapCatalogProductToProductSummary } from './utils/normalize' | ||
| import ProductListEventCaller from './components/ProductListEventCaller' | ||
|
|
||
| import { productSearchV2 } from 'vtex.store-resources/Queries' | ||
|
|
||
| const ORDER_BY_OPTIONS = { | ||
| RELEVANCE: { | ||
| name: 'admin/editor.productSummaryList.orderType.relevance', | ||
| value: 'OrderByScoreDESC', | ||
| }, | ||
| TOP_SALE_DESC: { | ||
| name: 'admin/editor.productSummaryList.orderType.sales', | ||
| value: 'OrderByTopSaleDESC', | ||
| }, | ||
| PRICE_DESC: { | ||
| name: 'admin/editor.productSummaryList.orderType.priceDesc', | ||
| value: 'OrderByPriceDESC', | ||
| }, | ||
| PRICE_ASC: { | ||
| name: 'admin/editor.productSummaryList.orderType.priceAsc', | ||
| value: 'OrderByPriceASC', | ||
| }, | ||
| NAME_ASC: { | ||
| name: 'admin/editor.productSummaryList.orderType.nameAsc', | ||
| value: 'OrderByNameASC', | ||
| }, | ||
| NAME_DESC: { | ||
| name: 'admin/editor.productSummaryList.orderType.nameDesc', | ||
| value: 'OrderByNameDESC', | ||
| }, | ||
| RELEASE_DATE_DESC: { | ||
| name: 'admin/editor.productSummaryList.orderType.releaseDate', | ||
| value: 'OrderByReleaseDateDESC', | ||
| }, | ||
| BEST_DISCOUNT_DESC: { | ||
| name: 'admin/editor.productSummaryList.orderType.discount', | ||
| value: 'OrderByBestDiscountDESC', | ||
| }, | ||
| } | ||
| const parseFilters = ({ id, value }) => `specificationFilter_${id}:${value}` | ||
|
|
||
| function getOrdinationProp(attribute) { | ||
| return Object.keys(ORDER_BY_OPTIONS).map( | ||
| key => ORDER_BY_OPTIONS[key][attribute] | ||
| ) | ||
| } | ||
|
|
||
| const ProductSummaryList = ({ | ||
| children, | ||
| category = '', | ||
| collection, | ||
| hideUnavailableItems = false, | ||
| orderBy = ORDER_BY_OPTIONS.TOP_SALE_DESC.value, | ||
| specificationFilters = [], | ||
| maxItems = 10, | ||
| withFacets = false, | ||
| }) => { | ||
| const { data } = useQuery(productSearchV2, { | ||
| ssr: true, | ||
| name: 'productList', | ||
| variables: { | ||
| category, | ||
| ...(collection != null | ||
| ? { | ||
| collection, | ||
| } | ||
| : {}), | ||
| specificationFilters: specificationFilters.map(parseFilters), | ||
| orderBy, | ||
| from: 0, | ||
| to: maxItems - 1, | ||
| hideUnavailableItems, | ||
| withFacets, | ||
| }, | ||
| }) | ||
|
|
||
| const { list } = useListContext() | ||
| const { treePath } = useTreePath() | ||
|
|
||
| const componentList = | ||
| data.productSearch && | ||
| data.productSearch.products.map(product => { | ||
| const normalizedProduct = mapCatalogProductToProductSummary(product) | ||
|
|
||
| return ( | ||
| <ExtensionPoint | ||
| id="product-summary" | ||
| key={product.id} | ||
| treePath={treePath} | ||
| product={normalizedProduct} | ||
| /> | ||
| ) | ||
| }) | ||
|
|
||
| const newListContextValue = list.concat(componentList) | ||
|
|
||
| return ( | ||
| <ListContextProvider list={newListContextValue}> | ||
| {children} | ||
| </ListContextProvider> | ||
| ) | ||
| } | ||
|
|
||
| const EnhancedProductList = ({ children }) => { | ||
| const { ProductListProvider } = ProductListContext | ||
|
|
||
| return ( | ||
| <ProductListProvider> | ||
| <ProductSummaryList>{children}</ProductSummaryList> | ||
| <ProductListEventCaller /> | ||
| </ProductListProvider> | ||
| ) | ||
| } | ||
|
|
||
| EnhancedProductList.getSchema = () => ({ | ||
| title: 'admin/editor.productSummaryList.title', | ||
| description: 'admin/editor.productSummaryList.description', | ||
| type: 'object', | ||
| properties: { | ||
| category: { | ||
| title: 'admin/editor.productSummaryList.category.title', | ||
| description: 'admin/editor.productSummaryList.category.description', | ||
| type: 'string', | ||
| isLayout: false, | ||
| }, | ||
| specificationFilters: { | ||
| title: 'admin/editor.productSummaryList.specificationFilters.title', | ||
| type: 'array', | ||
| items: { | ||
| title: | ||
| 'admin/editor.productSummaryList.specificationFilters.item.title', | ||
| type: 'object', | ||
| properties: { | ||
| id: { | ||
| type: 'string', | ||
| title: | ||
| 'admin/editor.productSummaryList.specificationFilters.item.id.title', | ||
| }, | ||
| value: { | ||
| type: 'string', | ||
| title: | ||
| 'admin/editor.productSummaryList.specificationFilters.item.value.title', | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| collection: { | ||
| title: 'admin/editor.productSummaryList.collection.title', | ||
| type: 'number', | ||
| isLayout: false, | ||
| }, | ||
| orderBy: { | ||
| title: 'admin/editor.productSummaryList.orderBy.title', | ||
| type: 'string', | ||
| enum: getOrdinationProp('value'), | ||
| enumNames: getOrdinationProp('name'), | ||
| default: ORDER_BY_OPTIONS.TOP_SALE_DESC.value, | ||
| isLayout: false, | ||
| }, | ||
| hideUnavailableItems: { | ||
| title: 'admin/editor.productSummaryList.hideUnavailableItems', | ||
| type: 'boolean', | ||
| default: false, | ||
| isLayout: false, | ||
| }, | ||
| maxItems: { | ||
| title: 'admin/editor.productSummaryList.maxItems.title', | ||
| type: 'number', | ||
| isLayout: false, | ||
| default: 10, | ||
| }, | ||
| }, | ||
| }) | ||
|
|
||
| export default EnhancedProductList |
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,8 @@ | ||
| import React, { Fragment } from 'react' | ||
|
|
||
| export const useProductImpression = () => null | ||
| export const ProductListContext = { | ||
| useProductListDispatch: () => null, | ||
| // eslint-disable-next-line react/display-name | ||
| ProductListProvider: ({ children }) => <Fragment>{children}</Fragment>, | ||
| } |
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,8 @@ | ||
| import { useProductImpression } from 'vtex.product-list-context' | ||
|
|
||
| const ProductListEventCaller = () => { | ||
| useProductImpression() | ||
| return null | ||
| } | ||
|
|
||
| export default ProductListEventCaller |
Oops, something went wrong.