ADD AUTOCOMPLETE SEARCH BOX IN SHOPIFY DEBUT THEME 5️⃣

------------------------------------------------------------------------------------------------------------------------

ADD AUTOCOMPLETE SEARCH BOX IN SHOPIFY

READ MORE

https://youtu.be/acTT5_lkrCg

https://stackoverflow.com/questions/45477730/ajax-jquery-autocomplete-in-search-box-shopify

https://stackoverflow.com/questions/39593169/sorting-json-results-by-10-max-results

DOWNLOAD:

https://fbgadgets.myshopify.com/admin/files/0e841afc73cd3152ebf447feabe7abfa/theme_export__fbgadgets-myshopify-com-shopify-debut-theme__05JUL2022-0654am.zip/download

------------------------------------------------------------------------------------------------------------------------

1) NEEDS JQUERY FILE WITHOUT ASYNC OR DEFFER IN LINK LIKE

OR CHANGE VENDOR JS FILE LINK IN LAYOUT>THEME LIQUID FILE

<script src="{{ 'vendor.js' | asset_url }}"></script>

2) IN THEME LIQUID FILE WE ALSO CHANGE SECHBOX OVERFLOW HIDDEN TO

OVERFLOW VISIBLE

3)WE ALSO CAHNGE CODE SERACH FORM LIQUID FILE IN SNIPPET FOLDER

4)IN THE LAST STEP WE CREATE ALTER TEMPLAE IN TEPLALTE FOLDER LIKE

search.json.liquid

------------------------------------------------------------------------------------------------------------------------

LAYOUT> theme.liquid CODE

------------------------------------------------------------------------------------------------------------------------

