Base Store - May 2022

New cart-related events are now being tracked, and enhancements in the LCP score have been implemented. Also, more components have been updated to use the Base Store theming structure.

🐛 Bug fix

• Fixed search suggestions locale issue (Gatsby #69 | Next.js #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 and link tags (Gatsby #60 | Next.js #60) Custom attributes are now only passed to img and link HTML tags to avoid inconsistencies in other components.

✨ Enhancement

• Improved page loading time with Incremental Static Build (Gatsby #47 | Next.js #39) Base Store now uses the new Incremental Static Build (ISB) WebOps solution.

• Replaced OutOfStock component (Gatsby #70 | Next.js #72) Base Store now uses the OutofStock component from the FastStore UI library.

• Improved page LCP (Gatsby #51 | Next.js #49) Improved Largest Contentful Paint (LCP) score after implementing the fetchpriority attribute.

• Added analytics events to CartItem (Gatsby #43 | Next.js #35) The CartItem component now tracks user actions via the add_to_cart and remove_from_cart Google Analytics events.

• Updated Select theming (Gatsby #17 | Next.js #16) The Select component now has new tokens based on the Base Store Theming Structure.

• Updated Incentives theming (Gatsby #49 | Next.js #56) The Incentives component now has new tokens based on the Base Store Theming Structure.

• Improved Theming documentation on Storybook (Gatsby #26 | Next.js #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 (Gatsby #66 | Next.js #66) The CartItem component now has tests to check if events are fired to Google Analytics when users change the quantity of a product on the minicart.

• UpdatedQuantitySelector styling (Gatsby #75 | Next.js #76) The QuantitySelector component now uses CSS modules.

Framework-specific updates

Gatsby

🎉 New feature

• New local tokens added to Checkbox #61 The Checkbox component now has new tokens based on the Base Store Theming Structure.

• Support for product attachments available #53 The Base Store now supports product attachments.

🐛 Bug fix

• ArrowsClockwise icon closing tag #57 The closing tag of the ArrowsClockwise icon was fixed and no longer breaks icons on Firefox.

🧹 Chore

• Updated product components styling #54 The ProductCard, ProductGrid, and ProductGallery components now use CSS modules.

• Upgraded Gatsby and other dependencies #59 After Gatsby's improvements in Image and Font Loading Times announcement, Gatsby and other dependencies have been upgraded.

• Updated ImageGallery styling #41 The ImageGallery component now uses CSS modules.

Next.js

🎉 New feature

• New Toggle component #15 The Toggle component works as a checkbox, but in the form of a switch control.

• Updated Link theming #17 The Link component now has new tokens based on the Base Store Theming Structure.

🐛 Bug fix

• Fixed the fetchPriority prop warning #54 Fixed warning related to the fetchPriority 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

🧹 Chore

• camelCase standard for CSS Modules classes #42 Since the gatsby.store only imports classes as camel case, the nextjs.store now has a configuration to import classes as camel case too.

• Improved home performance #45

• Updated global tokens nomenclature #51