`scripts/newmor-discovery.liquid`

71 lines
{% liquid
  assign nw_collection = collections['newmor-wallcoverings']
  assign nw_query = search.terms | downcase | strip
  assign nw_query_code = nw_query | remove: '-' | remove: ' '
  assign nw_count = 0
%}
{% capture nw_cards %}
{% paginate nw_collection.products by 250 %}
{% for nw_product in nw_collection.products %}
  {% liquid
    assign nw_id = nw_product.id | append: ''
    assign nw_match = false
    assign nw_haystack = nw_product.title | append: ' ' | append: nw_product.vendor | downcase
    assign nw_sku = nw_product.selected_or_first_available_variant.sku
    assign nw_code = nw_sku | downcase | remove: '-' | remove: ' '
    if request.page_type != 'search'
      assign nw_match = true
    elsif nw_query != blank
      if nw_haystack contains nw_query or nw_code contains nw_query_code
        assign nw_match = true
      endif
    endif
  %}
  {% if nw_product.vendor == 'Newmor Wallcoverings' and nw_allowed contains nw_id and nw_match %}
    {% assign nw_count = nw_count | plus: 1 %}
    <article class="nw-showroom-card" data-nw-id="{{ nw_id }}" data-nw-sku="{{ nw_sku | escape }}" data-nw-title="{{ nw_product.title | escape }}" data-nw-sort-tags="{{ nw_product.tags | join: ',' | escape }}" data-nw-created="{{ nw_product.created_at | date: '%s' }}">
      <a href="{{ nw_product.url }}">
        <img src="{{ nw_product.featured_image | image_url: width: 700 }}" alt="{{ nw_product.featured_image.alt | default: nw_product.title | escape }}" width="700" height="700" loading="lazy">
        <h2>{{ nw_product.title | escape }}</h2>
        <p>{{ nw_sku | escape }}</p>
        <p class="nw-inquiry-label">Showroom inquiry</p>
      </a>
    </article>
  {% endif %}
{% endfor %}
{% endpaginate %}
{% endcapture %}
{% if nw_count > 0 or request.page_type != 'search' %}
<section class="nw-showroom" aria-labelledby="nw-showroom-title">
  <h1 id="nw-showroom-title">{% if request.page_type == 'search' %}Newmor showroom results{% else %}Newmor Wallcoverings{% endif %}</h1>
  <p>{{ nw_count }} colorways · Explore the line and contact our showroom for availability and project pricing.</p>
  <div class="nw-grid-controls">
    <label>Sort <select id="nw-sort" class="select-disable-wrapper"><option value="newest">Newest</option><option value="color">Color</option><option value="style">Style</option><option value="sku">SKU A→Z</option><option value="title">Title A→Z</option></select></label>
    <label>Grid density <input id="nw-density" type="range" min="2" max="6" step="1" value="4" aria-label="Grid density"></label>
  </div>
  <div class="nw-showroom-grid">{{ nw_cards }}</div>
  {% if nw_count == 0 %}<p>Newmor colorways are being refreshed. <a href="tel:+18883734564">Call the showroom</a> for assistance.</p>{% endif %}
