Blog

{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{%  if section.blocks.size > 0 %}
  <div class="tabs-section page-width">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-3.6.0.js"></script>
    <script src="//code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    {%  if section.settings.useslider %}
      <script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>
    {%  endif %}
    {%  if section.settings.title != blank %}
      <h2 class="h1">{{ section.settings.title }}</h2>
    {%  endif  %}
    <div id="tabs" class="tabs">
      {%  assign tabContent = '' %}
      <ul>
      {%  for block in section.blocks %}
       {%  assign collection = collections[block.settings.collection] %}
        
        <li class="collection-switcher-img">
          <a href="#tabs-{{ collection.id }}">
          <div class="tabs-img-block">
            <img src="{{ collection.featured_image | image_url}}" width="100">
          </div>
          <p>{{ collection.title  }}</p>
          </a>
        </li>
        
        {%  capture content  %}
            <div id="tabs-{{ collection.id }}">
              <ul class="grid product-grid grid--2-col-tablet-down  grid--4-col-desktop">
               {%- for product in block.settings.collection.products limit: 20 -%}
               <li class="grid__item scroll-trigger animate--slide-in">
                  {% render 'card-product',
                    card_product: product,
                    media_aspect_ratio: section.settings.image_ratio,
                    image_shape: section.settings.image_shape,
                    show_secondary_image: section.settings.show_secondary_image,
                    show_vendor: section.settings.show_vendor,
                    show_rating: section.settings.show_rating,
                    show_quick_add: section.settings.enable_quick_add,
                    section_id: section.id
                  %}
               </li>
              {%- endfor -%}
              </ul>
             {%  if block.settings.viewall %}
               <div class="center collection__view-all scroll-trigger animate--slide-in">
                 <a class="button" href="{{ block.settings.collection.url }}"> View all </a>
               </div>
               {%  endif  %}
            </div>
        {%  endcapture %}
        {%  assign tabContent = tabContent | append: content %}
      {%  endfor %}  
      </ul>   
      {{ tabContent }}
    </div>  
  </div> 
    <script>
  $( function() {
    {%  if section.settings.useslider %}
    function tabSlider(){
          $('.tabs .product-grid.slick-initialized ').slick('unslick');
          $('.tabs .product-grid ').slick({
            dots: false,
            arrows: true,
            infinite: false,
            speed: 300,
            slidesToShow: 4,
            slidesToScroll: 4,
            responsive: [
              {
                breakpoint: 1024,
                settings: {
                  slidesToShow: 3,
                  slidesToScroll: 3,
                  infinite: true
                }
              },
              {
                breakpoint: 600,
                settings: {
                  slidesToShow: 2,
                  slidesToScroll: 2
                }
              },
              {
                breakpoint: 480,
                settings: {
                  slidesToShow: 1,
                  slidesToScroll: 1
                }
              }
            
            ]
          });
    }
        {%  endif %}
    $( "#tabs" ).tabs({
      create: function( event, ui ) {
         {%  if section.settings.useslider %}
       tabSlider()
            {%  endif %}
      },
      activate: function( event, ui ) {
        {%  if section.settings.useslider %}
       tabSlider()
            {%  endif %}
      }
    });
  
  } );
  </script>
  <style>
    .tabs .slick-track .grid__item  {
      padding: 0 5px;
    }
    .tabs .slick-next {
      right: 0;
    }
    .tabs .slick-prev {
      left: 0;
    }
    .tabs .slick-next,.tabs .slick-prev {
      transform: none;
      top: -20px;
    }
    .tabs .slick-next::before,.tabs .slick-prev::before { color: #000;}
    .tabs .slick-slider{ margin: 0 -5px;}
    .tabs .collection__view-all  a{ color: white!important;}
    .tabs { background: none!important;border: none!important}
    .tabs.ui-tabs .ui-tabs-nav {
      background: none;
      padding: 0;
      display: flex;
      justify-content: center;
      border: none;
      align-items: center;
    }
    .tabs-section h2 {
      text-align: center;
    }
    .tabs.ui-tabs .ui-tabs-nav li {
      border: none;
      background: none;
    }
    .tabs.ui-tabs .ui-tabs-nav li  a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #ddd;
      padding: 5px 10px;
      border-radius: 50px;
      text-align: center;
    }
    .tabs.ui-tabs .ui-tabs-nav li p {
      padding: 5px 10px;
      border: 1px solid black;
      color: black;
      text-align: center;
      border-radius: 5px;
    }
    .tabs.ui-tabs .ui-tabs-nav li.ui-tabs-active p {
      background: grey;
      padding: 5px 10px;
      border-radius: 5px;
      border: 1px solid;
      color: white;
    } 
    .tabs-img-block {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 1px solid black;
    }
    .tabs-img-block img {
      border-radius: 50%;
      width: 100%;
      height: 100%; 
      object-fit: contain;
    }
    .tabs-section .grid--4-col-desktop .grid__item {
      max-width: 100%;
    }
    @media only screen and (max-width: 800px) {
      .tabs.ui-tabs .ui-tabs-nav {
        overflow: scroll;
        justify-content: flex-start;
      }
      .ui-tabs-nav {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
      }
      .ui-tabs-nav::-webkit-scrollbar { 
          display: none;  /* Safari and Chrome */
      }
    }
  </style>
{%  endif %}  
{% schema %}
  {
    "name": "Tabs",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Title"
      },
       {
        "type": "checkbox",
        "id": "useslider",
        "label": "Use slider",
        "default": true
      }
    ],
    "blocks": [
    {
      "type": "tab",
      "name": "Tab",
      "limit": 15,
    
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection"
      },
      {
        "type": "checkbox",
        "id": "viewall",
        "label": "Show view all",
        "default": true
      }
    ]
  
    }
  ],
    "presets": [
    {
      "name": "Tabs",
      "blocks": []
    }
  ]
  }
{% endschema %}