Skip to content

Commit

Permalink
fixes of i18n on readme.md (#374)
Browse files Browse the repository at this point in the history 
#### What problem is this solving?

Relates to task
[LOC-10552](https://vtex-dev.atlassian.net/browse/LOC-10552).

#### How to test it?

<!--- Don't forget to add a link to a Workspace where this branch is
linked -->

[Workspace](Link goes here!)

#### Screenshots or example usage:

<!--- Add some images or gifs to showcase changes in behaviour or
layout. Example: before and after images -->

#### Describe alternatives you've considered, if any.

<!--- Optional -->

#### Related to / Depends on

<!--- Optional -->

#### How does this PR make you feel? [:link:](http://giphy.com/)

<!-- Go to http://giphy.com/ and pick a gif that represents how this PR
makes you feel -->

![](put .gif link here - can be found under "advanced" on giphy)


[LOC-10552]:
https://vtex-dev.atlassian.net/browse/LOC-10552?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
  • Loading branch information
@GeorgeLimaDev
GeorgeLimaDev authored May 3, 2023
1 parent ed450ad commit 6ac13f9
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 29 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
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.83.0] - 2023-05-02

Expand Down
55 changes: 26 additions & 29 deletions docs/README.md
View file
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

0 comments on commit 6ac13f9

Please sign in to comment.