Устройство автомобиля для Shopify с использованием JavaScript, но транспортное средство не подтягивает [закрыто] ⇐ Html

[Anonymous]

У меня нет никаких знаний по кодированию, поэтому я использую Blackbox AI, чтобы сделать это. Я пытаюсь иметь на домашней странице фильтр для автомобиля на домашней странице, где типы являются идентификатором. Тем не менее, JavaScript Данных автомобилей не подтягивается.

Код: Выделить всё

  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