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 had, 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:
Special announcement :speaker
- New home for the VTEX IO documentation
Officially housing VTEX IO documentation since March 13, 2020, IO Docs was the successful result of VTEX's effort to create a 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.
Such changes to the VTEX IO documentation mean a lot more than just content redistribution, trust me: they will ensure a 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:
Condition Layout v2 - What is better than the Condition Layout v1? Its 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 of this new feature!
product-referenceblock - Let's greet the new
product-reference, 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-badgeblock, 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-classnameformat 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
placeholderprop, added to the
form-input.textareablock, 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-brandblock from the Store Components app: the
withLink! Replacing the former
logoWithLinkprop, 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 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-optionnew 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 placeholder for your store products thanks to the new
placeholderprop, available for the
product-summary-imageblocks, respectively from the Store Components and the Product Summary apps.
Product list identification on Google Analytics - Thanks to the new
listNameprop added to the
product-summary-listblock, part of the Product Summary, and additional improvements made to the Tag Manager's
productClickevent, 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
textprop was added to the
drawer-close-buttonblock, 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
promotionClickevents - New events for the Google Tag Manager pixel app. Best of all? They all follow the official google enhanced commerce format! Please welcome the
promotionClickevents, 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, this can impact the store front's performance due to changes to the queries essence, since all unannotated that were being requested as public are now automatically coming in as private.
Our team advises developers that have created custom VTEX IO GraphQL services to closely review their schemas and, if necessary, add the
@cacheControl(scope: PUBLIC) directive for the unannotated queries. This Pull Request should illustrate how to code the workaround solution.
Bug fixes 🐛
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
labelprops has been properly filled out. In practice, it is safe to say that it is the end of empty tabs being displayed on the UI! Cheers to that!
Product ordering in the
productImpressionevent - The
positionfield, part of the
productImpressionevents, was not being properly filled out with the real positioning of listed products. An accurate ordering is now taken into account by our Product Context and this bug is (praise the Lord) 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
productImpressionevent 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
productImpressionevent no longer has a threshold, 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
Thank you, team 💪