Instant wish list display in live shop

Previously I added wish lists using firebase to store them per user. The functionality included displaying them on a separate page. This had drawbacks. For example it is not possible, or very difficult to create your own add-to-cart buttons on pages outside the store, in squarespace. I got rid of that separate page and replaced it with a different approach. Now if you click on my wish list, the items appear as a separate category in the shop. I do this by using url attributes. So basically you are taken to the main shop category with an extra tag added to it, upon which the product grid is compared against the wish list begotten from firebase, and all items which are not in the wish list are hidden. This is similar to how my search functions.

HTML:

<div id="wishlistPageButtonContainer" class="wishlistPageButtonContainer">
<div id="wishlistPageButton" class="wishlistPageButton"></div>
<p id="wishlistPageButtonText">Desires</p>
</div>

JAVASCRIPT:

<script type="module">
// init firebase
import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.12.5/firebase-app.js';
import { getAuth, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/10.12.5/firebase-auth.js';
import { getFirestore, collection, getDocs } from 'https://www.gstatic.com/firebasejs/10.12.5/firebase-firestore.js';
const firebaseConfig = {
apiKey: "----",
authDomain: "----",
projectId: "----",
storageBucket: "----",
messagingSenderId: "----",
appId: "----",
measurementId: "----"};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
// main
document.addEventListener('DOMContentLoaded', function() {
const subString = 'shop';
const subStringTwo = 'shop/p/';
const urlParams = new URLSearchParams(window.location.search);
const view = urlParams.get('view');
let getURL = window.location.href;  
const wishlistPageButton = document.querySelector('.wishlistPageButton');
const wishlistPageButtonContainer = document.querySelector('.wishlistPageButtonContainer');
if (getURL.includes(subString) && !getURL.includes(subStringTwo)) {
onAuthStateChanged(auth, async (user) => {
if (user) {
let isTouch = false;
const headerActions = document.querySelector('.header-actions');              
function checkHeader() {
const styles = window.getComputedStyle(headerActions);
isTouch = styles.getPropertyValue('display') !== 'flex';
}
checkHeader();
// Function to fetch the wishlist item IDs
async function fetchWishlistItemIds() {
try {
const wishlistRef = collection(db, 'users', user.uid, 'wishlist');
const querySnapshot = await getDocs(wishlistRef);
const itemIds = querySnapshot.docs.map(doc => doc.id);
return itemIds;
} catch (error) {
console.error('Error fetching wishlist items:', error);
return []; // Return an empty array in case of an error
}
}
// wishlist sorting function
async function sortByWishlist() {
if (view === 'wishlist') {
const wishlist = await fetchWishlistItemIds();
if (wishlist.length > 0) {
const products = document.querySelectorAll('.grid-item');
products.forEach(product => {
const productId = product.getAttribute('data-item-id'); 
if (!wishlist.includes(productId)) {
product.style.display = 'none';
}
});
} else {
document.querySelector('.products-flex-container').innerHTML = '<p>No items desired yet.</p>';
}
}  
}
//Place the button
var nestedCategories = document.querySelector('.nested-category-tree-wrapper');
var categoryList = nestedCategories.querySelector('ul');
categoryList.insertAdjacentElement('afterend', wishlistPageButtonContainer);
isTouch ? wishlistPageButtonContainer.classList.add('mobile') : wishlistPageButtonContainer.classList.remove('mobile');
// Handle pushing the button
wishlistPageButtonContainer.addEventListener('click', function(event) {
event.preventDefault();
window.location.href = '/shop?view=wishlist';
});
// Call the wishlist sorting function if view=wishlist
sortByWishlist();
} else {
wishlistPageButtonContainer.remove();
}
});
} else {
wishlistPageButtonContainer.remove();
}
});
</script>

CSS:

#wishlistPageButtonText{
  font-size: 22px;
  letter-spacing: 2px;
  text-align: left;
}
#wishlistPageButtonContainer {
  display: flex;
  align-items: center;
  margin-top: -15px;
  height: 40px;
//  border: solid 2px black;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.6s ease;
  transform: scale(1) translate(0%);
}
#wishlistPageButton {
  background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/81708e25-5ea7-489e-b938-457024b47773/hearticon1.png');
  width: 22px !important;
  height: 22px !important;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: 10px;
  margin-top: -4px;

}
#wishlistPageButtonContainer.mobile {
  margin-left: 5px;
  justify-content: center;
  margin-bottom: 20px;
}
#wishlistPageButtonContainer.mobile:hover {
  transform: scale(1.22) translate(0%);
}
#wishlistPageButtonContainer:hover {
  transition: all 0.3s ease;
  transform: scale(1.22) translate(8%);
}

If you followed the previous blog post about wish lists, you can get rid of the separate wish list page code.