How to add a collections-only search field to a specific page?

[JeremyRyan]

I would like to add a search field to a blank page that doesn't replace site-wide search in the main nav, where this page-specific search field allows users to search just the names of collections, and have the search results returned where those collections' names match the search word(s). I do not want products returned in the search results at all — only collections whose names have a keyword match to the search term(s).

Does anyone know of a way or an app that will do this?

[JeremyRyan · Accepted solution]

Nevermind. I figured out how to do this for myself using JSON from the collections list page, a search field, CSS, and javascript.

[PacificSaddlery]

Would you mind sharing the details of your solution? Thanks.

[JeremyRyan]

This is the code I created to search all collections. It's "hacky" but so is EVERYTHING with Shopify. I guess that's why I'm no longer using it.

Don't forget to replace {yourwebsite.com} in line 89 and 109

Anyway, hope this helps...

<div class="clubContainer">
  <p class="smallNote">Note: search begins after you enter three characters</p>
<input type="text" onkeyup="search(event)" placeholder="Search...">
<div class="container" id="codes"></div>
<style>
<!--
.smallNote{
  font-size: 12px;
  color:#999;
  margin: 10px 0px;
}

input {
  width: 320px;
  border: 2px solid #f6f7fa;
  border-radius: 10px;
  padding: 10px;
  background-color: #f6f7fa;
  transition-duration: .5s;
}

input::placeholder {
  font-size: 1em;
  color: #96a5b3;
}

input:hover {
  border: 2px solid #b4bfc8;
  background-color: #FFFFFF;
  transition-duration: .5s;
}
input:focus {
  border: 2px solid #000000;
  background-color: #FFFFFF;
  transition-duration: .5s;
}
.clubContainer{
  width: 100%;
  text-align: center;
}
.container {
    text-align: center;
    display: grid;
    grid-template-columns: 30% 30% 30%;
    grid-gap: 3%;
}
.container div{
  margin-top: 10px;
  margin-bottom: 10px;
}
.noMatch{
  width:100% !important; 
  display: block;
  float: left;
  text-align: center;
}

@media only screen and (max-width: 420px)
  .container {
      grid-template-columns: 100%;
      display: block;
  }
}
--></style>
<script>// <![CDATA[




var codesEl;

let clubDataJSON = null;
let collectionsJSON = null;
let clubData = null;

function loadJson() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     clubDataJSON = JSON.parse(this.responseText);
     collectionsJSON = clubDataJSON.collections;
     clubData = [];
     for(var i in collectionsJSON)
      clubData.push([i, collectionsJSON [i]]);
     console.log(clubData);
    }
  };
  xhttp.open("GET", "https://{yourwebsite.com}/collections.json?limit=1000", true);
  xhttp.send();
}


function printData(Arr) {
  console.log(Arr)
  var c=0;
  for(var i=0; i<Arr.length; i++) {
    codesEl.style.gridTemplateColumns = "30% 30% 30%";
    c=1;
    var itemContents = Arr[i];
    var itemContentTitle = itemContents[1].title;
    var itemContentImagesrc=itemContents[1].image.src;
    var itemURL = "/collections/" + itemContents[1].handle;;
    codesEl.innerHTML += `<div><a href="${itemURL}"><span><img src="${itemContentImageSrc}" width="150"><span><br><span>${itemContentTitle}</span></div>`;

  }
  if(c==0){
    codesEl.style.gridTemplateColumns = "100%";
    codesEl.innerHTML = `<div class="noMatch">No results were found. Please contact <a href="https://{yourwebsite.com}/contact">customer service</a> for help.</div>`
  }
}

// it is a case insensitive search
function search(ev) {
    var key = ev.target.value;
    codesEl.innerHTML = null;
    if(key.length>2){      
      printData(clubData.filter((data)=>{
        var regex = new RegExp(key, "i");
        //return data;
        return data[1].title.match(regex) || data[1].handle.match(regex);
      }));
    }
}

window.onload = function() {
  codesEl = document.getElementById("codes");
  loadJson();
}
// ]]></script>
</div>