Skip to content

Releases: vtex/faststore

FastStore Release Notes - May 2022

06 Jun 16:27
@Mariana-Caetano Mariana-Caetano
1.9.0
265a01a
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
FastStore Release Notes - May 2022

FastStore UI

OutOfStock

  • 🎉New OutOfStock component - #1314

Use the OutOfStock component to display a subscription form for shoppers who want to be alerted when the product is back in stock.

out-of-stock

ProductCard

  • 🎉New ProductCard component - #1272

Use the ProductCard component to provide a general view of a product, including images, name, price, discount, and buy button.

product-card

FastStore SDK

useStorage

  • ✨Updated hook component - #1316

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.

FastStore API

VTEX Platform

  • 🐛 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.

  • 🐛 Fixed breadcrumb broken links - #1306

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.

  • ✨ Sync Cart with Checkout - #1299

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

Filtering search results according to the user's region has been fixed.

  • 🐛Fixed promotion issues - #1289

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.

  • 🐛Fixed in the Serch API - #1273

Suggestions are now working as expected.

Internal

  • 🎉Turborepo on FastStore - #1296

The FastStore project now uses Turborepo.

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.

Starters

  • 🎉New Community Starters

Check out the new Community Starters, created and maintained by FastStore community members:

Assets 2
Loading
0 Join discussion

FastStore Release Notes - April 2022

09 May 11:53
@Mariana-Caetano Mariana-Caetano
1.8.0
4c2d51e
Compare
Choose a tag to compare
FastStore Release Notes - April 2022

FastStore UI

Banner

  • 🐛 otherProps parameter - #1218
    Other props can now be passed on the Banner component.

DropdownMenu

  • 🐛 Fix DropdownMenu position - #1199
    The DropdownMenu 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.

FastStore SDK

Analytics

  • 🐛 Fixed URL to events - #1228
    The Analytics SDK types is now compliant with Google Analytics 4 (GA4), which means custom properties can't be added to events directly on the SDK.

lighthouse-config

Performance budget

  • 🧹 Increased the performance budget back to 95 - 1201

FastStore API

VTEX Platform

Breaking change

  • 💥 Removed Gatsby plugins - 1215
    All unused Gatsby plugins were removed to be more open to other frameworks. The removal of unused Gatsby plugins also improved the speed with which the FastStore monorepo was published and developed.
Before After
CI before CI after
  • 💥 Handle channel as facet for search and product queries - 1197
    The channel 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"}',

Enhancement

  • ✨ 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.

Bug fix

  • 🐛 @faststore/api and VTEX catalog slug mismatches - #1214
    The links between @faststore/api and VTEX Catalog are now fixed.

Chore

  • 🧹 Stable tests for the faststore/api - 1200
    The tests from @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.

Documentation

Internal

  • 📑 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

Assets 2
Loading
0 Join discussion

FastStore Release Notes - March 2022

01 Apr 13:05
@Mariana-Caetano Mariana-Caetano
v1.7.0
2b3ec1f
Compare
Choose a tag to compare
FastStore Release Notes - March 2022

FastStore UI

Dropdown

  • 🎉 New Dropdown molecule - #1178
    Use the Dropdown component as an options menu or a dropdown select.

dropdown-menu

FastStore SDK

setSession function

  • 🐛 Fixed setSession function type - #1172
    Now the ContextValue 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.

FastStore API

VTEX Platform

  • 🐛 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.

Documentation

Internal

  • 🐛 Fixed codebase typos - #1183
Assets 2
Loading
0 Join discussion

FastStore Release Notes - February 2022

04 Mar 13:12
@Mariana-Caetano Mariana-Caetano
v1.6.0
0f87dc9
Compare
Choose a tag to compare
FastStore Release Notes - February 2022

FastStore UI

SearchInput

  • ✨ Adjust 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.

FastStore

SDK

  • ✨ Stable useStorage hook - #1146
    The useStorage 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).

FastStore API

VTEX Platform

  • 🐛 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

  • 🐛 Remove trailing slash from incoming requests - #1145
    Now, headers are properly set when a requested page has an exact match, but the request URL contains a trailing slash.

lighthouse-config

  • ✨ Add performance budgets to lighthouse config - #1150
    Now, the Lighthouse report includes a Performance Budgets section.
    A performance budget establishes limits on metrics that influence site performance.
