WhatsApp
Establishing a Shopify store lets you dynamically load material onto a page without having to reload the whole page. By raising the interactivity and responsiveness of your website, this function is quite helpful in improving the user experience. Using JavaScript and Shopify's section rendering API, this tutorial will guide you through the dynamically fetching and displaying of section content process.
Step 1: Create a Shopify Section
First, let's create a new section in Shopify with some dynamically loaded content. This example section displays a list of products.
sections/product-list.liquid
<div id="product-list">
{% assign products = section.settings.products %}
{% for product in products %}
<div class="product-item">
<h2>{{ product.title }}</h2>
<img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
<p>{{ product.price | money }}</p>
<a href="{{ product.url }}">View Product</a>
</div>
{% endfor %}
</div>
{% schema %}
{
"name": "Product List",
"settings": [
{
"type": "product_list",
"id": "products",
"label": "Products"
}
],
"presets": [
{
"name": "Product List"
}
]
}
{% endschema %}
Step 2: Update the Shopify Template
In the page where you want to have the button, add a button element that will trigger the API call to load the product data.
For example : ‘templates/another-page.liquid’
<button id="load-products">Load Products</button>
<div id="products-container"></div>
Step 3: Add JavaScript for Fetching and Displaying the Section
Add JavaScript code to handle the button click, make an API call to fetch the section data, and display it on the page.
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('load-products').addEventListener('click', function() {
console.log('Button clicked');
fetch('/?section_id=product-list')
.then(response => response.text())
.then(html => {
console.log('Fetch successful');
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const section = doc.querySelector('#product-list');
console.log('Section found:', section);
document.getElementById('products-container').innerHTML = section ? section.innerHTML : 'Section not found.';
})
.catch(error => console.error('Error loading products:', error));
});
});
JavaScript Explained
- DOMContentLoaded Event: Makes sure that the script doesn't run until the whole DOM has been loaded.
- Using Shopify's Section Rendering API, the fetch Section function gets the HTML for the section.
- DOM Parsing: Reads the HTML that was fetched and changes the content that is already in the target container.
- Event Listener: Adds an event listener to the button so that when it is clicked, the part is updated.
Debugging Steps
- Console Logs: Use the browser's developer console to check logs and any error messages.
- Network Request: Make sure the fetch request is sent properly and look at the response.
- DOM Parsing: Make sure that the part with the right ID is in the HTML that was fetched.
- Existence of the Button: Make sure the button is in the DOM before you try to add an event listener.
If you do these things, you'll be able to use JavaScript and the section rendering API to dynamically load and show information in your Shopify store. This method makes your site more dynamic and avoids having to reload the whole page, which makes the user experience better.
