On demand page rendering

This feature helps developers create user interfaces with real-time data rendering. In this way, if a user acts on the page, there will be no need to reload the page; instead, store data can be queried asynchronously and securely.

This functionality can be integrated into your theme and will require the implementation of HTML, JSON, or JS to create custom functions or interfaces.

Prerequisites

N/A

Key features

A very simple example of this functionality is when a user adds a product to the shopping cart, and the page reloads. Instead of allowing this standard behaviour, you can customize your templates to let this action add the product to the shopping cart while allowing the user to continue browsing the current page without the need for a page reload.

To make this feature work, it needs to retrieve information from your store and send updates to the backend. This feature requires a dynamic process that retrieves information from your online store and sends real-time updates to the backend server. This ensures displayed content is accurate and synchronized with your store’s current inventory and product details.

How to use:

```liquid fetch(‘/products/example-product’, { method: ‘GET’, headers: { ‘Accept’: ‘application/json’, ‘Content-Type’: ‘application/json’ } }) .then(response => response.json()) .then(data => { console.log(data); // You can now manipulate the JSON data as needed }) .catch(error => console.error(‘Error fetching JSON:’, error));

/* Response Format: { “html”: “…”, “alert”: “Optional alert message”, “notice”: “Optional notice message”, “flash”: { .. } } */ ```

Code example:

```liquid

// Get example fetch(‘/products/example-product’, { method: ‘GET’, headers: { ‘Accept’: ‘application/json’, ‘Content-Type’: ‘application/json’ } }).then(response => response.json()) .then(data => { console.log(data); // Example output // { // “html”: “<div>…</div>”, // “alert”: “Optional alert message”, // “notice”: “Optional notice message”, // “flash”: { .. } // } }) .catch(error => console.error(‘Error fetching JSON:’, error));

// POST Example fetch(‘/cart/add’, { method: ‘POST’, headers: { ‘Accept’: ‘application/json’, ‘Content-Type’: ‘application/json’ }, body: JSON.stringify({ id: 123456789, // Variant ID quantity: 1 }) }).then(response => response.json()) .then(data => { console.log(data); // Example output // { // “html”: “<div>…</div>”, // “alert”: “Optional alert message”, // “notice”: “Optional notice message”, // “flash”: { .. } // } }) .catch(error => console.error(‘Error fetching JSON:’, error)); ```

Important notes

When implementing new user experiences that require on-demand data loading, significant overhead costs must be taken into account.

If a template and event-driven architecture are not used with proper logic, this can slow down the page the user is interacting with and prevent common actions, such as proceeding to the checkout, from functioning due to the overload caused by custom functions.

Troubleshooting suggestions

For security reasons, this functionality is limited to use within the StoreConnect application. If you encounter issues with requests, we recommend reaching out to our support team. They will assist you in obtaining secure tokens to ensure your API calls are performed safely and efficiently.

Always separate your JS or JSON code into templates or separate resources to quickly identify issues.

Glossary

• Data rendering: Making calls to the back end depending on the event or information requested by the user.

Summary

StoreConnect now offers an on-demand request feature in version 18, allowing real-time data access via HTML or JSON. This feature helps developers create dynamic and personalized experiences, such as avoiding page reloads when adding products to the cart using asynchronous functions with AJAX.