// Use the BigCommerce Storefront API to retrieve the list of available makes, models, and years for a particular category // and populate the search dropdowns with that data. // See https://developer.bigcommerce.com/api-reference/storefront/products for more info. // Initialize the BigCommerce JavaScript SDK. var client = new window.bcSdk(); // Specify the category ID for which you want to retrieve the makes, models, and years. var categoryId = 123; // Define a function that retrieves the list of makes for the specified category // and populates the make dropdown with the relevant data. function populateMakeDropdown() { client.products.list({ category_id: categoryId, include: ["variants"] }).then(function(response) { var makes = response.data.map(function(product) { return product.variants[0].option_values[0].label; }); makes = [...new Set(makes)].sort(); var makeSelect = document.getElementById("make-select"); makes.forEach(function(make) { var option = document.createElement("option"); option.value = make; option.text = make; makeSelect.add(option); }); }); } // Define a function that retrieves the list of models for the specified make and category // and populates the model dropdown with the relevant data. function populateModelDropdown(make) { client.products.list({ category_id: categoryId, include: ["variants"] }).then(function(response) { var models = response.data.filter(function(product) { return product.variants[0].option_values[0].label === make; }).map(function(product) { return product.variants[0].option_values[1].label; }); models = [...new Set(models)].sort(); var modelSelect = document.getElementById("model-select"); modelSelect.innerHTML = "Select Model"; models.forEach(function(model) { var option = document.createElement("option"); option.value = model; option.text = model; modelSelect.add(option); }); }); } // Define a function that retrieves the list of years for the specified make, model, and category // and populates the year dropdown with the relevant data. function populateYearDropdown(make, model) { client.products.list({ category_id: categoryId, include: ["variants"] }).then(function(response) { var years = response.data