Digital commerce toolkit for frontend developers
MIT License
Bot releases are visible (Hide)
Published by hellofanny 17 days ago
New integration between FastStore and VTEX Ad Network (#2438)
โ ๏ธ This feature is only available for stores that are active publishers on the VTEX Ad Network.
FastStore now has support for displaying sponsored products when using Intelligent Search, helping retailers who are interested in VTEX Ad Network solution.
To benefit from this integration, follow these steps:
Update your store FastStore package to v3.0.117
using @faststore/cli
. To update the package, see the previous release notes for further details.
Create a campaign to be delivered to the store with valid products.
Update the showSponsored
configuration in the store's settings to enable Intelligent Search to return sponsored products.
Open your FastStore project in a code editor and go to faststore.config.js
file.
In the faststore.config.js
file, add the following configuration for api
:
api: {
...
showSponsored: true,
},
ProductCard
that the product is promoted.For more details refer to https://github.com/vtex/faststore/pull/2438
Published by hellofanny about 2 months ago
This release addresses the following issues:
ClientManyProductsQuery
parameter duplication: We've fixed product data fetching.โ ๏ธ To benefit from these fixes, update your store FastStore package to
v3.0.97
using@faststore/cli
. Refer to the previous release notes for further details.
Resolved an issue where the ClientManyProductsQuery
was fetched twice with nearly identical parameters. This optimization eliminates redundant data fetching and the system can load product information more quickly. The only difference was the hasOnlyDefaultSalesChannel
introduced on this PR and used only by the useAuth
hook.
Before | After |
---|---|
A recent change introduced a flickering effect on PLPs. In other words, the PLPs had visual instability, where the content of the page appeared to rapidly refresh or change without user interaction. We've rolled back the prior change to ensure a stable browsing experience. The FastStore team is working on alternative approaches to address fuzzy logic usage and operators in Intelligent Search requests, allowing the search engine to decide the best parameters for the search.
Before | After |
---|---|
Published by hellofanny 2 months ago
Reverse the dependency between @faststore/core
and @faststore/cli
The new CLI version now depends on the core package, reversing the previous dependency. Therefore, an explicit dependency on @faststore/cli
is sufficient, eliminating the need for both dependencies decreasing the possibility of incompatibilities between versions of different packages.
In your local FastStore project, go to package.json
file and check the dependencies list:
"dependencies": {
"@faststore/cli": "^3.0.87",
"next": "^13.5.6",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
If @faststore/cli
is already listed there, no action is needed. If not, follow the instructions below:
@faststore/core
in favor of depending only on @faststore/cli
. The dependency list should look like: "dependencies": {
"@faststore/cli": "^3.0.87", // it was @faststore/core": "^3.0.xx"
"next": "^13.5.6",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
@faststore/cli
from devDependencies list: "devDependencies": {
"@cypress/code-coverage": "^3.12.1",
"@lhci/cli": "^0.9.0",
"@testing-library/cypress": "^10.0.1",
"cypress": "12.17.4",
"cypress-axe": "^1.5.0",
"cypress-wait-until": "^2.0.1",
"typescript": "^4.9.4"
},
Run yarn
to install the changes. Your yarn.lock
file should be modified.
Refer to this PR to see the necessary changes.
[!WARNING]
We strongly recommend trying this in your local development environment to ensure compatibility with your existing codebase before changing to production.
These changes should not cause any issues in your project. After verifying that everything is working as expected, create a pull request with these changes to your remote repository.
Published by hellofanny 3 months ago
Updates to the Brandless theme, design system, and bug fixes.
[!WARNING]
The official documentation is not available with these updates yet.
Before | After |
---|---|
Before | After |
---|---|
Global token | Value |
---|---|
--fs-text-weight-medium | 500 |
--fs-text-weight-semibold | 600 |
InputField
: Fixed label centering for inputs with custom heights.Before | After |
---|---|
Before | After |
---|---|
Quantity Selector: Fixed border-radius declaration, moved to input.
ProductGallery
: ProductPrice
styles are now imported, enabling proper price rendering within the component.
Before | After |
---|---|
Published by hellofanny 9 months ago
This version introduces API extension improvements, error page customization in the Headless CMS, and FastStore v2 users can benefit from Next.js 13 support.
To benefit from the following updates, upgrade your store @faststore/core
and @faststore/cli
packages to v3.0.0
. In your local FastStore project, install the @faststore/core
and @faststore/cli
up-to-date version by running yarn add @faststore/[email protected]
and then yarn add -D @faststore/[email protected]
. Run the project locally with yarn dev
.
โ ๏ธ We strongly recommend trying this in your local development environment to ensure compatibility with your existing codebase before changing to production.
@faststore/graphql-utils
deprecated in favor of the client-preset
plugin, reducing bundle sizes, aligning with community standards, and adopting modern bundling and compilation tools for FastStore API extension users.
To benefit from these improvements, update your store's @faststore/core
package to v3.0.0
and follow the Improvements to API extensions guide for more information.
Stores using FastStore v2 now support content customization on the login, 500, and 404 error pages through the EmptyState
section via the Headless CMS.
To benefit from the new content types, update your store's @faststore/core
package to v3.0.0
and sync the changes:
faststore cms-sync
.Add section
( +
).EmptyState
section and update its fields according to your store's requirements.FastStore now supports Next.js 13 which brings general improvements related to performance and stability that stores can leverage from.
Edit your store's package.json
:
"dependencies": {
...
"next": "^13.5.6",
...
},
Refer to the Upgrading from 12 to 13 official Next.js documentation for more information on how to migrate to version 13.
Published by hellofanny 9 months ago
Newsletter
component are now available in the FastStore UI. Refer to Newsletter documentation for further details.
Breaking Change: We are deprecating the __experimentalNewsletterAddendum
override from Newsletter Section. You should override it using NewsletterAddendum.
Published by carolinamenezes about 2 years ago
Gift
, OrderSummary
, SkuSelector
, and CartItem
components are now available in the FastStore UI. Also, updates to the FastStore API improve the shopping cart UX and allow adding user's session information to the orderForm
.
Gift
๐ New component - #1443
Use the Gift
component to display promotional gift items.
OrderSummary
๐ New component - #1456
Use the OrderSummary
component to provide a summary of the items in the cart, including the total price, related shipping tax, and discounts.
SkuSelector
๐ New component - #1462
Use the SkuSelector
component on Product Details Pages (PDPs) to display all SKUs available for a given product.
CartItem
๐ New component - #1461
Use the CartItem
component to display summarized data about an item placed in the shopping cart.
๐ Fixed "Buy 2 get 3" promotions - #1434
Cart UX issues related to promotions, such as "Buy 2 get 3," have been fixed. Now, items and gifts are correctly combined when necessary.
โจ Product releaseDate
now available - #1438
The StoreProduct
entity can now return the releaseDate
of an item.
โจ Session info now available as an argument of validateCart
- #1444
The validateCart
mutation now accepts the session
argument. This allows adding the user's session information to the orderForm
, making the shopping flow consistent between storefront and checkout, and allowing for regionalized prices.
๐ New documentation feedback feature - #1448
FastStore API
Published by carolinamenezes about 2 years ago
The search
query has been enhanced to allow cross-selling and upselling of products. Also, the new subscribeToNewsletter
mutation is now available in the FastStore API. In the FastStore UI, the Slider
and PriceRange
components now allow ref forwarding.
ProductTitle
๐ New component - #1418
Use the ProductTitle
component to display a header with product details, such as its name, reference number, and labels.
โจ ProductTitle
now uses ref forwarding - #1427
The ProductTitle
component allows passing a previously received ref further down to a child.
PriceRange
โจ PriceRange
now uses ref forwarding for min and max inputs - #1380
The PriceRange
component now accepts receiving refs for both min and max inputs. With the ref forwarding technique, other components using the PriceRange
can trigger input functions and control the min and max values of PriceRange
.
โจ New PriceRange
look and feel - #1400
The PriceRange
component now displays the min/max values centered above the Slider
's thumbs and allows for more customizations.
๐ PriceRange
track position fixed - #1404
The track position of the PriceRange
component has been adjusted for maximum absolute values greater than a hundred.
Slider
โจ Slider
now uses ref forwarding for min and max inputs - #1380
The Slider
component now accepts receiving refs for both min and max inputs. With the ref forwarding technique, other components using the Slider
can trigger input functions and control the min and max values of Slider
.
โจ New prop added to Slider
- #1415
The Slider
component now includes the step
prop that allows specifying the interval between the input values.
๐ Slider
values are now rounded - #1417
The Slider
component now displays only rounded values.
๐ Slider
thumb elements repositioned - #1423
The Slider
thumb elements' have been repositioned in the DOM so they can have customized behavior states.
๐งน Generated schema types updated - #1413/#1431
The generated TS types from the GraphQL schema have been updated.
๐ Support for Cross Selling now available - #1396
The following facets have been added to the existing Search
query in order to allow cross-selling and upselling products:
buy
view
similars
viewAndBought
accessories
suggestions
๐ New subscribeToNewsletter
mutation available - #1385
The new subscribeToNewsletter
mutation allows stores to save data to their MasterData newsletter list.
๐ New skuSelector
-related properties added to ProductGroup
- #1407
The ProductGroup
type now includes the skuVariations
attribute, which brings with it four new properties:
allVariantsByName
- Returns all available options for each SKU variant property, indexed by their name.slugsMap
- Returns the slug for the SKU that matches the currently selected product variations.activeVariations
- Returns the property values for the current SKU.availableVariations
- Returns the available options for each varying SKU property, considering the dominantVariantName
property.These new properties allow users to query data about SKU specification variants more quickly and are especially handy for implementing SKU Selector components.
๐ StoreOffer
resolver fixed - #1399
The priceCurrency
field from StoreOffer
now grabs the same info from the current context's sales channel and fetches the correct price currency value.
๐ Missing Catalog page types now available - #1411
The FastStore API now supports the following page types: SubCategory
, Collection
, Cluster
. This should enable stores to render pages that match those types without issues.
๐ Issues related to Collection pages fixed - #1429
Issues when trying to fetch the StoreCollection.breadcrumbList
field for Collection pages have been fixed. Before detecting the page type of a certain route, the slufigyRoot
function now checks if the page is a Collection one.
๐งน Refactored SDKs' code - #1392
The FastStore SDK package has been refactored in order to remove all React dependencies.
Analytics SDK
UI
API
VTEX Headless CMS
Published by carolinamenezes over 2 years ago
The FastStore UI now includes the Hero
and Dropdown
components. Also, the FastStore API was enhanced to better support page error handling. Global changes were also implemented to enable price range filtering on PLPs.
Hero
๐ New Hero
component - #1336
The Hero
component is a full-width banner presented on the above-the-fold section of a web page. It serves as the first glimpse of your brand's identity and messaging.
AggregateRating
AggregateRating
component - #1386
OutOfStock
โจ OutOfStock
's nested components now accept otherProps
- #1341
The OutOfStockTitle
and OutOfStockMessage
components now accept additional data attributes through the otherProps
attribute.
Slider
โจ Slider component enhanced - #1364
The Slider
component now accepts an initial state out of the min/max domain. Also, the onEnd
callback function was added to enable triggering effects after user interaction.
๐ Request error handling functionality added - #1361
The FastStore API now returns the proper page error code (400
or 404
), allowing FastStore websites to respond to these errors accordingly.
๐ Canonical PDP slugs added - #1338
So that VTEX stores migrating to FastStore can work seamlessly, a 301 redirect between vtexSlug
and fastStoreSlug
was created, where:
vtexSlug
: /{slug}/p
fastStoreSlug
: ${slug}-${skuId}/p
โจ Resolvers and types updated to allow price range filtering on PLPs - #1364
The search
query now receives price
. Also, the StoreFacetRange
, StoreFacetBoolean
, StoreFacetValueRange
, and StoreFacetValueBoolean
types were created to allow price range filtering on PLPs.
๐ validateCart
error for additionalProperties
fixed - #1325
The following error Field "propertyID" is not defined by type IStorePropertyValue.
, related to products with additionalProperties
added to the cart, was fixed.
๐ AggregateOffer
resolver fixed for selecting the best seller - #1350
For SKUs sold by multiple sellers, the AggregateOffer
resolver was not able to detect the best seller consistently. This issue was solved by making the AggregateOffer
resolver return the lowest and highest prices according to the bestOfferFirst
function.
๐ Test inconsistencies fixed - #1360
Test inconsistencies were resolved to provide a development environment more similar to the production one.
๐งน FastStore API mocks updated to use auto fuzzy - #1359
๐ Full support to Trade Policies now available - #1319
The Session
context provider now accepts a new function called onValidateSession
, which calls the backend to validate the session. On any modification to the channel, such as logging in to the store, the session values (e.g., channel, person, language) are updated accordingly so the user can start browsing on the new session.
โจ useSearchState
updated to allow price range filtering on PLPs - #1364
The new setState
function was added to the useSearchState
context. All other useSearchState
functions were removed and exported as helper functions.
Card
Button
๐ FastStore repository now uses Turborepo cache - #1330
๐ FastStore repository now uses CodeQL analysis - #1331
โจ Codesandbox CI improved - #1357
๐งน Docs package removed from Codesandbox build - #1334
๐งน Circular dependencies removed from FastStore SDK - #1333
๐งน Purged unused CSS from the docs package - #1345
๐งน Typescript errors fixed - #1352
๐งน tsconfig
package replaced by shared
- #1379
๐งน Eslint configs improved - #1368
๐งน build
script updated - #1362
๐งน Prettier configured - #1369
๐งน outdir
added to all tsconfig
- #1372
๐งน Packages' module
field updated - #1374
Published by Mariana-Caetano over 2 years ago
OutOfStock
Use the OutOfStock component to display a subscription form for shoppers who want to be alerted when the product is back in stock.
ProductCard
Use the ProductCard component to provide a general view of a product, including images, name, price, discount, and buy button.
useStorage
The shopping cart is now persistent across the browser's tabs. Before, if two items were added to the cart through distinct tabs, the last item would always overwrite the prior one.
All requests to the FastStore Search API now receive locale info so the search can return product suggestions according to the user locale.
Breadcrumb links that were broken have been fixed, allowing shoppers to navigate the website without getting 404 errors.
The FastStore API has been enhanced to support querying any additional property of a product.
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.
Filtering search results according to the user's region has been fixed.
Promotions such as Buy 2 Get 3 now work correctly.
Product offers related to a specific SKU have been fixed, and now the offers are available only for available SKUs.
Suggestions are now working as expected.
The FastStore project now uses Turborepo.
FastStore API reference documentation is now available. For more information, refer to this announcement.
Styles used on the FastStore UI documentation have been updated after the adjustments to the data attributes.
Check out the new Community Starters, created and maintained by FastStore community members:
Published by Mariana-Caetano over 2 years ago
otherProps
parameter - #1218DropdownMenu
position - #1199DropdownMenu
component no longer has issues with scrolling. Now the component has the properties scrollLeft
and scrollTop
to calculate the position, and adds event.preventDefault()
in KeyDown
press event, avoiding page scroll when pressed.Before | After |
---|---|
channel
as facet for search and product queries - 1197channel
function is now a string object that contains salesChannel
and regionId
. Before, channel
were a integer that represented a sales channel now it has the following format in store.config.js
:// Default channel
channel: '{"salesChannel":"1"}',
โจ New Search event API - #1241
The search.query
event has been added to the VTEX Intelligent Search Analytics API. This event is used to generate indices like Top Searches
and Suggestions
.
โจ New Intelligent Search API - #1216
The simulation of search queries has been removed in favor of the new Intelligent Search API, which already performs the simulation.
@faststore/api
and VTEX catalog slug mismatches - #1214@faststore/api
and VTEX Catalog are now fixed.faststore/api
- 1200@faststore/api
are no longer reliant on dynamic data, which means they won't fail if something changes in the account from which the data is collected.๐ Troubleshooting for Creating storefronts with Gatsby - #1261
Check out the new tutorial for common errors that you might face while working with FastStore.
๐ New Other Resources - #1251
๐ New: send your feedback about faststore.dev - #1247
๐ New Starter: Next.JS - #1240
๐ New: Starter submission - #1239
Submit your starter and get featured on the FastStore Community Starters Library.
๐ New Release Notes - Lighthouse reports - #1235
๐ New dark mode available in faststore.dev - #1233
๐ Updated Extending the schema in FastStore API documentation - #1224
๐ New Troubleshooting problems in FastStore - #1219
Check out the new guide on identifying if the issue you are facing is from FasStore/WebOps or a mistake on your side.
๐ New Sending CMS updates to VTEX IO WebOps - #1213
Check out the new user guide to learn how to set up WebOps to communicate with the VTEX Headless CMS and receive CMS updates via the VTEX Admin.
๐ Updated Configuring your VTEX account - #1212
The [email protected]
and [email protected]
were updated to @1.x
. Also, updated the build URL to /build-releases
since Releases is now the default option to build and publish on the CMS.
๐ New Enabling private CMS previews - #1211
Check out the new VTEX Headless CMS user guide on how to change public previews to private previews.
๐ New Gatsby 4 now available Release Note - #1210
FastStore infrastructure now allows the use of site generators that support server-side rendering (SSR), such as Next.js and Gatsby 4.
๐ Updated faststore.dev
homepage - #1250
๐ Updated FAQ page in faststore.dev
- #1249
๐ Updated announcementBar
in faststore.dev
- #1237
๐ Updated faststore.dev description for SEO - #1230
๐ Added faststore.dev thumbnail - #1229
๐ Updated docusaurus.config.js
with GA4 trackingID
- #1226
๐ Implemented Google Analytics 4 (GA4) in faststore.dev
- #1222
๐ Updated Gatsby overview - #1205
Published by Mariana-Caetano over 2 years ago
Dropdown
molecule - #1178Dropdown
component as an options menu or a dropdown select.setSession
function type - #1172ContextValue
of the setSession
function receives a session: Partial<Session>
argument. With the fix, it's possible to pass partial information of a session. For example:const { setSession } = useSession()
setSession({ postalCode: 'foo' })
โจ Improve the performance of useStorage
hook - #1186
The setTimeout
function was created to prevent the creation of tasks that take longer than 50ms to process. The function improves the performance of the useStorage
hook by wrapping two of its tasks: the async promise and the set state of an item.
โจ Add setFacets
function to the search context - #1189
The setFacets
function sets all selected facets without any processing, allowing full control of the selected facets.
๐ Added missing totalCount
field to pageInfo
in allCollections
query - #1173
Now the resolver for the allCollections
query returns the number of valid collections in the store when a user asks for pageInfo.totalCount
field.
๐ New Session
query - #1176
The Session
query returns only the channel and country values. The addition of this query enables VTEX regionalization, which requires the regionId
located within the channel.
๐ Add local server and GraphQL tests - #1179
The @faststore/api
package now comes with an Express GraphQL Server setup allowing you to test the API without having to link the package to a store.
โจ hideUnavaibleitems
parameter in the search API - #1180
The Search API now has a parameter called hideUnavailableItems
. This parameter either hides (true) or displays (false) an out-of-stock product.
๐ Removed frontend computation to the backend - #1184
Offers are now sorted according to the order of the offers
array.
โจ Returning null as profile - #1190
Now the API returns null
for the person
query when executed by an anonymous user, avoiding a mismatch with the default user session values, preventing the session of the anonymous user from being reset, and lowering the Total Blocking Time (TBT) metric.
[email protected]
app was added to Step 2 - Installing the Headless CMS app on your VTEX account. The app is one of the VTEX Headless CMS's required apps.Published by Mariana-Caetano over 2 years ago
SearchInput
reference - #1153 The SearchInput
component now uses imperative code for input behaviors. The useImperativeHandle
hook is used to give the component control over the value that is returned by explicitly stating the return value.useStorage
hook - #1146useStorage
hook is now stable, meaning that if there is no value stored on the persistent storage, the hook won't trigger a re-rendering of the React API. Instead, the useStorage
will use the initialValue
. This behavior leads to a smaller footprint of the user's device and smaller total blocking time (TBTs).๐ Fix allCollections
query pagination and pagetype timeout errors - #1140
The pagination of allCollections
requests and timeouts during pagetype fetching were fixed.
๐ Fix PDP and PLP breadcrumb list item's URL paths - #1148
Uppercase and spaces in PLP and PDP links used in the breadcrumb component have been fixed.
โจ Moves some Filter logic to the API - #1154
Logic from the Filter
component was moved from the frontend to the backend (API) to reduce processing on the frontend. Thus, the VTEX API can now sort the facets values alphabetically. Also, the departamento
facet was removed from the PLP page.
๐ Fix StoreProduct
returning wrong SKU - #1156
SKU IDs on accounts in which multiple SKUs are available for each product no longer retur incorrect StoreProduct
values.
๐ Fix filter active brands - #1157
The NotFoundError: Catalog returned FullText for slug: canyon.
error no longer occurs for cases where the API returns a list of brands containing inactive brands.
๐ Fix Cart item availability - #1160
Now, if a product has a limited inventory, the cart component limits the number of products the user can add to it. Also, if the user adds more items, a toast message is raised, warning the user.
gatsby-plugin-nginx
lighthouse-config
lighthouse config
- #1150Published by Mariana-Caetano over 2 years ago
Incentive
component to display a trust badge for your storeโs website.Card
component to display summarized information about a product.QuantitySelector
component to allow shoppers to select the quantity of a given product to purchase.Breadcrumb
, LoadingButton
, PriceRange
, RadioGroup
components are now exported by @faststore/ui....otherProps
to the Badge
component - #1085 Other props can now be passed on the Badge component.RadioGroup
and RadioOption
components are now correctly imported in the UI.PaymentMethods
component is no longer returning an accessibility error on FastStore UI.Badge
, Form
, Price
, Radio
, Select
, Textarea
, Carousel
, IconButton
, PriceRange
and Table
.prefixId
attribute to AccordionItem - #1118 The prefixId
attribute, avoids the problem of having two Accordio IDs in the same page.item
generics to analytics events - #1101 With the item
property, users can control over a variety of types rather than a single one. This allows users to add extra properties inside an item.salesChannel
is now available in the product query.graphql-utils
package compatible with other frameworks.categoryTrees
of the Breadcrumb component is now reversed and displaying the right category and subcategories in the store.dataLoader
algorithm is now fixed and can avoid potential errors, such as the Could not find SKU for product message.redirect.csv
file now allows redirecting to an external page.gatsby-plugin-cms
receives webhookBody
params, fetch the values on the CMS API and return it to preview on webOps.๐New SDK Search reference - #1065
Check out the new Search
SDK module documentation and learn how to increase product discoverability by implementing a faceted search in your store.
๐Updated the Quickstart documentation - #1066 Now you configure your FastStore project settings in the store.config.js
file, an easy way to set up the repo without creating environment variables.
๐New FasStore FAQ - #1068
Check out the Frequently Asked Questions on FastStore Portal.
๐New Starters Library - #1065
Check out the new Starter Library and quickly start your FastStore website with the templates.
๐New SDK Cart documentation - #1095
Check out the new SDK Card documentation and start managing your storeโs shopping cart.
๐New VTEX IO WebOps Secrets guides - #1105
Check out the new Security documentation and learn how to use the Secrets API. Use it to hold confidential data and avoid exposing sensitive data in your FastStore code..
๐New VTEX Headless CMS documentation - #1111 Check out the new track for VTEX Headless CMS and learn how to integrate your FastStore project with VTEX Headless CMS, our preferred solution for content management.
๐New Migrating from gatsby-plugin-cms to gatsby-source-cms guide - #1126
Check out the new Migrating from gatsby-plugin-cms to gatsby-source-cms guide and learn how to migrate to the newer gatsby-source-cms
plugin that uses a dedicated API to fetch the content from the VTEX Headless CMS. Also it lets you use the Gatsby Preview Server to build and preview your pages before publishing them.
๐New on VTEX Platform integration - Hosting a FastStore + VTEX website - #1129
Check out the new Hosting a FastStore + VTEX website guide and learn how to integrate your FastStore storefront project with VTEX, how to make it publicly available to end-users and have the VTEX Checkout functioning in your store.
๐New on VTEX Platform integration - Integrating VTEX login - #1132
Check out the new Integrating VTEX login guide and learn how to integrate the VTEX Login with your FastStore project.
โจ Auto generate reference documentation for FastStore UI comoponents with react-docgen-typescript
plugin - #1070
๐ Send feedback for any documentation available on FastStore Portal. - #1097
To submit the feedback, look for Was this page helpful? at the end of any documentation on the Portal.
Published by Mariana-Caetano almost 3 years ago
๐ New FastStore Documentation Portal. - #1061
The first iteration of the FastStore Documentation Portal is now available at https://faststore.dev. Send feedback and open documentation requests via GitHub issues. Bear in mind that this is still a work in progress.
๐ New Label component. - #1001
Use the Label
component to identify text fields, checkboxes, radio buttons, and drop-down menus.
-20%
<Label>-20%</Label>
๐ New Alert component. - #1020
Use the Alert
component to display short messages related to the behavior of a system, feature, or page.
function Component() {
const styles = {
warning: {
backgroundColor: '#fff2d4',
color: "#eea236",
borderRadius: "0.5rem",
padding: "1rem"
},
}
return (
<Alert style={styles.warning}>
<React.Fragment key=".0">
<Icon component={<Warning />} />
<span>
This is an example of how you can use the Alert component along with icons!
</span>
</React.Fragment>
</Alert>
)
}
๐ New PaymentMethods
component. - #1020
Use the PaymentMethods
component to display the logos of the available payment options in a store.
function Component() {
const VisaCard = () => (
<img
alt= "Visa logo"
width = { 50}
height = { 50}
src = "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Visa_Inc._logo.svg/2560px-Visa_Inc._logo.svg.png"
/>
)
const MasterCard = () => (
<img
alt= "Mastercard logo"
width = { 50}
height = { 50}
src = "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Mastercard-logo.svg/1544px-Mastercard-logo.svg.png"
/>
)
const AmericanExpressCard = () => (
<img
alt= "American express logo"
width = { 50}
height = { 50}
src = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/American_Express_logo_%282018%29.svg/1200px-American_Express_logo_%282018%29.svg.png"
/>
)
const MaestroCard = () => (
<img
alt= "Maestro logo"
width = { 50}
height = { 50}
src = "https://upload.wikimedia.org/wikipedia/commons/4/4d/Maestro_logo.png"
/>
)
const EloCard = () => (
<img
alt= "Elo logo"
width = { 50}
height = { 50}
src = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Elo_card_association_logo_-_black_text.svg/1024px-Elo_card_association_logo_-_black_text.svg.png"
/>
)
const HiperCard = () => (
<img
alt= "Hipercard logo"
width = { 50}
height = { 50}
src = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Hipercard_logo.svg/2000px-Hipercard_logo.svg.png"
/>
)
const PayPal = () => (
<img
alt= "PayPal brand"
width = { 50}
height = { 50}
src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/PayPal_logo.svg/2560px-PayPal_logo.svg.png"
/>
)
const DinersClub = () => (
<img
alt= "Diners club logo"
width = { 50}
height = { 50}
src = "https://upload.wikimedia.org/wikipedia/commons/a/a6/Diners_Club_Logo3.svg"
/>
)
return (
<PaymentMethods title= "Payment Methods" >
<VisaCard />
<MasterCard />
<MaestroCard />
<AmericanExpressCard />
<HiperCard />
<EloCard />
<DinersClub />
<PayPal />
</PaymentMethods>
)
}
๐ New RadioGroup
component. - #1033
Use the RadioGroup
component to allow users to select a single option from a list of two or more mutually exclusive options.
function Component () {
const [option, setOption] = useState('radio-1')
return (
<RadioGroup
name="radio-group"
selectedValue={option}
onChange={(v) => setOption(v.currentTarget.value)}
>
<RadioOption value="radio-1" label="Radio 1">
<span>Radio 1</span>
</RadioOption>
<RadioOption value="radio-2" label="Radio 2">
<span>Radio 2</span>
</RadioOption>
</RadioGroup>
)
}
โจ Improved FastStore UI Storybook with web accessibility checks for components. - #1036
FastStore UI Storybook now has a new tab called Accessibility
that helps developers test components' compliance with web accessibility standards.
โจ Enhanced process to create components in the FastStore UI. - #1039
If you are developing new components for the FastStore UI, just run yarn generate-ui-component
in the FastStore project, give a name to your component and answer which component type you are developing to automatically create all the basic files your component will need.
For more information, please refer to our Contribution guide.
Published by Mariana-Caetano almost 3 years ago
Browser support (#984)
FastStore 0.x now supports older browsers versions.
Search Input Accessibility issues (#1000)
We have added aria-labels
to the input field and button of the Search Input component to solve accessibility issues.
Add a11y tests for all atoms (#988)
We have added accessibility tests for atoms of FastStore UI
Add a11y tests for all molecules (#992)
We have added accessibility tests for molecules of FastStore UI.
Accordion doc (#994)
We have improved the Storybook doc to show more information about the components that compose the Accordion.
From now on, the overall score of Cumulative Shift Layout
and Total Blocking Time
have increased in importance, and the deprioritized metrics are First Contentful Paint
, Speed Index
, and Time to Interactive
.
Published by Mariana-Caetano about 3 years ago
๐ Send and receive custom events via the Analytics module #937
We've added the UknownEvent
event type to the Analytics module. This is a minimal event sent via the sendAnalyticsEvent
function, which can be overwritten by other event types, such as pre-purchase interactions.
๐ Source store plugin #944
We've added the plugin gatsby-source-store
to source products and collections into the Gatsby's GraphQL layer. This plugin replaces the gatsby-source-vtex
plugin and works with the store-api GraphQL schema.
gatsby-source-store
plugin here.๐ Modal Molecule #957
Use the Modal Molecule to create alert windows in your storefront.
๐ GraphQL Code Generator #960
We've added the GraphQL Code Generator CLI to automatically generate TypeScript typings for store-api
.
๐ Spinner atom #961
Now, you can use the Spinner atom as a loading button component.
๐ Cart component with state validation #963
We modified the Cart APIs to provide a cart with state validation. The browser now has its cart state, which is validated by the backend. The backend signalizes if the frontend should be modified or not. For example, if the browser's state is not valid, containing a product currently unavailable at your store, the backend will send the updated cart state to the frontend.
๐ Storybook theme #979
Besides adding a new logo and theme to the Store UI Storybook, we also synced the FastStore CHANGELOG.md with the Storybook Changelog.
Published by Mariana-Caetano about 3 years ago
Can you believe we are on the third edition of Release Notes? ๐ฎ ๐
That happened in the blink of an eye!
While August looked like the longest month of the year, the icing on the cake is our team news for these Release Notes. Take a look at our edition's highlights:
๐ Badge component - create badges on top of your products.
๐ฅ Deprecated folders removed - Who doesn't like a tidy house?
Get your birthday hat, and shall we check this edition?
Table of contents:
To check other options and see the code, go to Select Atom on Store UI.
Badge component #894: a badge component is a great alternative when you want to create a discount badge (or any highlighted property) and add them on top of
your product.
For example, a discount badge on top of some ProductSummary components:
Explore more of this component in Store UI and the FastStore repo.
Icon Button #900: one more feature for your store is the Icon Button, which adds a Shopping cart icon to it. Take a look at the Store UI IconButton and also the repo.
Agnostic store sdk analytics #903: Anyone, including non-VTEX developers, can now use store-sdk
to implement their analytics layer with the guarantee that it'll be fully integrated with Google Analytics 4.
Warnings and incremental builds - gatsby-plugin-graphql
#889: While using gatsby-plugin-graphql
, you could get warnings to prevent adding two different queries with the same name.
With this fix it tracks the filename of the query and only warns when two queries of the same name in different files are created.
Spread routes support - gatsby-plugin-nginx
#895: Before any page created was available at, and only at /:slug/
. If the user entered in /:slug
it will receive a 404.
Now, we make the route /{StoreCollection.slug}/
, for example, also respond at /:slug
. Check more details in the Spread routes support PR.
Preventing stores from building - gatsby-plugin-cms
#921: Stores no longer break the build when remote nodes are null.
legacy
. Also, it reduces the store-ui size to 10kb maximum.Upgrade Gatsby #887: Upgrading gatsby on each store could lead to some errors on theme-store
and plugin-performance
. Now, the packages are fixed while upgrading gatsby.
Remove gatsby-config.js
from theme-store
#888:
To use different styling systems on different stores, we have removed gatsby-config
from theme-store, virtually making it a plugin.
Upgrade Storybook version #905: Upgrades are always welcoming, mainly when we are talking about bugs! To fix bugs in some storybook versions we have upgrade the package version.
That's all, folks, for our Release Notes. It should be a cakewalk to keep up the good work!
Make sure to star
the repo so you keep your eyes on our next Release Notes.
See you next month ๐๐
Published by Mariana-Caetano about 3 years ago
Gather around, people! FastStore Release Notes are back for the 2nd edition. ๐
Before we check out what our first-class team has prepared this past month (I really do mean it), Let's take a moment to praise you. Yes, you. Bold enough to be part of this transformation with us. Thank you!
Now, shall we started it? ๐
Table of contents:
CHANGELOG.MD #790: Keep the changelog up-to-date does not need to be a roadblock in your routine. CHANGELOG.md
is automatically generated from your commit message. For a better way to create an explicit commit history, the commit merge messages need to follow the conventional commits.
For example, if your change is about a fix, create a commit with the following message:
fix: describe what you are fixing here
The PR title will become the merge commit message and will be used to generate the changelog.
Product page incremental builds #793: Sourcing data does not need to be painful and brings problems when using Gatsby's incremental builds. Using gatsby-graphql-toolkit
for sourcing data and using the declarative Gatsby File System API for declaratively create product pages can solve those issues.
Also, If you want to refresh the products, run the following command to clear the cache with Gatsby's cache:
yarn clean
Do not hesitate to check out the Gatsby GraphQL Source Toolkit for more information.
Product view - gatsby-theme-store
##803: We are one step closer to make gatsby-theme-store
in gatsby-plugin-store
since now it removes product view from gatsby-theme-store
and create basic build blocks to drop shadow on product pages.
Also, to understand better about shadowing, see the shadowing documentation.
Using origin vtex #797: No data trust issues around here, folks! To source product changes with the right values, now we use productOriginVtex
option in the search query
Page size - gatsby-source-vtex
#799: Weep no more for 404 errors while fetching products: we fix it! Also, gatsby-source-vtex
adds an option to fetch fewer products for testing purposes.
Zipcode persistence throughout the checkout flow#802: Setting the zip code on the order form requires creating a new address for the user. However, the isDIsposable
field should be set to true
for this use case. Otherwise the behavior is not well defined.
Missing GraphQL error messages#804: An error like the one below does not say much.
That's why we fixed GraphQL error messages, so now you can see something like the following:
Fix undefined host in canonical tags of product pages#814: to solve the problem of product pages having invalid canonicals, we generate relative canonical tags with /<pathname>
during SSR and hydrate it with https://<host>/<pathname>
once the React hydration kicks in.
Fix proxy pass when toPath has port numbers on it#830: To avoid to broke a new test, this Nginx plugin is replacing port number and not only :splat
or :*
values.
- "https://mylogs-proxy.endpoint.com:8088/logs$is_args$args",
+ "https://mylogs-proxy.endpoint.com$1/logs$is_args$args",
To make search engines understand pagination and keep the page's relevance, we replace the load more
button with an anchor tag <a/>
linking to the next page in the infinite scroll. Also, add another anchor tag pointing to previous pages. As a final result, you have something similar to the next example:
ComponentArgTypes
type to improve the typescript check when typing argtypes from components:Any other improvements in atoms pattern consistency? Yes, let's see the following:
-Input and TextArea atoms state to variant.
-Deprecated Checkbox export name to UICheckbox, also add new Checkbox atom.
-Molecules and Atoms argtypes to improve typescript errors.
-Checkbox export Prop name to CheckboxProps.
This is an architectural-only change. No feature on the website should be changed. For this, make sure all content on the website stays the same from master.
For example, we have the following contentType written in Json Schema:
{
homePage: {
blocks: {
banner: {
type: 'object',
properties: {
imageUrl: {
type: "string",
}
}
}
},
extraBlocks: {
seo: {
tags: {
type: 'object'
properties: {
title: {
type: 'string'
},
description: {
type: 'string'
}
}
}
}
}
}
}
Which will generate the following type on the gatsby's graphql layer:
type Block = {
name: string
props: any
}
type CmsHomePage = {
sections: Block[]
seo: {
tags: {
title: string
description: string
}
}
}
And then query this data on React components by writting the following graphql query:
query HomePageQuery {
cmsHomePage {
sections: {
name
props
}
seo {
tags {
title
description
}
}
}
}
Now that you are up-to-date with the release notes, I hope you feel energized to keep up the good work! Make sure to star
the repo, so you keep your eyes on our next Release Notes.
See you next month ๐
Published by Mariana-Caetano over 3 years ago
Roll out the welcome mat, team, for FastStore Release Notes! ๐
We are excited to bring the latest key changes on our platform from last June and make sure you're up-to-date with:
Our team has prepared thrilling releases which will brighten your day. Lay back, spread the word, and let's check it! ๐
Table of contents:
We've added the Thumbor plugin #750, so you can integrate gatsby-plugin-image
with thumbor, and make your own smart image handling service. How cool is that, right?
Thumbor is an open-source image processing service that enables you to process any image on the web. Check out the documentation and get more details on how to use it.
Renovate preset configuration #754 a preset configuration for Renovate app, so stores can use the same configuration source for their Renovate configuration.
Price atom: #760: Let's imagine you want to render some prices, like the following:
With the Price atom, you can now show prices in your storefront. Take a look at the Price package
MDX story: #762: We brought MDX, so you can get the best of both worlds: writing documentation with Markdown syntax and embed JSX component blocks on the same document. Check the following example to see how it works:
It's an accessible way to collaborate on suggestions or add more information to our components. Easy-peasy, yet powerful!
CI/CD #680: changing CI/CD solves two issues on master: building twice the same code and running the CI workflow twice.
Source products using Intelligent Search #738: previously, to speed up the search for products, it was possible to paginate the search and search the pages in parallel. However, the API would return duplicate products between pages which caused an unreliable build, where consecutive builds would generate a different amount of pages. To fix this issue, we have Intelligent Search (IS).
Handle chunkLoadError #771: After an error, if the page got refreshed way too fast or if the file was not available on the server anymore, webpack would throw a ChunkLoadError, and then you would be redirected to the 500 page. This solves the problem by refreshing the page when a chunkLoadError
happens on the React tree.
Replace on personalized search redirect #780:
When redirect, use replace
instead push
to replace the URL to personalized search.
gatsby-plugin-nginx
configurability #747: Now, gatsby-plugin-nginx
configurability can add custom server block options, add custom HTTP block options, and create redirects with more than one variable.
React version #753: with this improvement, we upgrade it to add support for React 18.
CONTRIBUTING.md #775: We've added a bot to include the commands to release the application, so CONTRIBUTING.md doesn't need to do this service from now.
Thank you all ๐ช
Bravo to you for coming this far! ๐ Thank you so much for being so supportive, and make sure to stay tuned for next month's Release Notes!