)
const MasterCard = () => (
)
const AmericanExpressCard = () => (
)
const MaestroCard = () => (
)
const EloCard = () => (
)
const HiperCard = () => (
)
const PayPal = () => (
)
const DinersClub = () => (
)
return (
- 🎉New OutOfStock component - #1314
OutOfStock component to display a subscription form for shoppers who want to be alerted when the product is back in stock.
+ Use the OutOfStock component to display a subscription form for shoppers who want to be alerted when the product is back in stock.
### `ProductCard`
+
- 🎉New ProductCard component - #1272
ProductCard component to provide a general view of a product, including images, name, price, discount, and buy button.
+ Use the ProductCard component to provide a general view of a product, including images, name, price, discount, and buy button.
## FastStore SDK
+
### `useStorage`
+
- ✨Updated hook component - #1316
🐛 Top searches - #1321
-All requests to the FastStore Search API now receive locale info so the search can return product suggestions according to the user locale. + All requests to the FastStore Search API now receive locale info so the search can return product suggestions according to the user locale. -🐛 Fixed breadcrumb broken links - #1306
-Breadcrumb links that were broken have been fixed, allowing shoppers to navigate the website without getting 404 errors. + Breadcrumb links that were broken have been fixed, allowing shoppers to navigate the website without getting 404 errors. -✨ Support for querying additional properties of a product - #1304
-The FastStore API has been enhanced to support querying any additional property of a product. + The FastStore API has been enhanced to support querying any additional property of a product. -✨ Sync Cart with Checkout - #1299
-The behavior of thevalidateCart resolver has been modified. After placing an order, the cart is now cleared, and any changes made during checkout are reflected in the cart.
+ The behavior of the validateCart resolver has been modified. After placing an order, the cart is now cleared, and any changes made during checkout are reflected in the cart.
- 🐛The Search API now receives selectedFacets component - #1297
🐛Fixed promotion issues - #1289
-Promotions such as Buy 2 Get 3 now work correctly. + Promotions such as Buy 2 Get 3 now work correctly. -🐛Fixed SKU offer issues - #1282
-Product offers related to a specific SKU have been fixed, and now the offers are available only for available SKUs. + Product offers related to a specific SKU have been fixed, and now the offers are available only for available SKUs. -🐛Fixed in the Serch API - #1273
-Suggestions are now working as expected. - + Suggestions are now working as expected. ## Internal + -🎉Turborepo on FastStore - #1296
-The FastStore project now uses Turborepo. + The FastStore project now uses Turborepo. -📑New guide: Installing Releases on VTEX Headless CMS - #1310
-📑FastStore API documentation available on GraphiQL - #1305
-FastStore API reference documentation is now available. For more information, refer to this announcement. + FastStore API reference documentation is now available. For more information, refer to this announcement. -📑Improved the descriptions of FastStore API - #1303
-🐛Fixed styles and data attributes - #1287
-Styles used on the FastStore UI documentation have been updated after the adjustments to the data attributes. - + Styles used on the FastStore UI documentation have been updated after the adjustments to the data attributes. + + ## Starters + -🎉New Community Starters
-Check out the new Community Starters, created and maintained by FastStore community members: --
-
- Beauty Store. -
- Toy Store. -
- Pets Store. -
-
+
- Beauty Store. +
- Toy Store. +
- Pets Store. +
{/* Pay attention to the data-attribute */}
-
-
\ No newline at end of file
+
diff --git a/apps/docs/docs/how-to-guides/platform-integration/vtex/hosting-a-faststore-vtex-website.md b/apps/docs/docs/how-to-guides/platform-integration/vtex/hosting-a-faststore-vtex-website.md
index afbebd0954..a23c1fffe9 100644
--- a/apps/docs/docs/how-to-guides/platform-integration/vtex/hosting-a-faststore-vtex-website.md
+++ b/apps/docs/docs/how-to-guides/platform-integration/vtex/hosting-a-faststore-vtex-website.md
@@ -21,10 +21,13 @@ Use the `nslookup` command as in the following to check which **IP address** cor
1. Open the terminal.
2. Check which IP addresses are capable of hosting your website by running the following command:
- - Remember to replace `{URL}` with your automatic deployment URL (e.g., `base.vtex.app`, `base.netlify.app`, `base.vercel.app`).
- ```
- nslookup {URL}
- ```
+
+- Remember to replace `{URL}` with your automatic deployment URL (e.g., `base.vtex.app`, `base.netlify.app`, `base.vercel.app`).
+
+```
+nslookup {URL}
+```
+
4. Copy and save one of the IP addresses presented below the `Non-authoritative answer` message for further usage.
@@ -37,9 +40,9 @@ Now, it's time to make your website publicly available on the internet.
If you still need to configure other VTEX solutions, please **use a fictitious domain name** when taking the following steps. Then, once you set up all the desired integrations, repeat this guide using your final domain to make your website publicly available to end-users.
:::
-1. Access your domain provider website.
-2. Configure a **domain name** (for example, `vtexfaststore.com`) that points to the **IP address** you saved in the previous step. *Check the documentation of your domain provider for more information.*
-4. Now, configure a **subdomain** named `secure` that points to `secure.{rootDomain}.cdn.vtex.com`, where `{rootDomain}` is the **complete** address of your website. For example, `secure.vtexfaststore.com.cdn.vtex.com`. This subdomain will be used by the **Checkout**, **Order Placed**, **Login**, and **My Account** pages.
+1. Access your domain provider website.
+2. Configure a **domain name** (for example, `vtexfaststore.com`) that points to the **IP address** you saved in the previous step. _Check the documentation of your domain provider for more information._
+3. Now, configure a **subdomain** named `secure` that points to `secure.{rootDomain}.cdn.vtex.com`, where `{rootDomain}` is the **complete** address of your website. For example, `secure.vtexfaststore.com.cdn.vtex.com`. This subdomain will be used by the **Checkout**, **Order Placed**, **Login**, and **My Account** pages.
### Step 3 - Setting up your VTEX account
@@ -58,13 +61,14 @@ Back to your FastStore project, you must also configure your project to point to
1. Open your FastStore project in any code editor of your preference.
2. Open the `store.config.js` file.
-4. Update the `storeUrl`, `secureSubdomain`, `checkoutUrl`, `loginUrl`, and `accountUrl` properties as in the following:
+3. Update the `storeUrl`, `secureSubdomain`, `checkoutUrl`, `loginUrl`, and `accountUrl` properties as in the following:
+
- **`storeUrl`**: https://{rootDomain}
- **`secureSubdomain`**: https://{subdomain}.{rootDomain}
- **`checkoutUrl`**: https://{subdomain}.{rootDomain}/checkout
- **`loginUrl`**: https://{subdomain}.{rootDomain}/api/io/login
- **`accountUrl`**: https://{subdomain}.{rootDomain}/api/io/account
- Take the follwoing example of how this code block would look after configuring a store with the `vtexfaststore.com` root domain and `secure` subdomain:
+ Take the follwoing example of how this code block would look after configuring a store with the `vtexfaststore.com` root domain and `secure` subdomain:
```diff title="store.config.js"
...
@@ -84,8 +88,8 @@ Back to your FastStore project, you must also configure your project to point to
...
```
-5. Save your changes.
-6. Open a Pull Request and commit your changes.
+4. Save your changes.
+5. Open a Pull Request and commit your changes.
---
diff --git a/apps/docs/docs/how-to-guides/platform-integration/vtex/integrating-the-vtex-login.md b/apps/docs/docs/how-to-guides/platform-integration/vtex/integrating-the-vtex-login.md
index 3ad6549123..735ea52647 100644
--- a/apps/docs/docs/how-to-guides/platform-integration/vtex/integrating-the-vtex-login.md
+++ b/apps/docs/docs/how-to-guides/platform-integration/vtex/integrating-the-vtex-login.md
@@ -27,18 +27,19 @@ By the end of this step, changes will be live to all end-users, meaning that onc
3. In the left-side navigation menu, click on **CMS**.
4. Click on **HTML Templates** and open the **Home** file.
5. Add the following script to the Home's ``.
- - *Replace the value between curly brackets with your store domain.*
-
+
+ - _Replace the value between curly brackets with your store domain._
+
```xhtml
-
+
```
6. Clean the `` section to remove unnecessary code. By the end of this step, your Home file should look like the following:
- 
+
7. Click on the **Save Template** button.
-### Step 2 - Setting the auth cookie root domain
+### Step 2 - Setting the auth cookie root domain
To authenticate client requests and maintain session information, you must ensure that the auth cookies are set up for the **Login** subdomain. To do that, [open a support ticket](https://help-tickets.vtex.com/smartlink/sso/login/zendesk) to the Identity team requesting to set up the auth cookie root domain for your FastStore URL.
diff --git a/apps/docs/docs/how-to-guides/platform-integration/vtex/integrating-vtex-checkout.md b/apps/docs/docs/how-to-guides/platform-integration/vtex/integrating-vtex-checkout.md
index 79a233c100..11403961cb 100644
--- a/apps/docs/docs/how-to-guides/platform-integration/vtex/integrating-vtex-checkout.md
+++ b/apps/docs/docs/how-to-guides/platform-integration/vtex/integrating-vtex-checkout.md
@@ -7,12 +7,14 @@ sidebar_position: 4
In this guide, you'll learn how to integrate your **FastStore** project with the **VTEX Checkout**. The Checkout comprehends the pages responsible for receiving the shopper's information necessary to process an order.
To successfully integrate the VTEX Checkout with your FastStore project, you must ensure that:
-- Shoppers will be presented with an updated version of the Order Placed page once they place an order.
+
+- Shoppers will be presented with an updated version of the Order Placed page once they place an order.
- All links in the Header and Footer of the Checkout point to your FastStore website.
## Before you start
Before proceeding any further, make sure you already have:
+
- [Your FastStore + VTEX website hosted on the internet](/how-to-guides/platform-integration/vtex/hosting-a-faststore-vtex-website).
---
@@ -26,19 +28,21 @@ Take the following steps to guarantee shoppers will be redirected to the newest
1. Access the **VTEX Admin**.
2. Go to **Store Setup > Checkout**.
3. Click on the **gear button**
+ {' '}
+ {/* Pay attention to the data-attribute */}
+
in the **Default** card.
-4. Change to the **Code** tab.
-5. Select `checkout-confirmation-custom.js` under **Files**.
+4. Change to the **Code** tab.
+5. Select `checkout-confirmation-custom.js` under **Files**.
6. Add the following JavaScript code in the editor:
- ```jsx {4-5} title="checkout-confirmation-custom.js"
- // WARNING: THE USAGE OF CUSTOM SCRIPTS IS NOT SUPPORTED. VTEX IS NOT LIABLE FOR ANY DAMAGES THIS MAY CAUSE.
- // THIS MAY BREAK YOUR STORE AND STOP SALES. IN CASE OF ERRORS, PLEASE DELETE THE CONTENT OF THIS SCRIPT.
+```jsx {4-5} title="checkout-confirmation-custom.js"
+// WARNING: THE USAGE OF CUSTOM SCRIPTS IS NOT SUPPORTED. VTEX IS NOT LIABLE FOR ANY DAMAGES THIS MAY CAUSE.
+// THIS MAY BREAK YOUR STORE AND STOP SALES. IN CASE OF ERRORS, PLEASE DELETE THE CONTENT OF THIS SCRIPT.
+
+const og = new URLSearchParams(location.search).get('og')
+window.location.assign(
+ `${window.location.origin}/api/io${window.location.pathname}?og=${og}`
+)
+```
- const og = new URLSearchParams(location.search).get('og')
- window.location.assign(`${window.location.origin}/api/io${window.location.pathname}?og=${og}`)
- ```
-
-7. Click on **Save**. Notice that, as soon as you hit the *Save* button, your changes will be live to all clients.
+7. Click on **Save**. Notice that, as soon as you hit the _Save_ button, your changes will be live to all clients.
@@ -46,19 +50,17 @@ Take the following steps to guarantee shoppers will be redirected to the newest
We now need to update the links presented in the Header and Footer of the Checkout pages, guaranteeing that all links point to your FastStore website. To do that, take the following steps.
-1. Still in the VTEX Admin at the **Store Setup > Checkout > Default > Code** tab, click on `checkout-footer.js` under **Files**.
+1. Still in the VTEX Admin at the **Store Setup > Checkout > Default > Code** tab, click on `checkout-footer.js` under **Files**.
2. Edit the `checkout-header.js` code according to your scenario, making sure all links are pointing to your FastStore website. For example:
- ```diff title="checkout-header.js"
-
- ```
+ ```diff title="checkout-header.js"
+
+ ```
-3. Click on **Save**. Notice that, as soon as you hit the *Save* button, your changes will be live to all clients.
+3. Click on **Save**. Notice that, as soon as you hit the _Save_ button, your changes will be live to all clients.
Once you adjust all the Header links of the Checkout pages, make sure to repeat this process for the `checkout-footer.js` file to adjust the Checkout Footer.
-
-
diff --git a/apps/docs/docs/how-to-guides/platform-integration/vtex/integrating-vtex-orderplaced-myaccount.md b/apps/docs/docs/how-to-guides/platform-integration/vtex/integrating-vtex-orderplaced-myaccount.md
index 2337cd972b..641adcbed3 100644
--- a/apps/docs/docs/how-to-guides/platform-integration/vtex/integrating-vtex-orderplaced-myaccount.md
+++ b/apps/docs/docs/how-to-guides/platform-integration/vtex/integrating-vtex-orderplaced-myaccount.md
@@ -4,7 +4,7 @@ sidebar_position: 5
# Implementing VTEX Order Placed and My Account
-To create a complete digital commerce experience for your FastStore project, you need to provide shoppers with a Checkout and My Account space, for example. In this guide, we'll teach you how to implement the **Order Placed** page, which displays a successful message right after the checkout process is completed, and a **My Account** space, which allows customers to manage their orders and personal data (e.g., profile info, password, addresses, and credit cards) on a single page.
+To create a complete digital commerce experience for your FastStore project, you need to provide shoppers with a Checkout and My Account space, for example. In this guide, we'll teach you how to implement the **Order Placed** page, which displays a successful message right after the checkout process is completed, and a **My Account** space, which allows customers to manage their orders and personal data (e.g., profile info, password, addresses, and credit cards) on a single page.
Notice that, since we're using a subdomain for these integrations that is unrelated to FastStore itself, we'll use VTEX IO in this guide. VTEX IO is a VTEX solution to create VTEX apps. But don't worry: to finish this guide, you won't need to dive into VTEX IO concepts.
@@ -13,21 +13,22 @@ Notice that, since we're using a subdomain for these integrations that is unrela
## Before you start
Before proceeding any further, make sure you already have:
+
- Integrated your FastStore project with the VTEX Checkout. See [this](/how-to-guides/platform-integration/vtex/integrating-vtex-checkout) doc for more info.
- The VTEX IO CLI installed on your machine. See [this](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-vtex-io-cli-installation-and-command-reference) doc for more info.
-- The `vtex.edition-store` `3.x` or greater app version installed on your VTEX account.
- - *Run `vtex edition get` to check if the `vtex.edition-store` app is installed on your account. If not, [open a support ticket](https://help.vtex.com/en/support) communicating you need the `vtex.edition-store@3.x` to be installed on your account so you can integrate your FastStore project with the VTEX platform.*
+- The `vtex.edition-store` `3.x` or greater app version installed on your VTEX account.
+ - _Run `vtex edition get` to check if the `vtex.edition-store` app is installed on your account. If not, [open a support ticket](https://help.vtex.com/en/support) communicating you need the `vtex.edition-store@3.x` to be installed on your account so you can integrate your FastStore project with the VTEX platform._
---
## Step by step
-### Step 1 - Creating your app
+### Step 1 - Creating your app
1. Open the terminal and clone the [`faststore-vtex-integrations`](https://github.com/vtex/faststore-vtex-integrations/) project into your local files.
```sh
npx degit vtex/faststore-vtex-integrations
- ```
+ ```
2. Open the `faststore-vtex-integrations` directory in any code editor of your preference.
3. Open the `manifest.json` file and update the value of the `vendor` field with the name of your VTEX account.
4. Using the terminal, log in to your VTEX account.
@@ -36,28 +37,28 @@ Before proceeding any further, make sure you already have:
vtex login {account}
```
- :::caution
- Replace the value between curly brackets with the name of your account.
- :::
+:::caution
+Replace the value between curly brackets with the name of your account.
+:::
5. Create a new development workspace.
```sh
vtex workspace use {workspace}
- ```
- :::caution
- Replace the value between curly brackets with any name of your preference, making sure the name you choose is not already taken.
- :::
-
+ ```
+ :::caution
+ Replace the value between curly brackets with any name of your preference, making sure the name you choose is not already taken.
+ :::
Enter `Y` to continue creating the new workspace.
6. Link your app to sync your local changes with the VTEX IO cloud development environment.
+
```sh
vtex link
- ```
+ ```
-7. Now, open a new browser window and access `https://{workspace}--{account}.myvtex.com` to see your changes live. *Remember to replace the values between curly brackets according to your scenario.*
+7. Now, open a new browser window and access `https://{workspace}--{account}.myvtex.com` to see your changes live. _Remember to replace the values between curly brackets according to your scenario._
8. Add items to your shopping cart and proceed to checkout. Place an order and observe if you are being taken to the Order Placed page:
- 
+
### Step 2 - Updating the store logo
@@ -65,26 +66,28 @@ After accessing the Order Placed page, you probably noticed the FastStore logo.
1. Save your logo inside the `assets` folder.
2. Open the `store/blocks/header.jsonc` file and update the `title`, `href`, `url`, and `width` values of your store logo (`logo#desktop` and `logo#mobile`) according to your scenario:
- ```jsonc title="store/blocks/header.json" {4-7,13-16}
- ...
- "logo#desktop": {
- "props": {
- "title": "{altText}",
- "href": "https://{maindomain}",
- "url": "assets/{logoPath}",
- "width": "{widthValue}"
- }
+
+```jsonc title="store/blocks/header.json" {4-7,13-16}
+...
+"logo#desktop": {
+ "props": {
+ "title": "{altText}",
+ "href": "https://{maindomain}",
+ "url": "assets/{logoPath}",
+ "width": "{widthValue}"
}
- ...
- "logo#mobile": {
- "props": {
- "title": "{altText}",
- "href": "https://{maindomain}",
- "url": "assets/{logoPath}",
- "width": "{widthValue}"
- }
+}
+...
+ "logo#mobile": {
+ "props": {
+ "title": "{altText}",
+ "href": "https://{maindomain}",
+ "url": "assets/{logoPath}",
+ "width": "{widthValue}"
}
- ```
+}
+```
+
3. Save your changes.
### Step 3 - (Optional) Styling the Order Placed and My Account header
@@ -96,37 +99,46 @@ If you want to change the style of the header presented in the **Order Placed**
Now that everything is as expected, you need to make your changes publicly available to your store shoppers. To do that, take the following steps:
1. Open the terminal and create a production workspace.
- ```
- vtex use {workspace} --production
- ```
+
+```
+vtex use {workspace} --production
+```
+
2. Change to the `faststore-vtex-integrations` directory.
3. Release a new app version.
- ```
- vtex release major stable
- ```
+
+```
+vtex release major stable
+```
+
3. Publish your app as a candidate version.
- ```
- vtex publish
- ```
+
+```
+vtex publish
+```
+
4. Install the candidate version indicating the app's version as in the following:
- ```
- vtex install {vendor}.{name}@{version}
- ```
- :::caution
- Replace the values between curly brackets according to the `manifest.json` file of your `faststore-vtex-integrations` app.
- :::
-5. Deploy the candidate version as a stable version.
- ```
- vtex deploy {vendor}.{appname}@{appversion}
- ```
+
+```
+vtex install {vendor}.{name}@{version}
+```
+
+:::caution
+Replace the values between curly brackets according to the `manifest.json` file of your `faststore-vtex-integrations` app.
+::: 5. Deploy the candidate version as a stable version.
+
+```
+vtex deploy {vendor}.{appname}@{appversion}
+```
+
6. Promote your Production workspace to master to make your changes publicly available to your store shoppers.
```
vtex workspace promote
- ```
+ ```
That's all. Now, if you place an order in your store, you'll be presented with the **Order Placed** page. Similarly, you'll also have access to the **My Account** page.
-## Related resources
+## Related resources
- [My Account](https://github.com/vtex-apps/my-account)
- [Order Placed](https://github.com/vtex-apps/order-placed)
diff --git a/apps/docs/docs/how-to-guides/platform-integration/vtex/setting-up-an-account.md b/apps/docs/docs/how-to-guides/platform-integration/vtex/setting-up-an-account.md
index 8de35a4462..0e4ef69572 100644
--- a/apps/docs/docs/how-to-guides/platform-integration/vtex/setting-up-an-account.md
+++ b/apps/docs/docs/how-to-guides/platform-integration/vtex/setting-up-an-account.md
@@ -13,6 +13,7 @@ Notice that, because needed dependencies, such as [VTEX Intelligent Search](http
## Before you start
Before proceeding any further, make sure you have:
+
- Access to a **VTEX** account.
- The **VTEX IO CLI** installed on your machine. Please refer to [this guide](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-vtex-io-cli-installation-and-command-reference) for more information.
@@ -24,24 +25,25 @@ In this step by step, you'll use the FastStore plugin for the VTEX IO CLI to ins
1. Install the FastStore plugin for the VTEX IO CLI:
- ```
- vtex plugins install faststore
- ```
+ ```
+ vtex plugins install faststore
+ ```
2. Log in to your VTEX account:
- - *Remember to replace the values between curly brackets according to your scenario.*
- ```
- vtex login {account}
- ```
+ - _Remember to replace the values between curly brackets according to your scenario._
+
+ ```
+ vtex login {account}
+ ```
3. Set up your VTEX account for FastStore by running the following command:
- ```
- vtex faststore setup
- ```
+ ```
+ vtex faststore setup
+ ```
-Once the command completes, you should see the following message: ```Happy coding on FastStore 🎉```.
+Once the command completes, you should see the following message: `Happy coding on FastStore 🎉`.
## Next steps
diff --git a/apps/docs/docs/how-to-guides/platform-integration/vtex/troubleshooting.md b/apps/docs/docs/how-to-guides/platform-integration/vtex/troubleshooting.md
index d3357a78d0..3c740ddbbe 100644
--- a/apps/docs/docs/how-to-guides/platform-integration/vtex/troubleshooting.md
+++ b/apps/docs/docs/how-to-guides/platform-integration/vtex/troubleshooting.md
@@ -13,6 +13,6 @@ You may find the following error after trying to complete a purchase in your sto
-**Cause:** This error occurs when your browser is unable to verify whether a website is safe to visit. This usually happens when the browser notices a problem while creating an SSL connection or can’t verify the certificate.
+**Cause:** This error occurs when your browser is unable to verify whether a website is safe to visit. This usually happens when the browser notices a problem while creating an SSL connection or can’t verify the certificate.
-**Solution:** Follow the [**Hosting a FastStore + VTEX website**](/how-to-guides/platform-integration/vtex/hosting-a-faststore-vtex-website#step-2---setting-up-your-vtex-account) guide. If the issue persists, check if the `secure` subdomain of your website is pointing to `secure.{hostname}.cdn.vtex.com`, where `hostname` is the complete address of your store.
\ No newline at end of file
+**Solution:** Follow the [**Hosting a FastStore + VTEX website**](/how-to-guides/platform-integration/vtex/hosting-a-faststore-vtex-website#step-2---setting-up-your-vtex-account) guide. If the issue persists, check if the `secure` subdomain of your website is pointing to `secure.{hostname}.cdn.vtex.com`, where `hostname` is the complete address of your store.
diff --git a/apps/docs/docs/how-to-guides/routing/managing-url-redirects.md b/apps/docs/docs/how-to-guides/routing/managing-url-redirects.md
index e88d5f71f0..a01d761a94 100644
--- a/apps/docs/docs/how-to-guides/routing/managing-url-redirects.md
+++ b/apps/docs/docs/how-to-guides/routing/managing-url-redirects.md
@@ -2,4 +2,4 @@
:::caution WIP
This documentation is currently under development.
-:::
\ No newline at end of file
+:::
diff --git a/apps/docs/docs/how-to-guides/styling/styling-components.md b/apps/docs/docs/how-to-guides/styling/styling-components.md
index 69c127f065..884ec0e966 100644
--- a/apps/docs/docs/how-to-guides/styling/styling-components.md
+++ b/apps/docs/docs/how-to-guides/styling/styling-components.md
@@ -1,5 +1,5 @@
-# Styling components
+# Styling components
:::caution WIP
This documentation is currently under development.
-:::
\ No newline at end of file
+:::
diff --git a/apps/docs/docs/how-to-guides/testing/e2e-testing.md b/apps/docs/docs/how-to-guides/testing/e2e-testing.md
index 9b0649659b..b16d165841 100644
--- a/apps/docs/docs/how-to-guides/testing/e2e-testing.md
+++ b/apps/docs/docs/how-to-guides/testing/e2e-testing.md
@@ -2,4 +2,4 @@
:::caution WIP
This documentation is currently under development.
-:::
\ No newline at end of file
+:::
diff --git a/apps/docs/docs/how-to-guides/troubleshooting.md b/apps/docs/docs/how-to-guides/troubleshooting.md
index b08976b767..b3fcbe32fa 100644
--- a/apps/docs/docs/how-to-guides/troubleshooting.md
+++ b/apps/docs/docs/how-to-guides/troubleshooting.md
@@ -1,9 +1,9 @@
---
sidebar_position: 0
description: Check our general guidelines on how to debug a FastStore website.
-tags:
- - performance
- - troubleshooting
+tags:
+ - performance
+ - troubleshooting
---
import Tabs from '@theme/Tabs';
@@ -14,7 +14,8 @@ import TabItem from '@theme/TabItem';
Ecommerce websites are comprised of complex solutions with multiple scripts and APIs. That's why debugging such a system may sometimes be challenging. Hence, to help you pinpoint the exact origin of the errors you may be facing, we've developed general guidelines you can use to troubleshoot these issues.
The first thing to note is that there are three primary sources of errors on FastStore projects:
-- **Starter bugs** - issues present on the Starter. These bugs are forked from the Starter project and replicated on your project even before you begin writing your own code.
+
+- **Starter bugs** - issues present on the Starter. These bugs are forked from the Starter project and replicated on your project even before you begin writing your own code.
- **Ecommerce provider API bugs** - issues related to your ecommerce provider API. For instance, the API returns data in the wrong order.
- **Customization bugs** issues introduced during development.
@@ -22,10 +23,10 @@ Thus, to begin debugging your project, we recommend using the approach outlined
-**Check if the bug you are facing is a Starter bug**. Please refer to the [Identifying development errors and Starter bugs](/how-to-guides/troubleshooting/identifying-development-errors-and-starter-bugs) guide for more information.
+**Check if the bug you are facing is a Starter bug**. Please refer to the [Identifying development errors and Starter bugs](/how-to-guides/troubleshooting/identifying-development-errors-and-starter-bugs) guide for more information.
-If you detect that you are facing a Starter bug, report the problem by opening an issue at the Starter repository. Otherwise, **test if the API requests from your ecommerce provider are working as expected**. For instance, VTEX has a [list of REST APIs](https://developers.vtex.com/vtex-rest-api/docs/getting-started-list-of-rest-apis) where you can test if the request responses are as expected.
+If you detect that you are facing a Starter bug, report the problem by opening an issue at the Starter repository. Otherwise, **test if the API requests from your ecommerce provider are working as expected**. For instance, VTEX has a [list of REST APIs](https://developers.vtex.com/vtex-rest-api/docs/getting-started-list-of-rest-apis) where you can test if the request responses are as expected.
If you check the problem is not related to your ecommerce provider APIs, consider that the issue may be related to your own code. In this case, if your feature was working properly in the past, **use binary search to detect when, in time, the bug was introduced**. For more information, please refer to the [Tracing the error source](/how-to-guides/troubleshooting/tracing-the-error-source) guide.
-Finally, if this is a new issue and you are not sure your feature was working before, check [React docs](https://reactjs.org/docs/design-principles.html#debugging) to continue debugging your project. Also, consider checking [Gatsby troubleshooting guides](https://www.gatsbyjs.com/docs/how-to/local-development/troubleshooting-common-errors/) or [Next.js troubleshooting guides](https://nextjs.org/docs/advanced-features/debugging).
\ No newline at end of file
+Finally, if this is a new issue and you are not sure your feature was working before, check [React docs](https://reactjs.org/docs/design-principles.html#debugging) to continue debugging your project. Also, consider checking [Gatsby troubleshooting guides](https://www.gatsbyjs.com/docs/how-to/local-development/troubleshooting-common-errors/) or [Next.js troubleshooting guides](https://nextjs.org/docs/advanced-features/debugging).
diff --git a/apps/docs/docs/how-to-guides/troubleshooting/identifying-development-errors-and-starter-bugs.md b/apps/docs/docs/how-to-guides/troubleshooting/identifying-development-errors-and-starter-bugs.md
index 85b85da2f8..a0053f5016 100644
--- a/apps/docs/docs/how-to-guides/troubleshooting/identifying-development-errors-and-starter-bugs.md
+++ b/apps/docs/docs/how-to-guides/troubleshooting/identifying-development-errors-and-starter-bugs.md
@@ -1,9 +1,9 @@
---
sidebar_position: 1
description: Check if you are facing a bug from the Starter.
-tags:
- - performance
- - troubleshooting
+tags:
+ - performance
+ - troubleshooting
---
import Tabs from '@theme/Tabs';
@@ -11,7 +11,7 @@ import TabItem from '@theme/TabItem';
# Identifying development errors and Starter bugs
-While developing with FastStore, you may run into errors. Some of these may require fixes in FastStore libraries, while others may require adjusting your code.
+While developing with FastStore, you may run into errors. Some of these may require fixes in FastStore libraries, while others may require adjusting your code.
Hence, before proceeding with any advanced troubleshooting, we recommend that you first check if you are facing a bug from FastStore/WebOps or a mistake on your side.
@@ -36,7 +36,6 @@ npx degit vtex-sites/gatsby.store
-
2. Change to the cloned repository and run `yarn`.
-Your store will start at a hot-reloading environment at [http://localhost:8000/](http://localhost:8000/). You'll also have access to GraphiQL, a tool that you can use to fetch data and build queries, at [http://localhost:8000/___graphql](http://localhost:8000/___graphql).
+Your store will start at a hot-reloading environment at [http://localhost:8000/](http://localhost:8000/). You'll also have access to GraphiQL, a tool that you can use to fetch data and build queries, at [http://localhost:8000/\_\_\_graphql](http://localhost:8000/___graphql).
-🎉 *That's all!* You're now ready to start making changes to your FastStore storefront.
+🎉 _That's all!_ You're now ready to start making changes to your FastStore storefront.
diff --git a/apps/docs/docs/reference.md b/apps/docs/docs/reference.md
index 50dcd92667..17ed78a6f5 100644
--- a/apps/docs/docs/reference.md
+++ b/apps/docs/docs/reference.md
@@ -9,9 +9,9 @@ import FastStorePackages from "@site/src/components/FastStorePackages/FastStoreP
# FastStore
-FastStore is a **light yet powerful set of libraries** made for developers who want to explore their knowledge and creativity building comprehensive ecommerce solutions. FastStore supports integration with **headless ecommerce platforms** and delivers all the necessary building blocks for creating custom ecommerce experiences.
+FastStore is a **light yet powerful set of libraries** made for developers who want to explore their knowledge and creativity building comprehensive ecommerce solutions. FastStore supports integration with **headless ecommerce platforms** and delivers all the necessary building blocks for creating custom ecommerce experiences.
-FastStore architecture is **Jamstack-based**, meaning FastStore projects can be deployed with VTEX IO WebOps, Netlify, Vercel, or any other Jamstack platform in the market.
+FastStore architecture is **Jamstack-based**, meaning FastStore projects can be deployed with VTEX IO WebOps, Netlify, Vercel, or any other Jamstack platform in the market.
With FastStore and by following our recommended practices, you can achieve outstanding performance on your store website (**90+ on [Google PageSpeed Insights](https://pagespeed.web.dev/)**). In addition, FastStore also delivers:
@@ -33,12 +33,12 @@ FastStore encapsulates the following three main packages:
-Besides these three main libraries, FastStore also counts with the following packages:
+Besides these three main libraries, FastStore also counts with the following packages:
-- **`graphql-utils`** - Extracts and processes GraphQL queries.
+- **`graphql-utils`** - Extracts and processes GraphQL queries.
- **`lighthouse-config`** - An ecommerce focused [Lighthouse](https://developers.google.com/web/tools/lighthouse/) CI configuration.
- **`renovate-config`** - Configuration of [Renovate](https://github.com/renovatebot/renovate), a bot responsible for updating dependencies automatically.
-
+
:::caution
If you check FastStore repository on GitHub, you'll also find some Gatsby-specific plugins (`@vtex/gatsby-plugin-cms`, `@vtex/gatsby-plugin-nginx`, `@vtex/gatsby-source-store`, `@vtex/gatsby-source-vtex`. We aim to provide Gatsby-agnostic solutions for these plugins soon.
:::
diff --git a/apps/docs/docs/reference/api/enums.md b/apps/docs/docs/reference/api/enums.md
index 156311a710..7666a6843e 100644
--- a/apps/docs/docs/reference/api/enums.md
+++ b/apps/docs/docs/reference/api/enums.md
@@ -99,4 +99,4 @@ Status used to indicate a message type. For instance, a shopping cart informativ