Weep no more, team: here we (finally) are 🎉

Let's make room for the VTEX IO Release Notes, this time around bringing you double the excitement from last November and December!

If 2020 made us shed some tears, our VTEX IO team worked around the clock to bring a smile back on our faces 😀 Just look at the awesome stuff they've delivered as last year came to an end:

• 🚀 Condition Layout v2
• ➕ Importing private CSS Classes
• ⚠️ Unannotated queries requested as public
• 🐛 Search results with special characters

And unlike 2020, things are looking up, okay? In addition to the tremendous deliveries the team made, we also have a special announcement regarding IO Docs and the migration of our documentation to the Developer Portal.

Believe me when I say it... you can't sit this one out! Without further ado, introducing the one and only VTEX IO Release Notes:

• New home for the VTEX IO documentation

IO Docs has officially housed VTEX IO documentation since March 13, 2020. It was the successful result of VTEX's effort to create more in-depth and narrowly focused documentation.

With almost a year gone by, it's time to say goodbye: to better take advantage of existing and future VTEX IO documentation and to leverage the development experience of our users, VTEX IO documentation will henceforth be stored on our Developer Portal, starting today (January 15, 2021)!

All existing documentation will be redirected and automatically migrated to the new platform. No existing link will be lost during this process.

Home to our API documentation and guides aimed at developers working with integrations and customization, the Developer Portal - formerly known as Help Center Developer Docs - offers all the necessary resources for VTEX's most advanced users in a single place.

Such changes to the VTEX IO documentation mean a lot more than just content redistribution; trust me, they will ensure better and greater support for VTEX IO users and their specific objectives on our platform.

As to the future of our beloved Release Notes, don't worry: in addition to the Developer Newsletter bringing you all the essential updates on platform changes, the Developer Portal also has its own Release Notes section:

Nothing but the address will change, I promise! Everything else stays the same, with the same high-quality impactful content, working together as always, but now housed in a place that can fully encourage our potential ✨

• Condition Layout v2: What is better than the Condition Layout v1? It's the second and most optimized version, of course! Welcome the Condition Layout v2, bringing you features such as verification by product specification value and product availability. Learn more about the new version by checking out the new documentation and the specially-prepared migration guide!

• Native integration between the Subscription module and the frontend: Forget the messy old days when you had to develop a custom app to manage subscriptions on the frontend! The Product Customizer app is now natively compatible with the Subscription module, meaning you are now able to edit the name and the frequency of a product subscription through the store component in the product details page. Access the Product Customizer app documentation now to get more details about this new feature!

• product-reference: Let's greet the new product-reference block exported by the Product List app! The block is responsible for rendering product reference data onto components that leverage from its app, such as the Minicart. Do we have your attention? Do not forget to cast your eyes on the documentation for more details!

• Google Customer Review badge: The Google Customer Reviews pixel app now counts on a new component to enrich your store's frontend: we're talking about the google-customer-review-badge block, which renders the Google Customer Review icon to the UI! Check out the docs to better understand how to set it up!

• Enabling automatic translation in the Messages app: Safely and quickly enable or disable automatic Messages app translations directly from your VTEX admin account, as highlighted in the screen grab below! But please note: the toggle only defines the configuration for automatic translations, not for manual ones. If you need more info, access the recipe on Disabling automatic translation!

• Importing private CSS Classes: Avoid external editions and customize your store components using private CSS classes, i.e., classes whose name contains a hash (unique identifier) instead of the traditional vendor-app-major-x-classname format that is generated when importing. For more info on how to import CSS classes (private or public, as we call the ones with the traditional format), access our documentation on Defining styles!

• Dynamic routes customization on CMS: Customizing dynamic routes can now be done through the admin's CMS, thanks to a wonderful new update to the Pages GraphQL. For more on the possibilities of this customization, access this documentation!

• Catalog translation by variable - Translating a store's catalog can be done in the blink of an eye thanks to this improvement which makes it possible to translate the desired catalog data simply by filling in the specific variables in the object of the GraphQL API. Previous translations were only enabled when all the object's variables were filled in. Caught your attention? Have a closer at our documentation on catalog internationalization!

