Jump to content

SarenaHarris

Member
  • Posts

    2
  • Joined

  • Last visited

SarenaHarris's Achievements

Level 1

Level 1 (1/20)

0

Reputation

  1. forgot to tell you, you gotta replace my section id with YOUR section id I found the free Squarespace id finder super easy and fast
  2. 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
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.