hemn/mataba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement WooCommerce AJAX product search

Browse Source
This commit is contained in:
XShop
2026-09-13 20:01:15 +03:30
parent 00439fcea9
commit f5c283af25
14 changed files with 760 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shop/xshop-theme/assets/css/woo.css
+30
View File
@@ -155,5 +155,35 @@
/* Empty states */
.xshop-empty--shop{ text-align:center; }
/* ---- AJAX Search ---- */
.xshop-search{ position:relative; inline-size:100%; max-inline-size:520px; }
.xshop-search__form{ display:flex; gap:var(--xshop-space-2); }
.xshop-search__form input[type="search"]{ flex:1; }
.xshop-search__dropdown{ position:absolute; inset-block-start:calc(100% + 8px); inset-inline:0; background:var(--xshop-card); border:1px solid var(--xshop-border); border-radius:var(--xshop-radius-md); box-shadow:var(--xshop-shadow-lg); z-index:var(--xshop-z-overlay); max-block-size:min(60vh, 420px); overflow:auto; padding:var(--xshop-space-2); display:flex; flex-direction:column; gap:var(--xshop-space-2); }
.xshop-search__dropdown[hidden]{ display:none !important; }
.xshop-search__loading{ display:flex; align-items:center; gap:var(--xshop-space-2); font-size:var(--xshop-text-sm); color:var(--xshop-muted); padding:var(--xshop-space-3); }
.xshop-search__loading[hidden]{ display:none !important; }
.xshop-search__results{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.xshop-search__item{ border-radius:var(--xshop-radius-sm); }
.xshop-search__item.is-active, .xshop-search__item:focus-within, .xshop-search__item:hover{ background:var(--xshop-surface); }
.xshop-search__item[aria-selected="true"]{ background:var(--xshop-surface-2); }
.xshop-search__link{ display:grid; grid-template-columns:48px 1fr; gap:var(--xshop-space-3); align-items:center; padding:var(--xshop-space-2); text-decoration:none; color:inherit; }
.xshop-search__thumb{ inline-size:48px; block-size:48px; object-fit:cover; border-radius:var(--xshop-radius-sm); background:var(--xshop-surface); }
.xshop-search__body{ display:flex; flex-direction:column; gap:2px; min-inline-size:0; }
.xshop-search__title{ font-size:var(--xshop-text-sm); font-weight:var(--xshop-weight-medium); color:var(--xshop-text); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.xshop-search__price{ font-size:var(--xshop-text-xs); font-weight:var(--xshop-weight-bold); color:var(--xshop-text); }
.xshop-search__price del{ color:var(--xshop-muted); font-weight:400; margin-inline-end:6px; }
.xshop-search__price ins{ text-decoration:none; color:var(--xshop-danger); }
.xshop-search__stock{ font-size:var(--xshop-text-xs); color:var(--xshop-muted); }
.xshop-search__empty, .xshop-search__error{ font-size:var(--xshop-text-sm); color:var(--xshop-muted); padding:var(--xshop-space-3); text-align:center; }
.xshop-search__empty[hidden], .xshop-search__error[hidden]{ display:none !important; }
.xshop-search__viewall{ display:block; text-align:center; padding:var(--xshop-space-2); font-size:var(--xshop-text-sm); font-weight:var(--xshop-weight-medium); color:var(--xshop-primary); text-decoration:none; border-block-start:1px solid var(--xshop-border); margin-block-start:var(--xshop-space-1); }
.xshop-search__viewall[hidden]{ display:none !important; }
.xshop-search__viewall:hover{ background:var(--xshop-surface); }
@media (max-width:640px){
.xshop-search{ max-inline-size:100%; }
.xshop-search__dropdown{ position:fixed; inset-block-start:auto; inset-inline:var(--xshop-space-2); inset-block-end:var(--xshop-space-2); max-block-size:55vh; }
}
/* Star rating fallback */
.star-rating{ color:#f59e0b; }