Skip to main content

Β· 2 min read

The isSingleton property is now available for merchants to create a single page of a content type in the Headless CMS. This property prevents the creation of multiple pages of the same content type, ensuring that any updates made to the content type layout are consistent across all requests.

gif-singleton

What has changed?​

Previously, when creating or editing a content type without the isSingleton property, the content type page could be duplicated in multiple versions. This could cause issues when trying to update the correct version or result in multiple content types with the same name but different content, leading to confusion during content management.

With the isSingleton property, you can keep consistency across the content types in your store by preventing the creation of multiple pages with the same content type. This ensures that any updates to the page layout are reflected in all requests, streamlining your content management process.

Why are we making this change?​

The change enables consistency in the content of a page. The isSingleton property prevents the creation of multiple pages of the same content type and ensures updates to the page layout are reflected in all requests.

What needs to be done?​

For more information, please refer to the Using isSingleton property in a content type documentation.

Β· 2 min read

The onlySettings property is now available for merchants to create content types intended for settings only. ​​This option is particularly useful for content types that do not require storefront content, like an SEO page.

Image 1Image 2
with-propertywithout-property
Image 1 - Content type with onlySettings and with one tab for settings: SEO.Image 2 - Content type without onlySettings and with two tabs: Sections and SEO.

This property ensures that the content type page displays only the available settings without the Sections tab. Follow the steps below to use the onlySettings property for your desired content type.

What has changed?​

Previously, when creating or editing a settings-only content type, two tabs were displayed: one for sections and another for page settings. However, for some content types like SEO pages, which do not have storefront content, the Sections tab was not relevant.

Now, the onlySettings property allows the creation of content types meant for settings only. This change improves content management and simplifies interface navigation for merchants by displaying only one settings tab on the page.

Why are we making this change?​

The change enables the creation of setting-only content types that do not require storefront content, and simplifies interface navigation by displaying only one tab for the page configuration.

What needs to be done?​

To add the property to your store, please follow the instructions in Using onlySettings property in a content type.

Β· 2 min read

The Releases module allows you to manage and publish groups of connected changes called releases. The Calendar, a view of Releases, has been improved with the Monthly, Weekly, and Daily Views of your planned releases, allowing you to manage them more easily and effectively.

What has changed?​

Before, you had to manage releases in a searchable list. You could sort and filter releases, but it was difficult to visualize them, making it hard to keep track of your releases, their publication date, and how they related to each other.

Now, the Calendar page offers new ways to keep track of your releases. You can choose the Monthly, Weekly and the Daily View to better visualize and manage your releases.

calendar-view

Why did we make these changes?​

Better visualization of your releases enables you to have more control over them. These changes aim to enhance your experience and make management more simple and efficient.

Also, visualizing how releases relate to each other in a timeline can help you develop more precise communication plans because you have a clear vision of it and how your releases overlap, for example.

What needs to be done?​

No action is needed. The change will be automatically implemented in all stores developed using FastStore. Currently, Releases is available only for stores using FastStore.

For more information, see the documentation in Help Center:

Β· 2 min read

Stores using FastStore have access to an image resizing and cropping service provided by VTEX, that caches the result on edge, which improves storefront performance.

VTEX is simplifying the domain layer of this capability in order to improve it. This means deprecating the current domain in favor of a new one.

What is changing?​

By the end of May 2023 the endpoint assets.vtex.app will stop working. The correct domain to use the image resizing and cropping feature is now {accountName}.vtexassets.com.

Why are we making this change?​

VTEX has identified oportunities to improve performance that required the change of domain.

Namely, you can expect requests to this service to have decreased latency on cache misses, an increased cache hit ratio, and improved availability after implementing the new domain.

What needs to be done?​

You must replace all instances of assets.vtex.app for {accountName}.vtexassets.com in your FastStore project code by the end of May 2023. Otherwise your images may not be displayed correctly, returning a status 404 error.

Note that the new domain includes your account name.

See some examples of how to implement this replacements, considering a store with an account name of examplestore.

Old domainNew domain
https://assets.vtex.apphttps://examplestore.vtexassets.com
https://assets.vtex.app/example/pathhttps://examplestore.vtexassets.com/example/path

Β· 2 min read

We are pleased to announce the release of Media Admin, a media gallery manager designed to help you efficiently manage your digital assets. With Media Admin, you can upload and organize your media files, whether they are PNG, JPG, GIF, SVG, or WEBP.

You can also integrate Media Admin into Site Editor and Headless CMS so users can access and manage their media files from within these platforms. For more information, refer to Using the Media Gallery as a CMS widget.

Features​

Uploading files​

Use the Media Admin to upload various media types, including PNG, JPG, GIF, SVG, and WEBP files. Check in the following how to upload and cancel an upload in progress.

  • Uploading a file

Uploading a file

  • Canceling an upload

Canceling an upload

Visualizing files​

Media Admin has two visualization modes - grid and list view. You can switch between these views to better locate and preview media files by clicking the list or grid icon in the top right.

The grid view displays a thumbnail preview of each file, while the list view shows the files in a detailed list.

Grid viewList view
Grid viewList view

