Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixes of i18n on readme.md #374

Merged
merged 2 commits into from
May 3, 2023
Merged

fixes of i18n on readme.md #374

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
94cb285
fixes of i18n on readme.md
GeorgeLimaDev Apr 25, 2023
b8464f6
updated a single line with a reviewed translation.
GeorgeLimaDev Apr 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).

## [Unreleased]
### Fixed
- Fixes of i18n on readme.md

## [2.82.0] - 2023-03-28

Expand Down
55 changes: 26 additions & 29 deletions docs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@
[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

Product Summary is an app responsible for summarizing product information (such as name, price and image) in other store blocks, such as the [Shelf](https://vtex.io/docs/components/all/vtex.shelf/) and the [Minicart](https://vtex.io/docs/components/all/vtex.minicart/).
Product Summary is an app for summarizing product information (such as name, price, and image) in other store blocks, such as the [Shelf](https://developers.vtex.com/docs/guides/vtex-shelf/) and the [Minicart](https://developers.vtex.com/docs/guides/vtex-minicart/).

![image](https://user-images.githubusercontent.com/284515/70235170-1a503a80-1741-11ea-952d-07b178995f92.png)
![image](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-summary-0.png)

## Configuration
## Configurating the product summary

1. Import the `vtex.product-summary` app to your theme's dependencies in the `manifest.json`:

Expand All @@ -20,24 +20,24 @@ Product Summary is an app responsible for summarizing product information (such
}
```

Now, you are able to use all blocks exported by the `product-summary` app. Check out the full list below:

| Block name | Description |
| -------------- | ----------- |
| [`list-context.product-list`](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary-productsummarylist) | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) Renders the list of products in the Product Summary component. It fetches product data and provides it to the `product-summary.shelf` block. This block, then, provides its child blocks with the product data. |
| `product-summary.shelf` | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) Logical block responsible for providing the needed structure for the Product Summary component through its child blocks (listed below).
| [`product-summary-attachment-list`](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary-productsummaryattachmentlist) | Renders a list for the product [attachments](https://help.vtex.com/tutorial/adding-an-attachment--7zHMUpuoQE4cAskqEUWScU). |
| [`product-summary-brand`](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary-productsummarybrand) | Renders the product brand. |
| [`product-summary-buy-button`](https://vtex.io/docs/components/all/vtex.product-summary/product-summary-buy-button) | Renders the Buy Button. This block must be configured only if your store uses the [Minicart v1](https://github.com/vtex-apps/minicart/blob/383d7bbd3295f06d1b5854a0add561a872e1515c/docs/README.md). If your store uses the [Minicart v2](https://developers.vtex.com/vtex-developer-docs/docs/vtex-minicart), please configure the [**Add To Cart Button**](https://developers.vtex.com/vtex-developer-docs/docs/vtex-add-to-cart-button) instead. |
| [`product-summary-description`](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary-productsummarydescription) | Renders the product description. |
| [`product-summary-image`](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary-productsummaryimage) | Renders the product image. |
| [`product-summary-name`](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary-productsummaryname) | Renders the product name. |
| [`product-summary-sku-name`](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary-productsummaryskuname) | Renders the selected sku name. |
| `product-summary-price` | ![https://img.shields.io/badge/-Deprecated-red](https://img.shields.io/badge/-Deprecated-red) Renders the product price. This block has been deprecated in favor of the [Product Price](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-price) app. Although support for this block is still available, we strongly recommend that you use the Product Price app. |
| [`product-summary-sku-selector`](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary-productsummaryskuselector) | Renders the SKU Selector block. |
| [`product-specification-badges`](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary-productsummaryspecificationbadges) | Renders badges based on the product specifications. |

2. Add the `list-context.product-list` block to a store template of your choice and declare the `product-summary.shelf` in its block list. For example:
Now, you can use all blocks exported by the `product-summary` app. See the full list below:

| Block name | Description |
| ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`list-context.product-list`](https://developers.vtex.com/docs/guides/vtex-product-summary-productsummarylist) | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) Renders the list of products in the Product Summary component. It fetches product information and provides it to the `product-summary.shelf` block. Then, this block provides its child blocks with the product information. |
| `product-summary.shelf` | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) Logical block that provides the needed structure for the Product Summary component through its child blocks (listed below). |
| [`product-summary-attachment-list`](https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryattachmentlist) | Renders a list for product [attachments](https://help.vtex.com/tutorial/adding-an-attachment--7zHMUpuoQE4cAskqEUWScU). |
| [`product-summary-brand`](https://developers.vtex.com/docs/guides/vtex-product-summary-productsummarybrand) | Renders the product brand. |
| [`product-summary-buy-button`](https://developers.vtex.com/docs/guides/vtex-product-summary-productsummarybuybutton) | Renders the Buy button. This block must only be configured if your store uses the [Minicart v1](https://github.com/vtex-apps/minicart/blob/383d7bbd3295f06d1b5854a0add561a872e1515c/docs/README.md). If your store uses the [Minicart v2](https://developers.vtex.com/docs/guides/vtex-minicart), please configure the [**Add to Cart button**](https://developers.vtex.com/docs/guides/vtex-add-to-cart-button) instead. |
| [`product-summary-description`](https://developers.vtex.com/docs/guides/vtex-product-summary-productsummarydescription) | Renders the product description. |
| [`product-summary-image`](https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryimage) | Renders the product image. |
| [`product-summary-name`](https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryname) | Renders the product name. |
| [`product-summary-sku-name`](https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryskuname) | Renders the selected SKU name. |
| `product-summary-price` | ![https://img.shields.io/badge/-Deprecated-red](https://img.shields.io/badge/-Deprecated-red) Renders the product price. This block has been deprecated in favor of the [Product Price](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-summary-3.png) app. Although support for this block is still available, we strongly recommend using the Product Price app. |
| [`product-summary-sku-selector`](https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryskuselector) | Renders the SKU Selector block. |
| [`product-specification-badges`](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary-productsummaryspecificationbadges) | Renders badges based on product specifications. |

2. Add the `list-context.product-list` block to a store template of your choice, and declare the `product-summary.shelf` in its block list. For example:

```json
{
Expand All @@ -46,11 +46,9 @@ Now, you are able to use all blocks exported by the `product-summary` app. Check
},
```

> ℹ️ Info
>
> Although the name of the block 'product-summary.shelf' alludes to the Shelf component, this block is not required to create a Shelf component. The Product Summary Shelf is used to present summary product information in other components, such as the [Minicart](https://developers.vtex.com/vtex-developer-docs/docs/vtex-minicart) and the [Search Results](https://developers.vtex.com/vtex-developer-docs/docs/vtex-search-result) page.

3. Add the blocks from the list above as children of the `product-summary.shelf`, considering the product information you want to present in the product list. Take the following example in which the product name, description, image, price, SKU selector, and Buy Button are all displayed in the Product Summary:
> ℹ️ Although the block name 'product-summary.shelf' alludes to the Shelf component, it is not necessary to use this block in order to create a shelf component. The Product Summary Shelf displays a summary of the product information in other components, such as the [Minicart](https://developers.vtex.com/docs/guides/vtex-minicart) and the [Search Results](https://developers.vtex.com/docs/guides/vtex-search-result) pages.

3. Add the blocks from the list above as children of the `product-summary.shelf`, considering the product information you want to display in the product list. Take the following example in which the product name, description, image, price, SKU selector, and Buy button are all displayed in the Product Summary:

```json
{
Expand All @@ -71,12 +69,11 @@ Now, you are able to use all blocks exported by the `product-summary` app. Check
}
```


## Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).
To apply CSS customizations to this and other blocks, follow the instructions given in the recipe on [Using CSS handles for store customization](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization).

| CSS Handles |
| CSS handles |
| -------------------------- |
| `aspectRatio` |
| `buyButton` |
Expand Down