Поисковая система

public/store/view/theme/dominik/assets/css/main.css

@@ -97,6 +97,15 @@ header .menu li a {
 header .menu svg{
 	
 }
+.header-search__icon,
+a:hover .header-search__icon,
+a:hover .header-search__icon path {
+	fill: none !important;
+}
+a:hover .header-search__icon circle,
+a:hover .header-search__icon path {
+	stroke: var(--color-secondary);
+}
 
 header .menu>li:first-child {
     padding-left: 0;
@@ -475,6 +484,190 @@ section{
 	border-color: #000
 }
 
+.search-modal__body {
+	padding: 42px 46px 48px;
+}
+.search-modal__intro {
+	max-width: 560px;
+	margin-bottom: 28px;
+}
+.search-modal__eyebrow,
+.search-page__eyebrow {
+	display: block;
+	color: var(--color-dark-gray);
+	font-size: 11px;
+	letter-spacing: 0.18em;
+	line-height: 1.4;
+	text-transform: uppercase;
+}
+.search-modal__intro h2 {
+	margin: 9px 0 8px;
+	color: #14142b;
+	font-size: clamp(30px, 4vw, 43px);
+	font-weight: 400;
+	line-height: 1.08;
+}
+.search-modal__intro p {
+	margin: 0;
+	color: rgba(20, 20, 43, 0.68);
+}
+.search-modal__field,
+.search-page__form {
+	display: flex;
+	border-bottom: 1px solid #14142b;
+}
+.search-modal__field input,
+.search-page__form input {
+	width: 100%;
+	padding: 13px 0;
+	border: 0;
+	background: transparent;
+	color: #14142b;
+	font: inherit;
+	font-size: 18px;
+	outline: 0;
+}
+.search-modal__field button,
+.search-page__form button {
+	display: inline-flex;
+	flex: 0 0 auto;
+	gap: 9px;
+	align-items: center;
+	padding: 12px 0 12px 18px;
+	border: 0;
+	background: transparent;
+	color: #14142b;
+	font: inherit;
+	text-transform: uppercase;
+}
+.search-modal__field button:hover,
+.search-page__form button:hover {
+	color: var(--color-dark-gray);
+}
+
+.search-page {
+	min-height: 62vh;
+	color: #14142b;
+}
+.search-page__hero {
+	padding: 34px 0 54px;
+	background: linear-gradient(180deg, #f8f6f5 0, #fff 100%);
+}
+.search-page__breadcrumb {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+	padding: 0;
+	margin: 0 0 42px;
+	list-style: none;
+	color: rgba(20, 20, 43, 0.58);
+	font-size: 14px;
+}
+.search-page__breadcrumb span {
+	margin-left: 4px;
+}
+.search-page__intro {
+	max-width: 760px;
+}
+.search-page__intro h1 {
+	margin: 10px 0 12px;
+	font-size: clamp(44px, 6.3vw, 88px);
+	font-weight: 400;
+	line-height: 1;
+}
+.search-page__intro p {
+	margin: 0;
+	color: rgba(20, 20, 43, 0.68);
+	font-size: 18px;
+	line-height: 1.55;
+}
+.search-page__form {
+	max-width: 920px;
+	margin-top: 37px;
+}
+.search-page__form input {
+	padding: 17px 0;
+	font-size: 21px;
+}
+.search-page__results {
+	padding: 12px 0 76px;
+}
+.search-page__summary {
+	display: flex;
+	gap: 20px;
+	align-items: end;
+	justify-content: space-between;
+	padding: 28px 0 32px;
+}
+.search-page__summary h2 {
+	margin: 8px 0 0;
+	font-size: clamp(26px, 3vw, 38px);
+	font-weight: 400;
+	line-height: 1.15;
+}
+.search-page__count {
+	color: rgba(20, 20, 43, 0.58);
+	white-space: nowrap;
+}
+.search-page__pagination {
+	display: flex;
+	gap: 20px;
+	align-items: center;
+	justify-content: space-between;
+	padding-top: 32px;
+}
+.search-page__empty {
+	max-width: 740px;
+	padding: 52px 0 24px;
+}
+.search-page__empty h2 {
+	margin: 0 0 12px;
+	font-size: clamp(27px, 3vw, 40px);
+	font-weight: 400;
+}
+.search-page__empty p {
+	margin: 0;
+	color: rgba(20, 20, 43, 0.68);
+	font-size: 18px;
+	line-height: 1.55;
+}
+@media (max-width: 767px) {
+	.search-modal__body {
+		padding: 38px 24px 32px;
+	}
+	.search-modal__field input,
+	.search-page__form input {
+		font-size: 16px;
+	}
+	.search-page__hero {
+		padding: 24px 0 38px;
+	}
+	.search-page__breadcrumb {
+		margin-bottom: 29px;
+	}
+	.search-page__intro h1 {
+		font-size: 50px;
+	}
+	.search-page__intro p,
+	.search-page__empty p {
+		font-size: 16px;
+	}
+	.search-page__form {
+		margin-top: 27px;
+	}
+	.search-page__form button span {
+		display: none;
+	}
+	.search-page__summary,
+	.search-page__pagination {
+		display: block;
+	}
+	.search-page__count,
+	.search-page__pagination > div + div {
+		margin-top: 12px;
+	}
+}
+
 .fav-btn {
     position: absolute;
     top: 20px;

public/store/view/theme/dominik/assets/js/script.js

@@ -1,5 +1,54 @@
-
-function NextPage(page, elem, btn){
+function submitProductSearch(form) {
+	var input = $(form).find('input[name="search"]');
+	var search = $.trim(input.val());
+
+	if (!search) {
+		input.trigger('focus');
+		return false;
+	}
+
+	var url = $(form).data('search-url');
+	var separator = url.indexOf('?') === -1 ? '?' : '&';
+
+	window.location.href = url + separator + 'search=' + encodeURIComponent(search);
+
+	return false;
+}
+
+function openSearch(el) {
+	var form = $('<form>').addClass('search-modal__form').attr('data-search-url', $(el).data('search-url'));
+	var intro = $('<div class="search-modal__intro">').append(
+		'<span class="search-modal__eyebrow">Каталог Dominik</span>',
+		'<h2>Найти платье</h2>',
+		'<p>Введите название, модель или характеристику.</p>'
+	);
+	var field = $('<div class="search-modal__field">').append(
+		'<input type="search" name="search" placeholder="Например: кружево или длинный рукав" autocomplete="off" aria-label="Поиск">',
+		'<button type="submit" aria-label="Найти"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M16 16L21 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button>'
+	);
+
+	form.append(intro, field);
+	form.on('submit', function() {
+		return submitProductSearch(this);
+	});
+
+	modal.create({
+		modal: form,
+		width: 760,
+		class: {
+			'modal-body': 'search-modal__body'
+		},
+		callback: {
+			show: function() {
+				setTimeout(function() {
+					form.find('input[name="search"]').trigger('focus');
+				}, 200);
+			}
+		}
+	});
+}
+
+function NextPage(page, elem, btn){
 	console.log(page);
 	
 	/*if(elem){

public/store/view/theme/dominik/template/common/header.twig

@@ -82,6 +82,11 @@
 				<div class="col d-flex justify-content-end">
 
 					<ul class="menu">
+						<li><a href="{{ search_url }}" data-search-url="{{ search_url }}" onclick="openSearch(this);return false;"><svg class="header-search__icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11" cy="11" r="6.5" stroke="currentColor" stroke-width="1.5"/>
+<path d="M16 16L21 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
+<span class="d-none d-lg-inline-block ms-2">Поиск</span></a></li>
 						<li><a href="tel:{{ config_telephone }}"><svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.1708 16.415C13.6356 16.415 14.5982 16.0216 15.4436 15.0673C15.5106 15.0003 15.5776 14.925 15.6361 14.8581C16.1384 14.2972 16.3728 13.7448 16.3728 13.2174C16.3728 12.6148 16.0212 12.0539 15.2762 11.5349L12.8404 9.84406C12.0954 9.32514 11.2081 9.26656 10.505 9.96128L9.8605 10.6058C9.668 10.7983 9.50057 10.8067 9.31643 10.6895C8.86443 10.4049 7.952 9.60971 7.33257 8.99028C6.67969 8.34578 6.0519 7.62592 5.71708 7.09856C5.60826 6.90604 5.61663 6.747 5.80915 6.55448L6.44531 5.90995C7.14843 5.20682 7.08984 4.31955 6.57087 3.57457L4.88002 1.13874C4.36105 0.393764 3.80022 0.0505719 3.19754 0.0422014C2.6702 0.0338308 2.11774 0.276577 1.55692 0.778806C1.48159 0.84577 1.41462 0.904363 1.34766 0.962963C0.393415 1.81676 0 2.77936 0 4.22747C0 6.62144 1.47321 9.53442 4.1769 12.2381C6.86384 14.925 9.78514 16.415 12.1708 16.415ZM12.1791 15.1259C10.0446 15.1678 7.3075 13.5271 5.13951 11.3676C2.9548 9.19121 1.23884 6.36196 1.28069 4.22747C1.29744 3.30671 1.62389 2.51151 2.27679 1.94231C2.33538 1.89209 2.37723 1.85023 2.43583 1.80838C2.68694 1.59075 2.9548 1.47356 3.19754 1.47356C3.44029 1.47356 3.65792 1.56564 3.81696 1.81676L5.44085 4.25258C5.61663 4.51207 5.63337 4.80503 5.37389 5.06452L4.63728 5.80113C4.05971 6.3787 4.10156 7.08182 4.52009 7.64263C4.99721 8.28721 5.82589 9.22471 6.47042 9.86085C7.10659 10.5053 8.11943 11.4094 8.77229 11.8948C9.33314 12.3134 10.0363 12.3553 10.6139 11.7777L11.3504 11.0411C11.6099 10.7816 11.8945 10.7983 12.1624 10.9658L14.5982 12.5896C14.8409 12.7571 14.9414 12.9663 14.9414 13.2174C14.9414 13.4602 14.8242 13.7281 14.6066 13.9791C14.5564 14.0377 14.5229 14.0796 14.4726 14.1382C13.9034 14.7911 13.1083 15.1091 12.1791 15.1259Z" fill="black" fill-opacity="0.85"/>
 </svg>

public/store/view/theme/dominik/template/product/search.twig

@@ -1,212 +1,69 @@
 {{ header }}
-<div id="product-search" class="container">
-  <ul class="breadcrumb">
-    {% for breadcrumb in breadcrumbs %}
-    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
-    {% endfor %}
-  </ul>
-  <div class="row">{{ column_left }}
-    {% if column_left and column_right %}
-    {% set class = 'col-sm-6' %}
-    {% elseif column_left or column_right %}
-    {% set class = 'col-sm-9' %}
-    {% else %}
-    {% set class = 'col-sm-12' %}
-    {% endif %}
-    <div id="content" class="{{ class }}">{{ content_top }}
-      <h1>{{ heading_title }}</h1>
-      <label class="control-label" for="input-search">{{ entry_search }}</label>
-      <div class="row">
-        <div class="col-sm-4">
-          <input type="text" name="search" value="{{ search }}" placeholder="{{ text_keyword }}" id="input-search" class="form-control" />
-        </div>
-        <div class="col-sm-3">
-          <select name="category_id" class="form-control">
-            <option value="0">{{ text_category }}</option>
-            {% for category_1 in categories %}
-            {% if category_1.category_id == category_id %}
-            <option value="{{ category_1.category_id }}" selected="selected">{{ category_1.name }}</option>
-            {% else %}
-            <option value="{{ category_1.category_id }}">{{ category_1.name }}</option>
-            {% endif %}
-            {% for category_2 in category_1.children %}
-            {% if category_2.category_id == category_id %}
-            <option value="{{ category_2.category_id }}" selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_2.name }}</option>
-            {% else %}
-            <option value="{{ category_2.category_id }}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_2.name }}</option>
-            {% endif %}
-            {% for category_3 in category_2.children %}
-            {% if category_3.category_id == category_id %}
-            <option value="{{ category_3.category_id }}" selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_3.name }}</option>
-            {% else %}
-            <option value="{{ category_3.category_id }}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_3.name }}</option>
-            {% endif %}
-            {% endfor %}
-            {% endfor %}
-            {% endfor %}
-          </select>
-        </div>
-        <div class="col-sm-3">
-          <label class="checkbox-inline">
-            {% if sub_category %}
-            <input type="checkbox" name="sub_category" value="1" checked="checked" />
-            {% else %}
-            <input type="checkbox" name="sub_category" value="1" />
-            {% endif %}
-            {{ text_sub_category }}</label>
-        </div>
-      </div>
-      <p>
-        <label class="checkbox-inline">
-          {% if description %}
-          <input type="checkbox" name="description" value="1" id="description" checked="checked" />
-          {% else %}
-          <input type="checkbox" name="description" value="1" id="description" />
-          {% endif %}
-          {{ entry_description }}</label>
-      </p>
-      <input type="button" value="{{ button_search }}" id="button-search" class="btn btn-primary" />
-      <h2>{{ text_search }}</h2>
-      {% if products %}
-      <div class="row">
-        <div class="col-md-2 col-sm-6 hidden-xs">
-          <div class="btn-group btn-group-sm">
-            <button type="button" id="list-view" class="btn btn-default" data-toggle="tooltip" title="{{ button_list }}"><i class="fa fa-th-list"></i></button>
-            <button type="button" id="grid-view" class="btn btn-default" data-toggle="tooltip" title="{{ button_grid }}"><i class="fa fa-th"></i></button>
-          </div>
-        </div>
-        <div class="col-md-3 col-sm-6">
-          <div class="form-group">
-            <a href="{{ compare }}" id="compare-total" class="btn btn-link">{{ text_compare }}</a>
-          </div>
-        </div>
-        <div class="col-md-4 col-xs-6">
-          <div class="form-group input-group input-group-sm">
-            <label class="input-group-addon" for="input-sort">{{ text_sort }}</label>
-            <select id="input-sort" class="form-control" onchange="location = this.value;">
-              {% for sorts in sorts %}
-              {% if sorts.value == '%s-%s'|format(sort, order) %}
-              <option value="{{ sorts.href }}" selected="selected">{{ sorts.text }}</option>
-              {% else %}
-              <option value="{{ sorts.href }}">{{ sorts.text }}</option>
-              {% endif %}
-              {% endfor %}
-            </select>
-          </div>
-        </div>
-        <div class="col-md-3 col-xs-6">
-          <div class="form-group input-group input-group-sm">
-            <label class="input-group-addon" for="input-limit">{{ text_limit }}</label>
-            <select id="input-limit" class="form-control" onchange="location = this.value;">
-              {% for limits in limits %}
-              {% if limits.value == limit %}
-              <option value="{{ limits.href }}" selected="selected">{{ limits.text }}</option>
-              {% else %}
-              <option value="{{ limits.href }}">{{ limits.text }}</option>
-              {% endif %}
-              {% endfor %}
-            </select>
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        {% for product in products %}
-        <div class="product-layout product-list col-xs-12">
-          <div class="product-thumb">
-            <div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a></div>
-            <div>
-              <div class="caption">
-                <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
-                <p>{{ product.description }}</p>
-                {% if product.price %}
-                <p class="price">
-                  {% if  not product.special %}
-                  {{ product.price }}
-                  {% else %}
-                  <span class="price-new">{{ product.special }}</span> <span class="price-old">{{ product.price }}</span>
-                  {% endif %}
-                  {% if product.tax %}
-                  <span class="price-tax">{{ text_tax }} {{ product.tax }}</span>
-                  {% endif %}
-                </p>
-                {% endif %}
-                {% if product.rating %}
-                <div class="rating">
-                  {% for i in 1..5 %}
-                  {% if product.rating < i %}
-                  <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
-                  {% else %}
-                  <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
-                  {% endif %}
-                  {% endfor %}
-                </div>
-                {% endif %}
-              </div>
-              <div class="button-group">
-                <button type="button" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>
-                <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
-                <button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i></button>
-              </div>
-            </div>
-          </div>
-        </div>
-        {% endfor %}
-      </div>
-      <div class="row">
-        <div class="col-sm-6 text-left">{{ pagination }}</div>
-        <div class="col-sm-6 text-right">{{ results }}</div>
-      </div>
-      {% else %}
-      <p>{{ text_empty }}</p>
-      {% endif %}
-      {{ content_bottom }}</div>
-    {{ column_right }}</div>
-</div>
-<script type="text/javascript"><!--
-$('#button-search').bind('click', function() {
-	url = 'index.php?route=product/search';
+{{ content_top }}
+<main class="search-page">
+	<section class="search-page__hero">
+		<div class="container-fluid">
+			<ul class="search-page__breadcrumb">
+				{% for breadcrumb in breadcrumbs %}
+				<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>{% if not loop.last %}<span>/</span>{% endif %}</li>
+				{% endfor %}
+			</ul>
+			<div class="search-page__intro">
+				<span class="search-page__eyebrow">{{ text_search_eyebrow }}</span>
+				<h1>{{ heading_title }}</h1>
+				<p>{{ text_search_hint }}</p>
+			</div>
+			<form class="search-page__form" data-search-url="{{ search_url }}" onsubmit="return submitProductSearch(this);">
+				<label class="visually-hidden" for="search-page-input">{{ entry_search }}</label>
+				<input id="search-page-input" type="search" name="search" value="{{ search }}" placeholder="{{ text_keyword }}" autocomplete="off">
+				<button type="submit" aria-label="{{ button_search }}">
+					<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+						<circle cx="11" cy="11" r="6.5" stroke="currentColor" stroke-width="1.5"/>
+						<path d="M16 16L21 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+					</svg>
+					<span>{{ button_search }}</span>
+				</button>
+			</form>
+		</div>
+	</section>
 
-	var search = $('#content input[name=\'search\']').prop('value');
+	<section class="search-page__results">
+		<div class="container-fluid">
+			{% if search %}
+				<div class="search-page__summary">
+					<div>
+						<span class="search-page__eyebrow">{{ text_search_results }}</span>
+						<h2>{{ text_search_for|format(search) }}</h2>
+					</div>
+					<div class="search-page__count">{{ text_found|format(product_total) }}</div>
+				</div>
 
-	if (search) {
-		url += '&search=' + encodeURIComponent(search);
-	}
-
-	var category_id = $('#content select[name=\'category_id\']').prop('value');
-
-	if (category_id > 0) {
-		url += '&category_id=' + encodeURIComponent(category_id);
-	}
-
-	var sub_category = $('#content input[name=\'sub_category\']:checked').prop('value');
-
-	if (sub_category) {
-		url += '&sub_category=true';
-	}
-
-	var filter_description = $('#content input[name=\'description\']:checked').prop('value');
-
-	if (filter_description) {
-		url += '&description=true';
-	}
-
-	location = url;
-});
-
-$('#content input[name=\'search\']').bind('keydown', function(e) {
-	if (e.keyCode == 13) {
-		$('#button-search').trigger('click');
-	}
-});
-
-$('select[name=\'category_id\']').on('change', function() {
-	if (this.value == '0') {
-		$('input[name=\'sub_category\']').prop('disabled', true);
-	} else {
-		$('input[name=\'sub_category\']').prop('disabled', false);
-	}
-});
-
-$('select[name=\'category_id\']').trigger('change');
---></script>
-{{ footer }}
+				{% if products %}
+				<div class="row g-3 product-items">
+					{% for product in products %}
+					<div class="col-6 col-lg-4">
+						{% include 'dominik/template/common/product.twig' %}
+					</div>
+					{% endfor %}
+				</div>
+				<div class="search-page__pagination">
+					<div class="pagination">{{ pagination }}</div>
+					<div>{{ results }}</div>
+				</div>
+				{% else %}
+				<div class="search-page__empty">
+					<h2>{{ text_empty }}</h2>
+					<p>{{ text_empty_hint }}</p>
+				</div>
+				{% endif %}
+			{% else %}
+			<div class="search-page__empty">
+				<h2>{{ text_start_search }}</h2>
+				<p>{{ text_search_note }}</p>
+			</div>
+			{% endif %}
+		</div>
+	</section>
+</main>
+{{ content_bottom }}
+{{ footer }}