`theme-work/sections/collection.liquid`

98 lines
{% if request.page_type == 'search' or collection.current_vendor == 'Newmor Wallcoverings' or collection.handle == 'newmor-wallcoverings' or collection.handle == 'newmor-wallcovering' %}
{% assign nw_allowed = '4351299584051,4351299649587,4351299715123,4351299747891,4351299878963,4351299977267,4351276875827,4351276941363,4351276974131,4351277072435,4351277203507,4351277236275,4351277269043,4351277301811,4351277334579,4351277465651,4351277498419,4351277563955,4351277727795,4351277826099,4351278022707,4351278219315,4351278284851,4351278448691,4351278579763,4351278743603,4351278809139,4351279005747,4351279038515,4351279169587,4351279202355,4351279235123,4351279267891,4351279333427,4351279398963,4351279431731,4351279562803,4351279595571,4351279661107,4351279693875,4351279759411,4351279792179,4351279824947,4351279923251,4351279988787,4351282118707,4351282741299,4351283331123,4351283363891,4351283494963,4351283593267,4351283953715,4351284052019,4351284215859,4351286116403,4351286247475,4351286411315,4351286575155,4351286902835,4351286968371,4351287066675,4351287099443,4351287328819,4351287885875,4351288672307,4351288770611,4351288999987,4351289557043,4351289851955,4351289884723,4351289917491,4351289950259,4351290834995,4351290933299,4351291097139,4351291162675,4351291621427,4351291654195,4351291752499,4351291785267,4351291818035,4351292899379,4351293292595,4351293390899,4351293456435,4351293521971,4351293849651,4351294079027,4351294144563,4351294210099,4351294439475,4351294472243,4351294537779,4351294603315,4351294668851,4351294799923,4351295029299,4351295094835,4351295127603,4351295815731,4351295848499,4351295914035,4351296045107,4351296110643,4351296176179,4351296274483,4351296503859,4351296536627,4351296569395,4351296798771,4351297060915,4351297093683,4351297159219,4351297257523,4351297323059,4351297355827,4351297388595,4351297912883,4351298109491,4351298207795,4351298273331,4351298699315,4351299256371,4351299321907,4351299387443' | split: ',' %}
{% 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 %}

{% else %}
{%- comment -%} DW: render the collection description server-side (theme JS never did). Respects the existing show_description setting; reversible. {%- endcomment -%}
{%- if section.settings.show_description and collection.description != blank -%}
  <div class="dw-collection-description rte" style="max-width:880px;margin:30px auto 4px;padding:0 26px;line-height:1.7;color:#3a342c;">
    {{ collection.description }}
  </div>
{%- endif -%}
<script type="application/json" data-section-id="{{ section.id }}" data-section-type="static-collection"></script>

{% endif %}
{% schema %}
{
  "name": "Collection pages",
  "settings": [
    { "type": "checkbox", "id": "show_collection_image", "label": "Show collection image" },
    { "type": "checkbox", "id": "show_description", "label": "Show description" },
    { "type": "checkbox", "id": "sorting", "label": "Enable sorting" },
    { "type": "checkbox", "id": "show_filters", "label": "Enable filtering", "default": true },
    { "type": "select", "id": "layout", "label": "Layout", "options": [{"value":"default","label":"Default"},{"value":"masonry","label":"Masonry"}], "default": "default" },
    { "type": "range", "id": "products_per_row", "label": "Products per row", "min": 3, "max": 8, "step": 1, "default": 4 },
    { "type": "range", "id": "number_of_rows", "label": "Rows", "min": 1, "max": 20, "step": 1, "default": 12 }
  ]
}
{% endschema %}