How to add dynamic tables in different shopify pages (blogs, collections, products)

beta8dana
Shopify Partner
5 0 1

Hello,

 

I'm eager to explore the possibility of adding dynamic tables through code snippets, allowing for organic integration across various Shopify pages (blogs, collections, products). As I'm not proficient in programming, I kindly request that any responses include precise instructions regarding the specific file locations where the code should be inserted.

 

Thank you for your assistance!

Replies 5 (5)

Small_Task_Help
Shopify Partner
314 9 22

Hi,

 

At edit code create new section dynamic-table.liquid

Use following html and css for table

// Example using AJAX (assuming you have an API endpoint to fetch data)
fetch('/api/data-endpoint')
  .then(response => response.json())
  .then(data => {
    const tableBody = document.querySelector('.dynamic-table tbody');
    data.forEach(item => {
      const row = document.createElement('tr');
      row.innerHTML = `
        <td>${item.column1}</td>
        <td>${item.column2}</td>
        <!-- Add more columns as needed -->
      `;
      tableBody.appendChild(row);
    });
  })
  .catch(error => console.error('Error:', error));

Add JavaScript code to fetch the data dynamically and populate the table rows

// Example using AJAX (assuming you have an API endpoint to fetch data)
fetch('/api/data-endpoint')
  .then(response => response.json())
  .then(data => {
    const tableBody = document.querySelector('.dynamic-table tbody');
    data.forEach(item => {
      const row = document.createElement('tr');
      row.innerHTML = `
        <td>${item.column1}</td>
        <td>${item.column2}</td>
        <!-- Add more columns as needed -->
      `;
      tableBody.appendChild(row);
    });
  })
  .catch(error => console.error('Error:', error));


Include the Section in Different Pages

{% section 'dynamic-table' %}

 

Click here to Contact and Get Shopify Store Help
E-mail - hi@shopifysmalltask.com
We are Shopify Store Small Tasks and Customization Experts
beta8dana
Shopify Partner
5 0 1

Thank you for your assistance. I have tried the solution but I must have done some failure since it did not work for me yet. Could you please let me know where to add the second code text (should be also in the new section dynamic-table.liquid after the first code text) and the third code text (Should it be it also in the section on the relevant page (e.g. main-blog.liquid, collection-list.liquid). Your help is much appreciated.

beta8dana
Shopify Partner
5 0 1

when possible, could you please kindly answer my question below? thanks a LOT in advance.

Small_Task_Help
Shopify Partner
314 9 22

You can contact us directly. Details given at signature

Click here to Contact and Get Shopify Store Help
E-mail - hi@shopifysmalltask.com
We are Shopify Store Small Tasks and Customization Experts
beta8dana
Shopify Partner
5 0 1

I already contacted you and still waiting for your reply. You wanted to send me a cost estimation for the explanation /implementation.