Landing page with products: Filters not working.

Highlighted
Tourist
31 0 2

Good evening, I've introduced the product snippet into a page liquid to show at the end of the page the products . The problem is that the filters on the sidebar do not work.

here is the link of the page: https://www.fermento24.com/pages/landing

 

and here is the liquid of the page:

Click to expand...
<div class="grid">

  <div class="grid__item">

    <div class="section-header">
      <h1 class="section-header--title" style="text-align:center; color:#2A4735; margin-top:30px;"><a href="https://www.fermento24.com/collections/all?view=24" style="color:#2A4735;">{{ page.title }}</a></h1>
    </div>

    <div class="rte">
      {{ page.content }}

    </div>

  </div>

</div>

{% if settings.collection_sidebar_use == "left_sidebar" or  settings.collection_sidebar_use == "right_sidebar" %}
{% assign mid_width = "grid__item wide--three-quarters post-large--one-whole" %}
{% else %}
{% assign mid_width = "grid__item" %}
{% endif %}

<!-- HC - Filter changes - 15 July '20 -->
<div class="hc-mobilebutton">
	<div class="hcbackground"></div>
</div>

<div class="grid__item">
  <div class="collection-products position-change">
    
    {% if settings.collection_sidebar_use == "left_sidebar" %}    
    <div class="grid__item wide--one-quarter post-large--one-quarter left-sidebar">
      {% include 'collection-sidebar' %}
    </div>
    {% endif %}
    <div class="{{ mid_width }} sidebar-hidden second"> 
       {% if settings.collection_sidebar_use == "full_width" %}
      {% include 'collection-sidebar' %}
      {% endif %}
      <div class="collection-list">
        <div class="grid-uniform grid-link__container col-main">            
          {% paginate collections.all.products by 24 %}   
          {% include 'tool-grid' %} 
          
          <!-- HC - Filter changes - 15 July '20 -->
          <div class="hc-mobilebutton">
             <button id="openfilter" class="btn" style="background-color: #2a4735; color: #fff; border-color: #2a4735;">FILTRI</button>
          </div>
          
          <div class="products-grid-view">
          {% if collections.all.products.size > 0 %}      
          <ul>
            {% case settings.collection_grid %}
           {% when '2' %}
            {%- assign grid_item_width = 'wide--one-half post-large--one-half large--one-half medium--one-half small-grid__item' -%}            
            {% when '3' %}
            {%- assign grid_item_width = 'wide--one-third post-large--one-third large--one-half medium--one-half small-grid__item' -%}            
            {% when '4' %}
            {%- assign grid_item_width = 'wide--one-quarter post-large--one-third large--one-half medium--one-half small-grid__item' -%}            
            {% when '5' %}
            {%- assign grid_item_width = 'wide--one-fifth post-large--one-quarter large--one-half medium--one-half small-grid__item' -%}            
            {% endcase %}
            {% for product in collections.all.products %}
            {% include 'product-grid-item',grid_item_width: grid_item_width %}
            {% endfor %}
          </ul>
          {% else %}
          <div class="grid__item">
            <p><em>{{ 'home_page.onboarding.no_products_html' | t }}</em></p>
          </div>
          {% endif %}
          </div>
          {% if paginate.pages > 1 %}
          <div class="text-center padding">
            {% include 'pagination-custom' %}
          </div>
          {% endif %}
          {% endpaginate %}  
        </div>
      </div>
    </div>
    {% if settings.collection_sidebar_use == "right_sidebar" %}    
    <div class="grid__item wide--one-quarter post-large--one-quarter right-sidebar">
      {% include 'collection-sidebar' %}
    </div>
    {% endif %}
   
</div>
</div>   
   <div class="about-us">

<div id="shopify-section-about-page-team" class="shopify-section">
<div class="grid-uniform team-block">
<div class="container">

<div class="main-heading" style="margin-bottom:100px;">
<h2 class="flex-title"style="color:#000">In tanti già hanno approfittato del nostro fantastico servizio delivery</h2>
<h4 style="color:#c1001c"></h4>
</div>
    
