{% endif %}
{{ section.settings.heading | default: 'Dealer Locator' }}
Select Province *
Select One
{% for block in section.blocks %}
{{ block.settings.province_name }}
{% endfor %}
Select City / Municipality
Select One
Select Dealer Name
Select One
BACK TO HOMEPAGE
document.addEventListener("DOMContentLoaded", function () {
var provinceSelect = document.getElementById("province");
var citySelect = document.getElementById("city");
var dealerSelect = document.getElementById("dealer");
var dealerData = {
{% for block in section.blocks %}
"{{ block.settings.province_name }}": {
{% assign city_list = block.settings.cities | split: "|" %}
"cities": {
{% for city in city_list %}
{% assign city_parts = city | split: ":" %}
"{{ city_parts[0] }}": [
{% assign dealers = city_parts[1] | split: "," %}
{% for dealer in dealers %}"{{ dealer }}"{% unless forloop.last %}, {% endunless %}
{% endfor %}
]
{% unless forloop.last %}, {% endunless %}
{% endfor %}
}
}
{% unless forloop.last %}, {% endunless %}
{% endfor %}
};
provinceSelect.addEventListener("change", function () {
var selectedProvince = this.value;
citySelect.innerHTML = 'Select One';
dealerSelect.innerHTML = 'Select One';
citySelect.disabled = true;
dealerSelect.disabled = true;
if (selectedProvince && dealerData[selectedProvince]) {
var cities = dealerData[selectedProvince].cities;
citySelect.disabled = false;
for (var city in cities) {
var option = document.createElement("option");
option.value = city;
option.textContent = city;
citySelect.appendChild(option);
}
}
});
citySelect.addEventListener("change", function () {
var selectedProvince = provinceSelect.value;
var selectedCity = this.value;
dealerSelect.innerHTML = 'Select One';
dealerSelect.disabled = true;
if (selectedProvince && selectedCity && dealerData[selectedProvince]) {
var dealers = dealerData[selectedProvince].cities[selectedCity];
if (dealers) {
dealerSelect.disabled = false;
dealers.forEach(function (dealer) {
var option = document.createElement("option");
option.value = dealer;
option.textContent = dealer;
dealerSelect.appendChild(option);
});
}
}
});
});
{% schema %}
{
"name": "Dealer Locator",
"settings": [
{
"type": "image_picker",
"id": "dealer_image",
"label": "Dealer Image"
},
{
"type": "text",
"id": "image_alt_text",
"label": "Image Alt Text",
"default": "Dealer Location Map"
},
{
"type": "text",
"id": "heading",
"label": "Section Heading",
"default": "Dealer Locator"
}
],
"blocks": [
{
"type": "province",
"name": "Province",
"settings": [
{
"type": "text",
"id": "province_name",
"label": "Province Name"
},
{
"type": "textarea",
"id": "cities",
"label": "Cities & Dealers (Format: City1:Dealer1,Dealer2|City2:Dealer3)",
"default": "Makati:Dealer A,Dealer B|Quezon City:Dealer C,Dealer D"
}
]
}
],
"presets": [
{
"name": "Dealer Locator",
"blocks": []
}
]
}
{% endschema %}
Подробнее здесь: https://stackoverflow.com/questions/794 ... showing-up
Мобильная версия