VTEX FastStore - Criando sua primeira seção (sections.json)

Summary

This video tutorial walks users through creating custom sections in VTEX CMS, focusing on defining and managing section properties like titles and images. It covers the use of VTEX's pre-built widgets, such as image uploaders and date-time selectors, to enhance user interfaces. The video also explains how to structure the section, associate it with a component, and ensure it renders correctly on the front end. The tutorial provides a hands-on approach, guiding viewers in connecting the backend CMS setup with the actual front-end display of dynamic content.

Takeaways

• 😀 VTEX simplifies CMS development by offering pre-built widgets for tasks like image uploads, calendar selection, text formatting, and more.
• 😀 The 'Image Uploader' widget allows users to upload images through a simple interface.
• 😀 The 'Date Time' widget allows users to select a date and time conveniently within the CMS.
• 😀 'Draft Text' widget enables users to format text, such as adding italics or links, directly in the CMS.
• 😀 The 'Media Gallery' widget allows users to upload and select images and videos.
• 😀 The 'Checkbox' widget can be used to create toggle features within the CMS interface.
• 😀 When creating a section in the CMS, developers must define a name and schema that corresponds to the component created later.
• 😀 Each section must have a defined type, such as 'Object', and properties for what will be manageable by the user.
• 😀 Developers must create a component file (e.g., index.tsx) that connects the section to the CMS and handles the data passed from the CMS interface.
• 😀 It's important to follow VTEX’s folder and file naming conventions to ensure the CMS recognizes and integrates the custom sections correctly.
• 😀 After creating and exporting the component, developers can sync the CMS and verify the section is available and editable within the CMS interface.

Q & A

What is the role of widgets in the VTEX CMS?

Widgets in VTEX CMS are pre-built components designed to simplify the development process. They allow developers to quickly implement features such as image uploaders, date pickers, text formatting, and media galleries, providing an easy and user-friendly interface for the client.

What is the importance of defining the 'name' attribute for a session in VTEX CMS?

The 'name' attribute is crucial because it needs to match the name of the component that will be created later in the components folder. This ensures that the session is properly associated with the correct component.

What should be included in the 'schema' section when creating a session?

In the 'schema' section, developers must define the attributes and properties of the session, such as the title and type of data expected. This allows the content to be managed and displayed correctly in the CMS.

How do you define a property for an image field in the VTEX CMS session?

To define an image field, you would create a property called 'image' and specify its type as 'string'. Then, you would integrate it with an image uploader widget to allow users to upload an image via the CMS interface.

What is the purpose of the 'widget' object within a session schema?

The 'widget' object defines the type of widget to be used for a property. For example, setting it to 'image uploader' enables the user to upload images directly within the CMS. This ties the session's properties to specific widgets for a better user experience.

What is the significance of using the 'organism' structure when creating components in VTEX?

In VTEX, when creating components that are associated with a session, they must be structured as 'organisms'. This ensures that components are properly recognized and linked to the session, adhering to VTEX’s content architecture.

How do you pass properties from the CMS session to the component?

Properties like 'title' and 'image' are passed from the CMS to the component via 'props'. These properties are typed in the component and used to render the correct content dynamically.

Why is it important to keep the naming conventions consistent in both the component file and folder?

Consistent naming ensures that the component and session are properly linked. By following the same naming structure for files and folders, VTEX can automatically recognize and associate the session's data with the correct component.

What does the 'yarn sync cms' command do in this context?

The 'yarn sync cms' command is used to synchronize the component with the CMS. This updates the CMS with any changes made to the components, ensuring that the new sessions and properties are available for use.

How do you make a custom session available in the VTEX CMS?

After defining and exporting the component, and running the 'yarn sync cms' command, the new custom session will appear in the CMS under 'Custom' sessions. Once published, the session becomes live and the content is rendered according to the defined properties.