• Placeholders on the Store Form component - Thanks to the new placeholder prop, added to the form-input.textarea block, the Store Form component now accepts placeholders for text inputs, meaning that from now on you can add descriptions as well as other desired instructions to the form's text fields.

• Link building in the product brand's name - A new prop has arrived for the product-brand block from the Store Components app: the withLink! Replacing the former logoWithLink prop, the new one is here to help you create links for the product brand's website based on text strings or image icons.
  

  
  take a deep breath, we're half way through already... it's been two whole months! There's a lot of information about where that came from! Check it out:

• Multiple gallery layouts - Having multiple layout configurations for your search results page may sound impossible, but thanks to the Search Result's gallery-layout-switcher and gallery-layout-option new blocks, it is not! To learn how to customize the page, check out the Building a search results page with multiple layouts recipe!

• Multiple seller compatibility - The Add To Cart Button, Buy Button and Product Price now use as their default behavior the first available seller's data, meaning they are able to work with multiple seller data. Previously, the components only worked with the first seller's data, regardless of their availability and ignoring the rest of the seller list - tricky, wasn't it? now, this is what our team calls an improvement!

• Product image placeholder - From now on, set a default image as a placeholder for your store products thanks to the new placeholder prop, available for the product-images and product-summary-image blocks, respectively from the Store Components and the Product Summary apps.

• Product list identification on Google Analytics - Thanks to the new listName prop added to the product-summary-list block, part of the Product Summary, and additional improvements made to the Tag Manager's productClick event, you can now identify which store shelf users interacted with. No more misleading results for the poor Analytics!

• Close drawer on the UI - A new text prop was added to the drawer-close-button block, part of the Drawer app, responsible for closing components on the UI. Thanks to it, you can now close the Drawer using a text button, instead of the traditional X icon.

• The promoView and promotionClick events - New events for the Google Tag Manager pixel app. Best of all? They all follow the official Google-enhanced commerce format! Please welcome the promoView and the promotionClick events, responsible for displaying a store's promotion impressions.

• Unannotated queries requested as public

The fallback cache option for GraphQL queries that didn't have an annotation on cache policy (@cacheControl) has changed from the default public scope to the private instead, in order to solve an internal issue on the platform.

Although it does not affect functionality, changes to the query essence can impact the storefront's performance since all unannotated that were being requested as public are now automatically coming in as private.

Our team advises developers who have created custom VTEX IO GraphQL services to review their schemas closely and, if necessary, add the @cacheControl(scope: PUBLIC) directive for the unannotated queries. This Pull Request should illustrate how to code the workaround solution.

• Displaying modals according to URL changes - Previously, modals were not automatically closed according to changes in the URL, meaning that they were kept open regardless of the user's navigation. The question is: was it the best behavior our component could have for our users? We all know the answer to that, so it is time to celebrate: this behavior was fixed, and modals are now automatically closed whenever changes to the URL occur.

• Empty-label validation on Tab Layout - Still thinking of enhancing user experience, the Tab Layout app will, from now on, only display tabs (i.e., the tab-list.item blocks) whose label props have been properly filled out. In practice, it is the end of empty tabs being displayed on the UI! Cheers to that!

• Product ordering in the productImpression event - The position field, part of the productImpression events, was not being properly filled out with the real positioning of listed products. An accurate ordering has now been taken into account by our Product Context, and this bug (praise the Lord) has been fixed!

• Search results with special characters - Forget about the times when no results were fetched for searches with special characters: due to this magical fix, the Search Result's search bar is more cooperative, meaning that results are now properly displayed regardless of the special characters used to fetch them.

• productImpression's threshold - The Google Tag Manager's productImpression event was only triggered when 75% or more of the Product Summary component was displayed. This type of threshold for sending data resulted in misleading results to the GTM since Product Summaries are usually displayed as carrousels of many products and slides. With this bug fix, the productImpression event no longer has a threshold, and it is being sent out as soon as the Product Summary is visible on the UI.

We would not be able to deliver so many amazing results during these last two months if it were not for the following outstanding contributors:

• Wesly Souza from ACCT
• Gustavo Vasconcellos from ACCT
• Lucas Castro from ACCT
• Matheus Araujo from Corebiz
• Luiz Eduardo
• Renan Guerra
• Pmarignan

Thank you, team 💪