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
<divid="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 += "<imgclass='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.
The goal is to update the dropdowns above with live code from a firestore .onsnapshot query
// Target select IDlet selectDropdown = document.getElementById('select-yui_3_17_2_1_1588782094999_71107-field');// Search for Portland's available flavors & limit to 16let dropdownOptions = db.collection("flavorsOfTheDay").where("isAvailablePortland","==",true).limit(16)// ALPHABETIZE AVAILABLE FLAVORSlet 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.
Question
cnfall
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):
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.
The goal is to update the dropdowns above with live code from a firestore .onsnapshot query
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.
Link to comment
Top Posters For This Question
1
1
Popular Days
Aug 21
1
Nov 10
1
Top Posters For This Question
bangank36 1 post
cnfall 1 post
Popular Days
Aug 21 2021
1 post
Nov 10 2021
1 post
Popular Posts
cnfall
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 an
Posted Images
1 answer to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment