Add functional select box

Ask the community
, , ,
1

We have a page developed at https://tptxdev.com/carlist and the delvelper has added a select box to the table. He is trying to do it in the custom code area which requires owner-level permissions.

The issue we are trying to solve is this one:

ISSUE (checkbox) - Make the checkbox functional so that when you click an item, you can then select from a dropdown to complete the get more information form to inquire about that car.

Logic:
Clicking this selector should cause the checkbox to check
Selectable choice - “Get more information about this vehicle”
The message area of the form should populate with
ID: old_id number
year, make, and model information
range of values formatted with dollar signs and commas for both trade-in value and market value

I was hoping for something that looked a little bit like the one in this example.
image

Currently, we do appear to be close but are not quite there yet.

My WhatsApp chat link is here

Assistance is greatly appreciated.

Here is the code for the Carlist page

import wixData from "wix-data";
import wixWindowFrontend from "wix-window-frontend";
import { proGallery } from "wix-pro-gallery-backend";
import { getGreetings } from "backend/dataFetcher.web.js";

// CARLIST PAGE - https://tptxdev.com/carlist
// WHATSAPP CHAT - https://chat.whatsapp.com/KQeXmIV3IRaDDzJjH8rT0o 

// @author Unknown

let thumbUrl = '';

$w.onReady(function () {
    // ...
    let table = $w('#table1');

    $w("#table1").onCellSelect(async (event) => {
        let cellData = event.cellData;
        thumbUrl = cellData;
        wixData.query("cars/copart")
            .eq("Image_Thumbnail", cellData)
            .find()
            .then((results) => {
                if (results.items.length > 0) {
                    var url = results.items[0].Image_URL;
                    var year = results.items[0].Year;
                    var make = results.items[0].Make;
                    var model = results.items[0].Model_Detail;
                    var trade = results.items[0].CGLow;
                    var market = results.items[0].CGHigh;
                    var urlYearMakeModelTradeMarket = [url, year, make, model, trade, market]
                    displayLightbox(urlYearMakeModelTradeMarket)
                } else {
                    // handle case where no matching items found
                    console.log('Didnt find one');
                }
            })
            .catch((err) => {
                console.log('Didnt find');
                console.log(err);
            });
    });

    // @author Jaay - Search code

    $w("#input1").onInput((event) => {
        let input = $w("#input1");

        let search_query = event.target.value;
        if (input.value === "") {
            console.log("Empty22: ....");
            // $w("#table1").refresh()
        } else {
            wixData
                .query("cars/copart")
                .contains("Make", search_query)
                .or(wixData.query("cars/copart").contains("Model_Detail", search_query))
                .or(wixData.query("cars/copart").contains("Transmission", search_query))
                .or(wixData.query("cars/copart").contains("Fuel_Type", search_query))
                .or(wixData.query("cars/copart").contains("BODY_STYLE", search_query))
                .or(wixData.query("cars/copart").contains("Color", search_query))
                .or(wixData.query("cars/copart").contains("Drive", search_query))
                .find()
                .then((results) => {
                    $w("#table1").rows = results.items;
                    console.log("results are ..", results);
                })
                .catch((error) => {
                    console.error("Error fetching data:", error);
                });
        }
    })

});

// @author Ahsan - Pictures come up in lightbox when the thumbnail is clicked

async function displayLightbox(urlYear) {
    var url = urlYear[0];
    var year = urlYear[1];
    var make = urlYear[2];
    var model = urlYear[3];
    var trade = urlYear[4];
    var market = urlYear[5];
    console.log('Something was clicked!');
    let cellData = url
    console.log(cellData);
    const cellDataHttps = cellData.replace("http://", "https://");
    const fetchedData = await getGreetings(cellDataHttps);
    const contentToPassToLightbox = []
    const imageUrls = [];
    if (fetchedData.lotImages && fetchedData.lotImages.length != 0) {
        fetchedData.lotImages.forEach((item) => {
            if (item.link && item.link.length > 0) {
                imageUrls.push(item.link[0].url);
            }
        });
        var urlYearMakeModelTradeMarket = [imageUrls, year, make, model, trade, market];
        wixWindowFrontend.openLightbox("Carlist Lightbox", urlYearMakeModelTradeMarket);
    } else {
        imageUrls.push('https://' + thumbUrl.toString().slice(0, -7) + 'ful.jpg')
        var urlYearMakeModelTradeMarket = [imageUrls, year, make, model, trade, market];
        wixWindowFrontend.openLightbox("Tim Carlist Lightbox", urlYearMakeModelTradeMarket);
    }
};

Here is the code for the head section of the site

