PREDICTIVE SEARCH SHOPIFY 1️⃣0️⃣
------------------------------------------------------------------------------------------------------------------------
LAYOUT THEME LIQUID CHANGES
0) ADD CHANGES IN THEME CSS LIQUID
1)ADD SEARCH CSS FILE
2)ADD SEARCH CODE IN STRING AND SETTING
3) ADD CHANGES IN THEME JS
4)REMOVE SEARCH DRAWER CODE
5) CHANGE TEMPLATE SEARCH CODE
6) CHANGE SECTION HEADER CODE
READ MORE:
------------------------------------------------------------------------------------------------------------------------
<!doctype html> <html class="no-js" lang="{{ shop.locale }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="theme-color" content="{{ settings.color_button }}"> <link rel="canonical" href="{{ canonical_url }}"> {%- if settings.favicon != blank -%} <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png"> {%- endif -%} {%- capture seo_title -%} {%- if template == 'search' and search.performed == true -%} {{ 'general.search.heading' | t: count: search.results_count }}: {{ 'general.search.results_with_count' | t: terms: search.terms, count: search.results_count }} {%- else -%} {{ page_title }} {%- endif -%} {%- if current_tags -%} {%- assign meta_tags = current_tags | join: ', ' -%} – {{ 'general.meta.tags' | t: tags: meta_tags -}} {%- endif -%} {%- if current_page != 1 -%} – {{ 'general.meta.page' | t: page: current_page }} {%- endif -%} {%- assign escaped_page_title = page_title | escape -%} {%- unless escaped_page_title contains shop.name -%} – {{ shop.name }} {%- endunless -%} {%- endcapture -%} <title>{{ seo_title | strip }}</title> {%- if page_description -%} <meta name="description" content="{{ page_description | escape }}"> {%- endif -%} {% include 'social-meta-tags' %} {{ 'theme.scss.css' | asset_url | stylesheet_tag }} {{'search.css' | asset_url | stylesheet_tag }} <script> var theme = { strings: { addToCart: {{ 'products.product.add_to_cart' | t | json }}, soldOut: {{ 'products.product.sold_out' | t | json }}, unavailable: {{ 'products.product.unavailable' | t | json }}, regularPrice: {{ 'products.product.regular_price' | t | json }}, sale: {{ 'products.product.on_sale' | t | json }}, showMore: {{ 'general.filters.show_more' | t | json }}, showLess: {{ 'general.filters.show_less' | t | json }}, addressError: {{ 'sections.map.address_error' | t | json }}, addressNoResults: {{ 'sections.map.address_no_results' | t | json }}, addressQueryLimit: {{ 'sections.map.address_query_limit_html' | t | json }}, authError: {{ 'sections.map.auth_error_html' | t | json }}, newWindow: {{ 'general.accessibility.link_messages.new_window' | t | json }}, external: {{ 'general.accessibility.link_messages.external' | t | json }}, newWindowExternal: {{ 'general.accessibility.link_messages.new_window_and_external' | t | json }}, products: {{ 'general.search.products' | t | json }}, loading: {{ 'general.search.loading' | t | json }}, number_of_results: {{ 'general.search.number_of_results' | t: result_number: '[result_number]', results_count: '[results_count]' | json }}, number_of_results_found: {{ 'general.search.number_of_results_found' | t: results_count: '[results_count]' | json }}, one_result_found: {{ 'general.search.one_result_found' | t | json }} }, moneyFormat: {{ shop.money_format | json }}, settings: { searchFor: {{ 'general.search.search_for' | t | json }}, predictiveSearchEnabled: {{ settings.predictive_search_enabled | json }}, predictiveSearchShowPrice: {{ settings.predictive_search_show_price | json }}, predictiveSearchShowVendor: {{ settings.predictive_search_show_vendor | json }} } } document.documentElement.className = document.documentElement.className.replace('no-js', 'js'); </script> {%- if template.directory == 'customers' -%} <script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script> {%- endif -%} <script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script> <script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script> <script src="{{ 'theme.js' | asset_url }}" defer="defer"></script> {{ content_for_header }} </head> <body class="template-{{ template | split: '.' | first }}"> <a class="in-page-link visually-hidden skip-link" href="#MainContent">{{ 'general.accessibility.skip_to_content' | t }}</a> {% section 'header' %} <div class="page-container" id="PageContainer"> <main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1"> {{ content_for_layout }} </main> {% section 'footer' %} <div id="slideshow-info" class="visually-hidden" aria-hidden="true"> {{- 'sections.slideshow.navigation_instructions' | t -}} </div> </div> <ul hidden> <li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li> <li id="a11y-selection-message">{{ 'general.accessibility.selection_help' | t }}</li> </ul> </body> </html>
------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------
ASSETS> theme.scss.liquid CODE
2) CHANGE WITH NEW CODE
------------------------------------------------------------------------------------------------------------------------
.drawer { // sass-lint:disable no-misspelled-properties display: none; position: absolute; overflow: visible; -webkit-overflow-scrolling: touch; z-index: $z-index-drawer; background-color: $color-bg; transition: $transition-drawer; input[type="text"], textarea { background-color: $color-bg; color: $color-text; } }
------------------------------------------------------------------------------------------------------------------------
CONFIG> settings_schema.json CODE
3) ADD NEW CODE
------------------------------------------------------------------------------------------------------------------------
{ "type": "header", "content": { "de": "Text", "en": "Text", "es": "Texto", "fr": "Texte", "it": "Testo", "ja": "テキスト", "pt-BR": "Texto" } }, { "type": "checkbox", "id": "predictive_search_enabled", "label": "Enable product suggestions", "info": "This will also affect the search bar on the search results page.", "default": true },
------------------------------------------------------------------------------------------------------------------------
LOCALES> en.default.json CODE
3) CHANGE WITH NEW CODE
------------------------------------------------------------------------------------------------------------------------
"search": { "no_results": "Try checking your spelling or using different words.", "empty_search_message": "Search field cannot be empty", "results_with_count": { "one": "{{ count }} result for “{{ terms }}”", "other": "{{ count }} results for “{{ terms }}”" }, "title": "Search our site", "placeholder": "Search", "submit": "Submit", "close": "Close search", "heading": { "one": "Search result", "other": "Search results" }, "search_for": "Search for", "products": "Products", "loading": "Loading", "clear_search_term": "Clear search term", "number_of_results": "{{ result_number }} of {{ results_count }}", "number_of_results_found": "{{ results_count }} results found", "one_result_found": "1 result found" },
------------------------------------------------------------------------------------------------------------------------
CHANGE TEMPLATE SEARCH LIQUID CODE
EXTRA SEARCH BOX WHEN NO PRODUCT FIND
------------------------------------------------------------------------------------------------------------------------
{% paginate search.results by 10 %}
<div class="page-width">
{% if search.performed == false %}
<div class="text-center">
<h1 class="h2">{{ 'general.search.title' | t }}</h1>
{% else %}
<div class="text-center">
<h1 class="h2">
<span class="visually-hidden">{{ 'general.search.heading' | t: count: search.results_count }}:</span>
{{ 'general.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
</h1>
{% endif %}
<div class="grid">
<div class="grid__item medium-up--six-tenths medium-up--push-two-tenths">
{% if search.performed and search.results_count == 0 %}
<div class="rte search--no-results-found">
<p>{{ 'general.search.no_results' | t }}</p>
</div>
{% endif %}
<form action="{{ routes.search_url }}" method="get" role="search" class="search-form search-bar__form">
<div class="input-group input-group--nowrap">
<div class="input-group__field input-group__field--connected search-form__input-wrapper">
<input
type="search"
name="q"
value="{{ search.terms | escape }}"
placeholder="{{ 'general.search.placeholder' | t }}"
role="combobox"
aria-autocomplete="list"
aria-owns="predictive-search-results"
aria-expanded="false"
aria-label="{{ 'general.search.placeholder' | t }}"
aria-haspopup="listbox"
class="search-form__input"
data-search-page-predictive-search-input
/>
<input type="hidden" name="options[prefix]" value="last" aria-hidden="true" />
<div class="predictive-search-wrapper" data-predictive-search-mount="default"></div>
</div>
<button type="submit" class="search-form__connected-submit" aria-label="{{ 'general.search.submit' | t }}" data-search-page-predictive-search-submit>
{% include 'icon-search' %}
</button>
<style>.search-form__connected-submit{appearance:none;margin:0;padding:0;background:none;border:none;font-size:inherit;line-height:inherit;cursor:pointer;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:50px;background-color:#557b97;border-radius:0 2px 2px 0;transition:background-color 100ms ease-in-out;height:46px}.search-form__connected-submit .icon-search{fill:#fff}</style>
</div>
</form>
</div>
</div>
</div>
</div>
{% if search.performed %}
{% if search.results_count > 0 %}
<hr aria-hidden="true" />
{% endif %}
<h2 class="visually-hidden">{{ 'general.search.heading' | t: count: search.results_count }}</h2>
<ul class="page-width list-view-items">
{% for item in search.results %}
<li class="list-view-item">
{% if item.object_type == 'product' %}
{% include 'product-card-list', product: item %}
{% else %}
<div class="product-card product-card--list">
<a href="{{ item.url }}" class="full-width-link">
<span class="visually-hidden">{{ item.title }}</span>
</a>
<div class="list-view-item__link">
<div class="list-view-item__image-column">
<div class="list-view-item__image-wrapper product-card__image-wrapper">
{% unless item.image == null %}
<img class="list-view-item__image" src="{{ item.image.src | img_url: '600x600' }}" alt="{{ item.image.alt | escape }}">
{% endunless %}
</div>
</div>
<div class="list-view-item__title-column">
<div class="list-view-item__title" aria-hidden="true">
<span class="product-card__title">{{ item.title }}</span>
</div>
<div>
{% if item.published_at %}{{ item.published_at | date: format: "date" }} — {% endif %}
{{ item.content | strip_html | truncate: 200 }}
</div>
</div>
</div>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
{%- if paginate.pages > 1 -%}
{% include 'pagination', paginate: paginate %}
{%- endif -%}
{% endif %}
{% if search.results_count < 2 %}
<div class="search--less-than-2-results"></div>
{% endif %}
{% endpaginate %} ------------------------------------------------------------------------------------------------------------------
CHANGE SECTION HEADER CODE UNDER
<div class="grid grid--no-gutters grid--table site-header__mobile-nav">
--------------------------------------------------------------------------------------------------------------------------
<div id="SearchDrawer" class="search-bar drawer drawer--top" role="dialog" aria-modal="true" aria-label="{{ 'general.search.placeholder' | t }}" data-predictive-search-drawer> <div class="search-bar__interior"> <div class="search-form__container" data-search-form-container> <form class="search-form search-bar__form" action="{{ routes.search_url }}" method="get" role="search"> <div class="search-form__input-wrapper"> <input type="text" name="q" placeholder="{{ 'general.search.placeholder' | t }}" role="combobox" aria-autocomplete="list" aria-owns="predictive-search-results" aria-expanded="false" aria-label="{{ 'general.search.placeholder' | t }}" aria-haspopup="listbox" class="search-form__input search-bar__input" data-predictive-search-drawer-input /> <input type="hidden" name="options[prefix]" value="last" aria-hidden="true" /> <div class="predictive-search-wrapper predictive-search-wrapper--drawer" data-predictive-search-mount="drawer"></div> </div> <button class="search-bar__submit search-form__submit" type="submit" data-search-form-submit> {% include 'icon-search' %} <span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span> </button> </form> <div class="search-bar__actions"> <button type="button" class="btn--link search-bar__close js-drawer-close"> {% include 'icon-close' %} <span class="icon__fallback-text">{{ 'general.search.close' | t }}</span> </button> </div> </div> </div> </div>
--------------------------------------------------------------------------------------------------------------------------
PREDICTIVE CODE IN THEME JS PREDICTIVE CSS CODE
--------------------------------------------------------------------------------------------------------------------------
Predictive Search JS IN THMEJS SLATE PART AFTER VARIANT CODE
Predictive Search JS IN THMEJS MODULE PART AFTER FORUM STATUS
Predictive Search JS IN THMEJS SECTION PART BEFORE THEME MAP
--------------------------------------------------------------------------------------------------------------------------
Comments
Post a Comment