OMG I DID IT, AFTER 3 PAINSTAKING DAYS OF CHAT GPT TORTURE I HAVE DONE IT. I Have added my own sorting filter to my page. I am not a coder, but I NEEDED this. I’m hoping I can help others with their issue. You can view my sorting style by just clicking the link https://pinhive.org/store-1-2 if you like this style let me show you the code chat gpt and I created
This is in the header:
<style>
#custom-search-bar {
padding: 5px;
border: 1px solid #fff;
color: #fff;
background-color: transparent;
margin-bottom: 20px;
width: 200px;
}
#sort-options {
padding: 5px;
background-color: #fff;
color: black;
border: none;
margin-bottom: 20px;
}
#sort-container {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
#custom-search-bar::placeholder {
color: #fff;
}
</style>
<section data-section-id="6510be9a3432c47a3a4bad5a">
<div id="sort-container">
<input type="text" id="custom-search-bar" placeholder="Search products" onkeyup="filterProducts()" />
<select id="sort-options" onchange="sortProducts()">
<option value="">Sort by</option>
<option value="price-asc">Price: Low to High</option>
<option value="price-desc">Price: High to Low</option>
<option value="name-asc">Name: A-Z</option>
<option value="name-desc">Name: Z-A</option>
</select>
</div>
</section>
and this is in the footer:
document.addEventListener('DOMContentLoaded', function() {
const productsContainer = document.querySelector('.list-grid');
const sortContainer = document.getElementById('sort-container');
if (productsContainer) {
productsContainer.insertAdjacentElement('beforebegin', sortContainer);
sortContainer.style.display = 'flex';
window.filterProducts = function() {
const searchInput = document.getElementById('custom-search-bar');
if (!searchInput) return; // Check if search input exists
const searchValue = searchInput.value.toLowerCase();
const products = document.querySelectorAll('.grid-item');
products.forEach(product => {
const titleElement = product.querySelector('.grid-title');
if (titleElement) { // Check if titleElement exists
const productName = titleElement.textContent.toLowerCase();
product.style.display = productName.includes(searchValue) ? '' : 'none';
}
});
};
window.sortProducts = function() {
const sortValue = document.getElementById('sort-options').value;
const products = Array.from(document.querySelectorAll('.grid-item'));
if (products.length === 0) return; // Ensure products exist
let sortedProducts;
if (sortValue === 'price-asc') {
sortedProducts = products.sort((a, b) => {
const priceA = parseFloat(a.querySelector('.product-price').textContent.replace('$', ''));
const priceB = parseFloat(b.querySelector('.product-price').textContent.replace('$', ''));
return priceA - priceB;
});
} else if (sortValue === 'price-desc') {
sortedProducts = products.sort((a, b) => {
const priceA = parseFloat(a.querySelector('.product-price').textContent.replace('$', ''));
const priceB = parseFloat(b.querySelector('.product-price').textContent.replace('$', ''));
return priceB - priceA;
});
} else if (sortValue === 'name-asc') {
sortedProducts = products.sort((a, b) => {
const nameA = a.querySelector('.grid-title').textContent.toLowerCase();
const nameB = b.querySelector('.grid-title').textContent.toLowerCase();
return nameA.localeCompare(nameB);
});
} else if (sortValue === 'name-desc') {
sortedProducts = products.sort((a, b) => {
const nameA = a.querySelector('.grid-title').textContent.toLowerCase();
const nameB = b.querySelector('.grid-title').textContent.toLowerCase();
return nameB.localeCompare(nameA);
});
}
sortedProducts.forEach(product => {
productsContainer.appendChild(product);
});
};
}
});
genuinely hope this helps someone, at least copy and paste into your chatgpt prompt to let them know what worked for others if this doesn’t work for you