Filters in accordion (Brooklyn theme) not working on mobile

Solved
Highlighted
Tourist
20 0 0

Hello everyone,

I am currently doing a wine shop and need 4 different filters with each time several values. To make it work I followed this Shopify's community post. I positioned it in four responsive columns using a responsive calculator found here. It takes a lot of place on collection page so I decided to place it in an accordion, following this w3 basic tutorial.

Here is the shop's page I am asking you help for (yes it's a lot of links but I assume it will need you to understand)

For some unknown reason it is not working under 770px width, I think it's related with grid's breakpoints at 769px. Also, I would like it to stay opened at refresh if at least 1 filter-tag is active. 

Thanks by advance for your help


 

 

 

0 Likes
Highlighted
Shopify Partner
151 23 31

@Mayo Hi there,

Unfortunately, I can't find the accordion feature at your Collection page: http://prntscr.com/t48r9n  Can you please clarify, where exactly I can see it.

Perhaps, you had provided the accordion feature for the unpublished one theme?

 

0 Likes
Highlighted
Tourist
20 0 0

My bad, I shared the published theme, here is the work in progress in a preview : https://ah6d1j1damw57h7p-16003519.shopifypreview.com/collections/fj-les-vins-du-mas-foulaquier

0 Likes
Highlighted
Shopify Partner
151 23 31

This is an accepted solution.

@Mayo,

Thank you for the preview link.

1. To show the filter for Mobile, you have to remove the CSS rules placed in the "collection-template.liquid" section of your theme. Here the code that have to be removed:

     @media screen and (max-width: 769px) {
       .filtres {
         display: none;
       }
     }

2. To leave the filter opened if at least one tag is checked, kindly replace next ones HTML code in the "collection-template.liquid" section:

 - The Button code <button class="accordion">Filtres </button> have to be replaced with the code <button class="accordion{% if collection.tags != collection.all_tags %} active{% endif %}">Filtres </button>

 - The HTML tag <div class="panel filtres"> have to be replaced with the code <div class="panel filtres" {% if collection.tags != collection.all_tags %} style="max-height: none;"{% endif %}>

But kindly be aware, that the "FIlter opened" solution will not work for tags that cover all products of a collection.

0 Likes
Highlighted
Tourist
20 0 0

@SA It works perfectly thanks ! 

0 Likes
Highlighted
Tourist
20 0 0

Hey @Sasha2 

I tried to work a bit on those filters and the panel do not stay open anymore when a filter is active. I may have broke the solution you gave. As I am not understanding, I am refering to you if you have a few minutes to look the code...I am sure you will find the problem quickly, but for myself I am struggling. Thanks a lot. Here is the collection template code : 

<!-- /templates/collection.liquid -->

    <!-- FJ DESIGN | LOCAL CSS -->

   <style>
   
     <!-- FJ DESIGN | GRID CSS -->
     
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0;
	margin: 0;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.6%;
}
.span_2_of_4 {
	width: 49.2%;
}
.span_1_of_4 {
	width: 23.8%;
}

/*  GO FULL WIDTH BELOW 769 PIXELS */
@media only screen and (max-width: 769px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
} 
    
    <!-- FJ DESIGN | W3 Accordion CSS -->
.accordion {
  color: #002142;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  text-align: center;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: white;
}