<script>
  function updateSelect() {
    var selectColumns = document.querySelectorAll("tbody td:nth-child(1)");
    Array.from(selectColumns).forEach(function (selectColumn) {
      var value = selectColumn.innerText;
      if (selectColumn.innerHTML.includes("<style")) {
      }else{
        if (value == "Yes") {
          selectColumn.innerHTML = `
          <style>
      .custom-checkbox {
        display: inline-block;
      }

      .custom-checkbox input {
        display: none;
      }

      .checkmark {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 2px solid black;
        background-color: white;
      }

      .custom-checkbox input:checked + .checkmark:after {
        content: "✔️";
        font-size: 16px;
        font-weight: bolder;
        color: black;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      /* Style for the dropdown container */
      .dropdown {
        position: relative;
        display: inline-block;
      }

      /* Style for the dropdown button */
      .dropbtn {
        padding: 10px;
        font-size: 16px;
        border: none;
        cursor: pointer;
      }

      /* Style for the dropdown content */
      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        z-index: 1;
      }

      /* Style for the dropdown items */
      .dropdown-content a {
        padding: 12px 16px;
        display: block;
        text-decoration: none;
        color: #333;
      }

      /* Change color on hover */
      .dropdown-content a:hover {
        background-color: #f1f1f1;
      }
    </style>
    <div id="checkDiv" style="display: flex; align-items: center; justify-content: center; margin: 0;  margin: auto; padding-top: 30px">
            <div style:"display: block; margin:auto; padding: 28px">
                <label class="custom-checkbox">
                  <input type="checkbox" checked /> <!-- Set 'checked' attribute -->
                  <span class="checkmark"></span>
                </label>

                <div class="dropdown">
                  <button class="dropbtn" onclick="toggleDropdown()">▼</button>

                  <div class="dropdown-content" id="myDropdown">
                    <a href="#">Get more information about this vehicle</a>
                  </div>
                </div>
            </div>
            </div>

 `;
        } else {
          selectColumn.innerHTML = `

          <style>

      .custom-checkbox {
        display: inline-block;
      }

      .custom-checkbox input {
        display: none;
      }

      .checkmark {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 2px solid black;
        background-color: white;
      }

      .custom-checkbox input:checked + .checkmark:after {
        content: "✔️";
        font-size: 16px;
        font-weight: bolder;
        color: black;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      /* Style for the dropdown container */
      .dropdown {
        position: relative;
        display: inline-block;
      }

      /* Style for the dropdown button */
      .dropbtn {
        padding: 10px;
        font-size: 16px;
        border: none;
        cursor: pointer;
      }

      /* Style for the dropdown content */
      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        z-index: 1;
      }

      /* Style for the dropdown items */
      .dropdown-content a {
        padding: 12px 16px;
        display: block;
        text-decoration: none;
        color: #333;
      }

      /* Change color on hover */
      .dropdown-content a:hover {
        background-color: #f1f1f1;
      }
    </style>

          <div id="checkDiv" style="display: flex; align-items: center; justify-content: center; margin: 0;  margin: auto; padding-top: 30px">
            <div style:"display: block; margin:auto; padding: 28px">
      <label class="custom-checkbox">
        <input type="checkbox" />
        <span class="checkmark"></span>
      </label>

      <div class="dropdown">
        <button class="dropbtn" onclick="toggleDropdown()">▼</button>

        <div class="dropdown-content" id="myDropdown">
          <a href="#">Get more information about this vehicle</a>
        </div>
      </div>
      </div>
    </div>
   
            `;
        }
      }
    });
  }
  updateSelect();

  function updateStar() {
    var starColumns = document.querySelectorAll("tbody td:nth-child(2)");
    Array.from(starColumns).forEach(function (starColumn) {
      var value = starColumn.innerText;
      if (starColumn.innerHTML.includes("<img")) {
      } else {
        if (value == "1") {
          starColumn.innerHTML = `<img style="height: 30px; width: 30px; display: block; margin: 0 auto; padding: 20px " src="https://static.wixstatic.com/media/c4ed5a_e0e65c63deef4a769e7c8ce726a27cad~mv2.png" alt="">`;
        } else {
          starColumn.innerHTML = `<img style="height: 30px; width: 30px; display: block; margin: 0 auto; padding: 20px "  src="https://static.wixstatic.com/media/c4ed5a_439924e569ba4db49dee51859ec99f9c~mv2.png" alt="">`;
        }
      }
    });
  }
  updateStar();

  // thumbnail
  setInterval(updateImg, 5000);
  function updateImg() {
    var elements = document.querySelectorAll(".ZTH0AF");
    elements.forEach((element) => {
      if (typeof element.innerHTML == "string") {
        var firstCharacters = element.innerHTML.substring(0, 13);
        var imageURL = "https://" + element.innerHTML;
        if (firstCharacters == "cs.copart.com") {
          element.innerHTML =
            "<img style= 'max-height: 50%; max-width: 100%;' src ='" +
            imageURL +
            "'/>";
        }
      }
    });
    updateSelect();
    updateStar();
  }

  var style = document.createElement("style");
  style.innerHTML = `
            thead,
            tbody {
              display: block;
            }
            tbody {
              height: 500px;
              overflow-y: auto; //vertical scroll
              overflow-x: auto; //horizontal scroll
            }
          `;
  document.head.appendChild(style);

      // JavaScript function to toggle the visibility of the dropdown content
      function toggleDropdown() {
      var checkbox = document.querySelector(".custom-checkbox input");
      checkbox.checked = !checkbox.checked;
      var dropdownContent = document.getElementById("myDropdown");
      dropdownContent.style.display =
        dropdownContent.style.display === "block" ? "none" : "block";
    }

    // Close the dropdown if the user clicks outside of it
    window.onclick = function (event) {
      if (!event.target.matches(".dropbtn")) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        for (var i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.style.display === "block") {
            openDropdown.style.display = "none";
          }
        }
      }
    };

    document.addEventListener("DOMContentLoaded", function () {

      document.getElementById('checkDiv').addEventListener("click", function () {
        checkbox.checked = !checkbox.checked;
      });

      // Prevent checkbox click event from propagating to the document click event
      document
        .querySelector(".custom-checkbox")
        .addEventListener("click", function (event) {
          event.stopPropagation();
        });
    });



</script>