Skip to content

Instantly share code, notes, and snippets.

@joeybab3

joeybab3/search-section.liquid

Last active April 2, 2024 02:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save joeybab3/0e0beb42ecf7fbe1e84818a7e18ae21e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save joeybab3/0e0beb42ecf7fbe1e84818a7e18ae21e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. joeybab3 revised this gist Mar 26, 2024. 1 changed file with 9 additions and 1 deletion.
    10 changes: 9 additions & 1 deletion search-section.liquid
    View file
    Original file line number Diff line number Diff line change
    @@ -67,7 +67,9 @@
    <div class="template-search__header page-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
    {% if section.settings.show_title %}
    <h1 class="h2 center">
    {%- if search.performed -%}
    {%- if section.settings.custom_title != blank -%}
    {{- section.settings.custom_title -}}
    {%- elsif search.performed -%}
    {{- 'templates.search.title' | t -}}
    {%- else -%}
    {{- 'general.search.search' | t -}}
    @@ -350,6 +352,12 @@
    "default": true,
    "label": "Show Title"
    },
    {
    "type": "text",
    "id": "custom_title",
    "label": "Custom Title",
    "default": "Search"
    },
    {
    "type": "header",
    "content": "t:sections.main-search.settings.header__1.content"
  2. joeybab3 created this gist Mar 26, 2024.
    543 changes: 543 additions & 0 deletions search-section.liquid
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,543 @@
    {{ 'template-collection.css' | asset_url | stylesheet_tag }}
    {{ 'component-card.css' | asset_url | stylesheet_tag }}
    {{ 'component-price.css' | asset_url | stylesheet_tag }}
    {{ 'component-search.css' | asset_url | stylesheet_tag }}

    {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
    {{ 'component-facets.css' | asset_url | stylesheet_tag }}
    <script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
    {%- endif -%}

    {% if section.settings.image_shape == 'blob' %}
    {{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
    {%- endif -%}

    <script src="{{ 'main-search.js' | asset_url }}" defer="defer"></script>

    <style>
    .template-search__header {
    margin-bottom: 3rem;
    }
    .template-search__search {
    margin: 0 auto 3.5rem;
    max-width: 74.1rem;
    }
    .template-search__search .search {
    margin-top: 3rem;
    }
    .template-search--empty {
    padding-bottom: 18rem;
    }
    @media screen and (min-width: 750px) {
    .template-search__header {
    margin-bottom: 5rem;
    }
    }
    .search__button .icon {
    height: 1.8rem;
    }
    </style>

    {%- liquid
    assign sort_by = search.sort_by | default: search.default_sort_by
    assign terms = search.terms | escape
    assign search_url = '?q=' | append: terms | append: '&options%5Bprefix%5D=last&sort_by=' | append: sort_by
    -%}

    {%- style -%}
    .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    }

    @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
    }
    }
    {%- endstyle -%}

    <div class="template-search{% unless search.performed and search.results_count > 0 %} template-search--empty{% endunless %} section-{{ section.id }}-padding">
    <div class="template-search__header page-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
    {% if section.settings.show_title %}
    <h1 class="h2 center">
    {%- if search.performed -%}
    {{- 'templates.search.title' | t -}}
    {%- else -%}
    {{- 'general.search.search' | t -}}
    {%- endif -%}
    </h1>
    {% endif %}
    <div class="template-search__search">
    {%- if settings.predictive_search_enabled -%}
    <predictive-search data-loading-text="{{ 'accessibility.loading' | t }}">
    {%- endif -%}
    <main-search>
    <form action="{{ routes.search_url }}" method="get" role="search" class="search">
    <div class="field">
    <input
    class="search__input field__input"
    id="Search-In-Template"
    type="search"
    name="q"
    value="{{ search.terms | escape }}"
    placeholder="{{ 'general.search.search' | t }}"
    {%- if settings.predictive_search_enabled -%}
    role="combobox"
    aria-expanded="false"
    aria-owns="predictive-search-results"
    aria-controls="predictive-search-results"
    aria-haspopup="listbox"
    aria-autocomplete="list"
    autocorrect="off"
    autocomplete="off"
    autocapitalize="off"
    spellcheck="false"
    {%- endif -%}
    >
    <label class="field__label" for="Search-In-Template">{{ 'general.search.search' | t }}</label>
    <input name="options[prefix]" type="hidden" value="last">

    {%- if settings.predictive_search_enabled -%}
    <div class="predictive-search predictive-search--search-template" tabindex="-1" data-predictive-search>
    {%- render 'loading-spinner', class: 'predictive-search__loading-state' -%}
    </div>

    <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
    {%- endif -%}

    <button
    type="reset"
    class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}"
    aria-label="{{ 'general.search.reset' | t }}"
    >
    <svg class="icon icon-close" aria-hidden="true" focusable="false">
    <use xlink:href="#icon-reset">
    </svg>
    </button>
    <button type="submit" class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
    <svg class="icon icon-search" aria-hidden="true" focusable="false">
    <use xlink:href="#icon-search">
    </svg>
    </button>
    </div>
    </form>
    </main-search>
    {%- if settings.predictive_search_enabled -%}
    </predictive-search>
    {%- endif -%}
    </div>
    {%- if search.performed -%}
    {%- unless section.settings.enable_filtering or section.settings.enable_sorting -%}
    {%- if search.results_count > 0 -%}
    <p role="status">
    {{ 'templates.search.results_with_count_and_term' | t: terms: search.terms, count: search.results_count }}
    </p>
    {%- endif -%}
    {%- endunless -%}
    {%- if search.results_count == 0 and search.filters == empty -%}
    <p role="status">{{ 'templates.search.no_results' | t: terms: search.terms }}</p>
    {%- endif -%}
    {%- endif -%}
    </div>
    {%- if search.performed -%}
    {%- if section.settings.enable_sorting
    and section.settings.filter_type == 'vertical'
    and search.filters != empty
    -%}
    <facet-filters-form class="facets facets-vertical-sort page-width small-hide no-js-hidden">
    <form class="facets-vertical-form" id="FacetSortForm">
    <div class="facet-filters sorting caption">
    <div class="facet-filters__field">
    <h2 class="facet-filters__label caption-large text-body">
    <label for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
    </h2>
    <div class="select">
    {%- assign sort_by = search.sort_by | default: search.default_sort_by -%}
    <select
    name="sort_by"
    class="facet-filters__sort select__select caption-large"
    id="SortBy"
    aria-describedby="a11y-refresh-page-message"
    >
    {%- for option in search.sort_options -%}
    <option
    value="{{ option.value | escape }}"
    {% if option.value == sort_by %}
    selected="selected"
    {% endif %}
    >
    {{ option.name | escape }}
    </option>
    {%- endfor -%}
    </select>
    {% render 'icon-caret' %}
    </div>
    </div>
    <noscript>
    <button type="submit" class="facets__button-no-js button button--secondary">
    {{ 'products.facets.sort_button' | t }}
    </button>
    </noscript>
    </div>

    <div class="product-count-vertical light" role="status">
    <h2 class="product-count__text text-body">
    <span id="ProductCountDesktop">
    {%- if search.results_count -%}
    {{ 'templates.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
    {%- elsif search.products_count == search.all_products_count -%}
    {{ 'products.facets.product_count_simple' | t: count: search.products_count }}
    {%- else -%}
    {{
    'products.facets.product_count'
    | t: product_count: search.products_count, count: search.all_products_count
    }}
    {%- endif -%}
    </span>
    </h2>
    {%- render 'loading-spinner' -%}
    </div>
    </form>
    </facet-filters-form>
    {%- endif -%}
    <div
    {% if section.settings.filter_type == 'vertical' %}
    class="facets-vertical page-width"
    {% endif %}
    >
    {%- if search.filters != empty -%}
    {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
    <aside
    aria-labelledby="verticalTitle"
    class="facets-wrapper{% unless section.settings.enable_filtering %} facets-wrapper--no-filters{% endunless %}{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}"
    id="main-search-filters"
    data-id="{{ section.id }}"
    >
    {% render 'facets',
    results: search,
    enable_filtering: section.settings.enable_filtering,
    enable_sorting: section.settings.enable_sorting,
    filter_type: section.settings.filter_type
    %}
    </aside>
    {%- endif -%}
    {%- endif -%}
    <div class="product-grid-container" id="ProductGridContainer">
    {%- if search.results.size == 0 and search.filters != empty -%}
    <div
    class="template-search__results collection collection--empty{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}"
    id="product-grid"
    data-id="{{ section.id }}"
    >
    <div class="loading-overlay gradient"></div>
    <div class="title-wrapper center">
    <h2 class="title title--primary">
    {{ 'sections.collection_template.empty' | t -}}
    <br>
    {{
    'sections.collection_template.use_fewer_filters_html'
    | t: link: search_url, class: 'underlined-link link'
    }}
    </h2>
    </div>
    </div>
    {%- else -%}
    <div
    class="template-search__results collection{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}"
    id="product-grid"
    data-id="{{ section.id }}"
    >
    <div class="loading-overlay gradient"></div>
    <ul
    class="grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop"
    role="list"
    >
    {%- for item in search.results -%}
    {% assign lazy_load = false %}
    {%- if forloop.index > 2 -%}
    {%- assign lazy_load = true -%}
    {%- endif -%}

    <li
    class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
    {% if settings.animations_reveal_on_scroll %}
    data-cascade
    {% endif %}
    >
    {%- case item.object_type -%}
    {%- when 'product' -%}
    {%- capture product_settings -%}{%- if section.settings.product_show_vendor -%}vendor,{%- endif -%}title,price{%- endcapture -%}
    {% render 'card-product',
    card_product: item,
    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,
    lazy_load: lazy_load
    %}
    {%- when 'article' -%}
    {% render 'article-card',
    article: item,
    show_image: true,
    show_date: section.settings.article_show_date,
    show_author: section.settings.article_show_author,
    show_badge: true,
    media_aspect_ratio: 1,
    lazy_load: lazy_load
    %}
    {%- when 'page' -%}
    <div class="article-card-wrapper card-wrapper underline-links-hover">
    <div
    class="card card--card card--text ratio color-{{ settings.blog_card_color_scheme }}"
    style="--ratio-percent: 100%;"
    >
    <div class="card__content">
    <div class="card__information">
    <h3 class="card__heading">
    <a href="{{ item.url }}" class="full-unstyled-link">
    {{ item.title | truncate: 50 | escape }}
    </a>
    </h3>
    </div>
    <div class="card__badge {{ settings.badge_position }}">
    <span class="badge color-{{ settings.color_schemes | first }}">
    {{- 'templates.search.page' | t -}}
    </span>
    </div>
    </div>
    </div>
    </div>
    {%- endcase -%}
    </li>
    {%- endfor -%}
    </ul>
    </div>
    {%- endif -%}
    </div>
    </div>
    {%- endif -%}
    </div>
    {% if section.settings.image_shape == 'arch' %}
    {% render 'mask-arch' %}
    {%- endif -%}

    {% schema %}
    {
    "name": "t:sections.main-search.name",
    "tag": "section",
    "class": "section",
    "settings": [
    {
    "type": "range",
    "id": "columns_desktop",
    "min": 1,
    "max": 5,
    "step": 1,
    "default": 4,
    "label": "t:sections.main-search.settings.columns_desktop.label"
    },
    {
    "type": "checkbox",
    "id": "show_title",
    "default": true,
    "label": "Show Title"
    },
    {
    "type": "header",
    "content": "t:sections.main-search.settings.header__1.content"
    },
    {
    "type": "select",
    "id": "image_ratio",
    "options": [
    {
    "value": "adapt",
    "label": "t:sections.main-search.settings.image_ratio.options__1.label"
    },
    {
    "value": "portrait",
    "label": "t:sections.main-search.settings.image_ratio.options__2.label"
    },
    {
    "value": "square",
    "label": "t:sections.main-search.settings.image_ratio.options__3.label"
    }
    ],
    "default": "adapt",
    "label": "t:sections.main-search.settings.image_ratio.label"
    },
    {
    "type": "select",
    "id": "image_shape",
    "options": [
    {
    "value": "default",
    "label": "t:sections.all.image_shape.options__1.label"
    },
    {
    "value": "arch",
    "label": "t:sections.all.image_shape.options__2.label"
    },
    {
    "value": "blob",
    "label": "t:sections.all.image_shape.options__3.label"
    },
    {
    "value": "chevronleft",
    "label": "t:sections.all.image_shape.options__4.label"
    },
    {
    "value": "chevronright",
    "label": "t:sections.all.image_shape.options__5.label"
    },
    {
    "value": "diamond",
    "label": "t:sections.all.image_shape.options__6.label"
    },
    {
    "value": "parallelogram",
    "label": "t:sections.all.image_shape.options__7.label"
    },
    {
    "value": "round",
    "label": "t:sections.all.image_shape.options__8.label"
    }
    ],
    "default": "default",
    "label": "t:sections.all.image_shape.label",
    "info": "t:sections.all.image_shape.info"
    },
    {
    "type": "checkbox",
    "id": "show_secondary_image",
    "default": false,
    "label": "t:sections.main-search.settings.show_secondary_image.label"
    },
    {
    "type": "checkbox",
    "id": "show_vendor",
    "default": false,
    "label": "t:sections.main-search.settings.show_vendor.label"
    },
    {
    "type": "checkbox",
    "id": "show_rating",
    "default": false,
    "label": "t:sections.main-search.settings.show_rating.label",
    "info": "t:sections.main-search.settings.show_rating.info"
    },
    {
    "type": "header",
    "content": "t:sections.main-collection-product-grid.settings.header__1.content"
    },
    {
    "type": "checkbox",
    "id": "enable_filtering",
    "default": true,
    "label": "t:sections.main-collection-product-grid.settings.enable_filtering.label",
    "info": "t:sections.main-collection-product-grid.settings.enable_filtering.info"
    },
    {
    "type": "select",
    "id": "filter_type",
    "options": [
    {
    "value": "horizontal",
    "label": "t:sections.main-collection-product-grid.settings.filter_type.options__1.label"
    },
    {
    "value": "vertical",
    "label": "t:sections.main-collection-product-grid.settings.filter_type.options__2.label"
    },
    {
    "value": "drawer",
    "label": "t:sections.main-collection-product-grid.settings.filter_type.options__3.label"
    }
    ],
    "default": "horizontal",
    "label": "t:sections.main-collection-product-grid.settings.filter_type.label",
    "info": "t:sections.main-collection-product-grid.settings.filter_type.info"
    },
    {
    "type": "checkbox",
    "id": "enable_sorting",
    "default": true,
    "label": "t:sections.main-collection-product-grid.settings.enable_sorting.label"
    },
    {
    "type": "header",
    "content": "t:sections.main-search.settings.header__2.content",
    "info": "t:sections.main-search.settings.header__2.info"
    },
    {
    "type": "checkbox",
    "id": "article_show_date",
    "default": true,
    "label": "t:sections.main-search.settings.article_show_date.label"
    },
    {
    "type": "checkbox",
    "id": "article_show_author",
    "default": false,
    "label": "t:sections.main-search.settings.article_show_author.label"
    },
    {
    "type": "header",
    "content": "t:sections.main-search.settings.header_mobile.content"
    },
    {
    "type": "select",
    "id": "columns_mobile",
    "default": "2",
    "label": "t:sections.main-search.settings.columns_mobile.label",
    "options": [
    {
    "value": "1",
    "label": "t:sections.main-search.settings.columns_mobile.options__1.label"
    },
    {
    "value": "2",
    "label": "t:sections.main-search.settings.columns_mobile.options__2.label"
    }
    ]
    },
    {
    "type": "header",
    "content": "t:sections.all.padding.section_padding_heading"
    },
    {
    "type": "range",
    "id": "padding_top",
    "min": 0,
    "max": 100,
    "step": 4,
    "unit": "px",
    "label": "t:sections.all.padding.padding_top",
    "default": 36
    },
    {
    "type": "range",
    "id": "padding_bottom",
    "min": 0,
    "max": 100,
    "step": 4,
    "unit": "px",
    "label": "t:sections.all.padding.padding_bottom",
    "default": 36
    }
    ],
    "presets": [
    {
    "name": "Search Section"
    }
    ]
    }
    {% endschema %}