From 4fb3422c85592e7230a3fd5bfa2cbe1eb32ae101 Mon Sep 17 00:00:00 2001 From: Mariana Caetano Pereira <67270558+Mariana-Caetano@users.noreply.github.com> Date: Mon, 14 Oct 2024 12:20:41 -0300 Subject: [PATCH 01/14] LOC review --- ...ing-product-images-in-specific-contexts.md | 175 ++++++++++++++++++ 1 file changed, 175 insertions(+) create mode 100644 docs/localization/managing-product-images-in-specific-contexts.md diff --git a/docs/localization/managing-product-images-in-specific-contexts.md b/docs/localization/managing-product-images-in-specific-contexts.md new file mode 100644 index 0000000000..f79aa7bd45 --- /dev/null +++ b/docs/localization/managing-product-images-in-specific-contexts.md @@ -0,0 +1,175 @@ +--- +title: "Managing product images in specific contexts" +createdAt: "2024-10-14T00:00:15.623Z" +updatedAt: "" +--- + +In this guide, learn how to control which product images appear in different sections of your store by labeling them with specific contexts in the VTEX Catalog. These contexts determine where the image is displayed and are defined as follows: + +- **Gallery context:** Restricts the image to appear only in the Product Image Gallery, allowing you to curate a set of images highlighting key features. +- **SKU selector context:** Restricts the image to appear only in the SKU selector, providing a zoomed-in view for detailed examination. +- **Generic context (default):** Sets the image to appear in all sections. + +For example, you may want to limit the number of images shown in the Product Details Page (PDP) gallery to highlight key features of the product. + +| **Before** | **After** | +| ---------- | --------- | +| ![before-context](https://vtexhelp.vtexassets.com/assets/docs/src/before___bec5e5c536162b228cd4d50d0042c4a6.png) | ![after-context](https://vtexhelp.vtexassets.com/assets/docs/src/after___f6bb9be611ba511d7eee8558c34a2732.png) | +| The product image gallery displays all five images uploaded to the [Catalog](https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ). | After limiting the number of images, only three product images are displayed to focus on the most important product features. | + +By associating images with specific contexts, you can ensure they are displayed in relevant sections and only the most important images. + +## Before you begin + +To follow the instructions in this guide, you must understand the concepts of [API extensions](https://developers.vtex.com/docs/guides/faststore/api-extensions-overview) and [Section override](https://developers.vtex.com/docs/guides/faststore/overrides-overview). + +## Instructions + +For this tutorial, we will create a custom gallery for the PDP using the [ label](https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ/17PxekVPmVYI4c3OCQ0ddJ#adding-an-image-to-the-sku) feature from the [VTEX Catalog]((https://help.vtex.com/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ). + +In this example, we will create a context by labeling selected images with the term `gallery`. This gallery will only display images that have been assigned the `gallery` label in the [catalog](https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ). + +### Step 1: Labeling images in the Catalog + +Label your product images within the catalog with the label field. +The label field determines where product images should be displayed in your store. +To label your images, follow these steps: + +1. Access the VTEX Admin. +2. Go to **Catalog > All Products** and navigate to the product you want to edit. +3. Click the `UPDATE` button and then click `SKU`. + + ![sku-images](https://vtexhelp.vtexassets.com/assets/docs/src/sku-images-admin___1baaa1f88be16795b892634b80676ccc.gif) + +4. Go to the SKU you want to update and click `Edit`. +5. Click the `Images` tab. +6. For each SKU image you want to include in the gallery, set the **Label** field to **gallery**. These are the available labels: + + | Label name | Description | + | ---------------- | ---------------- | + | `gallery` | Restricts the image to appear only in the Product Image Gallery. | + | `generic` | Includes the image in all contexts by default. Images labeled as `generic` are always displayed as part of the complete set of images. | + | `skuvariation` | Designates the image for the SKU Selector. If no image has this label, the first image of the SKU is used. | + +7. Click `Save Label` and `Save`. + +### Step 2: Querying images by context + +Update your store `ServerProduct` and `ClientProduct` fragments to fetch images based on their [assigned labels](#step-1-labeling-images-in-the-catalog). This ensures that only relevant images for specific contexts, like the PDP, are retrieved. + +> ℹ️ For more information about fragments in the FastStore context, see the [Extending queries using fragments](https://developers.vtex.com/docs/guides/faststore/api-extensions-extending-queries-using-fragments) guide. + +1. Open your store code in a code editor of your preference. +2. Go to `src/fragments/ServerProduct.ts` and add the following: + + //REMINDER: Add CodeHike + + ```js src/fragments/ServerProduct.ts + import { gql } from '@faststore/core/api' + + export const fragment = gql` + fragment ServerProduct on Query { + product(locator: $locator) { + galleryImages: image(context: "gallery", limit: 3) { + url + alternateName + } + } + } + ` + ``` + +3. Go to `src/fragments/ClientProduct` and add the following: + + //REMINDER: Add CodeHike + + ```js src/fragments/ClientProduct + import { gql } from '@faststore/core/api' + + export const fragment = gql` + fragment ClientProduct on Query { + product(locator: $locator) { + galleryImages: image(context: "gallery", limit: 3) { + url + alternateName + } + } + } + ` + ``` + +> ❕The `limit: 3` argument selects only three images. Omitting this argument returns all images labeled `gallery`. By default, all images are returned if no context label is found. + +### Step 3: Overriding the `ImageGallery` component + +Customize the default [ImageGallery](https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery) component to showcase the images retrieved in the [previous step](#step-1-labeling-images-in-the-catalog). This override allows you to control how images are presented and interacted with on your PDP. + +1. In your store code, create the `ProductDetails.tsx` file inside the `src/components/overrides` folder. +2. In the `ProductDetails.tsx` file, add the following content to it: + + //REMINDER: Add CodeHike + + ```tsx + import { SectionOverride } from "@faststore/core"; + + import { usePDP } from "@faststore/core"; + import { Image_unstable as Image } from "@faststore/core/experimental"; + + import { ImageGallery, ImageGalleryViewer } from "@faststore/ui"; + import { useState } from "react"; + + const SECTION = "ProductDetails" as const; + + const ImageComponent = ({ url, alternateName }: {url: string, alternateName?: string}) => { + return {alternateName} + } + + const override: SectionOverride = { + section: SECTION, + components: { + __experimentalImageGallery: { + Component: () => { + const { data } = usePDP(); + const [selectedIndex, setSelectedIndex] = useState(0); + + const currentImage = data.product.galleryImages[selectedIndex]; + + return ( + + + {currentImage.alternateName} + + + ); + }, + }, + }, + }; + + export { override }; + ``` + + - The `ServerProduct` and `ClientProduct` fragments are accessed via the `usePDP` Hook. + - Instead of using the images being passed to the [ImageGallery](https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery) Component, we are using the `galleryImages` we defined. + +3. Open a terminal and run `yarn dev` to sync the changes made in the previous instructions. +4. Open a pull request to your store with these changes. Once the pull request is reviewed and approved, merge it into the `main` branch. + +### Considerations for SKU Selector Images + +The FastStore API defines a specific name for images that are supposed to appear on the SKU Selector. The first image labeled `skuvariation` in the Catalog will automatically appear on the SKU Selector. If no image has the `skuvariation` label, the first image of the SKU will be displayed. + +> ⚠ If an image needs to appear in the SKU Selector and Product Gallery, you must upload it twice and assign different labels. From 3f9513e4c4dd5c223f49b0e1bc93cffd263b466b Mon Sep 17 00:00:00 2001 From: Mariana Caetano Pereira <67270558+Mariana-Caetano@users.noreply.github.com> Date: Mon, 14 Oct 2024 12:23:42 -0300 Subject: [PATCH 02/14] fix link --- .../managing-product-images-in-specific-contexts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/localization/managing-product-images-in-specific-contexts.md b/docs/localization/managing-product-images-in-specific-contexts.md index f79aa7bd45..fdb2156c4a 100644 --- a/docs/localization/managing-product-images-in-specific-contexts.md +++ b/docs/localization/managing-product-images-in-specific-contexts.md @@ -25,7 +25,7 @@ To follow the instructions in this guide, you must understand the concepts of [A ## Instructions -For this tutorial, we will create a custom gallery for the PDP using the [ label](https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ/17PxekVPmVYI4c3OCQ0ddJ#adding-an-image-to-the-sku) feature from the [VTEX Catalog]((https://help.vtex.com/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ). +For this tutorial, we will create a custom gallery for the PDP using the [ label](https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ/17PxekVPmVYI4c3OCQ0ddJ#adding-an-image-to-the-sku) feature from the [VTEX Catalog](https://help.vtex.com/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ). In this example, we will create a context by labeling selected images with the term `gallery`. This gallery will only display images that have been assigned the `gallery` label in the [catalog](https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ). From dd62ea4ef2c985c1aba4e0b5dc4acdf552f7a2ca Mon Sep 17 00:00:00 2001 From: Mariana Caetano Pereira <67270558+Mariana-Caetano@users.noreply.github.com> Date: Mon, 14 Oct 2024 12:26:31 -0300 Subject: [PATCH 03/14] fix markdown lint --- .../managing-product-images-in-specific-contexts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/localization/managing-product-images-in-specific-contexts.md b/docs/localization/managing-product-images-in-specific-contexts.md index fdb2156c4a..b6e03f8239 100644 --- a/docs/localization/managing-product-images-in-specific-contexts.md +++ b/docs/localization/managing-product-images-in-specific-contexts.md @@ -25,7 +25,7 @@ To follow the instructions in this guide, you must understand the concepts of [A ## Instructions -For this tutorial, we will create a custom gallery for the PDP using the [ label](https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ/17PxekVPmVYI4c3OCQ0ddJ#adding-an-image-to-the-sku) feature from the [VTEX Catalog](https://help.vtex.com/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ). +For this tutorial, we will create a custom gallery for the PDP using the [label](https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ/17PxekVPmVYI4c3OCQ0ddJ#adding-an-image-to-the-sku) feature from the [VTEX Catalog](https://help.vtex.com/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ). In this example, we will create a context by labeling selected images with the term `gallery`. This gallery will only display images that have been assigned the `gallery` label in the [catalog](https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ). From 0a84d3ab0d65d585299c0d5a479337ec96a4aee4 Mon Sep 17 00:00:00 2001 From: "George B. de Lima" <106821144+GeorgeLimaDev@users.noreply.github.com> Date: Fri, 8 Nov 2024 08:11:58 -0300 Subject: [PATCH 04/14] New translations managing-product-images-in-specific-contexts.md (English, United States) --- ...ing-product-images-in-specific-contexts.md | 253 +++++++++--------- 1 file changed, 130 insertions(+), 123 deletions(-) diff --git a/docs/localization/managing-product-images-in-specific-contexts.md b/docs/localization/managing-product-images-in-specific-contexts.md index b6e03f8239..682756d714 100644 --- a/docs/localization/managing-product-images-in-specific-contexts.md +++ b/docs/localization/managing-product-images-in-specific-contexts.md @@ -1,23 +1,23 @@ --- -title: "Managing product images in specific contexts" -createdAt: "2024-10-14T00:00:15.623Z" +title: Managing product images in specific contexts +createdAt: 2024-10-14T00:00:15.623Z updatedAt: "" --- -In this guide, learn how to control which product images appear in different sections of your store by labeling them with specific contexts in the VTEX Catalog. These contexts determine where the image is displayed and are defined as follows: +In this guide, you will learn how to control the product images that will be displayed in your store sections by labeling them with specific contexts in VTEX Catalog. These contexts determine where the image is displayed and are defined as follows: -- **Gallery context:** Restricts the image to appear only in the Product Image Gallery, allowing you to curate a set of images highlighting key features. -- **SKU selector context:** Restricts the image to appear only in the SKU selector, providing a zoomed-in view for detailed examination. -- **Generic context (default):** Sets the image to appear in all sections. +- **Gallery context:** Restricts the image to display only in the Product Image Gallery, allowing you to curate a set of images highlighting key features. +- **SKU selector context:** Restricts the image to display only in the SKU selector, providing a zoomed-in view for detailed examination. +- **Generic context (default):** Sets the image to display in all sections. -For example, you may want to limit the number of images shown in the Product Details Page (PDP) gallery to highlight key features of the product. +For example, you may want to limit the number of images displayed in the Product Details Page (PDP) gallery to highlight key product features. | **Before** | **After** | -| ---------- | --------- | +| --- | --- | | ![before-context](https://vtexhelp.vtexassets.com/assets/docs/src/before___bec5e5c536162b228cd4d50d0042c4a6.png) | ![after-context](https://vtexhelp.vtexassets.com/assets/docs/src/after___f6bb9be611ba511d7eee8558c34a2732.png) | -| The product image gallery displays all five images uploaded to the [Catalog](https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ). | After limiting the number of images, only three product images are displayed to focus on the most important product features. | +| The product image gallery displays all five images uploaded to [Catalog](https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ). | After limiting the number of images, only three product images are displayed to focus on the most important product features. | -By associating images with specific contexts, you can ensure they are displayed in relevant sections and only the most important images. +By associating images with specific contexts, you ensure only the most relevant images are in the sections. ## Before you begin @@ -25,151 +25,158 @@ To follow the instructions in this guide, you must understand the concepts of [A ## Instructions -For this tutorial, we will create a custom gallery for the PDP using the [label](https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ/17PxekVPmVYI4c3OCQ0ddJ#adding-an-image-to-the-sku) feature from the [VTEX Catalog](https://help.vtex.com/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ). +For this tutorial, we will create a custom gallery for the PDP using the [label](https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ/17PxekVPmVYI4c3OCQ0ddJ#adding-an-image-to-the-sku) feature from [VTEX Catalog](https://help.vtex.com/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ). -In this example, we will create a context by labeling selected images with the term `gallery`. This gallery will only display images that have been assigned the `gallery` label in the [catalog](https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ). +In this example, we will create a context by labeling selected images with the term `gallery`. This gallery will only display images that have been assigned the `gallery` label in [Catalog](https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ). -### Step 1: Labeling images in the Catalog +### Step 1: Labeling images in Catalog -Label your product images within the catalog with the label field. -The label field determines where product images should be displayed in your store. +Label your product images with the label field in Catalog. +This label determines where product images should be displayed in your store. To label your images, follow these steps: 1. Access the VTEX Admin. -2. Go to **Catalog > All Products** and navigate to the product you want to edit. -3. Click the `UPDATE` button and then click `SKU`. - ![sku-images](https://vtexhelp.vtexassets.com/assets/docs/src/sku-images-admin___1baaa1f88be16795b892634b80676ccc.gif) +2. Go to **Catalog > All Products** and find the product you want to edit. + +3. Click the `Update` button and then click `SKU`. + + ![sku-images](https://vtexhelp.vtexassets.com/assets/docs/src/sku-images-admin___1baaa1f88be16795b892634b80676ccc.gif) 4. Go to the SKU you want to update and click `Edit`. + 5. Click the `Images` tab. -6. For each SKU image you want to include in the gallery, set the **Label** field to **gallery**. These are the available labels: - | Label name | Description | - | ---------------- | ---------------- | - | `gallery` | Restricts the image to appear only in the Product Image Gallery. | - | `generic` | Includes the image in all contexts by default. Images labeled as `generic` are always displayed as part of the complete set of images. | - | `skuvariation` | Designates the image for the SKU Selector. If no image has this label, the first image of the SKU is used. | +6. For each SKU image you want to add to the gallery, set the **Label** field to **gallery**. These are the available labels: + + | Label name | Description | + | --- | --- | + | `gallery` | Restricts the image to display only on the Product Image Gallery. | + | `general` | Includes the image in all contexts by default. Images labeled as `generic` are always displayed as part of the complete set of images. | + | `skuvariation` | Assigns the image to the SKU Selector. If no image has this label, the first image of the SKU is used. | 7. Click `Save Label` and `Save`. ### Step 2: Querying images by context -Update your store `ServerProduct` and `ClientProduct` fragments to fetch images based on their [assigned labels](#step-1-labeling-images-in-the-catalog). This ensures that only relevant images for specific contexts, like the PDP, are retrieved. +Update your store `ServerProduct` and `ClientProduct` fragments to retrieve images based on their [assigned labels](#step-1-labeling-images-in-catalog). This ensures that only relevant images for specific contexts, like the PDP, are retrieved. + +> ℹ️ For more information about fragments in FastStore, see the guide [Extending queries using fragments](https://developers.vtex.com/docs/guides/faststore/api-extensions-extending-queries-using-fragments). -> ℹ️ For more information about fragments in the FastStore context, see the [Extending queries using fragments](https://developers.vtex.com/docs/guides/faststore/api-extensions-extending-queries-using-fragments) guide. +1. Open your store code using the code editor of your choice. -1. Open your store code in a code editor of your preference. 2. Go to `src/fragments/ServerProduct.ts` and add the following: - //REMINDER: Add CodeHike - - ```js src/fragments/ServerProduct.ts - import { gql } from '@faststore/core/api' - - export const fragment = gql` - fragment ServerProduct on Query { - product(locator: $locator) { - galleryImages: image(context: "gallery", limit: 3) { - url - alternateName - } - } - } - ` - ``` + //REMINDER: Add CodeHike + + ```js src/fragments/ServerProduct.ts + import { gql } from '@faststore/core/api' + + export const fragment = gql` + fragment ServerProduct on Query { + product(locator: $locator) { + galleryImages: image(context: "gallery", limit: 3) { + url + alternateName + } + } + } + ` + ``` 3. Go to `src/fragments/ClientProduct` and add the following: - //REMINDER: Add CodeHike - - ```js src/fragments/ClientProduct - import { gql } from '@faststore/core/api' - - export const fragment = gql` - fragment ClientProduct on Query { - product(locator: $locator) { - galleryImages: image(context: "gallery", limit: 3) { - url - alternateName - } - } - } - ` - ``` + //REMINDER: Add CodeHike + + ```js src/fragments/ClientProduct + import { gql } from '@faststore/core/api' + + export const fragment = gql` + fragment ClientProduct on Query { + product(locator: $locator) { + galleryImages: image(context: "gallery", limit: 3) { + url + alternateName + } + } + } + ` + ``` > ❕The `limit: 3` argument selects only three images. Omitting this argument returns all images labeled `gallery`. By default, all images are returned if no context label is found. ### Step 3: Overriding the `ImageGallery` component -Customize the default [ImageGallery](https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery) component to showcase the images retrieved in the [previous step](#step-1-labeling-images-in-the-catalog). This override allows you to control how images are presented and interacted with on your PDP. +Customize the default [ImageGallery](https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery) component to showcase the images retrieved in the [previous step](#step-1-labeling-images-in-catalog). This override allows you to control how images are displayed and interacted with on your PDP. 1. In your store code, create the `ProductDetails.tsx` file inside the `src/components/overrides` folder. -2. In the `ProductDetails.tsx` file, add the following content to it: - - //REMINDER: Add CodeHike - - ```tsx - import { SectionOverride } from "@faststore/core"; - - import { usePDP } from "@faststore/core"; - import { Image_unstable as Image } from "@faststore/core/experimental"; - - import { ImageGallery, ImageGalleryViewer } from "@faststore/ui"; - import { useState } from "react"; - - const SECTION = "ProductDetails" as const; - - const ImageComponent = ({ url, alternateName }: {url: string, alternateName?: string}) => { - return {alternateName} - } - - const override: SectionOverride = { - section: SECTION, - components: { - __experimentalImageGallery: { - Component: () => { - const { data } = usePDP(); - const [selectedIndex, setSelectedIndex] = useState(0); - - const currentImage = data.product.galleryImages[selectedIndex]; - - return ( - - - {currentImage.alternateName} - - - ); - }, - }, - }, - }; - - export { override }; - ``` - - - The `ServerProduct` and `ClientProduct` fragments are accessed via the `usePDP` Hook. - - Instead of using the images being passed to the [ImageGallery](https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery) Component, we are using the `galleryImages` we defined. - -3. Open a terminal and run `yarn dev` to sync the changes made in the previous instructions. + +2. In the `ProductDetails.tsx` file, add the following content: + + //REMINDER: Add CodeHike + + ```tsx + import { SectionOverride } from "@faststore/core"; + + import { usePDP } from "@faststore/core"; + import { Image_unstable as Image } from "@faststore/core/experimental"; + + import { ImageGallery, ImageGalleryViewer } from "@faststore/ui"; + import { useState } from "react"; + + const SECTION = "ProductDetails" as const; + + const ImageComponent = ({ url, alternateName }: {url: string, alternateName?: string}) => { + return {alternateName} + } + + const override: SectionOverride = { + section: SECTION, + components: { + __experimentalImageGallery: { + Component: () => { + const { data } = usePDP(); + const [selectedIndex, setSelectedIndex] = useState(0); + + const currentImage = data.product.galleryImages[selectedIndex]; + + return ( + + + {currentImage.alternateName} + + + ); + }, + }, + }, + }; + + export { override }; + ``` + + - The `ServerProduct` and `ClientProduct` fragments are accessed via the `usePDP` hook. + - Instead of using the images being passed to the [ImageGallery](https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery) component, we are using the `galleryImages` we defined. + +3. Open a terminal and run `yarn dev` to sync the changes made in the previous steps. + 4. Open a pull request to your store with these changes. Once the pull request is reviewed and approved, merge it into the `main` branch. ### Considerations for SKU Selector Images -The FastStore API defines a specific name for images that are supposed to appear on the SKU Selector. The first image labeled `skuvariation` in the Catalog will automatically appear on the SKU Selector. If no image has the `skuvariation` label, the first image of the SKU will be displayed. +The FastStore API defines a specific name for images that are supposed to display on the SKU Selector. The first image labeled `skuvariation` in Catalog will automatically display on the SKU Selector. If no image has the `skuvariation` label, the first image of the SKU will be displayed. -> ⚠ If an image needs to appear in the SKU Selector and Product Gallery, you must upload it twice and assign different labels. +> ⚠ If an image needs to display on the SKU Selector and Product Gallery, you must upload it twice and assign different labels. From 0feef8aa28c0a90df7845ef47b3ce800f2ab9742 Mon Sep 17 00:00:00 2001 From: sheilagomes Date: Fri, 8 Nov 2024 08:36:09 -0300 Subject: [PATCH 05/14] Fix formatting --- ...ing-product-images-in-specific-contexts.md | 197 +++++++++--------- docs/localization/test.md | 9 - 2 files changed, 95 insertions(+), 111 deletions(-) delete mode 100644 docs/localization/test.md diff --git a/docs/localization/managing-product-images-in-specific-contexts.md b/docs/localization/managing-product-images-in-specific-contexts.md index 682756d714..4f1fa7a86b 100644 --- a/docs/localization/managing-product-images-in-specific-contexts.md +++ b/docs/localization/managing-product-images-in-specific-contexts.md @@ -1,6 +1,6 @@ --- -title: Managing product images in specific contexts -createdAt: 2024-10-14T00:00:15.623Z +title: "Managing product images in specific contexts" +createdAt: "2024-10-14T00:00:15.623Z" updatedAt: "" --- @@ -13,7 +13,7 @@ In this guide, you will learn how to control the product images that will be dis For example, you may want to limit the number of images displayed in the Product Details Page (PDP) gallery to highlight key product features. | **Before** | **After** | -| --- | --- | +| ---------- | --------- | | ![before-context](https://vtexhelp.vtexassets.com/assets/docs/src/before___bec5e5c536162b228cd4d50d0042c4a6.png) | ![after-context](https://vtexhelp.vtexassets.com/assets/docs/src/after___f6bb9be611ba511d7eee8558c34a2732.png) | | The product image gallery displays all five images uploaded to [Catalog](https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ). | After limiting the number of images, only three product images are displayed to focus on the most important product features. | @@ -36,24 +36,20 @@ This label determines where product images should be displayed in your store. To label your images, follow these steps: 1. Access the VTEX Admin. - 2. Go to **Catalog > All Products** and find the product you want to edit. - 3. Click the `Update` button and then click `SKU`. - ![sku-images](https://vtexhelp.vtexassets.com/assets/docs/src/sku-images-admin___1baaa1f88be16795b892634b80676ccc.gif) + ![sku-images](https://vtexhelp.vtexassets.com/assets/docs/src/sku-images-admin___1baaa1f88be16795b892634b80676ccc.gif) 4. Go to the SKU you want to update and click `Edit`. - 5. Click the `Images` tab. - 6. For each SKU image you want to add to the gallery, set the **Label** field to **gallery**. These are the available labels: - | Label name | Description | - | --- | --- | - | `gallery` | Restricts the image to display only on the Product Image Gallery. | - | `general` | Includes the image in all contexts by default. Images labeled as `generic` are always displayed as part of the complete set of images. | - | `skuvariation` | Assigns the image to the SKU Selector. If no image has this label, the first image of the SKU is used. | + | Label name | Description | + | ---------------- | ---------------- | + | `gallery` | Restricts the image to display only on the Product Image Gallery. | + | `general` | Includes the image in all contexts by default. Images labeled as `generic` are always displayed as part of the complete set of images. | + | `skuvariation` | Assigns the image to the SKU Selector. If no image has this label, the first image of the SKU is used. | 7. Click `Save Label` and `Save`. @@ -64,44 +60,43 @@ Update your store `ServerProduct` and `ClientProduct` fragments to retrieve imag > ℹ️ For more information about fragments in FastStore, see the guide [Extending queries using fragments](https://developers.vtex.com/docs/guides/faststore/api-extensions-extending-queries-using-fragments). 1. Open your store code using the code editor of your choice. - 2. Go to `src/fragments/ServerProduct.ts` and add the following: - //REMINDER: Add CodeHike - - ```js src/fragments/ServerProduct.ts - import { gql } from '@faststore/core/api' - - export const fragment = gql` - fragment ServerProduct on Query { - product(locator: $locator) { - galleryImages: image(context: "gallery", limit: 3) { - url - alternateName - } - } - } - ` - ``` + //REMINDER: Add CodeHike + + ```js src/fragments/ServerProduct.ts + import { gql } from '@faststore/core/api' + + export const fragment = gql` + fragment ServerProduct on Query { + product(locator: $locator) { + galleryImages: image(context: "gallery", limit: 3) { + url + alternateName + } + } + } + ` + ``` 3. Go to `src/fragments/ClientProduct` and add the following: - //REMINDER: Add CodeHike - - ```js src/fragments/ClientProduct - import { gql } from '@faststore/core/api' - - export const fragment = gql` - fragment ClientProduct on Query { - product(locator: $locator) { - galleryImages: image(context: "gallery", limit: 3) { - url - alternateName - } - } - } - ` - ``` + //REMINDER: Add CodeHike + + ```js src/fragments/ClientProduct + import { gql } from '@faststore/core/api' + + export const fragment = gql` + fragment ClientProduct on Query { + product(locator: $locator) { + galleryImages: image(context: "gallery", limit: 3) { + url + alternateName + } + } + } + ` + ``` > ❕The `limit: 3` argument selects only three images. Omitting this argument returns all images labeled `gallery`. By default, all images are returned if no context label is found. @@ -110,69 +105,67 @@ Update your store `ServerProduct` and `ClientProduct` fragments to retrieve imag Customize the default [ImageGallery](https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery) component to showcase the images retrieved in the [previous step](#step-1-labeling-images-in-catalog). This override allows you to control how images are displayed and interacted with on your PDP. 1. In your store code, create the `ProductDetails.tsx` file inside the `src/components/overrides` folder. - 2. In the `ProductDetails.tsx` file, add the following content: - //REMINDER: Add CodeHike - - ```tsx - import { SectionOverride } from "@faststore/core"; - - import { usePDP } from "@faststore/core"; - import { Image_unstable as Image } from "@faststore/core/experimental"; - - import { ImageGallery, ImageGalleryViewer } from "@faststore/ui"; - import { useState } from "react"; - - const SECTION = "ProductDetails" as const; - - const ImageComponent = ({ url, alternateName }: {url: string, alternateName?: string}) => { - return {alternateName} - } - - const override: SectionOverride = { - section: SECTION, - components: { - __experimentalImageGallery: { - Component: () => { - const { data } = usePDP(); - const [selectedIndex, setSelectedIndex] = useState(0); - - const currentImage = data.product.galleryImages[selectedIndex]; - - return ( - - - {currentImage.alternateName} - - - ); - }, - }, - }, - }; - - export { override }; - ``` + //REMINDER: Add CodeHike + + ```tsx + import { SectionOverride } from "@faststore/core"; + + import { usePDP } from "@faststore/core"; + import { Image_unstable as Image } from "@faststore/core/experimental"; + + import { ImageGallery, ImageGalleryViewer } from "@faststore/ui"; + import { useState } from "react"; + + const SECTION = "ProductDetails" as const; + + const ImageComponent = ({ url, alternateName }: {url: string, alternateName?: string}) => { + return {alternateName} + } + + const override: SectionOverride = { + section: SECTION, + components: { + __experimentalImageGallery: { + Component: () => { + const { data } = usePDP(); + const [selectedIndex, setSelectedIndex] = useState(0); + + const currentImage = data.product.galleryImages[selectedIndex]; + + return ( + + + {currentImage.alternateName} + + + ); + }, + }, + }, + }; + + export { override }; + ``` - The `ServerProduct` and `ClientProduct` fragments are accessed via the `usePDP` hook. - Instead of using the images being passed to the [ImageGallery](https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery) component, we are using the `galleryImages` we defined. 3. Open a terminal and run `yarn dev` to sync the changes made in the previous steps. - 4. Open a pull request to your store with these changes. Once the pull request is reviewed and approved, merge it into the `main` branch. ### Considerations for SKU Selector Images diff --git a/docs/localization/test.md b/docs/localization/test.md deleted file mode 100644 index a16cf06e60..0000000000 --- a/docs/localization/test.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: "Test" -slug: "test" -hidden: true -createdAt: "2024-08-15T18:10:15.623Z" -updatedAt: "" ---- - -Test. From 16d8d8a98f0afa07c1c11dd88bffe3496ec0f4b0 Mon Sep 17 00:00:00 2001 From: Mariana Caetano Pereira <67270558+Mariana-Caetano@users.noreply.github.com> Date: Fri, 8 Nov 2024 10:38:06 -0300 Subject: [PATCH 06/14] Update docs/localization/managing-product-images-in-specific-contexts.md --- .../managing-product-images-in-specific-contexts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/localization/managing-product-images-in-specific-contexts.md b/docs/localization/managing-product-images-in-specific-contexts.md index 4f1fa7a86b..ef5e6091f2 100644 --- a/docs/localization/managing-product-images-in-specific-contexts.md +++ b/docs/localization/managing-product-images-in-specific-contexts.md @@ -48,7 +48,7 @@ To label your images, follow these steps: | Label name | Description | | ---------------- | ---------------- | | `gallery` | Restricts the image to display only on the Product Image Gallery. | - | `general` | Includes the image in all contexts by default. Images labeled as `generic` are always displayed as part of the complete set of images. | + | `generic` | Includes the image in all contexts by default. Images labeled as `generic` are always displayed as part of the complete set of images. | | `skuvariation` | Assigns the image to the SKU Selector. If no image has this label, the first image of the SKU is used. | 7. Click `Save Label` and `Save`. From 07055c78b695dc53198c9e12b4e5e97cdc090a85 Mon Sep 17 00:00:00 2001 From: Mariana Caetano Pereira <67270558+Mariana-Caetano@users.noreply.github.com> Date: Fri, 8 Nov 2024 10:43:32 -0300 Subject: [PATCH 07/14] Fix for the style-check and add a link to Catalog doc --- .../managing-product-images-in-specific-contexts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/localization/managing-product-images-in-specific-contexts.md b/docs/localization/managing-product-images-in-specific-contexts.md index ef5e6091f2..47b7cb6c88 100644 --- a/docs/localization/managing-product-images-in-specific-contexts.md +++ b/docs/localization/managing-product-images-in-specific-contexts.md @@ -4,7 +4,7 @@ createdAt: "2024-10-14T00:00:15.623Z" updatedAt: "" --- -In this guide, you will learn how to control the product images that will be displayed in your store sections by labeling them with specific contexts in VTEX Catalog. These contexts determine where the image is displayed and are defined as follows: +In this guide, you will learn how to control the product images that will be displayed in your store sections by labeling them with specific contexts on [VTEX Catalog](https://help.vtex.com/en/tutorial/catalog-overview--77M8ItLhDXs6aBdQTqToVe?&utm_source=autocomplete). These contexts determine where the image is displayed and are defined as follows: - **Gallery context:** Restricts the image to display only in the Product Image Gallery, allowing you to curate a set of images highlighting key features. - **SKU selector context:** Restricts the image to display only in the SKU selector, providing a zoomed-in view for detailed examination. From 730a9116ac97f70a187476f75bc10ad8b9d2f536 Mon Sep 17 00:00:00 2001 From: Mariana Caetano Pereira <67270558+Mariana-Caetano@users.noreply.github.com> Date: Fri, 8 Nov 2024 10:57:14 -0300 Subject: [PATCH 08/14] Move the doc to the 'faststore' folder and add CodeHike --- ...naging-product-images-in-specific-contexts.md | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) rename docs/{localization => faststore/docs/customization}/managing-product-images-in-specific-contexts.md (98%) diff --git a/docs/localization/managing-product-images-in-specific-contexts.md b/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.md similarity index 98% rename from docs/localization/managing-product-images-in-specific-contexts.md rename to docs/faststore/docs/customization/managing-product-images-in-specific-contexts.md index 47b7cb6c88..da3a83dff6 100644 --- a/docs/localization/managing-product-images-in-specific-contexts.md +++ b/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.md @@ -53,6 +53,8 @@ To label your images, follow these steps: 7. Click `Save Label` and `Save`. + + ### Step 2: Querying images by context Update your store `ServerProduct` and `ClientProduct` fragments to retrieve images based on their [assigned labels](#step-1-labeling-images-in-catalog). This ensures that only relevant images for specific contexts, like the PDP, are retrieved. @@ -62,7 +64,7 @@ Update your store `ServerProduct` and `ClientProduct` fragments to retrieve imag 1. Open your store code using the code editor of your choice. 2. Go to `src/fragments/ServerProduct.ts` and add the following: - //REMINDER: Add CodeHike + ```js src/fragments/ServerProduct.ts import { gql } from '@faststore/core/api' @@ -79,9 +81,11 @@ Update your store `ServerProduct` and `ClientProduct` fragments to retrieve imag ` ``` + + 3. Go to `src/fragments/ClientProduct` and add the following: - //REMINDER: Add CodeHike + ```js src/fragments/ClientProduct import { gql } from '@faststore/core/api' @@ -98,6 +102,8 @@ Update your store `ServerProduct` and `ClientProduct` fragments to retrieve imag ` ``` + + > ❕The `limit: 3` argument selects only three images. Omitting this argument returns all images labeled `gallery`. By default, all images are returned if no context label is found. ### Step 3: Overriding the `ImageGallery` component @@ -107,7 +113,7 @@ Customize the default [ImageGallery](https://developers.vtex.com/docs/guides/fas 1. In your store code, create the `ProductDetails.tsx` file inside the `src/components/overrides` folder. 2. In the `ProductDetails.tsx` file, add the following content: - //REMINDER: Add CodeHike + ```tsx import { SectionOverride } from "@faststore/core"; @@ -162,6 +168,10 @@ Customize the default [ImageGallery](https://developers.vtex.com/docs/guides/fas export { override }; ``` + + + + - The `ServerProduct` and `ClientProduct` fragments are accessed via the `usePDP` hook. - Instead of using the images being passed to the [ImageGallery](https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery) component, we are using the `galleryImages` we defined. From 807c7fced3d9bd02b918c6193907acc290452f88 Mon Sep 17 00:00:00 2001 From: Mariana Caetano Pereira <67270558+Mariana-Caetano@users.noreply.github.com> Date: Fri, 8 Nov 2024 11:00:43 -0300 Subject: [PATCH 09/14] fix CodeHike --- .../managing-product-images-in-specific-contexts.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.md b/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.md index da3a83dff6..19d56c0edc 100644 --- a/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.md +++ b/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.md @@ -170,14 +170,14 @@ Customize the default [ImageGallery](https://developers.vtex.com/docs/guides/fas - - - The `ServerProduct` and `ClientProduct` fragments are accessed via the `usePDP` hook. - Instead of using the images being passed to the [ImageGallery](https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery) component, we are using the `galleryImages` we defined. 3. Open a terminal and run `yarn dev` to sync the changes made in the previous steps. 4. Open a pull request to your store with these changes. Once the pull request is reviewed and approved, merge it into the `main` branch. + + ### Considerations for SKU Selector Images The FastStore API defines a specific name for images that are supposed to display on the SKU Selector. The first image labeled `skuvariation` in Catalog will automatically display on the SKU Selector. If no image has the `skuvariation` label, the first image of the SKU will be displayed. From 298c1f10c153aa6625d5ab1214928db942da077c Mon Sep 17 00:00:00 2001 From: Mariana Caetano Pereira <67270558+Mariana-Caetano@users.noreply.github.com> Date: Fri, 8 Nov 2024 11:10:44 -0300 Subject: [PATCH 10/14] fix --- ...d => managing-product-images-in-specific-contexts.mdx} | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) rename docs/faststore/docs/customization/{managing-product-images-in-specific-contexts.md => managing-product-images-in-specific-contexts.mdx} (100%) diff --git a/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.md b/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.mdx similarity index 100% rename from docs/faststore/docs/customization/managing-product-images-in-specific-contexts.md rename to docs/faststore/docs/customization/managing-product-images-in-specific-contexts.mdx index 19d56c0edc..901f53cbd3 100644 --- a/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.md +++ b/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.mdx @@ -29,6 +29,8 @@ For this tutorial, we will create a custom gallery for the PDP using the [label] In this example, we will create a context by labeling selected images with the term `gallery`. This gallery will only display images that have been assigned the `gallery` label in [Catalog](https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ). + + ### Step 1: Labeling images in Catalog Label your product images with the label field in Catalog. @@ -53,8 +55,6 @@ To label your images, follow these steps: 7. Click `Save Label` and `Save`. - - ### Step 2: Querying images by context Update your store `ServerProduct` and `ClientProduct` fragments to retrieve images based on their [assigned labels](#step-1-labeling-images-in-catalog). This ensures that only relevant images for specific contexts, like the PDP, are retrieved. @@ -176,10 +176,10 @@ Customize the default [ImageGallery](https://developers.vtex.com/docs/guides/fas 3. Open a terminal and run `yarn dev` to sync the changes made in the previous steps. 4. Open a pull request to your store with these changes. Once the pull request is reviewed and approved, merge it into the `main` branch. - - ### Considerations for SKU Selector Images The FastStore API defines a specific name for images that are supposed to display on the SKU Selector. The first image labeled `skuvariation` in Catalog will automatically display on the SKU Selector. If no image has the `skuvariation` label, the first image of the SKU will be displayed. > ⚠ If an image needs to display on the SKU Selector and Product Gallery, you must upload it twice and assign different labels. + + From 90b0d185c2e2c30d2904a52fad4f8da40cb69ff0 Mon Sep 17 00:00:00 2001 From: Mariana Caetano Pereira <67270558+Mariana-Caetano@users.noreply.github.com> Date: Fri, 8 Nov 2024 11:21:23 -0300 Subject: [PATCH 11/14] fix CodeHike --- .../managing-product-images-in-specific-contexts.mdx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.mdx b/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.mdx index 901f53cbd3..97252779fb 100644 --- a/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.mdx +++ b/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.mdx @@ -55,6 +55,8 @@ To label your images, follow these steps: 7. Click `Save Label` and `Save`. +--- + ### Step 2: Querying images by context Update your store `ServerProduct` and `ClientProduct` fragments to retrieve images based on their [assigned labels](#step-1-labeling-images-in-catalog). This ensures that only relevant images for specific contexts, like the PDP, are retrieved. @@ -106,6 +108,8 @@ Update your store `ServerProduct` and `ClientProduct` fragments to retrieve imag > ❕The `limit: 3` argument selects only three images. Omitting this argument returns all images labeled `gallery`. By default, all images are returned if no context label is found. +--- + ### Step 3: Overriding the `ImageGallery` component Customize the default [ImageGallery](https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery) component to showcase the images retrieved in the [previous step](#step-1-labeling-images-in-catalog). This override allows you to control how images are displayed and interacted with on your PDP. @@ -173,6 +177,8 @@ Customize the default [ImageGallery](https://developers.vtex.com/docs/guides/fas - The `ServerProduct` and `ClientProduct` fragments are accessed via the `usePDP` hook. - Instead of using the images being passed to the [ImageGallery](https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery) component, we are using the `galleryImages` we defined. + + 3. Open a terminal and run `yarn dev` to sync the changes made in the previous steps. 4. Open a pull request to your store with these changes. Once the pull request is reviewed and approved, merge it into the `main` branch. @@ -182,4 +188,3 @@ The FastStore API defines a specific name for images that are supposed to displa > ⚠ If an image needs to display on the SKU Selector and Product Gallery, you must upload it twice and assign different labels. - From dddf53c236221e1129680f1b0bd4aa5ade4b492c Mon Sep 17 00:00:00 2001 From: Mariana Caetano Pereira <67270558+Mariana-Caetano@users.noreply.github.com> Date: Fri, 8 Nov 2024 11:25:09 -0300 Subject: [PATCH 12/14] fiz CodeHike --- .../managing-product-images-in-specific-contexts.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.mdx b/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.mdx index 97252779fb..7a8fd3733a 100644 --- a/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.mdx +++ b/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.mdx @@ -173,12 +173,11 @@ Customize the default [ImageGallery](https://developers.vtex.com/docs/guides/fas ``` + - The `ServerProduct` and `ClientProduct` fragments are accessed via the `usePDP` hook. - Instead of using the images being passed to the [ImageGallery](https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery) component, we are using the `galleryImages` we defined. - - 3. Open a terminal and run `yarn dev` to sync the changes made in the previous steps. 4. Open a pull request to your store with these changes. Once the pull request is reviewed and approved, merge it into the `main` branch. From e1780124dd3929f3c0b8946d1f5a4bcea6fa9aa8 Mon Sep 17 00:00:00 2001 From: Mariana Caetano Pereira <67270558+Mariana-Caetano@users.noreply.github.com> Date: Fri, 8 Nov 2024 11:29:16 -0300 Subject: [PATCH 13/14] Update managing-product-images-in-specific-contexts.mdx --- ...ging-product-images-in-specific-contexts.mdx | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.mdx b/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.mdx index 7a8fd3733a..32dbc0d3bc 100644 --- a/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.mdx +++ b/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.mdx @@ -29,8 +29,6 @@ For this tutorial, we will create a custom gallery for the PDP using the [label] In this example, we will create a context by labeling selected images with the term `gallery`. This gallery will only display images that have been assigned the `gallery` label in [Catalog](https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ). - - ### Step 1: Labeling images in Catalog Label your product images with the label field in Catalog. @@ -55,8 +53,6 @@ To label your images, follow these steps: 7. Click `Save Label` and `Save`. ---- - ### Step 2: Querying images by context Update your store `ServerProduct` and `ClientProduct` fragments to retrieve images based on their [assigned labels](#step-1-labeling-images-in-catalog). This ensures that only relevant images for specific contexts, like the PDP, are retrieved. @@ -66,8 +62,6 @@ Update your store `ServerProduct` and `ClientProduct` fragments to retrieve imag 1. Open your store code using the code editor of your choice. 2. Go to `src/fragments/ServerProduct.ts` and add the following: - - ```js src/fragments/ServerProduct.ts import { gql } from '@faststore/core/api' @@ -87,8 +81,6 @@ Update your store `ServerProduct` and `ClientProduct` fragments to retrieve imag 3. Go to `src/fragments/ClientProduct` and add the following: - - ```js src/fragments/ClientProduct import { gql } from '@faststore/core/api' @@ -104,11 +96,8 @@ Update your store `ServerProduct` and `ClientProduct` fragments to retrieve imag ` ``` - - > ❕The `limit: 3` argument selects only three images. Omitting this argument returns all images labeled `gallery`. By default, all images are returned if no context label is found. ---- ### Step 3: Overriding the `ImageGallery` component @@ -117,8 +106,6 @@ Customize the default [ImageGallery](https://developers.vtex.com/docs/guides/fas 1. In your store code, create the `ProductDetails.tsx` file inside the `src/components/overrides` folder. 2. In the `ProductDetails.tsx` file, add the following content: - - ```tsx import { SectionOverride } from "@faststore/core"; @@ -172,9 +159,6 @@ Customize the default [ImageGallery](https://developers.vtex.com/docs/guides/fas export { override }; ``` - - - - The `ServerProduct` and `ClientProduct` fragments are accessed via the `usePDP` hook. - Instead of using the images being passed to the [ImageGallery](https://developers.vtex.com/docs/guides/faststore/organisms-image-gallery) component, we are using the `galleryImages` we defined. @@ -186,4 +170,3 @@ Customize the default [ImageGallery](https://developers.vtex.com/docs/guides/fas The FastStore API defines a specific name for images that are supposed to display on the SKU Selector. The first image labeled `skuvariation` in Catalog will automatically display on the SKU Selector. If no image has the `skuvariation` label, the first image of the SKU will be displayed. > ⚠ If an image needs to display on the SKU Selector and Product Gallery, you must upload it twice and assign different labels. - From cf0f2193314bf2b1f84c1d068f77cf2aba2a9a23 Mon Sep 17 00:00:00 2001 From: Mariana Caetano Pereira <67270558+Mariana-Caetano@users.noreply.github.com> Date: Fri, 8 Nov 2024 12:07:23 -0300 Subject: [PATCH 14/14] Update managing-product-images-in-specific-contexts.mdx --- .../managing-product-images-in-specific-contexts.mdx | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.mdx b/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.mdx index 32dbc0d3bc..02deedad8d 100644 --- a/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.mdx +++ b/docs/faststore/docs/customization/managing-product-images-in-specific-contexts.mdx @@ -77,8 +77,6 @@ Update your store `ServerProduct` and `ClientProduct` fragments to retrieve imag ` ``` - - 3. Go to `src/fragments/ClientProduct` and add the following: ```js src/fragments/ClientProduct