From theory to practice: using Sections in Magento 2 [Part 2]

Table of Content

how-to-use-sections-in-magento-2

Hello to Amasty blog readers!

Last time we talked about Magento 2 UI components. Actually, there is one more new capability of Magento 2, sections, on which we will focus today. They are meant to sync data between the client and web server to keep it always up-to-date. To illustrate how sections work and how to use them in Magento 2, let’s consider the example of a Magento 2 standard module - Magento_Checkout.

Need some custom features for your Magento?

Leave your request and our manager will get back to you to discuss how we can help you.

Sections and CustomerData in Magento 2

Magento 2 local storage

As Magento 2 heavily relies on localStorage, they added a new entity called CustomerData to ensure a smooth work of the attribute.

You can read more about it here.   

CustomerData works with the data stored on the client side. Magento 2 sections are merged parts of customer data. They allow keeping this data up-to-date via a sync with the web server. Every section is a key in magento-cache-storage, while magento-cache-storage is the key in localStorage as it is shown in the picture:

Initializing and defining sections in Magento 2

As we said above, the Magento_Customer module is used to define and initialize sections. Now, we will show this mechanism in detail.

Customer section load Magento 2

All Magento 2 sections are initialized with AJAX requests (customer/section/load) to the controller (Magento\Customer\Controller\Section). As a result, the data in magento-cache-storage is refreshed.

All sections are defined in di.xml. This is an example of a defined Magento 2 section:

vendor/magento/module-checkout/etc/frontend/di.xml

This definition creates new sections Cart and Directory-data in magento-cache-storage:

The sections Cart and Directory-data are initialized on the server side via the classes Magento\Checkout\CustomerData\Cart and Magento\Checkout\CustomerData\DirectoryData. Each of these classes contains a definition of the method getSectionData, which initializes the value of the section.

Initializing sections on the client side

There are also other ways to initialize sections. For example, on the client side, they can be initialized with the help of customer-data adapters. To create a Magento 2 customer section on the client side, you also have to add a definition to the di.xml.

vendor/magento/module-checkout/etc/frontend/di.xml

 

As you see, this definition also creates new keys checkout-data and cart-data in magento-cache-storage. The difference from the previous method lies in the initialization ways.

The argument name clientSideSections shows Magento that initialization should go on the client side. This means that initialization requires cache keys related to the section initialization data instead of PHP classes.

In our example, we use the keys checkout-data and cart-data. At the same time, data requested by the keys is created by the customer-data adapters. Technically, these adapters are js-modules that define, first, the methods for working with customer-data and, second, the names of the cacheKey that are used to call for these data.

An example of defining a section in Magento 2

Let’s consider a section definition using the example of the cart-data section in the Magento_Checkout module. As we mentioned above, it is defined in di.xml. This definition uses the cart-data key to create a section in magento-cache-storage. Its name is defined with the attribute name of the <item> tag.

 

To initialize cart-data, define the <item> tag value and specify the cacheKey that refers to data in magento-cache-storage.

vendor/magento/module-checkout/etc/frontend/di.xml

 

The data itself is created by the js-module Magento_Checkout/js/model/cart/cache via the key cart-data. As a customer-data adapter, this module contains methods for working with customer-data and defines the ?acheKey value as cart-data. As a result of the initializing cart-data, we get the following:

The PUT and POST requests allow changing the values of customer-data. We can define requests that will change particular sections using the etc/sections.xml file. This is how an update can look like:  

vendor/magento/module-checkout/etc/frontend/sections.xml

 

The value of the <section name> tag shows how a request will affect the Cart section. After a request (checkout/cart/estimateUpdatePost) reaches the controller (Magento\Checkout\Controller\Cart\EstimateUpdatePost), the Cart section will get a new value. If we set the action as “*”, all PUT and POST requests will change the section. If the <section> tag is missing, all sections in customer-data will change.

Magento 2 sections in custom modules

We reviewed how sections work in the Magento 2 default functionality. We use in our custom modules standard Magento 2 sections.

For example, the Free Gift module uses a standard cart section. This is how it is introduced in the configuration file of the extension: Amasty/Promo/etc/frontend/sections.xml.

This file section.xml describes the controller that updates the cart section.

Conclusion

Today, we reviewed sections in Magento 2, learned to define and initialize them as well as considered an example of using sections in a Magento 2 module. Hope this article gave you an idea of how to use sections in your Magento 2 projects.

If you still have questions or comments, feel free to share them in the comment feed below.

June 26, 2018
July 4, 2018
June 25, 2018
Comments
Web dev
October 13, 2018
How can we use section to render dynamic data let's say on the product view page while enabled FPC?
Reply
Dzmitry Marozau
December 7, 2018
Hello guys, It seems it is the missprint in sentence which starts "The value of the tag ". Because I can't understand where is tag. Thanks.
Reply
Alina Bragina
December 22, 2018
Hey Dzmitry, thanks for your careful reading and for commenting! The typo was removed.
Belkin Customer Service
December 14, 2018
This is really great and the information which is mentioned in this post is really useful and it's really helped me to a lot to understand the thing properly, keep sharing this kind of information with us.
Reply
Alina Bragina
December 22, 2018
Hi there! Thanks for your interest and for sharing your opinion. We are happy to be of use to our readers.
Parimal Makwana
July 16, 2019
Thanks for the article!
Reply
Polina Litreyeva
July 29, 2019
Hello, Parimal! Thank you for the feedback!
Ben J
July 24, 2019
Thanks - this was incredibly helpful. The official documentation on this topic is pretty lacking!
Reply
Polina Litreyeva
July 29, 2019
Hi, Ben! Thanks for reading. We are happy that our post was useful for you!
Gulia
September 3, 2019
Thank you for what you do! Your articles are so helpful!
Reply
Polina Litreyeva
September 3, 2019
Hello, Gulia! Thank you for reading and sharing your opinion. We are glad to be helpful.
salenow
September 3, 2019
I simply wanted to thank you once more for that amazing web page you have developed here. It truly is full of useful tips for those who are truly interested in this subject, in particular this very post. You really are all so sweet and also thoughtful of others in addition to the fact that reading the blog posts is a good delight in my experience. And that of a generous gift! Jeff and I really have pleasure making use of your tips in what we should do next week. Our listing is a mile long which means that your tips will definitely be put to beneficial use.
Reply
Polina Litreyeva
September 13, 2019
Hello, there! Thanks for your feedback! We're happy to know the article was useful for you.
B.K.K
September 10, 2019
How to find this localStorage that you show on the first picture?
Reply
Polina Litreyeva
September 10, 2019
Hello there! You need to press<strong> F12</strong> (or <strong>Fn+F12</strong> for laptops) and you will see <strong>Chrome DevTools</strong>. Click on <strong>></strong> icon and choose <strong>Application</strong>: <img src="https://screen.amasty.com/1568094159058.jpg" alt="chrome devtools" /> There you will find <strong>Local storage</strong>: <img src="https://screen.amasty.com/1565354875618.jpg" alt="local storage" />
Jeremy Ren
April 28, 2020
Thank you guys, really helpful.
Reply
Polina Litreyeva
May 14, 2020
Hello, Jeremy! Thks for your comment! We are glad to share our experience and be helpful.
Leave your comment

Your email address will not be published

This blog was created with Amasty Blog Pro

This blog was created with Amasty Blog Pro