Dynamic Product Tabs Section

                    <div class="tab-container-product page-width">
<div class="tabs-container " style="padding-top: {{ section.settings.padding_top }}px; padding-bottom: {{ section.settings.padding_bottom }}px;">
    {% for block in section.blocks %}
        <button class="tab-button{% if forloop.first %}  active{% endif %}" data-tab="{{ block.id }}" style="color: {{ section.settings.tab_text_color }}; background-color: {{ section.settings.tab_bg_color }}">
            {{ block.settings.tab_name }}
        </button>
    {% endfor %}
</div>

<!-- Container for Products -->
<div class="tab-content">
    {% for block in section.blocks %}
        {% assign collection_handle = block.settings.collection %}
        {% assign collection = collections[collection_handle] %}
        
        <!-- Each Tab Content Pane -->
        <div class="tab-pane{% if forloop.first %} active{% endif %}" id="{{ block.id }}">
            {% if collection and collection.products.size > 0 %}
                <div class="product-grid">
                    {% for product in collection.products %}
                        <div class="product-card">
                            <div class="product-image">
                              <a href="{{ product.url }}">
                                <img src="{{ product.featured_image | img_url: 'master' }}" alt="{{ product.title }}">
                              </a>
                            </div>
                            <div class="product-details">
                              <span class="title-price">
                                <h3>{{ product.title }}</h3>
                                <p class="price">{{ product.price | money }}</p>
                      </span>
                                <!-- Placeholder for rating if integrated with reviews -->
                                <p class="rating">⭐⭐⭐⭐⭐</p>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <p>No products available in this collection.</p>
            {% endif %}
        </div>
    {% endfor %}
</div>
</div>
<!-- JavaScript for Tab Switching -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const tabButtons = document.querySelectorAll(".tab-button");
        const tabPanes = document.querySelectorAll(".tab-pane");

        tabButtons.forEach(button => {
            button.addEventListener("click", function() {
                // Remove active class from all buttons and panes
                tabButtons.forEach(btn => btn.classList.remove("active"));
                tabPanes.forEach(pane => pane.classList.remove("active"));

                // Add active class to clicked button and corresponding pane
                button.classList.add("active");
                const tabId = button.getAttribute("data-tab");
                document.getElementById(tabId).classList.add("active");
            });
        });
    });
</script>

<!-- CSS for Styling -->
<style>
.tabs-container {
    display: flex;
    gap: 10px;
    margin-bottom: 80px;
    justify-content: center;
}
.tab-button {
    padding: 10px 20px;
    cursor: pointer;
    font-family: 'Chiaroscura';
    border-radius: 30px;
    font-size: 18px;
    background: none;
    border: 1px solid #ddd;
}

  button.tab-button.active {
    border: 1px solid #000;
    background: #000;
    color: #ddd;
}
 
    .tab-content {
        display: flex;
        flex-wrap: wrap;
    }
    .tab-pane {
        display: none;
        width: 100%;
    }
    .tab-pane.active {
        display: flex;
        flex-wrap: wrap;
    }
.product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    width: 100%;
    row-gap: 30px;
}
  .product-details  p.rating {
    margin: 0;
    font-size: 11px;
}
   .product-details span.title-price h3 {
    font-family: 'Poppins';
    letter-spacing: 0em;
    line-height: 1.4;
    margin: 0;
}
  .product-details span.title-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
  .product-details span.title-price p.price {
    margin: 0;
}
.product-image img {
    width: 100%;
    object-fit: cover;
    border-radius: 15px;
    height: 350px;
}
@media(min-width:1400px){
  .tab-container-product.page-width {
    max-width: 1400px;
    margin: 0 auto;
}
}

@media(min-width:1400px){
.tab-container-product.page-width {
    max-width: 1200px;
    margin: 0 auto;
}
}
  
</style>



{% schema %}
{
  "name": "Dynamic Product Tabs",
  "settings": [],
  "blocks": [
    {
      "type": "tab",
      "name": "Tab",
      "settings": [
        {
          "type": "text",
          "id": "tab_name",
          "label": "Tab Name",
          "default": "New Product"
        },
        {
          "type": "collection",
          "id": "collection",
          "label": "Select Collection for Tab"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Dynamic Product Tabs"
    }
  ]
}


{% endschema %}