<ul class="ch-grid">

<li class="grid__item wide--one-quarter post-large--one-half large--one-half medium--one-whole wow fadeInUp">
<div class="team-section">  
<div class="ch-item" style="background-image: url('https://i.imgur.com/Wyt8HL3.png');">	
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1" style="background-image: url('https://i.imgur.com/Wyt8HL3.png');"></div>
<div class="ch-info-back">
<div class="team-detail">
<ul class="ourteam-social rounded-border">
<li><a class="fa fa-instagram" href="https://www.instagram.com/italian_wines/" title="Instagram"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<h6>Stefano Quaglierini</h6>
<span>"Una selezione accurata, di nicchia, ma allo stesso tempo rappresentativa di tutta l'Italia sia in qualità sia in tipicità delle bottiglie scelte"</span>
</div>
</li>

<li class="grid__item wide--one-quarter post-large--one-half large--one-half medium--one-whole wow fadeInUp">
<div class="team-section">  
<div class="ch-item" style="background-image: url('https://i.imgur.com/LAWdqOp.png');">	
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1" style="background-image: url('https://i.imgur.com/LAWdqOp.png');"></div>
<div class="ch-info-back">
<div class="team-detail">
<ul class="ourteam-social rounded-border">
<li><a class="fa fa-instagram" href="https://www.instagram.com/j.giannini_wine/" title="Instagram"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<h6>Jimmy  Giannini</h6>
<span>“Un assortimento di vino in continua evoluzione, con un inserimento quotidiano di nuove proposte.<br>
Consegna rapida!”</span>
</div>
</li>
    
<li class="grid__item wide--one-quarter post-large--one-half large--one-half medium--one-whole wow fadeInUp">
<div class="team-section">  
<div class="ch-item" style="background-image: url('https://i.imgur.com/ALwAuhd.png');">	
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1" style="background-image: url('https://i.imgur.com/ALwAuhd.png');"></div>
<div class="ch-info-back">
<div class="team-detail">
<ul class="ourteam-social rounded-border">
<li><a class="fa fa-instagram" href="https://www.instagram.com/enoblogger/" title="Instagram"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<h6>Emanuele Trono</h6>
<span>“Fermento 24 propone una selezione di nicchia e molto curata, per veri Winelover. Servizio impeccabile e molto veloce, Ecommerce davvero consigliato per gli amanti del vino”</span>
</div>
</li>
 <li class="grid__item wide--one-quarter post-large--one-half large--one-half medium--one-whole wow fadeInUp">
<div class="team-section">  
<div class="ch-item" style="background-image: url('https://i.imgur.com/FgQp5VD.png');">	
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1" style="background-image: url('https://i.imgur.com/FgQp5VD.png');"></div>
<div class="ch-info-back">
<div class="team-detail">
<ul class="ourteam-social rounded-border">
<li><a class="fa fa-instagram" href="https://www.instagram.com/wine_salad/" title="Instagram"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<h6>Clara e Nick</h6>
<span>“Una selezione di bottiglie ricercata ed originale, un favoloso rapporto qualità-prezzo e anche un servizio di spedizione fantastico! Cosa volere di più?! 5 stelle ”</span>
</div>
</li>
    </ul>
    <style>
      .team-block .ourteam-social a.fa-facebook:hover { background: #3b5998;}
      .team-block .ourteam-social a.fa-twitter:hover { background: #4099ff;}
      .team-block .ourteam-social a.fa-google-plus:hover { background: #d34836;}
      .ourteam { position:relative;}
      .ourteam .ourteam-details {transition: 0.3s linear;}
      .team-section h6{color: #000000;}
      .team-section span{color: #848484;}
      .team-block .ourteam-social a {  border:none;color:#ffffff;}
      .team-block .ourteam-social a:hover{color:#ffffff;}
      .team-block .ch-info .ch-info-back {background-color: #2a4734;}
      .about-us .ch-info>div { box-shadow:0 0 0 2px #ffffff; }
    </style>
  </div>
</div>
</div>
</div>

 

0 Likes