.accordion:after {
  content: '\002B';
  color: #002142;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
     
     .titre_bloc {
       font-size: 16px;
      
     }
     
     @media screen and (max-width: 769px) {
            .titre_bloc {
              margin-top: 20px;
     }
}

     .tags {
       font-size: 12px;
       
     }
</style>

{%- if section.settings.show_collection_image and collection.image -%}
  <div class="collection-hero">
    <noscript>
      <div class="collection-hero__image-no-js" style="background-image:url({{ collection.image | img_url: '2048x2048' }});"></div>
    </noscript>
    {%- assign img_url = collection.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
    {%- comment -%}
      If the collection.image height is < 70% of its width on mobile or < 45% on desktop,
      we crop the container to make sure it's the same height as the image.
    {%- endcomment -%}
    {%- assign height_width_ratio = 100 | divided_by: collection.image.aspect_ratio | floor -%}
    {%- if height_width_ratio < 70 -%}
      <style>
        {%- if height_width_ratio < 45 -%}
          .collection-hero__image-wrapper::after {
            padding-bottom: {{ height_width_ratio }}%;
          }
        {%- else -%}
          @media screen and (max-width: 768px) {
            .collection-hero__image-wrapper::after {
              padding-bottom: {{ height_width_ratio }}%;
            }
          }
        {%- endif -%}
      </style>
    {%- endif -%}
    <div class="collection-hero__image-wrapper">
      <img class="collection-hero__image lazyload"
        src="{{ collection.image | img_url: '300x' }}"
        data-src="{{ img_url }}"
        data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
        data-aspectratio="{{ collection.image.aspect_ratio }}"
        data-sizes="auto"
        data-parent-fit="cover"
        alt="{{ collection.image.alt | escape }}">
    </div>
  </div>
{%- endif -%}

<div id="CollectionSection" data-section-id="{{ section.id }}" data-section-type="collection-template" data-grid-type="{{ section.settings.collection_products_grid }}">
  {%- paginate collection.products by 12 -%}
  <header class="section-header text-center">
    <h1>{{ collection.title }}</h1>
    <hr class="hr--small">
    {%- if collection.description != blank -%}
      <div class="grid">
        <div class="grid__item">
          <div class="rte">
            {{ collection.description }}
          </div>
        </div>
      </div>
    {%- endif -%}

    <div class="grid--full collection-sorting{% if section.settings.collection_sort_enable %} collection-sorting--enabled{% endif %}">
      {%- if section.settings.collection_sort_enable -%}
        {%- include 'collection-sorting' -%}
      {%- endif -%}
    </div>
<!-- FJ DESIGN : TAGS FILTERS -->
    {%- if section.settings.collection_tags_enable -%}
      {%- if collection.all_tags.size > 0 -%}
        {%- if section.settings.collection_sort_enable -%}
          <hr class="hr--small hr--clear">
        {%- endif -%}
  
<!-- FJ DESIGN | Méthode http://www.responsivegridsystem.com/calculator/ GRID + W3 accordion + Sasha2-->
<button class="accordion{% if collection.tags != collection.all_tags %} active{% endif %}" style="font-size: 16px;">Filtres</button>
 <div class="panel"{% if collection.tags != collection.all_tags %}style="max-height: none;"{% endif %}>    
   <div class="section group">
	<div class="col span_1_of_4">
	 <h3 class="titre_bloc">Style</h3>
        <ul class="tags tags--collection inline-list">
          {% comment %}
            Used for the catalog collection (/collections/all) and product collections (collections/{collection.handle})
          {% endcomment %}
          
          {%- for tag in collection.all_tags -%}
            {%- if tag contains 'Style' -%}
              {% assign tagName = tag | remove: 'Style' %}
                {% if current_tags contains tag %}
              <li class="tag--active">
                {{ tagName | link_to_remove_tag: tag }}
              </li>
             {% else %}
              <li>
                {% comment %}
                  Use link_to_add_tag if you want to allow filtering
                  by multiple tags
                {% endcomment %}
                {{ tagName | link_to_add_tag: tag }}
              </li>
            {% endif %} 
         {% endif %}
        {% endfor %}
        </ul>
	</div>
	<div class="col span_1_of_4">
	<h3 class="titre_bloc">Vinification</h3>
        <ul class="tags tags--collection inline-list">
          {% comment %}
            Used for the catalog collection (/collections/all) and product collections (collections/{collection.handle})
          {% endcomment %}

          
          {%- for tag in collection.all_tags -%}
            {%- if tag contains 'Vinif' -%}
              {% assign tagName = tag | remove: 'Vinif' %}
                {% if current_tags contains tag %}
              <li class="tag--active">
                {{ tagName | link_to_remove_tag: tag }}
              </li>
             {% else %}
              <li>
                {% comment %}
                  Use link_to_add_tag if you want to allow filtering
                  by multiple tags
                {% endcomment %}
                {{ tagName | link_to_add_tag: tag }}
              </li>
            {% endif %} 
         {% endif %}
        {% endfor %}
        </ul>
	</div>
	<div class="col span_1_of_4">
	<h3 class="titre_bloc">Terroir</h3>
        <ul class="tags tags--collection inline-list">
          {% comment %}
            Used for the catalog collection (/collections/all) and product collections (collections/{collection.handle})
          {% endcomment %}
          
          
          {%- for tag in collection.all_tags -%}
            {%- if tag contains 'Terroir' -%}
              {% assign tagName = tag | remove: 'Terroir' %}
                {% if current_tags contains tag %}
              <li class="tag--active">
                {{ tagName | link_to_remove_tag: tag }}
              </li>
             {% else %}
              <li>
                {% comment %}
                  Use link_to_add_tag if you want to allow filtering
                  by multiple tags
                {% endcomment %}
                {{ tagName | link_to_add_tag: tag }}
              </li>
            {% endif %} 
         {% endif %}
        {% endfor %}
        </ul>
	</div>
	<div class="col span_1_of_4">
	<h3 class="titre_bloc">Appellation</h3>
        <ul class="tags tags--collection inline-list">
          {% comment %}
            Used for the catalog collection (/collections/all) and product collections (collections/{collection.handle})
          {% endcomment %}
          
          {%- for tag in collection.all_tags -%}
            {%- if tag contains 'Appell' -%}
              {% assign tagName = tag | remove: 'Appell' %}
                {% if current_tags contains tag %}
              <li class="tag--active">
                {{ tagName | link_to_remove_tag: tag }}
              </li>
             {% else %}
              <li>
                {% comment %}
                  Use link_to_add_tag if you want to allow filtering
                  by multiple tags
                {% endcomment %}
                {{ tagName | link_to_add_tag: tag }}
              </li>
            {% endif %} 
          {% endif %}
        {% endfor %}
        </ul>
	</div> 
  <h3 class="titre_bloc">
    <a style="color: #bf311a" href="{% if collection.url == blank %}{{ routes.all_products_collection_url }}{% else %}{{ collection.url }}{% endif %}">
    Réinitialiser</a></h3>
    </div>
</div>

  

    {%- if section.settings.collection_tags_enable -%}
      <hr class="hr--small hr--clear">
    {%- endif -%}
  </header>
  
  {%- if section.settings.collection_products_grid == 'collage' -%}
    <div class="grid grid-collage">
      {% comment %}
        Loop through our products in the current collection.
        See the snippet 'snippets/product-grid-collage.liquid'.

        `is_reverse_row__product`, `three_row_index__product`, `collection_product_count`, and `divisible_by_three__product` are
        all used by 'snippets/product-grid-collage.liquid'
      {% endcomment %}
      {%- assign is_reverse_row__product = false -%}
      {%- assign three_row_index__product = 0 -%}
      {%- assign collection_product_count__product = collection.products.size -%}
      {%- assign divisible_by_three__product = collection_product_count__product | modulo:3 -%}
      {%- for product in collection.products -%}
        {%- include 'product-grid-collage' -%}
      {%- else -%}

        {%- if shop.products_count == 0 -%}
          {% comment %}
            Add default products to help with onboarding for collections/all only
          {% endcomment %}
          {% include 'onboarding-featured-products' -%}
        {%- else -%}
          {% comment %}
            If collection exists but is empty, display message
          {% endcomment %}
          <div class="grid__item text-center">
            <p>{{ 'collections.general.no_matches' | t }}</p>
          </div>
        {%- endif -%}
      {%- endfor -%}
    </div>
  {%- elsif section.settings.collection_products_grid == 'grid' -%}
    <div class="grid-uniform">
      {%- assign grid_item_width = 'medium--one-half large--one-third' -%}
      {%- for product in collection.products -%}
        {%- include 'product-grid-item' -%}
      {%- else -%}
        {%- if collection.handle == 'all' -%}
          {% comment %}
            Add default products to help with onboarding for collections/all only
          {% endcomment %}
          {%- include 'onboarding-featured-products' -%}
        {%- else -%}
          {% comment %}
            If collection exists but is empty, display message
          {% endcomment %}
          <div class="grid__item text-center">
            <p>{{ 'collections.general.no_matches' | t }}</p>
          </div>
        {%- endif -%}
      {%- endfor -%}
    </div>
  {%- endif -%}
  
  {%- if paginate.pages > 1 -%}
    {%- include 'pagination' -%}
    {%- endif -%}
  {% endif %}
  {% endif %}
  {%- endpaginate -%}
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

{% schema %}
{
  "name": {
    "da": "Kollektionssider",
    "de": "Kategorieseiten",
    "en": "Collection pages",
    "es": "Páginas de colección",
    "fi": "Kokoelman sivut",
    "fr": "Pages de collection",
    "hi": "कलेक्शन पेज",
    "it": "Pagine di collezioni",
    "ja": "コレクションページ",
    "ko": "컬렉션 페이지",
    "nb": "Samlingssider",
    "nl": "Collectiepagina's",
    "pt-BR": "Páginas de coleções",
    "pt-PT": "Páginas de coleções",
    "sv": "Produktseriesidor",
    "th": "หน้าคอลเลกชัน",
    "zh-CN": "产品系列页面",
    "zh-TW": "商品系列頁面"
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "show_collection_image",
      "label": {
        "da": "Vis kollektionsbillede",
        "de": "Kategorie-Foto anzeigen",
        "en": "Show collection image",
        "es": "Mostrar imagen de la colección",
        "fi": "Näytä kokoelman kuva",
        "fr": "Afficher l'image de la collection",
        "hi": "कलेक्शन इमेज दिखाएं",
        "it": "Mostra immagine collezione",
        "ja": "コレクションの画像を表示する",
        "ko": "컬렉션 이미지 표시",
        "nb": "Vis samlingsbilde",
        "nl": "Collectieafbeelding weergeven",
        "pt-BR": "Exibir imagem da coleção",
        "pt-PT": "Mostrar imagem da coleção",
        "sv": "Visa produktseriebilder",
        "th": "แสดงรูปภาพคอลเลกชัน",
        "zh-CN": "显示产品系列图片",
        "zh-TW": "顯示商品系列圖片"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "collection_sort_enable",
      "label": {
        "da": "Aktivér sortering af kollektioner",
        "de": "Kategoriesortierung aktivieren",
        "en": "Enable collection sorting",
        "es": "Habilitar la la función ordenar colecciones",
        "fi": "Ota kokoelman lajittelu käyttöön",
        "fr": "Activer le tri de la collection",
        "hi": "कलेक्शन क्रमबद्ध करना सक्षम करें",
        "it": "Abilita ordinamento collezione",
        "ja": "コレクションの並べ替えを有効にする",
        "ko": "컬렉션 정렬 사용",
        "nb": "Aktiver sortering av samlinger",
        "nl": "Sorteren op collectie inschakelen",
        "pt-BR": "Habilitar a organização de coleções",
        "pt-PT": "Ativar ordenação de coleção",
        "sv": "Aktivera produktseriesortering",
        "th": "เปิดใช้การเรียงลำดับคอลเลกชัน",
        "zh-CN": "启用产品系列排序",
        "zh-TW": "啟用商品系列排序功能"
      }
    },
    {
      "type": "checkbox",
      "id": "collection_tags_enable",
      "label": {
        "da": "Aktivér tagfiltrering",
        "de": "Tag-Filtern erlauben",
        "en": "Enable tag filtering",
        "es": "Habilitar filtro de etiquetas",
        "fi": "Ota tunnisteiden suodatus käyttöön",
        "fr": "Activer le filtrage par balises",
        "hi": "टैग फ़िल्टर करना सक्षम करें",
        "it": "Attiva filtro tag",
        "ja": "タグでの絞り込みを有効にする",
        "ko": "태그 필터링 사용",
        "nb": "Aktiver taggfiltrering",
        "nl": "Filteren op tags inschakelen",
        "pt-BR": "Habilitar filtragem de tag",
        "pt-PT": "Ativar filtragem por etiqueta",
        "sv": "Aktivera taggfiltrering",
        "th": "เปิดใช้การกรองแท็ก",
        "zh-CN": "启用标签筛选",
        "zh-TW": "啟用標籤篩選功能"
      }
    },
    {
      "type": "header",
      "content": {
        "da": "Produkter",
        "de": "Produkte",
        "en": "Products",
        "es": "Productos",
        "fi": "Tuotteet",
        "fr": "Produits",
        "hi": "उत्पाद",
        "it": "Prodotti",
        "ja": "商品管理",
        "ko": "제품",
        "nb": "Produkter",
        "nl": "Producten",
        "pt-BR": "Produtos",
        "pt-PT": "Produtos",
        "sv": "Produkter",
        "th": "สินค้า",
        "zh-CN": "产品",
        "zh-TW": "產品"
      }
    },
    {
      "type": "select",
      "id": "collection_products_grid",
      "label": {
        "da": "Gittertypografi",
        "de": "Rasterstil",
        "en": "Grid style",
        "es": "Estilo de cuadrícula",
        "fi": "Ruudukon tyyli",
        "fr": "Style de grille",
        "hi": "ग्रिड स्टाइल",
        "it": "Stile griglia",
        "ja": "グリッドスタイル",
        "ko": "그리드 스타일",
        "nb": "Rutenettstil",
        "nl": "Rasterstijl",
        "pt-BR": "Estilo da grade",
        "pt-PT": "Estilo da grelha",
        "sv": "Rutnätsstil",
        "th": "สไตล์กริด",
        "zh-CN": "网格样式",
        "zh-TW": "網格樣式"
      },
      "options": [
        {
          "value": "collage",
          "label": {
            "da": "Collage",
            "de": "Collage",
            "en": "Collage",
            "es": "Collage",
            "fi": "Kollaasi",
            "fr": "Collage",
            "hi": "कोलाज",
            "it": "Collage",
            "ja": "コラージュ",
            "ko": "콜라주",
            "nb": "Fotomontasje",
            "nl": "Collage",
            "pt-BR": "Colagem",
            "pt-PT": "Colagem",
            "sv": "Kollage",
            "th": "ภาพตัดแปะ",
            "zh-CN": "拼贴画",
            "zh-TW": "拼貼"
          }
        },
        {
          "value": "grid",
          "label": {
            "da": "Gitter",
            "de": "Raster",
            "en": "Grid",
            "es": "Cuadrícula",
            "fi": "Ruudukko",
            "fr": "Grille",
            "hi": "ग्रिड",
            "it": "Griglia",
            "ja": "グリッド",
            "ko": "그리드",
            "nb": "Rutenett",
            "nl": "Raster",
            "pt-BR": "Grade",
            "pt-PT": "Grelha",
            "sv": "Rutnät",
            "th": "กริด",
            "zh-CN": "网格",
            "zh-TW": "網格"
          }
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "product_vendor_enable",
      "label": {
        "da": "Vis produktleverandør",
        "de": "Produktverkäufer anzeigen",
        "en": "Show product vendor",
        "es": "Mostrar proveedor del producto",
        "fi": "Näytä tuotteen myyjä",
        "fr": "Afficher le distributeur du produit",
        "hi": "उत्पाद विक्रेता दिखाएं",
        "it": "Indica fornitore prodotto",
        "ja": "商品の販売元を表示する",
        "ko": "제품 공급 업체 표시",
        "nb": "Vis produktleverandør",
        "nl": "Productleverancier weergeven",
        "pt-BR": "Exiba o fornecedor do produto",
        "pt-PT": "Mostrar o fornecedor do produto",
        "sv": "Visa produktsäljare",
        "th": "แสดงผู้ขายสินค้า",
        "zh-CN": "显示产品厂商",
        "zh-TW": "顯示產品廠商"
      }
    }
  ]
}
{% endschema %}
0 Likes
Highlighted
Shopify Partner
151 23 31

@Mayo 

Can you please share the preview link to the theme, where you are use the updated code?

0 Likes
Highlighted
Tourist
20 0 0
Highlighted
Shopify Partner
151 23 31

Hello @Mayo 

I have used the code shared by you in my development store, and it works.

To diagnose the issue, I have sent to your store's email the request from my Shopify collaboration account. Kindly accept my request, so I will able to review a code of your theme directly.

0 Likes
Highlighted
Tourist
20 0 0

Ok @Sasha2 I have to check the shop owner for the authorization I am coming back to you quickly.

0 Likes