Shopify Product Collection Tabs – Filterable Product Display

                    <!-- 
========================================
Section Name: Product Collection Tabs
Tech Stack: Liquid, HTML, CSS, JavaScript
What This Section Does: 
- Displays products from multiple collections in a tabbed interface with filterable categories.
- Features customizable product cards with images, titles, descriptions, and prices.
- Includes add-to-cart functionality directly from the product grid.
- Fully responsive design with hover animations and elegant styling options.

Promotion: 
Showcase your product collections with an interactive tabbed display. Help customers browse categories easily with filterable tabs. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
{% comment %}
  Section: Product Collection Tabs
  A customizable product display section with filterable tabs and product cards
{% endcomment %}

<section class="product-tabs-section-{{ section.id }}" 
     style="background-color: {{ section.settings.section_bg_color }}; 
            padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">
  <div class="product-tabs-container page-width">
    <div class="product-tabs-header-{{ section.id }}">
      {% if section.settings.title != blank %}
        <h2>Lorem Ipsum Plantae</h2>
      {% endif %}
      
      {% if section.settings.subheading != blank %}
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae fermentum metus. Sed eget pulvinar nunc, sit amet malesuada ligula. Pellentesque habitant morbi tristique.</p>
      {% endif %}
    </div>

    <div class="product-tabs-categories-{{ section.id }}">
      <button class="product-tabs-category-button-{{ section.id }} active" data-category="all">{{ section.settings.all_tab_label }}</button>
      
      {% for block in section.blocks %}
        {% if block.type == 'tab' %}
          <button class="product-tabs-category-button-{{ section.id }}" 
                  data-category="{{ block.id }}" 
                  {{ block.shopify_attributes }}>
            {{ block.settings.tab_name }}
          </button>
        {% endif %}
      {% endfor %}
    </div>

    <div class="product-tabs-grid-{{ section.id }}">
      {% for block in section.blocks %}
        {% if block.type == 'tab' and block.settings.collection != blank %}
          {% assign collection = collections[block.settings.collection] %}
          
          {% for product in collection.products limit: block.settings.products_limit %}
            <a href="{{ product.url }}" class="product-tabs-card-link-{{ section.id }}">
              <div class="product-tabs-card-{{ section.id }}" 
                 data-categories="{{ block.id }}"
                 {{ block.shopify_attributes }}>
              
                <div class="product-tabs-image-wrapper-{{ section.id }}">
                  <div class="product-tabs-image-{{ section.id }}">
                    {% if product.featured_image != blank %}
                      <img src="{{ product.featured_image | img_url: '600x600', crop: 'center' }}" 
                          alt="Lorem ipsum plant image"
                          loading="lazy"
                          class="product-tabs-img-{{ section.id }}">
                    {% else %}
                      {{ 'product-1' | placeholder_svg_tag }}
                    {% endif %}
                  </div>
                </div>
              
                <div class="product-tabs-details-{{ section.id }}">
                  <h2 class="product-tabs-name-{{ section.id }}">Lorem Ipsum Plant</h2>
                  
                  <p class="product-tabs-description-{{ section.id }}">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae fermentum metus. Sed eget pulvinar nunc, sit amet malesuada ligula.
                  </p>
                  
                  <div class="product-tabs-footer-{{ section.id }}">
                    <span class="product-tabs-price-{{ section.id }}">
                      $45.00
                    </span>
                    
                    <form method="post" action="/cart/add" onClick="event.stopPropagation();">
                      <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
                      <button type="submit" class="product-tabs-add-to-cart-{{ section.id }}">
                        {{ section.settings.add_to_cart_text }}
                      </button>
                    </form>
                  </div>
                </div>
              </div>
            </a>
          {% endfor %}
        {% endif %}
      {% endfor %}
    </div>
  </div>
</section>

