Вот код HTML/CSS
Код: Выделить всё
id="vehicle-fitment-filter"
style="display:flex; gap:10px; overflow-x:auto; padding:15px; background:#f7f7f7; border-radius:6px; border:1px solid #ddd; margin-bottom:30px; align-items:center; flex-wrap: nowrap;"
>
Select Make
Select Model
Select Type
Select Year
Search
const selectMake = document.getElementById('filter-make');
const selectModel = document.getElementById('filter-model');
const selectType = document.getElementById('filter-type');
const selectYear = document.getElementById('filter-year');
const btnSubmit = document.getElementById('filter-submit');
// The functions to populate dropdowns (same as previous code)...
function populateMakes() {
selectMake.innerHTML = 'Select Make';
vehicleData.forEach(v => {
const option = document.createElement('option');
option.value = v.make;
option.textContent = v.make;
selectMake.appendChild(option);
});
selectMake.disabled = false;
btnSubmit.disabled = false;
}
function populateModels(selectedMake) {
selectModel.innerHTML = 'Select Model';
selectType.innerHTML = 'Select Type';
selectYear.innerHTML = 'Select Year';
selectModel.disabled = true;
selectType.disabled = true;
selectYear.disabled = true;
if (!selectedMake) return;
const make = vehicleData.find(v => v.make === selectedMake);
if (!make) return;
make.models.forEach(m => {
const option = document.createElement('option');
option.value = m.model;
option.textContent = m.model;
selectModel.appendChild(option);
});
selectModel.disabled = false;
}
function populateTypes(make, model) {
selectType.innerHTML = 'Select Type';
selectYear.innerHTML = 'Select Year';
selectType.disabled = true;
selectYear.disabled = true;
if (!make || !model) return;
const makeEntry = vehicleData.find(v => v.make === make);
if (!makeEntry) return;
const modelEntry = makeEntry.models.find(m => m.model === model);
if (!modelEntry) return;
modelEntry.types.forEach(t => {
const option = document.createElement('option');
option.value = t.type;
option.textContent = t.type;
selectType.appendChild(option);
});
selectType.disabled = false;
}
function populateYears(make, model, type) {
selectYear.innerHTML = 'Select Year';
selectYear.disabled = true;
if (!make || !model || !type) return;
const makeEntry = vehicleData.find(v => v.make === make);
if (!makeEntry) return;
const modelEntry = makeEntry.models.find(m => m.model === model);
if (!modelEntry) return;
const typeEntry = modelEntry.types.find(t => t.type === type);
if (!typeEntry) return;
typeEntry.years.forEach(y => {
const option = document.createElement('option');
option.value = y.ktype;
option.textContent = y.year;
selectYear.appendChild(option);
});
selectYear.disabled = false;
}
// Event Listeners
selectMake.addEventListener('change', (e) => {
populateModels(e.target.value);
selectType.innerHTML = 'Select Type';
selectYear.innerHTML = 'Select Year';
selectType.disabled = true;
selectYear.disabled = true;
});
selectModel.addEventListener('change', (e) => {
populateTypes(selectMake.value, e.target.value);
selectYear.innerHTML = 'Select Year';
selectYear.disabled = true;
});
selectType.addEventListener('change', (e) => {
populateYears(selectMake.value, selectModel.value, e.target.value);
});
btnSubmit.addEventListener('click', () => {
const ktype = selectYear.value;
if (!ktype) {
alert('Please select a valid Year.');
return;
}
const url = new URL(window.location.origin + '/pages/vehicle-fitment-results');
url.searchParams.set('ktype', ktype);
window.location.href = url.toString();
});
document.getElementById('vehicle-data-script').onload = () => {
if (typeof vehicleData === 'undefined') {
alert('Vehicle data failed to load. Please check vehicle-data.js');
return;
}
populateMakes();
};
{% schema %}
{
"name": "Vehicle Fitment Filter",
"settings": [],
"presets": [{ "name": "Vehicle Fitment Filter" }]
}
{% endschema %}
< /code>
Что касается JavaScript для установки транспортного средства, вот код (например, только) < /p>
const vehicleData = [
{
make: "AC",
models: [
{
model: "Ace",
types: [
{
type: "4.6",
years: [
{year: 1998, ktype: "126007" },
{year: 1999, ktype: "126007" },
{year: 2000, ktype: "126007" },
{year: 2001, ktype: "126007" },
{year: 2002, ktype: "126007" },
{year: 2003, ktype: "126007" },
{year: 2004, ktype: "126007" },
{year: 2005, ktype: "126007" },
{year: 2006, ktype: "126007" },
{year: 2007, ktype: "126007" },
{year: 2008, ktype: "126007" },
{year: 2009, ktype: "126007" },
{year: 2010, ktype: "126007" },
{year: 2011, ktype: "126007" },
{year: 2012, ktype: "126007" },
{year: 2013, ktype: "126007" },
{year: 2014, ktype: "126007" },
{year: 2015, ktype: "126007" },
{year: 2016, ktype: "126007" },
{year: 2017, ktype: "126007" },
{year: 2018, ktype: "126007" },
{year: 2019, ktype: "126007" },
{year: 2020, ktype: "126007" },
{year: 2021, ktype: "126007" },
{year: 2022, ktype: "126007" },
{year: 2023, ktype: "126007" },
{year: 2024, ktype: "126007" }
]
}
]
}
]
}
];
< /code>
И это код для страницы результата < /p>
{% assign ktype_filter = request.params.ktype %}
Vehicle Fitment Search Results
{% if ktype_filter == blank %}
Please select a vehicle on the homepage.
{% else %}
Showing products compatible with vehicle code: [b]{{ ktype_filter }}[/b]
{% assign matched_products = collections.all.products
| where: 'metafields.Vehicle_KType.compatibility.ktype', ktype_filter
%}
{% if matched_products == empty %}
No compatible products found.
{% else %}
{% for product in matched_products %}
[url={{ product.url }}]
{% if product.featured_image %}
{% endif %}
{{ product.title }}
[/url]
{{ product.price | money }}
{% endfor %}
{% endif %}
{% endif %}
Подробнее здесь: https://stackoverflow.com/questions/796 ... pulling-up
