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

[beta8dana]

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!

[Small_Task_Help]

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' %}

[beta8dana]

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]

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

[Small_Task_Help]

You can contact us directly. Details given at signature

[beta8dana]

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