Releases: vtex-sites/nextjs.store
Release Notes - June 2022
PLPs now support price range filtering, and nonexistent PDPs can now handle 404 errors. Also, more components have been updated to conform to the new Base Store Theming architecture.
🎉 New
-
New
Dropdown
component (#118)The
Dropdown
component has been extracted fromBreadcrumb
and received new local tokens as part of adhering to the new Base Store Theming architecture. -
Price range filtering now available for PLPs (#121)
Thanks to the new
PriceRange
component, Product Listing Pages (PLPs) can now support price range filtering. -
301 redirects added to PDPs (#93)
So that VTEX stores migrating to FastStore can work seamlessly, a 301 redirect between
vtexSlug
andfastStoreSlug
was created, where:vtexSlug
:/{slug}/p
fastStoreSlug
:/{slug}-{skuId}/p
Theming
As part of adhering to the new Base Store Theming architecture, the following components now have new local tokens related to global ones:
- New local tokens to
Tiles
(#134) - New local tokens to
ProductGrid
(#144) - New local tokens to
Accordion
(#130) - New local tokens to
ImageGallery
(#143) - New local tokens to
RegionalizationBar
(#104) - New local tokens to
Modal
andRegionalizationModal
(#128) - New local tokens to
Dropdown
(#118) - New local tokens to
EmptyState
(#122) - New local tokens to
Filter
(#139)
🐛 Bug fix
-
ImageGallerySelector
scroll fixed (##132)Undesired behaviors of the
ImageGallerySelector
scroll on Safari were fixed.Before Now
✨ Enhancement
-
Page code error handling enhanced (#116)
Instead of always responding with a 500 status code, nonexistent Product Details Pages (PDPs) can now handle 404 errors.
-
External and client-side navigation now supported by the
Link
component (#117)The
Link
component now handles both external and client-side navigation. This change intends to unify theLink
component usage. -
SVG logo replaced by a static asset (#135)
The SVG logo was removed from the JavaScript code and imported as a static asset. This change aims to reduce the amount of JavaScript downloaded on the client-side since directly declaring SVGs in JS code can harm the Total Blocking Time (TBT) and final bundle sizes.
-
Search history and top searches on search input (#112).
The last four previously searched terms (
SearchHistory
) and the top five searches (SuggestionsTopSearch
) are now presented on search input. -
CSS selector for
DropdownButton
updated (#123)To select the
DropdownButton
component, the[data-fs-dropdown-button]
CSS handle is being used instead of[data-store-dropdown-button]
. -
EmptyState
styles updated (#125)The
--fs-text-size-3
token was replaced by--fs-text-size-lead
on theEmptyCart
component. -
Facets
styles updated (#150)The tokens related to the
Facets
components were renamed and updated accordingly.
📄 Documentation
-
New
Regionalization
section on the Storybook (#110)The Base Store Storybook now has the Regionalization section that lists all regionalization-related components and how to use them.
-
General improvements on Storybook implemented (#129)
The
Sandbox
tab is now available for all component pages, allowing to test the component in different viewports and use other add-ons. Also, some console errors on the Storybook were fixed. -
📄
EmptyState
Storybook enhanced with use cases (#126)
🧹 Chore
Release Notes - May 2022
🎉 New feature
-
New
Toggle
component #15
TheToggle
component works as a checkbox, but in the form of a switch control. -
Updated
Link
theming #17
TheLink
component now has new tokens based on the Base Store Theming Structure.
🐛 Bug fix
-
Fixed search suggestions locale issue #71
All requests to the FastStore Search API now receive locale info so the search can return product suggestions according to the user locale. -
Fixed custom attributes for
img
andlink
tags #60
Custom attributes are now only passed toimg
andlink
HTML tags to avoid inconsistencies in other components. -
Fixed the
fetchPriority
prop warning #54
Fixed warning related to thefetchPriority
being written in camel case. -
Fixed Storybook error while importing CSS styles #53
-
Fixed
EmptyState
visual bug #11
The vertical gap for the empty cart state is now fixed.
Before | After |
---|---|
✨ Enhancement
-
Improved page loading time with Incremental Static Build #39
Base Store now uses the new Incremental Static Build (ISB) WebOps solution. -
Replaced
OutOfStock
component #72
Base Store now uses theOutofStock
component from the FastStore UI library. -
Improved page LCP #49
Improved Largest Contentful Paint (LCP) score after implementing thefetchpriority
attribute. -
Added analytics events to
CartItem
#35
TheCartItem
component now tracks user actions via theadd_to_cart
andremove_from_cart
Google Analytics events. -
Updated
Select
theming #16
TheSelect
component now has new tokens based on the Base Store Theming Structure. -
Updated
Incentives
theming #56
TheIncentives
component now has new tokens based on the Base Store Theming Structure. -
Improved Theming documentation on Storybook #67
New docs published on the Base Store Storybook. Also, a new documentation format based on MDX was implemented.
🧹 Chore
-
CartItem
tests for analytics events #66
TheCartItem
component now has tests to check if events are fired to Google Analytics when users change the quantity of a product on the minicart. -
Updated
QuantitySelector
styling #76
TheQuantitySelector
component now uses CSS modules. -
camelCase standard for CSS Modules classes #42
Since thegatsby.store
only imports classes as camel case, thenextjs.store
now has a configuration to import classes as camel case too. -
Improved home performance #45
-
Updated global tokens nomenclature #51
Release Notes - April 2022
🎉 New feature
-
New search event API - #2
Thesearch.query
event has been added to the VTEX Intelligent Search Analytics API. This event is used to generate indices likeTop Searches
andSuggestions
. -
New theming structure to the
BannerText
- #470
Local tokens (CSS variables) were added to theBannerText
component in the new theming structure (#407) to configure the component's properties and connect the local tokens to the global tokens. -
New theming structure to the
Product Shelf
component - #464
Local tokens (CSS variables) were added to theProduct Shelf
component in the new theming structure (#407) to configure the component's properties and connect the local tokens to the global tokens. -
New theming structure to
Badge
component - #462
Local tokens (CSS variables) were added to theBadge
component in the new theming structure (#407) to configure the component's properties and connect the local tokens to the global tokens. -
New theming structure to the
Quantity Selector
component - #448
Local tokens (CSS variables) were added to theQuantity Selector
component in the new theming structure (#407) to configure the component's properties and connect the local tokens to the global tokens. -
Button
new theming - #442
Local tokens (CSS variables) were added to theButton
component in the new theming structure (#407) to configure the component's properties and connect the local tokens to the global tokens. Also, this change:- Gathers the buttons variants into a single folder;
- Switches the order of the buttons variants prefixes/suffixes;
- Fixes the variant Alert colors.
-
New theming structure to
Hero
component - #435
Local tokens (CSS variables) were added to theHero
component in the new theming structure (#407) to configure the component's properties and connect the local tokens to the global tokens. -
New VTEX Search tracking - #389
-
New Storybook package to the
base.store
- #463
Use the Storybook as a testing environment for components.
To enable it, runyarn storybook
in the terminal and, after the build, openlocalhost:6006
. -
RegionalizationModal
component - #426
TheRegionalizationModal
allows users to set their current location and check available products for their region.
Breadcrumb
component - #436
TheDropdown
was added to theBreadcrumb
component. TheDropdown
allows related pages to be linked at every level via dropdown menus.
🐛 Bug fix
-
Adjust Incentives List to render CMS data - #474
Now CMS users can edit the icons, title and subtitles of the Incentives List. -
Unused CSS imports - #476
Unused CSS imports were removed from components that are not yet being used. -
Storybook initialization - #492
To avoid issues with styles being applied while runningyarn storybook
, thecomponents.scss
has been added asstorybook-components.scss
, and thepackage.json
was updated to include@reach/router
. -
Styling issue on
RegionalizationModal
- #488
TheRegionalizationModal
no longer misses its imports inlayout.css
:
@import "src/components/regionalization/RegionalizationBar/regionalization-bar.scss";
@import "src/components/regionalization/RegionalizationButton/regionalization-button.scss";
@import "src/components/regionalization/RegionalizationInput/regionalization-input.scss";
@import "src/components/regionalization/RegionalizationModal/regionalization-modal.scss";
-
Unusued CSS issues - #480
The error "Unused CSS" in the Lighthouse CI is fixed. -
Hero
layout shift - #472
The layout shift onHero
section was fixed. Now the the CLS is fixed on lighthouse report. -
Tweaks layout section spacings - #469
The spacing between components with thelayout section
class has been changed from margin to padding. This change is due to a problem with thebox-shadow
on theproduct-card
.
✨ Enhancement
-
Update Regionalization input to use the
TextInput
component - #9
The Regionalization Input now uses theInputText
component. -
Update
RegionalizationButton
andRegionalizationBar
to show the postal code - #7
The Regionalization Button and Regionalization Bar now shows the last postal code saved, instead of receiving acontent
prop.
🧹 Chore
- Lighthouse check via GitHub Action #484
Removed the GitHub Action that was running Lighthouse since it was failing and WebOps already runs the Lighthouse.