{%- style -%}
  .product-tabs-section-{{ section.id }} {
    overflow: hidden;
  }

  .product-tabs-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .product-tabs-header-{{ section.id }} {
    color: {{ section.settings.header_text_color }};
    margin-bottom: 40px;
  }

  .product-tabs-header-{{ section.id }} h2 {
    font-size: calc(2rem + 0.5vw);
    margin-bottom: 20px;
    color: {{ section.settings.header_text_color }};
  }

  .product-tabs-header-{{ section.id }} p {
    font-size: 1.2rem;
    opacity: 0.9;
    max-width: 600px;
    color: {{ section.settings.header_text_color }};
  }

  .product-tabs-categories-{{ section.id }} {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
  }

  .product-tabs-category-button-{{ section.id }} {
    background: {{ section.settings.tab_bg_color }};
    border: 1px solid {{ section.settings.tab_border_color }};
    color: {{ section.settings.tab_text_color }};
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .product-tabs-category-button-{{ section.id }}:hover,
  .product-tabs-category-button-{{ section.id }}.active {
    background: {{ section.settings.tab_active_bg_color }};
    border-color: {{ section.settings.tab_active_border_color }};
    color: {{ section.settings.tab_active_text_color }};
  }

  .product-tabs-grid-{{ section.id }} {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
  }

  .product-tabs-card-link-{{ section.id }} {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.3s ease;
  }

  .product-tabs-card-link-{{ section.id }}:hover {
    transform: translateY(-5px);
  }

  .product-tabs-card-{{ section.id }} {
    background: {{ section.settings.card_bg_color }};
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    height: 100%;
    transition: box-shadow 0.3s ease;
  }

  .product-tabs-card-{{ section.id }}:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  }

  .product-tabs-card-{{ section.id }}[data-hidden="true"] {
    display: none;
  }

  .product-tabs-image-wrapper-{{ section.id }} {
    overflow: hidden;
  }

  .product-tabs-image-{{ section.id }} {
    height: 300px;
    background: {{ section.settings.card_image_bg_color }};
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .product-tabs-img-{{ section.id }} {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .product-tabs-card-link-{{ section.id }}:hover .product-tabs-img-{{ section.id }} {
    transform: scale(1.1);
  }

  .product-tabs-details-{{ section.id }} {
    padding: 25px;
    display: flex;
    flex-direction: column;
    height: 250px;
  }

  .product-tabs-name-{{ section.id }} {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: {{ section.settings.card_title_color }};
  }

  .product-tabs-description-{{ section.id }} {
    color: {{ section.settings.card_text_color }};
    line-height: 1.4;
    margin-bottom: 20px;
    flex-grow: 1;
  }

  .product-tabs-footer-{{ section.id }} {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
  }

  .product-tabs-price-{{ section.id }} {
    font-size: 1.5rem;
    font-weight: bold;
    color: {{ section.settings.price_color }};
  }

  .product-tabs-add-to-cart-{{ section.id }} {
    background: {{ section.settings.button_bg_color }};
    color: {{ section.settings.button_text_color }};
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 5;
  }

  .product-tabs-add-to-cart-{{ section.id }}:hover {
    background: {{ section.settings.button_hover_bg_color }};
    transform: translateY(-2px);
  }

  @media (max-width: 768px) {
    .product-tabs-header-{{ section.id }} h2 {
      font-size: 2.5rem;
    }

    .product-tabs-grid-{{ section.id }} {
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
    }

    .product-tabs-image-{{ section.id }} {
      height: 250px;
    }
  }
{%- endstyle -%}

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const categoryButtons = document.querySelectorAll('.product-tabs-category-button-{{ section.id }}');
    const productCards = document.querySelectorAll('.product-tabs-card-{{ section.id }}');

    categoryButtons.forEach(button => {
      button.addEventListener('click', () => {
        categoryButtons.forEach(btn => btn.classList.remove('active'));
        button.classList.add('active');

        const selectedCategory = button.dataset.category;

        productCards.forEach(card => {
          if (selectedCategory === 'all') {
            card.setAttribute('data-hidden', 'false');
            card.closest('.product-tabs-card-link-{{ section.id }}').style.display = 'block';
          } else {
            const cardCategories = card.dataset.categories;
            const isHidden = cardCategories !== selectedCategory;
            card.setAttribute('data-hidden', isHidden);
            card.closest('.product-tabs-card-link-{{ section.id }}').style.display = isHidden ? 'none' : 'block';
          }
        });
      });
    });

    // Prevent Add to Cart button clicks from navigating to product page
    const addToCartButtons = document.querySelectorAll('.product-tabs-add-to-cart-{{ section.id }}');
    addToCartButtons.forEach(button => {
      button.addEventListener('click', (e) => {
        e.stopPropagation();
      });
    });
  });
