Adding Stock search in shop (Redundant)

Please note that this post has been made obsolete by finding better ways of implementing search into various parts of the website. This post will remain here for archival purposes. That said, I found it alarmingly difficult to implement a search function for my website using only the Squarespace tools. I found out that currently the search only works for the store and the blog, not other content. As per instructions from the web, I settled on creating a search bar element in my footer, and moving it to my store category menu with code. Thus the referenced search bar is a Squarespace element already present in the footer section. The code is modified to actually work, as opposed to other solutions found on the web.

HTML:

JAVASCRIPT:

document.addEventListener('DOMContentLoaded', function() {
var getURL = window.location.href;
var subString = 'shop';
var badString = '/shop/p/';
let isTouch = false;
const headerActions = document.querySelector('.header-actions');
function checkHeader() {
const styles = window.getComputedStyle(headerActions);
isTouch = styles.getPropertyValue('display') !== 'flex';
}
checkHeader();
var searchBlock = document.getElementById('block-yui_3_17_2_1_1717927882701_20949');
if (searchBlock) {
searchBlock.id = 'searchbarID';
searchBlock.classList.add('header-search-bar');
if (getURL.includes(badString) || !getURL.includes(subString)) {
searchBlock.remove();
} else if (getURL.includes(subString)) {
var nestedCategories = document.querySelector('.nested-category-tree-wrapper');
if (nestedCategories) {
nestedCategories.insertBefore(searchBlock, nestedCategories.firstChild);
	}
}
var clonedSearchBlock = searchBlock.cloneNode(true);
clonedSearchBlock.classList.add('mobile-header-search-bar');
var headerMenuNavFolderContent = document.querySelector('.header-menu-nav-folder-content');
if (headerMenuNavFolderContent) {
headerMenuNavFolderContent.appendChild(clonedSearchBlock);
	}
}
});
document.addEventListener('click', function() {
var getURL = window.location.href;
var subString = 'shop';
var badString = '/shop/p/';
if (getURL.includes(subString) && !getURL.includes(badString)) {
var allInputs = document.getElementsByTagName('input');
for (var i = 0; i < allInputs.length; i++) {
allInputs[i].value = '';
	}
}
});

CSS:

.search-input {
  cursor: text !important;
}
.sqs-search-page-notice {
    visibility: hidden;
}
.sqs-search-page-notice:before {
    visibility: visible;
    content: "Congratulations! You found nothing.";
  	text-align: center;
  	letter-spacing: 2px;
  	font-size: 16px;
  	justify-content: center;
@media screen and (min-width:790px) {
//  margin-left: 36%; 
    }
}
.sqs-search-container-item:after {
  display: none;
}
@media screen and (min-width:790px) {
.search-results {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-column-gap: 10px;
	background-color: #ffc700;
}
.sqs-search-page-item .sqs-main-image-container {
    display: none;
    width: 50%;
    float: none !important;
    padding-right: 0 !important;
}
.sqs-search-page-item .sqs-main-image-container img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
.sqs-search-container-item {
  border: 0;
}
.sqs-search-container-item .sqs-content {
    margin-top: 10px;
}
.sqs-search-container-item .sqs-content span {
    display: none;
	}
}
.sqs-search-page-input {
    outline-color: transparent !important;
  	background-color: transparent !important;
	opacity: 100% !important;
	border: 2px solid #000000!important; 
    background-image: url(https://static1.squarespace.com/static/6654b2fee26f292de13f1a9d/t/66678b0ade52f27958b0ba7a/1718061835001/Eyeicon2.png) !important;
    background-size: 50px !important;
    background-position: bottom 7px left 6px !important;
    background-repeat: no-repeat !important;
    color: #000000;
    text-align: left;
  	font-size: 19px !important;
    letter-spacing: 2px;
    text-indent: 0px;
  	cursor: pointer;
    border-radius: 0px;
  	margin-bottom: 50px;
  @media screen and (min-width:768px) {
  	margin-left: 35%;
    width: 25% !important;
  }
}
//SEARCH BARS//
/* Search preview text invisible */
::placeholder {
  color: #ffc700;
  opacity: 0; 
}
:-ms-input-placeholder {
  color: #ffc700;
}
::-ms-input-placeholder {
  color: #ffc700;
}
//main shop search tweaks//
.search-input { 
  transition: all .7s ease !important;
	background-color: transparent !important;
	opacity: 100% !important;
	border: 0px solid #000000!important; 
    background-image: url(https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/2b60bbec-4d1c-4d73-9d6a-009b9bf1d26a/SearchCrosshairIcon.png) !important;
    background-size: 50px !important;
    background-position: bottom 0px left 5px !important;
    background-repeat: no-repeat;
    color: #000000;
    text-align: left;
  	font-size: 19px !important;
    letter-spacing: 2px;
    text-indent: 0px;
    margin-left: -16px !important; 
  	margin-top: -40px;
  	width: 240px !important;
  	position: absolute;
  	cursor: pointer;
  	height: 50px;
    border-radius: 0px;
}
.search-input:focus {
  outline: none; 
  transition: all .7s ease !important;
  background-position: bottom 0px left -6px !important;
} 
@media only screen and (max-width:790px) {
  .search-input { 
     background-position: bottom 0px left 48.5% !important;
    transition: all .7s ease !important;
	background-color: transparent !important;
	opacity: 100% !important;
	border: 0px solid #000000!important; 
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    color: #000000;
    text-align: center;
  	font-size: 20px !important;
    letter-spacing: 2.5px;
    text-indent: -46px;
    margin-left: -71px !important; 
  	margin-top: 243px;
  	width: 380px !important;
    height: 50px !important;
  	position: absolute;
  	cursor: pointer;
    border-radius: 0px;
	}
  .search-input:focus {
   background-position: bottom 0px left -7px !important;
  }
  .search-input .has-been-focused:invalid {
     background-position: bottom 0px left 2px !important;
  }
}
//Shop specific search//
.header-search-bar{
  margin-top: -100px;
  margin-bottom: 20px;
  margin-left: 0;
  margin-right: 0;
@media(max-width:999px){
    display:block;
    margin: 0 0 0 0vw;
  }
}
.mobile-header-search-bar {
  display:none;
  width: 80%;
  padding-left:10vw;
  padding-right:3vw;
  opacity:1 !important;    
  }
@media(max-width:999px){
  .sqs-search-ui-button-wrapper .search-input { 
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 1rem;
  width: 100%;
  }}
/* full search page */
.sqs-search-page-input {
  background: #Ffc700;
  border: 2px solid #786F65;
  border-radius: 0px;
}
.footer-sections {
  overflow: hidden;
 // visibility: hidden !important;
}

The extensive CSS is for aesthetic reasons, molding the search bar AND the search page, to fit the theme of my website. Please note that I will be replacing this solution with instant, or live search later on. This current implementation takes you to a separate page which displays search results, while my final solution will filter the products directly in their respective grid on the shop category page.