← back to Dw Theme Hamburger

search: Boost-proof plain input (custom attr, JS navigates to /search?q) so Boost can't strip it

93297cddfba8fd1731c06ed9e207635871844a56 · 2026-07-15 09:40:58 -0700 · Steve Abrams

Files touched

• M assets/custom.css
• M sections/header.liquid

Diff

commit 93297cddfba8fd1731c06ed9e207635871844a56
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Wed Jul 15 09:40:58 2026 -0700

    search: Boost-proof plain input (custom attr, JS navigates to /search?q) so Boost can't strip it
---
 assets/custom.css      | 40 ++++++++++++++++++----------------------
 sections/header.liquid | 38 ++++++++++++++++++--------------------
 2 files changed, 36 insertions(+), 42 deletions(-)

diff --git a/assets/custom.css b/assets/custom.css
index 89d4e19..f5f07a9 100644
--- a/assets/custom.css
+++ b/assets/custom.css
@@ -1418,40 +1418,36 @@ input.add-to-cart:hover,
   cursor: pointer;
   order: 2;
 }
-.header-quick-search .hdr-qs-form {
+.header-quick-search .hdr-qs-input {
   order: 1;
-  margin: 0;
+  box-sizing: border-box;
+  width: 20ch;
   max-width: 0;
-  overflow: hidden;
+  padding: 0;
+  border: 0 solid rgba(0, 0, 0, 0.28);
+  border-radius: 4px;
+  background: #fff;
+  color: #111;
+  font-size: 14px;
   opacity: 0;
+  overflow: hidden;
   pointer-events: none;
-  transition: max-width 0.3s ease, opacity 0.2s ease;
+  transition: max-width 0.3s ease, opacity 0.2s ease, padding 0.2s ease, border-width 0.2s ease;
 }
-.header-quick-search.search-open .hdr-qs-form {
-  max-width: 24ch;
+.header-quick-search.search-open .hdr-qs-input {
+  max-width: 20ch;
+  padding: 7px 10px;
+  border-width: 1px;
   opacity: 1;
-  overflow: visible;
   pointer-events: auto;
 }
-.header-quick-search .hdr-qs-input {
-  width: 20ch;
-  box-sizing: border-box;
-  padding: 7px 10px;
-  border: 1px solid rgba(0, 0, 0, 0.28);
-  border-radius: 4px;
-  font-size: 14px;
-  background: #fff;
-  color: #111;
-}
 .header-quick-search .hdr-qs-input::placeholder {
   color: #888;
 }
 @media (max-width: 539px) {
-  .header-quick-search.search-open .hdr-qs-form {
-    max-width: 64vw;
-  }
-  .header-quick-search .hdr-qs-input {
-    width: 100%;
+  .header-quick-search.search-open .hdr-qs-input {
+    max-width: 60vw;
+    width: 60vw;
   }
 }
 
diff --git a/sections/header.liquid b/sections/header.liquid
index 760d88a..7ee4f1f 100644
--- a/sections/header.liquid
+++ b/sections/header.liquid
@@ -298,17 +298,14 @@
               id: 'search',
             %}
           </button>
-          <form class="hdr-qs-form" action="{{ routes.search_url }}" method="get" role="search" data-quick-search-form>
-            <input
-              class="hdr-qs-input"
-              type="search"
-              name="q"
-              value="{{ search.terms | escape }}"
-              placeholder="{{ 'general.search.header' | t }}"
-              aria-label="{{ 'general.search.header' | t }}"
-              autocomplete="off"
-            >
-          </form>
+          <input
+            class="hdr-qs-input"
+            type="text"
+            data-quick-search-input
+            placeholder="{{ 'general.search.header' | t }}"
+            aria-label="{{ 'general.search.header' | t }}"
+            autocomplete="off"
+          >
         </div>
 
         <a href="#" class="visual-search-clickable header-search-inline__visual" aria-controls="Visual Search">
@@ -354,24 +351,25 @@
     var wrap = document.querySelector('[data-section-header] [data-quick-search]');
     if (!wrap) return;
     var toggle = wrap.querySelector('[data-quick-search-toggle]');
-    var input = wrap.querySelector('.hdr-qs-input');
-    var form = wrap.querySelector('.hdr-qs-form');
-    if (!toggle) return;
+    var input = wrap.querySelector('[data-quick-search-input]');
+    if (!toggle || !input) return;
     function close() {
       wrap.classList.remove('search-open');
       toggle.setAttribute('aria-expanded', 'false');
     }
+    function submitSearch() {
+      var v = (input.value || '').trim();
+      if (v) window.location.href = '/search?q=' + encodeURIComponent(v);
+    }
     toggle.addEventListener('click', function (e) {
       e.preventDefault();
-      // if open with text, act as submit; otherwise toggle the field open/closed
-      if (wrap.classList.contains('search-open') && input && input.value.trim() && form) {
-        form.submit();
-        return;
-      }
+      // open with text -> submit; otherwise toggle the field open/closed
+      if (wrap.classList.contains('search-open') && input.value.trim()) { submitSearch(); return; }
       var open = wrap.classList.toggle('search-open');
       toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
-      if (open && input) { setTimeout(function () { input.focus(); }, 60); }
+      if (open) { setTimeout(function () { input.focus(); }, 60); }
     });
+    input.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); submitSearch(); } });
     document.addEventListener('keydown', function (e) { if (e.key === 'Escape') close(); });
     document.addEventListener('click', function (e) { if (!wrap.contains(e.target)) close(); });
   })();

← c50b970 search: use controlled minimal form (guaranteed 20ch expand  ·  back to Dw Theme Hamburger  ·  search: contenteditable div field (Boost strips <input> but 1703a96 →