</section>
<style>
.nw-showroom{max-width:1500px;margin:35px auto 70px;padding:0 24px}.nw-showroom h1{font-size:32px;margin:0 0 14px}.nw-showroom>p{line-height:1.6}.nw-grid-controls{display:flex;gap:30px;align-items:center;flex-wrap:wrap;margin:25px 0}.nw-grid-controls label{display:flex;gap:12px;align-items:center}.nw-grid-controls select{padding:10px;border:1px solid #aaa}.nw-showroom-grid{display:grid;grid-template-columns:repeat(var(--nw-cols,4),minmax(0,1fr));gap:25px}.nw-showroom-card{min-width:0}.nw-showroom-card a{display:block;text-decoration:none;color:inherit}.nw-showroom-card img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#f4f3ef}.nw-showroom-card h2{font-size:16px;line-height:1.45;margin:12px 0 7px;overflow-wrap:anywhere}.nw-showroom-card p{font-size:13px;margin:5px 0}.nw-inquiry-label{color:#605747}.nw-showroom-card a:focus-visible{outline:3px solid #665238;outline-offset:5px}@media(max-width:600px){.nw-showroom{padding:0 16px}.nw-showroom h1{font-size:25px}.nw-showroom-grid{grid-template-columns:repeat(var(--nw-mobile-cols,2),minmax(0,1fr));gap:15px}.nw-grid-controls{gap:14px}.nw-grid-controls label{font-size:13px}}
</style>
<style>
.nw-grid-controls{display:flex;flex-wrap:nowrap;gap:24px}.nw-grid-controls label{margin:0!important;padding:0!important;white-space:nowrap;font-size:13px;gap:8px}.nw-grid-controls .select-wrapper{display:contents!important}.nw-grid-controls .select-wrapper:before,.nw-grid-controls .select-wrapper:after,.nw-grid-controls .selected-text{display:none!important}.nw-grid-controls select{position:static!important;opacity:1!important;width:112px!important;height:40px!important;padding:8px!important;appearance:auto!important}.nw-grid-controls input[type=range]{width:90px;height:24px;margin:0;min-width:0}@media(max-width:600px){.nw-grid-controls{gap:16px}.nw-grid-controls label{font-size:12px}.nw-grid-controls select{width:100px!important}.nw-grid-controls input[type=range]{width:75px}}
</style>
<script>
(function(){
 var grid=document.querySelector('.nw-showroom-grid'),sort=document.getElementById('nw-sort'),density=document.getElementById('nw-density');if(!grid)return;
 var cards=Array.from(grid.children),keys=['newest','color','style','sku','title'];
 function bucket(card,groups){var tags=card.dataset.nwSortTags.toLowerCase();var i=groups.findIndex(function(g){return g.test(tags)});return i<0?groups.length:i;}
 function render(){var mode=sort.value;cards.sort(function(a,b){
  if(mode==='newest')return Number(b.dataset.nwCreated)-Number(a.dataset.nwCreated)||a.dataset.nwSku.localeCompare(b.dataset.nwSku);
  if(mode==='color'){var delta=bucket(a,[/black|white|gray|grey|silver/,/red|orange|yellow|gold|brown|beige|cream|pink/,/green/,/blue|navy/,/purple|violet/])-bucket(b,[/black|white|gray|grey|silver/,/red|orange|yellow|gold|brown|beige|cream|pink/,/green/,/blue|navy/,/purple|violet/]);if(delta)return delta;}
  if(mode==='style'){var delta=bucket(a,[/traditional/,/modern|contemporary|minimalist/,/floral|botanical/,/damask/,/geometric/,/textur/])-bucket(b,[/traditional/,/modern|contemporary|minimalist/,/floral|botanical/,/damask/,/geometric/,/textur/]);if(delta)return delta;}
  return(mode==='title'?a.dataset.nwTitle:a.dataset.nwSku).localeCompare(mode==='title'?b.dataset.nwTitle:b.dataset.nwSku);
 });cards.forEach(function(c){grid.appendChild(c)});var n=Math.max(2,Math.min(6,Number(density.value)||4));grid.style.setProperty('--nw-cols',n);grid.style.setProperty('--nw-mobile-cols',n<=3?1:2);try{localStorage.setItem('nw-showroom-sort',sort.value);localStorage.setItem('nw-showroom-density',n)}catch(e){}}
 try{var saved=localStorage.getItem('nw-showroom-sort');if(keys.includes(saved))sort.value=saved;var n=Number(localStorage.getItem('nw-showroom-density'));if(n>=2&&n<=6)density.value=n}catch(e){}
 sort.addEventListener('change',render);density.addEventListener('input',render);render();
})();
</script>
{% endif %}