Searching and filtering files​

Media Admin allows you to filter files by the newest, oldest, and name (in ascending or descending order). You can also search for specific file names using the search bar.

Using filters

Managing files​

You can use Media Admin to preview your digital assets, download them to your local device, delete them if they're no longer needed, or copy their URLs to use them elsewhere.

Managing files

Media gallery can be used as a widget in Site Editor and Headless CMS. All management actions are accessible within the widget, which is displayed in a modal. Check the video below to see the Media widget being used in each CMS solution.

  • Headless CMSHeadless CMS
  • Site EditorSite Editor

Note that the Media Admin app is associated with the VTEX account, meaning that both the Site Editor and Headless CMS will have access to the same gallery of media files.

Another important point to keep in mind is that if you delete a file from the media gallery that is being used in a section of the document, it will still be displayed in the section.

Β· One min read

The Base Store (Next.js) starter now supports instant VTEX Headless CMS previews.

Use the Preview option while writing a draft on VTEX Headless CMS to preview content changes immediately and whenever you want.

CMS Preview

What needs to be done?​

These changes are available in Base Store (Next.js) version 22.38.3 or greater. If you have already started a FastStore project with the Base Store (Next.js) starter, remember to keep it up to date with its latest version.

Also, notice that __next_preview_data cookies are set on the browser whenever you generate a CMS preview. Hence, after using the VTEX Headless CMS, make sure to clear the cookies from your browser so you can see your production website once again.

Clear cookies

Β· 2 min read

Gift, OrderSummary, SkuSelector, and CartItem components are now available in the FastStore UI. Also, updates to the FastStore API improve the shopping cart UX and allow adding user's session information to the orderForm.

FastStore UI​

Gift​

  • πŸŽ‰ New component - #1443

    Use the Gift component to display promotional gift items.

    Gift component

OrderSummary​

  • πŸŽ‰ New component - #1456

    Use the OrderSummary component to provide a summary of the items in the cart, including the total price, related shipping tax, and discounts.

    OrderSummary component

SkuSelector​

  • πŸŽ‰ New component - #1462

    Use the SkuSelector component on Product Details Pages (PDPs) to display all SKUs available for a given product.

    SkuSelector component

CartItem​

  • πŸŽ‰ New component - #1461

    Use the CartItem component to display summarized data about an item placed in the shopping cart.

    CartItem component

FastStore API​

  • πŸ› Fixed "Buy 2 get 3" promotions - #1434

    Cart UX issues related to promotions, such as "Buy 2 get 3," have been fixed. Now, items and gifts are correctly combined when necessary.

    Cart discount

  • ✨ Product releaseDate now available - #1438

    The StoreProduct entity can now return the releaseDate of an item.

  • ✨ Session info now available as an argument of validateCart - #1444

    The validateCart mutation now accepts the session argument. This allows adding the user's session information to the orderForm, making the shopping flow consistent between storefront and checkout, and allowing for regionalized prices.

Documentation​

  • πŸŽ‰ New documentation feedback feature - #1448

    Documentation Feedback

New and improved docs​

Β· One min read

The USE_FRAMEWORK_CACHE and USE_NODE_MODULES_CACHE environment flags were deprecated in favor of USE_BUILD_CACHE. The new flag improves the build time by reusing cache from previous commits in newer deploy previews of the same Pull Request.

What has changed?​

The new USE_BUILD_CACHE flag replaces the previously used USE_FRAMEWORK_CACHE and USE_NODE_MODULES_CACHE flags.

To exemplify the improvement, consider the git example below.

master: commit-sha-1
PR 233:
- commit-sha-2
- commit-sha-3

Previously, the build correponding to commit-sha-3 would use commit-sha-1 cache. Now it uses the cache generated for commit-sha-2. In case the commit-sha-2 does not exist, the build would use the commit-sha-1 cache.

What needs to be done?​

To use this new improvement, set the USE_BUILD_CACHE flag to true in the vtex.env file of your FastStore project.

Β· One min read

The automatic previews of your FastStore + WebOps project Pull Requests are now deployed with GitHub environments.

What has changed?​

Previously, if you committed code to a branch with an open pull request, the vtex-sites bot would add a comment with the link to the PR's corresponding deploy preview. For example: Previous deploy in bot comment

Now, this comment is no longer provided. Instead, you should check the GitHub environments section. You should see something like this in your pull request: New deploy with Github environment

You can see the available environments on your repository's home page, on the right side of the screen. As of now, there are two environments: FastStore Preview and FastStore Production.

What needs to be done?​

This feature is already active for all projects. There is no action required.

Β· One min read

There are new and improved FastStore API guides available on our documentation portal:

What has changed?​

Previously, the GraphQL IDE guide focused on GraphiQL. However, GraphiQL is not natively supported by the Base Store starters anymore.

Now, you can still run your FastStore project locally and, although the new guide contains specific instructions for using graphql-playground, you may use your preferred GraphQL IDE.

In addition, now you can find more precise instructions and code examples of how to use the FastStore API in your storefront with the guides Fetching API data on the storefront and Extending the GraphQL schema.