Sorting products
The following is quite a chunk of code, which gives you completely consistent and reliable sorting functionality for your store. The code is concise, there isn’t anything you can leave out without subjugating the functionality. The bulk of the code is reserved for styling the slide-out menu. It started as a drop-down menu and you may see relics of that in the naming conventions. The sorting functionality is in the end of the code, in case you just want that. Currently the code enables a slide-out for mobile, and an always present menu on desktop. The buttons allow sorting of products in any category, by Price, Name, Date, and Randomly. All of these can be reversed when clicking the button again. I am proud of this code, as it saved me from buying an expensive plug-in, and I learned a lot about lists in JS from building it.
HTML: <div id="dropdownMenuContainer" class="dropdownMenuContainer"> <button id="dropdownButton" class="normal dropdownButton"> <div class="dropdown-item-div dropdown-item-div-zero"></div> </button> <div id="dropdownMenu" class="dropdown-content"> <button class="dropdown-item" data-action="time"> <div id="byTime" class="dropdown-item-div dropdown-item-div-one"></div> </button> <button class="dropdown-item" data-action="price"> <div id="byPrice" class="dropdown-item-div dropdown-item-div-two"></div> </button> <button class="dropdown-item" data-action="name"> <div id="byName" class="dropdown-item-div dropdown-item-div-three"></div> </button> <button class="dropdown-item" data-action="random"> <div id="byShuffle" class="dropdown-item-div dropdown-item-div-four"></div> </button> </div> </div>
JAVASCRIPT:
document.addEventListener('DOMContentLoaded', function() {
const dropdownButton = document.getElementById('dropdownButton');
const dropdownMenu = document.getElementById('dropdownMenu');
const dropdownMenuContainer = document.getElementById('dropdownMenuContainer');
const dropdownItems = document.querySelectorAll('.dropdown-item');
const subString = 'shop';
const subStringTwo = 'shop/p/';
const getURL = window.location.href;
if (getURL.includes(subString) && !getURL.includes(subStringTwo)) {
//position the menu
var nestedCategories = document.querySelector('.nested-category-tree-wrapper');
nestedCategories.insertBefore(dropdownMenuContainer, nestedCategories.firstChild);
dropdownMenuContainer.style.opacity = '1';
let isMenuOpen = false;
dropdownButton.classList.remove('open');
dropdownMenu.classList.remove('open');
// Prevent closing when hovering over the dropdown menu
dropdownMenu.addEventListener('mouseover', function() {
isMenuOpen = true;
dropdownButton.classList.add('open');
dropdownMenu.classList.add('open');
});
// Toggle dropdown on main button click
dropdownButton.addEventListener('click', function(event) {
event.stopPropagation(); // Prevent event from bubbling up to the document
if (isMenuOpen) {
closeDropdown();
} else {
openDropdown();
}
});
//Check if in mobile view and open close functionality
const headerActions = document.querySelector('.header-actions');
let isTouch = false;
function checkHeader() {
const styles = window.getComputedStyle(headerActions);
isTouch = styles.getPropertyValue('display') !== 'flex';
if(isTouch === true) {
dropdownMenu.style.display = 'none';
dropdownItems.forEach(item => {
item.style.display = 'block';
});
dropdownMenu.style.maxHeight = '60px';
dropdownMenu.style.maxWidth = '60px';
isMenuOpen = false;
dropdownButton.classList.remove('open');
dropdownMenu.classList.remove('open');
} else {
dropdownMenu.style.display = 'block';
dropdownItems.forEach(item => {
item.style.display = 'inline-block';
});
dropdownMenu.style.maxWidth = dropdownMenu.scrollWidth + 'px';
dropdownMenu.style.maxHeight = '60px';
isMenuOpen = true;
dropdownButton.classList.add('open');
dropdownMenu.classList.add('open');
}
}
checkHeader();
function openDropdown() {
if(isTouch === true) {
dropdownMenu.style.display = 'block';
dropdownItems.forEach(item => {
item.style.display = 'inline-block';
});
dropdownMenu.style.maxWidth = dropdownMenu.scrollWidth + 'px';
dropdownMenu.style.maxHeight = '60px';
isMenuOpen = true;
dropdownButton.classList.add('open');
dropdownMenu.classList.add('open');
} else {
dropdownMenu.style.display = 'block';
dropdownItems.forEach(item => {
item.style.display = 'inline-block';
});
dropdownMenu.style.maxWidth = dropdownMenu.scrollWidth + 'px';
isMenuOpen = true;
dropdownButton.classList.add('open');
dropdownMenu.classList.add('open');
}
}
function closeDropdown() {
if(isTouch === true) {
dropdownMenu.style.maxWidth = '0';
isMenuOpen = false;
dropdownButton.classList.remove('open');
dropdownMenu.classList.remove('open');
setTimeout(() => {
dropdownMenu.style.display = 'none';
}, 300); //ms matches the CSS transition duration
} else {
dropdownMenu.style.maxWidth = '0';
isMenuOpen = false;
dropdownButton.classList.remove('open');
dropdownMenu.classList.remove('open');
setTimeout(() => {
dropdownMenu.style.display = 'none';
}, 300); //ms matches the CSS transition duration
}
}
// Add event listeners for individual buttons and for resize
window.addEventListener('resize', function(event) {
checkHeader();
});
dropdownItems.forEach((button) => {
button.addEventListener('click', () => {
const action = button.getAttribute('data-action');
handleAction(action);
});
});
//For clicks outside the dropdown menu
function handleClickOutside(event) {
if (!dropdownMenu.contains(event.target) && !dropdownButton.contains(event.target)) {
if (isMenuOpen && isTouch === true) {
closeDropdown();
}
}
}
//If focus shifting away from the dropdown menu
function handleFocusOut(event) {
if (!dropdownMenu.contains(event.relatedTarget) && !dropdownButton.contains(event.relatedTarget)) {
if (isMenuOpen && isTouch === true) {
closeDropdown();
}
}
}
document.addEventListener('click', handleClickOutside);
dropdownButton.addEventListener('focusout', handleFocusOut);
dropdownMenu.addEventListener('focusout', handleFocusOut);
dropdownItems.forEach(item => {
item.addEventListener('focusout', handleFocusOut);
});
// Handle the sorting actions
const productGrid = document.querySelector('.products-flex-container .list-grid');
if (productGrid) {
var productItems = Array.from(productGrid.children);
const originalOrder = Array.from(productItems);
let isPriceAscending = true;
let isNameAscending = true;
let isOriginalOrder = true;
const timeDiv = document.getElementById('byTime');
const priceDiv = document.getElementById('byPrice');
const nameDiv = document.getElementById('byName');
function handleAction(action) {
switch(action) {
//sort by time added (original and reversed order)
case 'time':
if (isOriginalOrder) {
originalOrder.forEach(item => productGrid.appendChild(item));
timeDiv.classList.add('toggled');
} else {
const reversedOrder = [...originalOrder].reverse();
reversedOrder.forEach(item => productGrid.appendChild(item));
timeDiv.classList.remove('toggled');
}
isOriginalOrder = !isOriginalOrder;
isPriceAscending = true;
isNameAscending = true;
priceDiv.classList.remove('toggled');
nameDiv.classList.remove('toggled');
break;
//sort by price both ways
case 'price':
productItems.sort((a, b) => {
const priceA = parseFloat(a.querySelector('.product-price').textContent.replace('€', ''));
const priceB = parseFloat(b.querySelector('.product-price').textContent.replace('€', ''));
return isPriceAscending ? priceA - priceB : priceB - priceA; // Toggle sorting
});
productItems.forEach(item => productGrid.appendChild(item));
isPriceAscending = !isPriceAscending;
priceDiv.classList.toggle('toggled');
isNameAscending = true;
isOriginalOrder = true;
timeDiv.classList.remove('toggled');
nameDiv.classList.remove('toggled');
break;
//sort by name ascending or descending
case 'name':
productItems.sort((a, b) => {
const nameA = a.querySelector('.grid-title').textContent.trim().toLowerCase();
const nameB = b.querySelector('.grid-title').textContent.trim().toLowerCase();
if (nameA < nameB) return isNameAscending ? -1 : 1;
if (nameA > nameB) return isNameAscending ? 1 : -1;
return 0;
});
productItems.forEach(item => productGrid.appendChild(item));
isNameAscending = !isNameAscending;
nameDiv.classList.toggle('toggled');
isPriceAscending = true;
isOriginalOrder = true;
timeDiv.classList.remove('toggled');
priceDiv.classList.remove('toggled');
break;
//shuffle randomly
case 'random':
var productItemsTwo = Array.from(productGrid.children);
var originalLength = productItemsTwo.length;
for (var i = originalLength; i > 0; i--) {
var randomIndex = Math.floor(Math.random() * i);
productGrid.appendChild(productItemsTwo[randomIndex]);
productItemsTwo.splice(randomIndex, 1);
}
isPriceAscending = true;
isNameAscending = true;
isOriginalOrder = true;
timeDiv.classList.remove('toggled');
priceDiv.classList.remove('toggled');
nameDiv.classList.remove('toggled');
break;
default:
}
}
}
} else {
dropdownMenuContainer.remove();
}
});CSS:
#dropdownMenuContainer {
position: relative;
width: 0;
height: 0;
opacity: 0;
transition: all 1s ease-out;
}
#dropdownButton {
@media only screen and (min-width:790px) {
position:relative;
margin-top: 280px;
margin-left: -8px;
width: 0px;
height: 0px;
pointer-events: none;
}
@media only screen and (max-width:790px) {
position:relative;
margin-top: 334px;
margin-left: 84px;
width: 60px;
height: 60px;
pointer-events: auto;
}
z-index: 9999;
padding: 0;
cursor: pointer;
border: none;
background-color: transparent;
transition: all 0.3s ease-out;
}
#dropdownButton.open {
@media only screen and (max-width:790px) {
margin-left: -40px;
}
}
#dropdownButton:hover {
scale: 1.2;
}
#dropdownMenu.open {
@media only screen and (max-width:790px) {
margin-left: 25px;
}
}
#dropdownMenu {
@media only screen and (min-width:790px) {
position:absolute;
margin-top: -10px;
margin-left: -8px;
max-width: 0;
white-space: nowrap;
cursor: default;
}
@media only screen and (max-width:790px) {
position:absolute;
margin-top: -74px;
margin-left: 155px;
max-height: 0;
white-space: nowrap;
}
padding: 0;
display: none;
overflow: hidden;
transition: all 0.3s ease-out;
background-color: transparent;
z-index: 222;
}
.dropdown-item {
@media only screen and (max-width:790px) {
padding: 5px;
width: 60px;
height: 60px;
margin-bottom: 2px;
}
@media only screen and (min-width:790px) {
padding: 5px;
width: 50px;
height: 50px;
margin-bottom: 0px;
}
display: block;
background-color: transparent;
border: none;
cursor: pointer;
transition: all 0.35s ease-out;
}
.dropdown-item:hover {
transition: all 0.2s ease-out;
scale: 1.15;
}
.dropdown-item-div {
display: block;
width: 100%;
height: 100%;
background-size: contain;
pointer-events: none;
}
//main icon
.dropdown-item-div-zero {
background: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/985fb570-4ac0-46e1-8176-2cff784d2eed/cardsIcon1.png') no-repeat center center;
background-size: contain;
}
//date or time icon
#byTime {
background: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/0f257b3b-eba0-4c5d-8884-121b333669d6/TimeForwardIcon.png') no-repeat center center;
background-size: contain;
}
#byTime.toggled {
background: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/b8c1506e-a711-4980-9b3b-7247ab1cc14e/timeBackwardIcon.png') no-repeat center center;
background-size: contain;
}
//price icon
#byPrice {
background: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/d098c058-9d69-4186-ac0b-ccd85c535480/PriceUpIcon.png') no-repeat center center;
background-size: contain;
}
#byPrice.toggled {
background: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/bed164b9-ba92-4492-8853-e38fae62a853/PricedownIcon.png') no-repeat center center;
background-size: contain;
}
//name icon
#byName {
background: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/7563f52c-1893-4288-81b7-12f17142f6d5/titleFwdIcon.png') no-repeat center center;
background-size: contain;
}
#byName.toggled {
background: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/fc6c069d-bd55-4f85-a7b0-91ce3d9d6a46/titleBckIcon.png') no-repeat center center;
background-size: contain;
}
//randomize
#byShuffle {
background: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/cef3b6dd-acd7-4b2c-8c01-4a6e482c903a/WhirlpoolSpiralIcon.png') no-repeat center center;
background-size: contain;
animation: reverserotator 30s infinite;
}Notice I again make use of an animation to swirl my randomize button. I trust in your ability to assign your own animation, or not use any at all.
COMMENTS:
Leave a comment: