From 0944db2d70ec9c3b313aaf19bbe1cfc57a225ea7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=C3=A1rbara=20Celi?= <112641072+barbara-celi@users.noreply.github.com> Date: Tue, 3 Dec 2024 12:00:43 -0300 Subject: [PATCH 1/6] Create vtex-io-documentation-creating-a-quickview-using-modal-layout.md --- ...creating-a-quickview-using-modal-layout.md | 75 +++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 docs/localization/vtex-io-documentation-creating-a-quickview-using-modal-layout.md diff --git a/docs/localization/vtex-io-documentation-creating-a-quickview-using-modal-layout.md b/docs/localization/vtex-io-documentation-creating-a-quickview-using-modal-layout.md new file mode 100644 index 0000000000..62f13bb722 --- /dev/null +++ b/docs/localization/vtex-io-documentation-creating-a-quickview-using-modal-layout.md @@ -0,0 +1,75 @@ +--- +title: "Creating a Quickview using Modal Layout" +slug: "vtex-io-documentation-creating-a-quickview-using-modal-layout" +hidden: false +createdAt: "2024-11-25T14:01:22.113Z" +updatedAt: "" +excerpt: "Learn how to create a Quickview feature using the Modal Layout app." +--- + +In this guide, you will learn how to configure a Quickview feature in your store using the [Modal Layout](https://developers.vtex.com/docs/guides/vtex-modal-layout) app. The quickview allows users to view product details directly from the homepage or category pages without navigating to the product's detailed page. + +![quickview](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-modal-layout-0.png) + +>⚠ This guide is based on the [Store Theme template](https://github.com/vtex-apps/store-theme), a boilerplate with pre-set configurations for creating a store using [Store Framework](LINK). Learn more in [Available templates](https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme#available-themes). + +## Instructions + +### Step 1 - Adding the Modal Layout app to the theme's dependencies + +1. Using a [development workspace](https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace), open your [Store Theme](https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme) app using the code editor of your choice. + +2. Open the `manifest.json` file and add the Modal layout app to your theme's dependencies. + +```js manifest.json + "dependencies": { + "vtex.modal-layout": "0.x", + } +``` + +### Step 2 - Configuring the quickview trigger + +To enable the Quickview feature, you need to define the trigger for the modal. The `modal-trigger#quickview` block activates the modal when the user interacts with the associated element (for example, a button). This block links the modal trigger to the `modal-layout#quickview`, which contains the layout of the modal. + +1. Open the `quickview.jsonc` file located in the `store/blocks/product-summary` folder. +2. Add the `modal-trigger#quickview` block to trigger the Quickview modal. In this example, we're using `icon-expand` to represent the trigger. + +```js store/blocks/product-summary/quickview.json mark=3 + "modal-trigger#quickview": { + "children": [ + "icon-expand", + "modal-layout#quickview" + ], + "props": { + "blockClass": "quickview" + } + }, +``` + +3. Add the `modal-layout#quickview` as a child of the `modal-trigger#quickview` block. This defines the layout of the modal. + +```js store/blocks/product-summary/quickview.json mark=4 + "modal-trigger#quickview": { + "children": [ + "icon-expand", + "modal-layout#quickview" + ], + "props": { + "blockClass": "quickview" + } + }, +``` + +Note that the children property specifies the elements inside the trigger block. In this case, it includes `icon-expand`, which represents the visual element that users interact with to open the modal, and `modal-layout#quickview`, which defines the modal layout that will be displayed when the trigger is activated. The props section includes `blockClass`, a custom CSS class (Quickview) that allows you to style both the modal trigger and the modal itself. + +### Step 3 - Customizing the Quickview modal + +To customize the Quickview, you can combine Modal Layout's native blocks, such as `modal-header`, `modal-content`, and `modal-actions`, with other native components to structure and display the modal's content. The inner content may include elements such as the product's images, name, price, SKU selector, and actions like adding the product to the cart or viewing more details. + +For example, you can use [Flex Layout](https://developers.vtex.com/docs/apps/vtex.flex-layout) to define the rows and columns within your modal and leverage [Product Summary](https://developers.vtex.com/docs/apps/vtex.product-summary) blocks to render product information. Learn more in the guides available under [Using components](https://developers.vtex.com/docs/guides/store-framework-using-components). + +> ℹ Refer to quickview.json for a complete example and consult the [Modal Layout](https://developers.vtex.com/docs/apps/vtex.modal-layout) documentation for further information on configuring and customizing your modal. + +### Step 4 - Making your changes publicly available + +After testing your component, deploy the new version of your Store Theme app to make it publicly available. Follow the instructions of the guide [Deploying a new app version](https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available). From cb2d79db3c1d57a87d43879ecccb31f567d97ebe Mon Sep 17 00:00:00 2001 From: "George B. de Lima" <106821144+GeorgeLimaDev@users.noreply.github.com> Date: Wed, 8 Jan 2025 14:39:45 -0300 Subject: [PATCH 2/6] New translations vtex-io-documentation-creating-a-quickview-using-modal-layout.md (English, United States) --- ...-creating-a-quickview-using-modal-layout.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/localization/vtex-io-documentation-creating-a-quickview-using-modal-layout.md b/docs/localization/vtex-io-documentation-creating-a-quickview-using-modal-layout.md index 62f13bb722..74d78da8f9 100644 --- a/docs/localization/vtex-io-documentation-creating-a-quickview-using-modal-layout.md +++ b/docs/localization/vtex-io-documentation-creating-a-quickview-using-modal-layout.md @@ -7,7 +7,7 @@ updatedAt: "" excerpt: "Learn how to create a Quickview feature using the Modal Layout app." --- -In this guide, you will learn how to configure a Quickview feature in your store using the [Modal Layout](https://developers.vtex.com/docs/guides/vtex-modal-layout) app. The quickview allows users to view product details directly from the homepage or category pages without navigating to the product's detailed page. +In this guide, you'll learn how to configure a Quickview feature in your store using the [Modal Layout](https://developers.vtex.com/docs/guides/vtex-modal-layout) app. The Quickview allows users to view product details directly from the homepage or category pages without navigating to the product detail page. ![quickview](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-modal-layout-0.png) @@ -17,9 +17,9 @@ In this guide, you will learn how to configure a Quickview feature in your store ### Step 1 - Adding the Modal Layout app to the theme's dependencies -1. Using a [development workspace](https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace), open your [Store Theme](https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme) app using the code editor of your choice. +1. In a [development workspace](https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace), open your [Store Theme](https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme) app using the code editor of your choice. -2. Open the `manifest.json` file and add the Modal layout app to your theme's dependencies. +2. Open the `manifest.json` file and add the Modal Layout app to your theme dependencies. ```js manifest.json "dependencies": { @@ -29,7 +29,7 @@ In this guide, you will learn how to configure a Quickview feature in your store ### Step 2 - Configuring the quickview trigger -To enable the Quickview feature, you need to define the trigger for the modal. The `modal-trigger#quickview` block activates the modal when the user interacts with the associated element (for example, a button). This block links the modal trigger to the `modal-layout#quickview`, which contains the layout of the modal. +To enable the Quickview feature, define the trigger for the modal. The `modal-trigger#quickview` block activates the modal when the user interacts with the associated element (for example, a button). This block links the modal trigger to the `modal-layout#quickview`, which contains the modal layout. 1. Open the `quickview.jsonc` file located in the `store/blocks/product-summary` folder. 2. Add the `modal-trigger#quickview` block to trigger the Quickview modal. In this example, we're using `icon-expand` to represent the trigger. @@ -46,7 +46,7 @@ To enable the Quickview feature, you need to define the trigger for the modal. T }, ``` -3. Add the `modal-layout#quickview` as a child of the `modal-trigger#quickview` block. This defines the layout of the modal. +3. Add the `modal-layout#quickview` as a child of the `modal-trigger#quickview` block. This defines the modal layout. ```js store/blocks/product-summary/quickview.json mark=4 "modal-trigger#quickview": { @@ -60,16 +60,16 @@ To enable the Quickview feature, you need to define the trigger for the modal. T }, ``` -Note that the children property specifies the elements inside the trigger block. In this case, it includes `icon-expand`, which represents the visual element that users interact with to open the modal, and `modal-layout#quickview`, which defines the modal layout that will be displayed when the trigger is activated. The props section includes `blockClass`, a custom CSS class (Quickview) that allows you to style both the modal trigger and the modal itself. +Note that the children property specifies the elements inside the trigger block. In this case, it includes `icon-expand`, which represents the visual element that users interact with to open the modal, and `modal-layout#quickview`, which defines the modal layout displayed when the trigger is activated. The props section includes `blockClass`, a custom CSS class (Quickview) that allows you to style both the modal trigger and the modal itself. ### Step 3 - Customizing the Quickview modal -To customize the Quickview, you can combine Modal Layout's native blocks, such as `modal-header`, `modal-content`, and `modal-actions`, with other native components to structure and display the modal's content. The inner content may include elements such as the product's images, name, price, SKU selector, and actions like adding the product to the cart or viewing more details. +To customize the Quickview, you can combine Modal Layout's native blocks, such as `modal-header`, `modal-content`, and `modal-actions`, with other native components to structure and display the modal content. The inner content may include elements such as product images, name, price, SKU selector, and actions like adding the product to the cart or viewing more details. For example, you can use [Flex Layout](https://developers.vtex.com/docs/apps/vtex.flex-layout) to define the rows and columns within your modal and leverage [Product Summary](https://developers.vtex.com/docs/apps/vtex.product-summary) blocks to render product information. Learn more in the guides available under [Using components](https://developers.vtex.com/docs/guides/store-framework-using-components). -> ℹ Refer to quickview.json for a complete example and consult the [Modal Layout](https://developers.vtex.com/docs/apps/vtex.modal-layout) documentation for further information on configuring and customizing your modal. +> ℹ Check the quickview.json for a complete example and consult the [Modal Layout](https://developers.vtex.com/docs/apps/vtex.modal-layout) documentation for further information on configuring and customizing your modal. ### Step 4 - Making your changes publicly available -After testing your component, deploy the new version of your Store Theme app to make it publicly available. Follow the instructions of the guide [Deploying a new app version](https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available). +After testing your component, deploy the new version of your Store Theme app to make it publicly available. Follow the instructions in the guide [Deploying a new app version](https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available). From 7041129ec6090257b8e78ffb58d32bf0f0addc8a Mon Sep 17 00:00:00 2001 From: "George B. de Lima" <106821144+GeorgeLimaDev@users.noreply.github.com> Date: Wed, 8 Jan 2025 14:39:46 -0300 Subject: [PATCH 3/6] New translations vtex-io-documentation-migrating-cms-settings-after-major-update.md (English, United States) --- ...cumentation-migrating-cms-settings-after-major-update.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/localization/vtex-io-documentation-migrating-cms-settings-after-major-update.md b/docs/localization/vtex-io-documentation-migrating-cms-settings-after-major-update.md index ca5eec8781..c72661ac8a 100644 --- a/docs/localization/vtex-io-documentation-migrating-cms-settings-after-major-update.md +++ b/docs/localization/vtex-io-documentation-migrating-cms-settings-after-major-update.md @@ -33,7 +33,7 @@ Make sure you have the following tools installed on your machine. They facilitat vtex install {appVendor}.{appName}@{appVersion} ``` -4. Open the VTEX Admin of the production workspace used in the previous steps and go to **GraphQL Admin IDE**: +4. Open the VTEX Admin of the production workspace used in the previous steps and go to the **GraphQL Admin IDE**: ```sh vtex browse admin/graphql-ide @@ -48,11 +48,11 @@ Make sure you have the following tools installed on your machine. They facilitat } ``` - >❗ Replace only the values in curly brackets with those that apply to your scenario. Keep the `x` without replacing it with the minor and patch versions. If you do that, the mutation won't work. +>❗ Replace only the values in curly brackets with those that apply to your scenario. Keep the `x` without replacing it with the minor and patch versions. If you do so, the mutation won't work. 7. Run the code by clicking `Execute Query` (▶). - The expected response body is: +The expected response body is: ```json { From f2bfad2d849d44bda70e059987e98943130f5e1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=C3=A1rbara=20Celi?= Date: Fri, 10 Jan 2025 15:21:32 -0300 Subject: [PATCH 4/6] moving file to correct folder --- ...creating-a-quickview-using-modal-layout.md | 0 ...grating-cms-settings-after-major-update.md | 67 ------------------- 2 files changed, 67 deletions(-) rename docs/{localization => guides/vtex-io/Storefront-Guides/concepts-1}/vtex-io-documentation-creating-a-quickview-using-modal-layout.md (100%) delete mode 100644 docs/localization/vtex-io-documentation-migrating-cms-settings-after-major-update.md diff --git a/docs/localization/vtex-io-documentation-creating-a-quickview-using-modal-layout.md b/docs/guides/vtex-io/Storefront-Guides/concepts-1/vtex-io-documentation-creating-a-quickview-using-modal-layout.md similarity index 100% rename from docs/localization/vtex-io-documentation-creating-a-quickview-using-modal-layout.md rename to docs/guides/vtex-io/Storefront-Guides/concepts-1/vtex-io-documentation-creating-a-quickview-using-modal-layout.md diff --git a/docs/localization/vtex-io-documentation-migrating-cms-settings-after-major-update.md b/docs/localization/vtex-io-documentation-migrating-cms-settings-after-major-update.md deleted file mode 100644 index c72661ac8a..0000000000 --- a/docs/localization/vtex-io-documentation-migrating-cms-settings-after-major-update.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: "Migrating CMS settings after a major theme update" -slug: "vtex-io-documentation-migrating-cms-settings-after-major-update" -hidden: false -createdAt: "2020-09-22T20:44:01.218Z" -updatedAt: "2024-12-02T21:07:29.844Z" ---- - -When making changes to the peer dependencies of your [Store Theme](https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme) app, you may need to perform a major update. However, transitioning to a new major version of the Store Theme may lead to undesired consequences, such as losing the configured Admin page template settings. - -To handle this situation, follow the steps below to migrate template settings. - ->❗These instructions must be followed even when downgrading to a previous major theme version, such as from 5.x to 4.x. - -## Before you begin - -Make sure you have the following tools installed on your machine. They facilitate interactions with the VTEX platform and enhance your development experience: - -1. Install the [VTEX IO CLI](https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-install). -2. Install GraphQL IDE by running the following command: - - ```bash - vtex install vtex.admin-graphql-ide@3.x - ``` - -## Instructions - -1. Open the terminal and log in to your account. -2. Switch to the [**production workspace**](https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-production-workspace) with your latest changes, and [publish](https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available#step-2---publishing-the-new-app-version) a new major version of your Store Theme app. -3. In the **production workspace**, install the Store Theme version published in the previous steps by running the following command: - - ```sh - vtex install {appVendor}.{appName}@{appVersion} - ``` - -4. Open the VTEX Admin of the production workspace used in the previous steps and go to the **GraphQL Admin IDE**: - - ```sh - vtex browse admin/graphql-ide - ``` - -5. From the **Choose an app** dropdown list, select `vtex.pages-graphql@2.x`. -6. Copy the code below and paste it into the GraphQL IDE. - - ```gql - mutation{ - updateThemeIds(from:"{appVendor}.{appName}@{oldMajor}.x", to:"{appVendor}.{appName}@{newMajor}.x") - } - ``` - ->❗ Replace only the values in curly brackets with those that apply to your scenario. Keep the `x` without replacing it with the minor and patch versions. If you do so, the mutation won't work. - -7. Run the code by clicking `Execute Query` (▶). - -The expected response body is: - - ```json - { - "data": { - "updateThemeIds": true - } - } - ``` - -8. In the VTEX Admin, go to the **Storefront** module and validate the content in its features, such as **Site Editor**, **Pages**, and **Redirects**. - -9. Once you have validated your data in the **Storefront** module, [promote your workspace to master](https://developers.vtex.com/docs/guides/vtex-io-documentation-promoting-a-workspace-to-master/). From de55a3cf5783f010e4c7a521ca3cfb99ff0e3a8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=C3=A1rbara=20Celi?= <112641072+barbara-celi@users.noreply.github.com> Date: Fri, 10 Jan 2025 15:23:59 -0300 Subject: [PATCH 5/6] Update vtex-io-documentation-creating-a-quickview-using-modal-layout.md --- ...-io-documentation-creating-a-quickview-using-modal-layout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/vtex-io/Storefront-Guides/concepts-1/vtex-io-documentation-creating-a-quickview-using-modal-layout.md b/docs/guides/vtex-io/Storefront-Guides/concepts-1/vtex-io-documentation-creating-a-quickview-using-modal-layout.md index 74d78da8f9..c060fb15eb 100644 --- a/docs/guides/vtex-io/Storefront-Guides/concepts-1/vtex-io-documentation-creating-a-quickview-using-modal-layout.md +++ b/docs/guides/vtex-io/Storefront-Guides/concepts-1/vtex-io-documentation-creating-a-quickview-using-modal-layout.md @@ -2,7 +2,7 @@ title: "Creating a Quickview using Modal Layout" slug: "vtex-io-documentation-creating-a-quickview-using-modal-layout" hidden: false -createdAt: "2024-11-25T14:01:22.113Z" +createdAt: "2025-01-10T18:23:36.344Z" updatedAt: "" excerpt: "Learn how to create a Quickview feature using the Modal Layout app." --- From 3c1a1d32db32ac09aab33a2e58e776d4aae4cc4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=C3=A1rbara=20Celi?= <112641072+barbara-celi@users.noreply.github.com> Date: Fri, 10 Jan 2025 15:42:47 -0300 Subject: [PATCH 6/6] Apply suggestions from code review Co-authored-by: Carolina Menezes <60782333+carolinamenezes@users.noreply.github.com> --- ...entation-creating-a-quickview-using-modal-layout.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/guides/vtex-io/Storefront-Guides/concepts-1/vtex-io-documentation-creating-a-quickview-using-modal-layout.md b/docs/guides/vtex-io/Storefront-Guides/concepts-1/vtex-io-documentation-creating-a-quickview-using-modal-layout.md index c060fb15eb..7b91bc19fd 100644 --- a/docs/guides/vtex-io/Storefront-Guides/concepts-1/vtex-io-documentation-creating-a-quickview-using-modal-layout.md +++ b/docs/guides/vtex-io/Storefront-Guides/concepts-1/vtex-io-documentation-creating-a-quickview-using-modal-layout.md @@ -7,11 +7,11 @@ updatedAt: "" excerpt: "Learn how to create a Quickview feature using the Modal Layout app." --- -In this guide, you'll learn how to configure a Quickview feature in your store using the [Modal Layout](https://developers.vtex.com/docs/guides/vtex-modal-layout) app. The Quickview allows users to view product details directly from the homepage or category pages without navigating to the product detail page. +In this guide, you'll learn how to configure a Quickview feature in your store using the [Modal Layout](https://developers.vtex.com/docs/apps/vtex.modal-layout) app. The Quickview allows users to view product details directly from the homepage or category pages without navigating to the product detail page. ![quickview](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-modal-layout-0.png) ->⚠ This guide is based on the [Store Theme template](https://github.com/vtex-apps/store-theme), a boilerplate with pre-set configurations for creating a store using [Store Framework](LINK). Learn more in [Available templates](https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme#available-themes). +>⚠ This guide is based on the [Store Theme template](https://github.com/vtex-apps/store-theme), a boilerplate with pre-set configurations for creating a store using [Store Framework](https://developers.vtex.com/docs/guides/store-framework). Learn more in [Available templates](https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme#available-themes). ## Instructions @@ -21,7 +21,7 @@ In this guide, you'll learn how to configure a Quickview feature in your store u 2. Open the `manifest.json` file and add the Modal Layout app to your theme dependencies. -```js manifest.json +```json manifest.json "dependencies": { "vtex.modal-layout": "0.x", } @@ -34,7 +34,7 @@ To enable the Quickview feature, define the trigger for the modal. The `modal-tr 1. Open the `quickview.jsonc` file located in the `store/blocks/product-summary` folder. 2. Add the `modal-trigger#quickview` block to trigger the Quickview modal. In this example, we're using `icon-expand` to represent the trigger. -```js store/blocks/product-summary/quickview.json mark=3 +```json store/blocks/product-summary/quickview.json mark=3 "modal-trigger#quickview": { "children": [ "icon-expand", @@ -48,7 +48,7 @@ To enable the Quickview feature, define the trigger for the modal. The `modal-tr 3. Add the `modal-layout#quickview` as a child of the `modal-trigger#quickview` block. This defines the modal layout. -```js store/blocks/product-summary/quickview.json mark=4 +```json store/blocks/product-summary/quickview.json mark=4 "modal-trigger#quickview": { "children": [ "icon-expand",