Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Dynamically update product select drop-downs. Can it be done?


cnfall

Question

Site URL: https://www.gorgeousgelato.com/next-day-delivery/gelato-pint

I have a test page www.gorgeousgelato.com/automatic-gallery-test where I was able to pull firestore.onSnapshot query results and display them in a real-time gallery of images with this code (which works as intended):

// CREATE GALLERY
<div id="coolGallery" class='flavorsOfTheDayGallery'></div>

// FIND FLAVORS THAT ARE MARKED AVAILABLE
  let flavors = db.collection("flavorsOfTheDay").where("isAvailable", "==", true)
    .limit(16)
  
  // ORDER AVAILABLE FLAVORS ALPHABETICALLY AND BUILD EACH AN IMG TAG WITH SOURCE AND ALT TEXT
portlandsFlavors.orderBy('flavorName')
    .onSnapshot((querySnapshot) => {
    coolGallery.innerHTML = "";
        querySnapshot.forEach((doc) => {
          coolGallery.innerHTML += "<img class='flavorImage' src='"+doc.data().url+"' alt='"+doc.data().flavorName+"'>"
          
            console.log(doc.id, " => ", doc.data());
        });
    })

I have been trying to recreate this success for product select dropdowns '<select><option value="">"text"</option></select>'  where each 'value' and 'text'  would be equal to a flavorName derived from the firestore query (standard dropdown shown below). I can push the query results to the console.log only if I remove reference to 'selectDropdown.innerHTML' from the querySnapshot.

123533734_ScreenShot2021-08-19at11_04_10PM.png.88e552219b02944ff6ab26045addce4b.png

The goal is to update the dropdowns above with live code from a firestore .onsnapshot query

// Target select ID
let selectDropdown = document.getElementById('select-yui_3_17_2_1_1588782094999_71107-field');
  
  // Search for Portland's available flavors & limit to 16
  let dropdownOptions = db.collection("flavorsOfTheDay").where("isAvailablePortland", "==", true)
  .limit(16)
  
  // ALPHABETIZE AVAILABLE FLAVORS
  let alpha = dropdownOptions.orderBy('flavorName')
  .onSnapshot((querySnapshot) => {
    selectDropdown.innerHTML = ""; // .innerHTML cannot read
    querySnapshot.forEach((doc) => {
      selectDropdown.innerHTML += "<option value='"+doc.data().flavorName+"'>'"+doc.data().flavorName+"'</option>"
      
      console.log(doc.id, " => ", doc.data().flavorName);
    });
  })

The last thing to mention is that the lightbox modals (shown below) which hold the select dropdowns are not loaded into the DOM until product "Add to Cart" buttons are clicked. My attempts at using MutationObservers have been unsuccessful and I'm not certain I will be able to make changes even if the mutationObserver catches the addition of the lightbox-modal to DOM.

2100316494_ScreenShot2021-08-19at11_03_48PM.thumb.png.57e2430f497b8a8f6442f17cc6a6f4ca.png

Link to comment

1 answer to this question

Recommended Posts

  • 0
On 8/22/2021 at 1:18 AM, cnfall said:

Site URL: https://www.gorgeousgelato.com/next-day-delivery/gelato-pint

I have a test page www.gorgeousgelato.com/automatic-gallery-test where I was able to pull firestore.onSnapshot query results and display them in a real-time gallery of images with this code (which works as intended):

// CREATE GALLERY
<div id="coolGallery" class='flavorsOfTheDayGallery'></div>

// FIND FLAVORS THAT ARE MARKED AVAILABLE
  let flavors = db.collection("flavorsOfTheDay").where("isAvailable", "==", true)
    .limit(16)
  
  // ORDER AVAILABLE FLAVORS ALPHABETICALLY AND BUILD EACH AN IMG TAG WITH SOURCE AND ALT TEXT
portlandsFlavors.orderBy('flavorName')
    .onSnapshot((querySnapshot) => {
    coolGallery.innerHTML = "";
        querySnapshot.forEach((doc) => {
          coolGallery.innerHTML += "<img class='flavorImage' src='"+doc.data().url+"' alt='"+doc.data().flavorName+"'>"
          
            console.log(doc.id, " => ", doc.data());
        });
    })

I have been trying to recreate this success for product select dropdowns '<select><option value="">"text"</option></select>'  where each 'value' and 'text'  would be equal to a flavorName derived from the firestore query (standard dropdown shown below). I can push the query results to the console.log only if I remove reference to 'selectDropdown.innerHTML' from the querySnapshot.

123533734_ScreenShot2021-08-19at11_04_10PM.png.88e552219b02944ff6ab26045addce4b.png

The goal is to update the dropdowns above with live code from a firestore .onsnapshot query

// Target select ID
let selectDropdown = document.getElementById('select-yui_3_17_2_1_1588782094999_71107-field');
  
  // Search for Portland's available flavors & limit to 16
  let dropdownOptions = db.collection("flavorsOfTheDay").where("isAvailablePortland", "==", true)
  .limit(16)
  
  // ALPHABETIZE AVAILABLE FLAVORS
  let alpha = dropdownOptions.orderBy('flavorName')
  .onSnapshot((querySnapshot) => {
    selectDropdown.innerHTML = ""; // .innerHTML cannot read
    querySnapshot.forEach((doc) => {
      selectDropdown.innerHTML += "<option value='"+doc.data().flavorName+"'>'"+doc.data().flavorName+"'</option>"
      
      console.log(doc.id, " => ", doc.data().flavorName);
    });
  })

The last thing to mention is that the lightbox modals (shown below) which hold the select dropdowns are not loaded into the DOM until product "Add to Cart" buttons are clicked. My attempts at using MutationObservers have been unsuccessful and I'm not certain I will be able to make changes even if the mutationObserver catches the addition of the lightbox-modal to DOM.

2100316494_ScreenShot2021-08-19at11_03_48PM.thumb.png.57e2430f497b8a8f6442f17cc6a6f4ca.png

When the lightbox show up, you can notice the body has additional class, you can observer attribute with filter "class" to detect the bahavior

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...