<!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: ', ' -%} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags -}}
{%- endif -%}
{%- if current_page != 1 -%}
&ndash; {{ 'general.meta.page' | t: page: current_page }}
{%- endif -%}
{%- assign escaped_page_title = page_title | escape -%}
{%- unless escaped_page_title contains shop.name -%}
&ndash; {{ 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 }}
<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 }},
quantityMinimumMessage: {{ 'products.product.quantity_minimum_message' | t | json }},
unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},
oneCartCount: {{ 'cart.popup.cart_count' | t: count: 1 | json }},
otherCartCount: {{ 'cart.popup.cart_count' | t: count: '[count]' | json }},
quantityLabel: {{ 'cart.popup.quantity_label' | t: quantity_count: '[count]' | json }}
},
moneyFormat: {{ shop.money_format | 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>
<!--FOR SERACH BOX USE THIS LINK OR CHANGE VENDOR FILE LINK <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script> -->
<script src="{{ 'vendor.js' | asset_url }}"></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>
<div id="SearchDrawer" class="search-bar drawer drawer--top" role="dialog" aria-modal="true" aria-label="{{ 'general.search.placeholder' | t }}"style="height: 81px; top: -81px; overflow: visible;">
<div class="search-bar__table">
<div class="search-bar__table-cell search-bar__form-wrapper">
<form class="search search-bar__form" action="{{ routes.search_url }}" method="get" role="search">
<input class="search__input search-bar__input" type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}">
<button class="search-bar__submit search__submit btn--link" type="submit">
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
</form>
</div>
<div class="search-bar__table-cell text-right">
<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>
{% include 'cart-popup' %}
{% 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>

------------------------------------------------------------------------------------------------------------------------

CAHNGE CODE SERACH FORM LIQUID FILE IN SNIPPET FOLDER

SNIPPETS> search-form.liquid CODE

------------------------------------------------------------------------------------------------------------------------

<!-- THIS FILE IS CONNECTED WITH THIS THEME BY INCLUDE SEARCH FROM LINE -->
<!-- SEE THIS LINE  IN SECTIONS > HEADER LIQUID FILE > LINE NUMBER : 116 -->
<form action="{{ routes.search_url }}" method="get" class="search-header search" role="search">
<input class="search-header__input search__input"
type="search"
name="q"
placeholder="{{ 'general.search.placeholder' | t }}"
aria-label="{{ 'general.search.placeholder' | t }}">
<button class="search-header__submit search__submit btn--link site-header__icon" type="submit">
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
</form>
<script type="text/javascript">
jQuery(document).ready(function($) {
var currentAjaxRequest = null;
var searchForms = $('form[action="/search"]').css('position','relative').each(function() {
var input = $(this).find('input[name="q"]');
var offSet = input.position().top + input.innerHeight();
$('<ul class="box-results"></ul>').css( { 'position': 'absolute', 'left': '0px', 'top': offSet } ).appendTo($(this)).hide();
input.attr('autocomplete', 'off').bind('keyup change', function() {
var term = $(this).val();
var form = $(this).closest('form');
var searchURL = '/search?type=product&q=' + term;
var resultsList = form.find('.box-results');
if (term.length >= 3 && term != $(this).attr('data-old-term')) {
$(this).attr('data-old-term', term);
if (currentAjaxRequest != null) currentAjaxRequest.abort();
currentAjaxRequest = $.getJSON(searchURL + '&view=json', function(data) {
resultsList.empty();
if(data.results_count == 0) {
resultsList.hide();
} else {
$.each(data.results, function(index, item) {
var link = $('<a></a>').attr('href', item.url);
link.append('<span class="thumbnail"><img src="' + item.thumbnail + '" /></span>');
link.append('<span class="title_name">' + item.title + '</span>');
link.wrap('<li></li>');
resultsList.append(link.parent());
});
if(data.results_count > 5) {
resultsList.append('<li class="a-center"><span class="btn btn-results"><a href="' + searchURL + '"> All Results (' + data.results_count + ')</a></span></li>');
}
resultsList.fadeIn(200);
}        
});
}
});
});
$('body').bind('click', function(){
$('.box-results').hide();
});
})
</script>
<style>
.box-results {
z-index: 8889;
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
-webkit-box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.1);
box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.1);
overflow: hidden;
top: calc(100%) !important;
border-radius: 0 !important;
text-align: center
}
.box-results li {
display: block;
width: 100%;
height: 60px;
margin: 0;
padding: 0;
border-top: 1px solid #ddd;
line-height: 38px;
overflow: hidden
}
.box-results li a {
display: table
}
.box-results li:first-child {
border-top: none
}
.box-results .title_name {
padding-left: 10px;
overflow: hidden;
line-height: 100%;
text-align: left;
vertical-align: middle;
display: table-cell
}
.box-results .thumbnail {
float: left;
display: table-cell;
width: 50px;
height: 50px;
margin: 5px;
padding: 0;
text-align: center
}
</style>

------------------------------------------------------------------------------------------------------------------------

HOW TO CRETE ALTERNATE TEMPLATE IN TEPLATE FOLDER

------------------------------------------------------------------------------------------------------------------------

CRETE ALTERNATE TEMPLATE IN TEPLATE FOLDER FILE NAME JSON

Templates > search.json.liquid CODE

------------------------------------------------------------------------------------------------------------------------

{% layout none %}
{% capture results %}
{% for item in search.results limit: 5 %}
{% assign product = item %}
{ 
"title"    : {{ product.title | json }},
"url"      : {{ product.url | within: product.collections.last | json }},
"thumbnail": {{ product.featured_image.src | product_img_url: 'thumb' | json }}
}
{% unless forloop.last %},{% endunless %}
{% endfor %}
{% endcapture %}
{
"results_count": {{ search.results_count }},
"results": [{{ results }}]
}

------------------------------------------------------------------------------------------------------------------------

Search This Blog

Shopify Login

ADD AUTOCOMPLETE SEARCH BOX IN SHOPIFY DEBUT THEME 5️⃣

Comments

Post a Comment

Popular posts from this blog

SLICK SLIDER SOURCES

ADD RECENTLY VIEWED PRODUCTS IN SHOPIFY