Merge pull request #351 from vtex-apps/doc/update

Doc/update

CHANGELOG.md

@@ -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
+- Product Summary documentation.
 
 ## [2.79.0] - 2022-03-10
 

docs/ProductSummaryAttachmentList.md

@@ -2,13 +2,22 @@
 
 # Product Summary Attachment List
 
-_Product Summary Attachment List_ renders the assembly options added and removed of an item.
+Product Summary Attachment is the block exported by the [Product Summary app](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary) responsible for rendering the [attachment](https://help.vtex.com/en/tutorial/o-que-e-um-anexo--aGICk0RVbqKg6GYmQcWUm) options available for a product.
+
+![att-example](https://user-images.githubusercontent.com/67270558/156370029-833f68ce-a270-4e01-ae20-5d63061f0a03.png)
+
 
 ## Configuration
 
-You should follow the usage instruction in the main [README](https://github.com/vtex-apps/product-summary/blob/master/README.md#usage).
+1. Import the `vtex.product-summary` app to your theme's dependencies in the `manifest.json`:
 
-Then, add `product-summary-sku-name` block into your app theme as children of `product-summary.shelf`, as we do in our [Product Summary app](https://github.com/vtex-apps/product-summary/blob/master/store/blocks.json).
+```json
+  "dependencies": {
+    "vtex.product-summary": "2.x"
+  }
+```
+
+2. Add the `product-summary-attachment-list` block to a store template of your choice as a child of the `product-summary.shelf` block. For example:
 
 ```diff
    "product-summary.shelf": {
@@ -23,9 +32,11 @@ Then, add `product-summary-sku-name` block into your app theme as children of `p
   },
 ```
 
+After adding the `product-summary-attachment-list` block to your store theme, use the VTEX Admin to add attachments to your products to display the component in your store correctly. For more information, please refer to [Adding an attachment](https://help.vtex.com/en/tutorial/cadastrar-um-anexo--7zHMUpuoQE4cAskqEUWScU).
+
 ## 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 in this and other blocks, follow the [Using CSS Handles for store customization](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-using-css-handles-for-store-customization) guide.
 
 | CSS Handles  |
 | ------------ |

docs/ProductSummaryBrand.md

@@ -4,15 +4,30 @@
 
 ![https://img.shields.io/badge/-Deprecated-red](https://img.shields.io/badge/-Deprecated-red)
 
-> ⚠️ The Product Summary Brand block has been deprecated in favor of the Product Brand from the app vtex.store-components. Although support for this block is still granted, we strongly recommend you to update your store theme with the Product Brand block in order to keep up with the component's evolution.
+> ⚠️ 
+> 
+> The Product Summary Brand block has been deprecated in favor of the [Product Brand](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-productbrand) app from the [Store Components](https://developers.vtex.com/vtex-developer-docs/docs/store-components) collection. Although support for this block is still granted, we strongly recommend updating your store theme with the Product Brand block.
 
-_Product Summary Brand_ renders the brand of the product.
+Product Summary Brand is a block exported by the [Product Summary app](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary) responsible for rendering the brand of the product.
+
+![product-brand](https://user-images.githubusercontent.com/52087100/70259346-bb081f80-176c-11ea-84db-5785c45829ce.png)
+
+## Before you start
+
+Ensure that you have registered [brands](https://help.vtex.com/en/tutorial/what-is-a-brand--QU07yhHoaWcEYseEucOQW) in your store. To do so, follow the [How to register brands](https://help.vtex.com/en/tutorial/registering-brands--tutorials_1414) guide.
 
 ## Configuration
 
-You should follow the usage instruction in the main [README](https://github.com/vtex-apps/product-summary/blob/master/README.md#usage).
+1. Import the `vtex.product-summary` app to your theme's dependencies in the `manifest.json`:
+
+```json
+  "dependencies": {
+    "vtex.product-summary": "2.x"
+  }
+```
+
+2. Add the `product-summary-brand` block to your store theme as a child of the `product-summary.shelf` block. For example:
 
-Then, add `product-summary-brand` block into your app theme as children of `product-summary.shelf`, as we do in our [Product Summary app](https://github.com/vtex-apps/product-summary/blob/master/store/blocks.json).
 
 ```diff
    "product-summary.shelf": {

docs/ProductSummaryBuyButton.md

@@ -2,15 +2,17 @@
 
 # Product Summary Buy Button
 
-Product Summary Buy Button is a block exported by the Product Summary app responsible for rendering a Buy Button in the Product Summary Shelf block.
+Product Summary Buy Button is the block exported by the [Product Summary app](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary) responsible for rendering a Buy Button in the [Product Summary Shelf](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary-productsummaryshelf) block.
 
-![](https://user-images.githubusercontent.com/52087100/76864047-38006600-683f-11ea-8a4e-74dc91712984.png)
+![buy-button](https://user-images.githubusercontent.com/52087100/76864047-38006600-683f-11ea-8a4e-74dc91712984.png)
 
-:warning: **The Product Summary Buy Button only effectively function i.e. only adds products to the Minicart if the store still uses the [Minicart v1](https://github.com/vtex-apps/minicart/blob/383d7bbd3295f06d1b5854a0add561a872e1515c/docs/README.md)**. When using the [Minicart v2](https://vtex.io/docs/components/all/vtex.minicart/), you should configure the [Add To Cart Button](https://vtex.io/docs/components/all/vtex.add-to-cart-button/) in the `product-summary.shelf` block instead.
+> ⚠️
+>
+> **The Product Summary Buy Button only effectively adds products to the Minicart if the store still uses the [Minicart v1](https://github.com/vtex-apps/minicart/blob/383d7bbd3295f06d1b5854a0add561a872e1515c/docs/README.md)**. If the store uses the [Minicart v2](https://vtex.io/docs/components/all/vtex.minicart/), please configure the [Add To Cart Button](https://developers.vtex.com/vtex-developer-docs/docs/vtex-add-to-cart-button/) in the `product-summary.shelf` block instead.
 
 ## Configuration
 
-1. Add the [Product Summary app](https://vtex.io/docs/components/content-blocks/vtex.product-summary/) to your theme's dependencies on the `manifest.json`, for example:
+1. Import the `vtex.product-summary` app to your theme's dependencies in the `manifest.json`:
 
 ```json
   dependencies: {
@@ -59,7 +61,7 @@ Product Summary Buy Button is a block exported by the Product Summary app respon
 
 ## 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 in this and other blocks, follow the [Using CSS Handles for store customization](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-using-css-handles-for-store-customization) guide.
 
 | CSS Handles |
 | --- |

docs/ProductSummaryDescription.md

@@ -2,13 +2,20 @@
 
 # Product Summary Description
 
-_Product Summary Description_ renders the description of the product.
+Product Summary Description is a block exported by the [Product Summary app](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary) responsible for rendering the description of the product.
 
+![product-description-example](https://user-images.githubusercontent.com/67270558/156373901-36a7a33d-9b32-4e0d-8798-ee4ddd01982d.png)
 ## Configuration
 
-You should follow the usage instruction in the main [README](https://github.com/vtex-apps/product-summary/blob/master/README.md#usage).
+1. Import the `vtex.product-summary` app to your theme's dependencies in the `manifest.json`:
 
-Then, add `product-summary-description` block into your app theme as children of `product-summary.shelf`, as we do in our [Product Summary app](https://github.com/vtex-apps/product-summary/blob/master/store/blocks.json).
+```json
+  dependencies: {
+    "vtex.product-summary": "2.x"
+  }
+```
+
+2. Add the `product-summary-description` block to your store theme as a child of `product-summary.shelf`. For example:
 
 ```diff
    "product-summary.shelf": {
@@ -25,7 +32,7 @@ Then, add `product-summary-description` block into your app theme as children of
 
 ## 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 in this and other blocks, follow the [Using CSS Handles for store customization](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-using-css-handles-for-store-customization) guide.
 
 | CSS Handles        |
 | ------------------ |

docs/ProductSummaryImage.md

@@ -1,12 +1,20 @@
 # Product Summary Image
 
-`product-summary-image` is a block exported by the Product Summary app that renders the product's image.
+`product-summary-image` is a block exported by the [Product Summary app](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary) that renders the product's image.
 
-![foto product-summary-image](https://user-images.githubusercontent.com/52087100/79134289-d5d64a80-7d83-11ea-84e6-a5a237acfae1.png)
+![foto-product-summary-image](https://user-images.githubusercontent.com/52087100/79134289-d5d64a80-7d83-11ea-84e6-a5a237acfae1.png)
 
 ## Configuration
 
-:warning: The `product-summary-image` is exported by the Product Summary app. Therefore, in order to configure it as a block, you must first follow the configuration instructions given in the [**Product Summary main documentation**](https://vtex.io/docs/components/all/vtex.product-summary@2.53.0/).
+1. Import the `vtex.product-summary` app to your theme's dependencies in the `manifest.json`:
+
+```json
+  dependencies: {
+    "vtex.product-summary": "2.x"
+  }
+```
+
+2. Add the `product-summary-image` block as a child of the `product-summary.shelf` block:
 
 ```json
 {
@@ -23,6 +31,10 @@
         "product-summary-buy-button"
       ]
     },
+```
+3. Then, declare the `product-summary-image` and configure its behavior using the props stated below.
+
+```json
     "product-summary-image": {
       "props": {
         "showBadge": true,
@@ -96,7 +108,7 @@ The `width`, `height`, `aspectRatio` and `maxHeight` props use the [responsive v
 
 ## Customization
 
-In order to apply CSS customization to 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 in this and other blocks, follow the [Using CSS Handles for store customization](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-using-css-handles-for-store-customization) guide.
 
 | CSS Handles |
 | :----------:|

docs/ProductSummaryList.md

@@ -1,8 +1,10 @@
 # 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.
+The  Product Summary List app (`list-context.product-list`) is an instance of the `list-context` interface - a set of special interfaces used to create lists of content, such as a list of products.
 
-In order to create a list of products, you need to use the `list-context.product-list` block and a `product-summary.shelf`.
+![list-context-example](https://user-images.githubusercontent.com/67270558/153598896-f252b9f4-9fce-4242-b311-48d52e0345e7.png)
+
+To create a list of products, you must use the `list-context.product-list` and `product-summary.shelf` blocks.
 
 ## product-list-block
 
@@ -64,4 +66,6 @@ For `PreferredSKUEnum`:
 | Cheapest        | `PRICE_ASC`       | Selects the cheapest SKU in stock it finds.        |
 | Most Expensive  | `PRICE_DESC`      | Selects the most expensive SKU in stock it finds.  |
 
-⚠️ There's a way to select which SKU should take preference over this prop. You can create a Product (field) specification and per product assign the value of the desired SKU to be initially selected. Keep in mind that If the specification doesn't exist or if the value is empty, it will use the `preferredSKU` prop as fallback. You can read more about it, and how to implement it in [Recipes](https://vtex.io/docs/recipes/all)
+> ⚠️ 
+>
+> To select which SKU will take preference over this prop, create a Product (field) specification and assign the value of the desired SKU to be initially set for each product. If the specification doesn't exist or the value is empty, the `preferredSKU` prop will be used as a fallback. For more information, please refer to [this guide](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-configuring-custom-images-for-the-sku-selector).

docs/ProductSummaryName.md

@@ -2,13 +2,20 @@
 
 # Product Summary Name
 
-_Product Summary Name_ renders the product name.
+Product Summary Name is a block exported by the [Product Summary app](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary) responsible for rendering the product name.
 
+![name-example](https://user-images.githubusercontent.com/67270558/156374478-42cc320d-8aa9-432a-95c1-cf884534cbb1.png)
 ## Configuration
 
-You should follow the usage instruction in the main [README](https://github.com/vtex-apps/product-summary/blob/master/README.md#usage).
+1. Import the `vtex.product-summary` app to your theme's dependencies in the `manifest.json`:
 
-Then, add `product-summary-name` block into your app theme as children of `product-summary.shelf`, as we do in our [Product Summary app](https://github.com/vtex-apps/product-summary/blob/master/store/blocks.json).
+```json
+  dependencies: {
+    "vtex.product-summary": "2.x"
+  }
+```
+
+2. Add the `product-summary-name` block to your store theme as a child of `product-summary.shelf`. For example:
 
 ```diff
    "product-summary.shelf": {
@@ -20,6 +27,8 @@ Then, add `product-summary-name` block into your app theme as children of `produ
     ]
   },
 ```
+3. Then, declare the `product-summary-name` and configure its behavior using the props stated below.
+
 
 | Prop name | Type | Description | Default value |
 | ----------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
@@ -36,7 +45,7 @@ Then, add `product-summary-name` block into your app theme as children of `produ
 
 ## 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 in this and other blocks, follow the [Using CSS Handles for store customization](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-using-css-handles-for-store-customization) guide.
 
 | CSS Handles        |
 | ------------------ |

docs/ProductSummaryPrice.md

@@ -4,15 +4,25 @@
 
 ![https://img.shields.io/badge/-Deprecated-red](https://img.shields.io/badge/-Deprecated-red)
 
-:warning: **The Product Summary Price block has been deprecated in favor of the [Product Price](https://vtex.io/docs/components/all/vtex.product-price/) app**. Although support for this block is still granted, we strongly recommend you to update your store theme with the Product Price's blocks in order to keep up with the component's evolution.
+> ⚠️
+>
+> **The Product Summary Price 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 update your store theme with the Product Price app to stay up with the component's evolution.
 
-`ProductSummaryPrice` renders the product's price.
+`ProductSummaryPrice` is a block exported by the [Product Summary app](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary) responsible for rendering the product's price.
+
+![price-example](https://user-images.githubusercontent.com/67270558/156375295-9fc9b1b8-2534-4a12-ac59-4db52b763bf7.png)
 
 ### Configuration
 
-You should follow the usage instruction in the main [README](https://github.com/vtex-apps/product-summary/blob/master/README.md#usage).
+1. Import the `vtex.product-summary` app to your theme's dependencies in the `manifest.json`:
+
+```json
+  dependencies: {
+    "vtex.product-summary": "2.x"
+  }
+```
 
-Then, add `product-summary-price` block into your app theme as children of `product-summary.shelf`, as we do in our [Product Summary app](https://github.com/vtex-apps/product-summary/blob/master/store/blocks.json).
+2. Add the `product-summary-price` block to your store theme as a child of the `product-summary.shelf` block. For example:
 
 ```diff
    "product-summary.shelf": {
@@ -26,6 +36,7 @@ Then, add `product-summary-price` block into your app theme as children of `prod
     ]
   },
 ```
+3. Then, declare the `product-summary-price` and configure its behavior using the props stated below.
 
 | Prop name           | Type      | Description                      | Default value |
 | ------------------- | --------- | -------------------------------- | ------------- |
@@ -41,7 +52,7 @@ Then, add `product-summary-price` block into your app theme as children of `prod
 
 ## 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 in this and other blocks, follow the [Using CSS Handles for store customization](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-using-css-handles-for-store-customization) guide.
 
 | CSS Handles           |
 | ------------------- |

docs/ProductSummarySKUName.md

@@ -2,13 +2,19 @@
 
 # Product Summary SKU Name
 
-_Product Summary SKU Name_ renders the selected SKU's name.
+Product Summary SKU Name is a block exported by the [Product Summary app](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary) responsible for rendering the selected SKU's name.
 
 ## Configuration
 
-You should follow the usage instruction in the main [README](https://github.com/vtex-apps/product-summary/blob/master/README.md#usage).
+1. Import the `vtex.product-summary` app to your theme's dependencies in the `manifest.json`:
 
-Then, add `product-summary-sku-name` block into your app theme as children of `product-summary.shelf`, as we do in our [Product Summary app](https://github.com/vtex-apps/product-summary/blob/master/store/blocks.json).
+```json
+  "dependencies": {
+    "vtex.product-summary": "2.x"
+  }
+```
+
+2. Add the `product-summary-sku-name` block to your store theme as a child of `product-summary.shelf`. For example:
 
 ```diff
    "product-summary.shelf": {
@@ -25,7 +31,7 @@ Then, add `product-summary-sku-name` block into your app theme as children of `p
 
 ## 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 in this and other blocks, follow the [Using CSS Handles for store customization](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-using-css-handles-for-store-customization) guide.
 
 | CSS Handles        |
 | ------------------ |