← back to Dw Theme Hamburger
search: rebuild as working eyeglass-triggered field (eyeglass left-anchor, opens 20ch left, submit via toggle/Enter)
46de4d10fc42e09443b3fd8bb58c5494419e7d64 · 2026-07-15 09:25:50 -0700 · Steve Abrams
Files touched
M assets/custom.cssM sections/header.liquid
Diff
commit 46de4d10fc42e09443b3fd8bb58c5494419e7d64
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Wed Jul 15 09:25:50 2026 -0700
search: rebuild as working eyeglass-triggered field (eyeglass left-anchor, opens 20ch left, submit via toggle/Enter)
---
assets/custom.css | 26 +++++++++++++++++++------
sections/header.liquid | 52 ++++++++++++++++++++++++++++----------------------
2 files changed, 49 insertions(+), 29 deletions(-)
diff --git a/assets/custom.css b/assets/custom.css
index 5ceae9f..3769abb 100644
--- a/assets/custom.css
+++ b/assets/custom.css
@@ -1407,31 +1407,45 @@ input.add-to-cart:hover,
eyeglass is clicked (.search-open), then grows leftward to ~20 characters.
The right cluster is right-anchored, so expanding the field reads as
growing toward the left. */
-.header-content-right .search-toggle {
+.header-quick-search {
+ display: flex;
+ align-items: center;
+}
+/* eyeglass anchors on the RIGHT of the collapsed field, so the field opens to its LEFT */
+.header-quick-search .search-toggle {
display: inline-flex !important;
align-items: center;
cursor: pointer;
+ order: 2;
}
-.header-search-inline .search-form {
+.header-quick-search .search-form {
+ order: 1;
+ margin: 0;
max-width: 0;
overflow: hidden;
opacity: 0;
+ pointer-events: none;
transition: max-width 0.28s ease, opacity 0.18s ease;
}
-.header-content-right--inline-search.search-open .header-search-inline .search-form {
+.header-quick-search.search-open .search-form {
max-width: 24ch;
opacity: 1;
overflow: visible;
+ pointer-events: auto;
}
-.header-search-inline .search-form__input {
+.header-quick-search .search-form__input {
width: 20ch;
max-width: 20ch;
}
+/* hide the form's own submit magnifier; the eyeglass toggle submits when text is present */
+.header-quick-search .search-form__submit-button {
+ display: none;
+}
@media (max-width: 539px) {
- .header-content-right--inline-search.search-open .header-search-inline .search-form {
+ .header-quick-search.search-open .search-form {
max-width: 62vw;
}
- .header-search-inline .search-form__input {
+ .header-quick-search .search-form__input {
width: 100%;
max-width: none;
}
diff --git a/sections/header.liquid b/sections/header.liquid
index 18c318e..fcf5b16 100644
--- a/sections/header.liquid
+++ b/sections/header.liquid
@@ -285,28 +285,28 @@
{% endunless %}
<div class="header-content-right header-content-right--inline-search" data-header-content-right>
- <div class="header-search-inline">
+ <div class="header-quick-search" data-quick-search>
+ <button
+ class="search-toggle header-icon-link"
+ type="button"
+ aria-label="{{ 'general.search.header' | t }}"
+ aria-expanded="false"
+ data-quick-search-toggle
+ >
+ {%
+ render 'icons',
+ id: 'search',
+ %}
+ </button>
{%
render 'search-form',
context: 'header',
%}
- <a href="#" class="visual-search-clickable header-search-inline__visual" aria-controls="Visual Search">
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="30px" height="30px" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M10 8a3 3 0 1 0 0 6a3 3 0 0 0 0-6zm8-3h-2.4a.888.888 0 0 1-.789-.57l-.621-1.861A.89.89 0 0 0 13.4 2H6.6c-.33 0-.686.256-.789.568L5.189 4.43A.889.889 0 0 1 4.4 5H2C.9 5 0 5.9 0 7v9c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-8 11a5 5 0 0 1-5-5a5 5 0 1 1 10 0a5 5 0 0 1-5 5zm7.5-7.8a.7.7 0 1 1 0-1.4a.7.7 0 0 1 0 1.4z" fill="#000000"/></svg>
- </a>
</div>
- <button
- class="search-toggle header-icon-link"
- type="button"
- aria-label="{{ 'general.search.header' | t }}"
- aria-expanded="false"
- data-quick-search-toggle
- >
- {%
- render 'icons',
- id: 'search',
- %}
- </button>
+ <a href="#" class="visual-search-clickable header-search-inline__visual" aria-controls="Visual Search">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="30px" height="30px" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M10 8a3 3 0 1 0 0 6a3 3 0 0 0 0-6zm8-3h-2.4a.888.888 0 0 1-.789-.57l-.621-1.861A.89.89 0 0 0 13.4 2H6.6c-.33 0-.686.256-.789.568L5.189 4.43A.889.889 0 0 1 4.4 5H2C.9 5 0 5.9 0 7v9c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-8 11a5 5 0 0 1-5-5a5 5 0 1 1 10 0a5 5 0 0 1-5 5zm7.5-7.8a.7.7 0 1 1 0-1.4a.7.7 0 0 1 0 1.4z" fill="#000000"/></svg>
+ </a>
<div class="mini-cart-wrapper">
<a class="cart-count header-icon-link" href="{{ routes.cart_url }}" data-cart-count aria-label="{{ 'layout.header.cart' | t }}" title="{{ 'layout.header.cart' | t }}">
@@ -344,23 +344,29 @@
<script>
(function () {
- var root = document.querySelector('[data-section-header] .header-content-right--inline-search');
- if (!root) return;
- var toggle = root.querySelector('[data-quick-search-toggle]');
- var input = root.querySelector('.search-form__input');
+ 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('.search-form__input');
+ var form = wrap.querySelector('form');
if (!toggle) return;
function close() {
- root.classList.remove('search-open');
+ wrap.classList.remove('search-open');
toggle.setAttribute('aria-expanded', 'false');
}
toggle.addEventListener('click', function (e) {
e.preventDefault();
- var open = root.classList.toggle('search-open');
+ // 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;
+ }
+ var open = wrap.classList.toggle('search-open');
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
if (open && input) { setTimeout(function () { input.focus(); }, 60); }
});
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') close(); });
- document.addEventListener('click', function (e) { if (!root.contains(e.target)) close(); });
+ document.addEventListener('click', function (e) { if (!wrap.contains(e.target)) close(); });
})();
</script>
← 05825b6 mobile: hide wordmark on phones (icon collision), space head
·
back to Dw Theme Hamburger
·
search: use controlled minimal form (guaranteed 20ch expand c50b970 →