Assets 2
Loading
0 Join discussion

FastStore Release Notes - January 2022

04 Feb 16:27
@Mariana-Caetano Mariana-Caetano
v1.5.0
ee7116f
Compare
Choose a tag to compare
FastStore Release Notes - January 2022

FastStore UI

Incentive

  • 🎉 New Incentive atom - #1064 Use the Incentive component to display a trust badge for your store’s website.

Incentive

Link

  • 🎉 New Link atom - #1067 Use the Link component to display a hyperlink as any HTML tag.

link

Card

  • 🎉 New Card organism - #1079 Use the Card component to display summarized information about a product.

Card

QuantitySelector

  • 🎉 New QuantitySelector molecule - #1083 Use the QuantitySelector component to allow shoppers to select the quantity of a given product to purchase.

QuantitySelector

  • 🎉 Add missing components. - #1063
    Breadcrumb, LoadingButton, PriceRange, RadioGroup components are now exported by @faststore/ui.

Badge

  • ✨ Add ...otherProps to the Badge component - #1085 Other props can now be passed on the Badge component.

Radio

  • 🐛 Fix FastStore UI imports - #1069
    The RadioGroup and RadioOption components are now correctly imported in the UI.

Payment Methods

  • 🐛 Removing aria-labelledby from payment methods component - #1092
    The PaymentMethods component is no longer returning an accessibility error on FastStore UI.

Accessibility

  • 🐛 Fix accessibility issues on FastStore UI components - #1096 The following components are no longer with accessibility issues: Badge, Form, Price, Radio, Select, Textarea, Carousel, IconButton, PriceRange and Table.

AccordionItem

  • ✨ Add prefixId attribute to AccordionItem - #1118 The prefixId attribute, avoids the problem of having two Accordio IDs in the same page.

Starters

  • ✨ Update Starter Library - #1133 The Starter Library has new Base Store images.

Contributing

FastStore SDK

Analytics

  • ✨ Add 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.

FastStore API

VTEX Platform

  • 🎉 Add Sales channel to product query - #1108
    The salesChannel is now available in the product query.
  • 🐛 Fix JS files exposure - #1081
    This fix makes the graphql-utils package compatible with other frameworks.
  • 🐛 Fix ordering of breadcrumbList - #1094
    The categoryTrees of the Breadcrumb component is now reversed and displaying the right category and subcategories in the store.
  • 🐛 Fix SKU loader - #1100
    The SKU dataLoader algorithm is now fixed and can avoid potential errors, such as the Could not find SKU for product message.
  • 🐛 Fix Breadcrumb data on collection pages - #1104
    Breadcrumb lists no longer return empty, now the catalog data fills the Breadcrumb information.
  • 🐛 Fix redirect to external pages - #1114
    The redirect.csv file now allows redirecting to an external page.
  • 🐛 Fix unfiltered allCollections query - #1131
    The collection query no longer opens to many requests to fetch categories, brands, and landing pages, since the collection field resolver respects the first and after parameters to not open to many requests.

VTEX Headless CMS

  • ✨ fetch content by ID using REST API from CMS for preview - #1120 Now the gatsby-plugin-cms receives webhookBody params, fetch the values on the CMS API and return it to preview on webOps.

Documentation

  • 📑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.

Internal

  • ✨ 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.

Assets 2
Loading
0 Join discussion

FastStore Release Notes - December 2021

22 Dec 13:56
@Mariana-Caetano Mariana-Caetano
v1.4.0
84154b8
Compare
Choose a tag to compare
FastStore Release Notes - December 2021

General

  • 🎉 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.

FastStore UI

Label

  • 🎉 New Label component. - #1001
    Use the Label component to identify text fields, checkboxes, radio buttons, and drop-down menus.

       -20%
    Show code 
    <Label>-20%</Label>

Alert

  • 🎉 New Alert component. - #1020
    Use the Alert component to display short messages related to the behavior of a system, feature, or page.

    alert-example

    Show code 
      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>
    )
  }

PaymentMethods

  • 🎉 New PaymentMethods component. - #1020
    Use the PaymentMethods component to display the logos of the available payment options in a store.

    paymentmethods-example

    Show code 
    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>
  )
}

