Restore popup search modal

mandelstudio/templates/layout.html

@@ -85,6 +85,7 @@ oxyan.initImageZoom()
 {% block cdn_scripts %}
 {{ block.super }}
 <script type="text/javascript" src="{% static 'carbasa/js/carbasa.js' %}"></script>
+{% include "partials/search_modal.html" %}
 {% ocyanjson "wagtail" "wagtailuserbar_position" as position %}
 {% if position %}
     {% wagtailuserbar position %}

mandelstudio/templates/oxyan/headers/partials/carbasa-user-bar.html

@@ -0,0 +1,25 @@
+{% load i18n %}
+
+<div class="header-right">
+    <a
+        tabindex="0"
+        aria-label="{% trans 'Open Search' %}"
+        role="button"
+        class="user-button menu-circle"
+        data-bs-toggle="modal"
+        data-bs-target="#siteSearchModal"
+    >
+        <i class="fa fa-search"></i>
+    </a>
+
+    <a href="{% url 'customer:summary' %}" aria-label="{% trans 'Customer summary' %}" class="user-button menu-circle">
+        <i class="fa fa-user-solid"></i>
+    </a>
+
+    {% include "oxyan/headers/partials/mini_basket.html" %}
+</div>
+
+<div class="alert-messages-header" aria-live="polite">
+    {% include "oscar/partials/alert_messages.html" with messages=messages %}
+</div>
+

mandelstudio/templates/oxyan/headers/partials/search.html

@@ -0,0 +1 @@
+{# Project override: use a Bootstrap modal popup search instead of the Carbasa inline search-wrapper dropdown. #}

mandelstudio/templates/partials/search_modal.html

@@ -0,0 +1,34 @@
+{% load i18n %}
+
+<div class="modal fade" id="siteSearchModal" tabindex="-1" aria-labelledby="siteSearchModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered modal-lg">
+    <div class="modal-content">
+      <div class="modal-header border-0 pb-0">
+        <h2 class="h4 modal-title" id="siteSearchModalLabel">{% trans "Search" %}</h2>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans "Close" %}"></button>
+      </div>
+      <div class="modal-body pt-2">
+        <form method="get" rel="search" action="{% url 'search:search' %}" class="search_form" id="search_form">
+          <div class="search-input-wrapper">
+            <input type="search" name="q" placeholder="{% trans 'Search the whole site' %}" class="form-control form-control-lg" autocomplete="off" required="" id="id_q" title="{% trans 'Search' %}">
+            <button class="btn btn-primary btn-lg mt-3 w-100" type="submit">
+              {% trans "Search" %}
+            </button>
+          </div>
+        </form>
+        <p class="text-muted mt-3 mb-0">
+          {% trans "Tip: start typing to see suggestions." %}
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('shown.bs.modal', function (event) {
+    if (event.target && event.target.id === 'siteSearchModal') {
+      const input = event.target.querySelector('#id_q');
+      if (input) input.focus();
+    }
+  });
+</script>