😴 Discover Euro's journey with deco.cx. Read more!
— Star deco.cx on Github and help others discover our product!
Partials, inspired by htmx, operate with a runtime that intercepts user interactions with button, anchor, and form elements. These interactions are sent to our server, which calculates the new state of the page and responds to the browser. The browser receives the new UI state in pure HTML, which is then processed and the differences are applied, changing the page to its final state. For more detailed information about Partials, see the Fresh documentation.
We are migrating the components of the Deco store to the new Partials solution. So far, we have migrated the SKU selector, which can be viewed in action here. More changes, such as
infinite scroll and improvements to filters, are coming soon.
Another unlocked feature is the ability to create folds on the page. E-commerce pages are usually long and contain many elements. Browsers often face problems when there are many elements in the HTML. To deal with this, the fold technique was invented.
The basic idea of this technique is to divide the content of the page into two parts: the content above and the content below the fold. The content above the fold is loaded on the first request to the server. The content below the fold is loaded as soon as the first request is completed. This type of functionality used to be difficult to implement in older architectures. Fortunately, we have embedded this logic in a new section called
Deferred. This section accepts a list of sections as a parameter that should have their loading delayed until a later time.
To use this new section:
Rendering > Deferred section to your page.
Deferred in action at this link.
Note that, for the
Deferredsection to appear, you must be on the latest version of
apps, and deco!
A question you may be asking yourself now is: How do I choose the sections I should include in the deferred? To do this, use the performance tab and start with the heaviest sections that offer the greatest return!
For more information, see our docs