</script>

{% schema %}
{
  "name": "Product Collection Tabs",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "header",
      "content": "Section Settings"
    },
    {
      "type": "color",
      "id": "section_bg_color",
      "label": "Section Background Color",
      "default": "#2d5520"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "px",
      "label": "Top Padding",
      "default": 40
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "px",
      "label": "Bottom Padding",
      "default": 40
    },
    {
      "type": "header",
      "content": "Header Settings"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Lorem Ipsum Plantae"
    },
    {
      "type": "textarea",
      "id": "subheading",
      "label": "Subheading",
      "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae fermentum metus. Sed eget pulvinar nunc, sit amet malesuada ligula."
    },
    {
      "type": "color",
      "id": "header_text_color",
      "label": "Header Text Color",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "Tab Settings"
    },
    {
      "type": "text",
      "id": "all_tab_label",
      "label": "All Products Tab Label",
      "default": "All Plants"
    },
    {
      "type": "color",
      "id": "tab_bg_color",
      "label": "Tab Background Color",
      "default": "rgba(255, 255, 255, 0.1)"
    },
    {
      "type": "color",
      "id": "tab_text_color",
      "label": "Tab Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "tab_border_color",
      "label": "Tab Border Color",
      "default": "rgba(255, 255, 255, 0.2)"
    },
    {
      "type": "color",
      "id": "tab_active_bg_color",
      "label": "Active Tab Background Color",
      "default": "#8dc26f"
    },
    {
      "type": "color",
      "id": "tab_active_text_color",
      "label": "Active Tab Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "tab_active_border_color",
      "label": "Active Tab Border Color",
      "default": "#8dc26f"
    },
    {
      "type": "header",
      "content": "Product Card Settings"
    },
    {
      "type": "color",
      "id": "card_bg_color",
      "label": "Card Background Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "card_image_bg_color",
      "label": "Card Image Background Color",
      "default": "#f5f5f5"
    },
    {
      "type": "color",
      "id": "card_title_color",
      "label": "Card Title Color",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "card_text_color",
      "label": "Card Text Color",
      "default": "#666666"
    },
    {
      "type": "color",
      "id": "price_color",
      "label": "Price Color",
      "default": "#58873d"
    },
    {
      "type": "header",
      "content": "Button Settings"
    },
    {
      "type": "text",
      "id": "add_to_cart_text",
      "label": "Add to Cart Text",
      "default": "Add to Cart"
    },
    {
      "type": "color",
      "id": "button_bg_color",
      "label": "Button Background Color",
      "default": "#58873d"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_hover_bg_color",
      "label": "Button Hover Background Color",
      "default": "#70a751"
    }
  ],
  "blocks": [
    {
      "type": "tab",
      "name": "Collection Tab",
      "limit": 10,
      "settings": [
        {
          "type": "text",
          "id": "tab_name",
          "label": "Tab Name",
          "default": "New Tab"
        },
        {
          "type": "collection",
          "id": "collection",
          "label": "Collection"
        },
        {
          "type": "range",
          "id": "products_limit",
          "min": 3,
          "max": 24,
          "step": 1,
          "label": "Number of Products",
          "default": 8
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Product Collection Tabs",
      "category": "Collection",
      "blocks": [
        {
          "type": "tab",
          "settings": {
            "tab_name": "Low Light",
            "products_limit": 8
          }
        },
        {
          "type": "tab",
          "settings": {
            "tab_name": "Air Purifying",
            "products_limit": 8
          }
        },
        {
          "type": "tab",
          "settings": {
            "tab_name": "Pet Friendly",
            "products_limit": 8
          }
        },
        {
          "type": "tab",
          "settings": {
            "tab_name": "Succulents",
            "products_limit": 8
          }
        }
      ]
    }
  ]
}
{% endschema %}