RadioGroup

  • 🎉 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.

    radiogroup-example

    Show code 
    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>
  )
}

Contributing

  • ✨ 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.

    Contributing

    For more information, please refer to our Contribution guide.

FastStore API

VTEX Platform

  • 🐛 Fix SKU unavailability issue. - #1014

    The checkout process is no longer interrupted when an SKU has sellers that are not available on the current sales channel.

  • 🐛 Fix facets selection. - #1026

    Faceted search now accepts multiple selection.

Assets 2
Loading
0 Join discussion

FastStore Release Notes - November 2021

18 Nov 14:28
@Mariana-Caetano Mariana-Caetano
v1.3.0
43df5d4
Compare
Choose a tag to compare
FastStore Release Notes - November 2021

Full changelog

Features 🚀

  • New component: Accordion molecule (#985)
    We have added the Accordion component to the FastStore UI. The Accordion component hides its content by default.

accordion

  • New component: Breadcrumb molecule (#986)
    We have added the Breadcrumb Molecule to the FastStore UI. Use it to create secondary navigation and help users identify their location in the store.

breadcrumb

table

Bug fixes 🐛

Improvements ✔️

  • 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.

Breaking Changes 💥

  • Lighthouse CI updated: Changes on performance score and Lighthouse report
    We have updated the Lighthouse CI to the version 8 of Google Lighthouse that can reflect on score variations in Lighthouse CI of Pull Requests.

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.

Assets 2
Loading
0 Join discussion

FastStore Release Notes - October 2021

08 Oct 14:00
@Mariana-Caetano Mariana-Caetano
v1.2.0
0a869e3
Compare
Choose a tag to compare
FastStore Release Notes - October 2021

Full Changelog

Features

  • 🚀 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.

    • Learn how to install and use the gatsby-source-store plugin here.

  • 🚀 Modal Molecule #957

    Use the Modal Molecule to create alert windows in your storefront.

    gif-modal

  • 🚀 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.

    spinner-atom

  • 🚀 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.

Bug Fixes

  • 🐛 Developing a store in an account without the CMS Pages module #969 - You can now develop on a store that does not have the CMS Pages module yet.

  • 🐛 Synchronously reading regionId initial value #974 - The regionIDis no longer lazy loaded, avoiding it to return a null value.

Assets 2
Loading
0 Join discussion

FastStore Release Notes - September 2021

01 Sep 15:15
@Mariana-Caetano Mariana-Caetano
v1.1.0
82bc0b4
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
FastStore Release Notes - September 2021

Full Changelog

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:

Features 🚀

  • Select Atom #876: We have added to Store UI the Select atom, which generates a select component, as you can see below.

select-atom

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:

    discount-badge-example

    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.

Bug Fixes 🐛

  • 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.

Breaking Changes 💥

  • Deprecated folders #927: We are keeping "our house" tidy, and that's why we are removing all deprecated folders. From now on, the old state will be on the branch legacy. Also, it reduces the store-ui size to 10kb maximum.

Improvements ✔️

  • 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 👋🚀

Assets 2
Loading
0 Join discussion

FastStore Release Notes - August 2021

03 Aug 14:02
@Mariana-Caetano Mariana-Caetano
v0.373.0
3c45213
Compare
Choose a tag to compare
FastStore Release Notes - August 2021

Full Changelog

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:

Features 🚀

  • 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.
    ie-generated-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.

Bug Fixes 🐛

  • 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-vtexadds 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.

before-error

That's why we fixed GraphQL error messages, so now you can see something like the following:
after-error

  • 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",
  • Prevent building twice#872: This fix improves build time on the FastStore monorepo.

Breaking Changes 💥

  • Add next/prev links in search page's infinite scroll. #811: Our Search page's template uses infinite scroll, which helps improve the UX. However, it can cause problems for machines. Now the template has a load more button element, as shown in the picture below:

load-more-button

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:

final-result

Improvements ✔️

  • Improve atoms pattern consistency #819: We are always improving Store UI and this time, We have added ComponentArgTypes type to improve the typescript check when typing argtypes from components:
    argtypes

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.

  • Improve CMS GraphQL types generation [#865](#865. In other words, it improves GraphQL type generation for the cms plugin.

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
      }
    }
  }
}

Documentation 📑

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 👋

Assets 2
Loading
0 Join discussion