<head>
<!-- Existing CSS links -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css">
<!-- Your custom CSS -->
<style>
/* Customize the container padding and background */
.container {
background-color: #fff; /* Light background */
padding: 20px;
border-radius: 15px;
}
/* Style the select dropdowns */
.select2-container--bootstrap-5 .select2-selection {
height: 40px;
border-radius: 10px;
font-size: 5px;
}
/* Change the placeholder text color */
.select2-container--bootstrap-5 .select2-selection__placeholder {
color: #6c757d; /* Bootstrap secondary text color */
}
/* Style the accordion headers */
.accordion-button {
background-color: #fff; /* Light gray background */
font-weight: bold;
}
/* Change the accordion header on hover */
.accordion-button:hover {
background-color: #fff;
}
/* When the accordion is expanded */
.accordion-button:not(.collapsed) {
background-color: #fff; /* Selected/expanded color */
color: #000; /* Keep text color or change as needed */
}
/* Style the images inside feature cards */
.card img {
max-height: 200px;
object-fit: cover; /* Ensures images cover the area without distortion */
}
/* Add spacing below feature descriptions */
#fittingFeatureList .accordion-body {
padding: 1rem;
}
/* Style for warning and error messages */
.text-warning {
color: #ffc107;
}
.text-danger {
color: #dc3545;
}
#fittingFeatureList {
display: none;
}
/* Remove all borders from accordion items */
.accordion-item {
border: none;
}
/* Add only bottom border to accordion headers */
.accordion-button {
border: none; /* Remove default borders */
border-bottom: 1px solid #dee2e6; /* Add bottom border */
border-radius: 0; /* Remove border radius for a flat look */
padding: 1rem; /* Optional: adjust padding if needed */
}
/* Optional: style the expanded button to remove border overlap or adjust appearance */
.accordion-button:not(.collapsed) {
border-bottom: 1px solid #dee2e6; /* Ensure bottom border remains on expanded */
}
/* Padding for dropdowns */
#fittingClass, #fittingModel {
padding: 10px;
}
/* Padding for vehicle name */
#selectedVehicleName {
padding: 10px;
background-color: #f1f1f1;
border-radius: 10px;
}
/* Padding for the accordion container */
#fittingFeatureList {
padding: 10px;
}
.select2-container--bootstrap-5 .select2-selection {
border: 1px solid #ced4da !important;
border-radius: 8px !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
border-color: #fff;
box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
.mb-2 {
margin-bottom: 4.5rem !important;
}
}
</style>
</head>
<div class="container my-4">
<!-- Existing select elements -->
<div class="row row-cols-1 row-cols-md-2 g-3 mb-2">
<div class="col">
<select class="form-select" name="fitting_class" id="fittingClass">
<option value=""></option>
</select>
</div>
<div class="col">
<select class="form-select" name="fitting_model" id="fittingModel" disabled>
<option value=""></option>
</select>
</div>
</div>
<!-- Vehicle name display -->
<h5 id="selectedVehicleName" style="margin-bottom: 15px; display: none;"></h5>
<!-- Fitting features accordion container -->
<div class="row row-cols-1 row-cols-md-1 g-3">
<div class="col">
<div id="fittingFeatureList"></div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
jQuery(document).ready(function ($) {
function loadAllFeatures() {
$.ajax({
url: 'https://cartlinetech.com//wp-content/uploads/MB vehicle Selector/fitting-features-update.json',
method: 'GET',
dataType: 'json',
success: function (data) {
renderFeatures(data);
},
error: function () {
$('#fittingFeatureList').html('<p class="text-danger">Failed to load features.</p>');
}
});
}
function updateVehicleName() {
const classText = $('#fittingClass').select2('data')[0]?.text || '';
const modelText = $('#fittingModel').select2('data')[0]?.text || '';
if (classText && modelText) {
$('#selectedVehicleName').text(`Selected Vehicle: ${classText} - ${modelText}`).show();
} else {
$('#selectedVehicleName').hide();
}
}
function renderFeatures(features) {
const featureList = $('#fittingFeatureList');
featureList.empty();
if (!features || features.length === 0) {
featureList.html('<p class="text-warning">No features found.</p>');
return;
}
const accordion = $('<div class="accordion" id="accordionExample"></div>');
features.forEach((feature, index) => {
const itemId = `collapse${index}`;
const item = `
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#${itemId}" aria-expanded="true" aria-controls="${itemId}">
${feature.title}
</button>
</h2>
<div id="${itemId}" class="accordion-collapse collapse ${index === 0 ? 'show' : ''}" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="row row-cols-1 row-cols-md-2 g-3 mb-2">
<div class="col">
<div class="card border-0">
<div class="card-body">
<img src="${feature.image_url}" class="img-fluid rounded-3" alt="${feature.title}">
</div>
</div>
</div>
<div class="col">
<div class="card border-0">
<div class="card-body">
${feature.description}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
accordion.append(item);
});
featureList.append(accordion);
}
$('#fittingClass').select2({
width: '100%',
allowClear: true,
theme: 'bootstrap-5',
closeOnSelect: true,
placeholder: 'Select class...',
ajax: {
url: 'https://cartlinetech.com/wp-content/uploads/MB vehicle Selector/fitting-classes.json',
dataType: 'json',
processResults: function (data) {
return {
results: data.map(item => ({ id: item.code, text: item.name }))
};
}
}
});
$('#fittingModel').select2({
width: '100%',
allowClear: true,
theme: 'bootstrap-5',
closeOnSelect: true,
placeholder: 'Select model...',
ajax: {
url: 'https://cartlinetech.com/wp-content/uploads/MB vehicle Selector/fitting-models.json',
dataType: 'json',
processResults: function (data) {
const fittingClassValue = $('#fittingClass').val();
const filteredData = data.filter(item => item.class_code === fittingClassValue);
return {
results: filteredData.map(item => ({ id: item.code, text: item.name }))
};
}
}
});
$('#fittingClass').on('change', function () {
updateVehicleName();
const selectedValue = $(this).val();
if (selectedValue) {
$('#fittingModel').prop('disabled', false).val(null).trigger('change');
} else {
$('#fittingModel').prop('disabled', true).val(null).trigger('change');
}
});
$('#fittingModel').on('change', function () {
updateVehicleName();
const selectedModel = $(this).val();
if (!selectedModel) {
$('#fittingFeatureList').hide();
return;
}
$('#fittingFeatureList').show();
$.ajax({
url: 'https://cartlinetech.com/wp-content/uploads/MB vehicle Selector/fitting-features-update.json',
method: 'GET',
dataType: 'json',
success: function (data) {
const filteredFeatures = data.filter(item => item.model_code.includes(selectedModel));
renderFeatures(filteredFeatures);
},
error: function () {
$('#fittingFeatureList').html('<p class="text-danger">Failed to load features for the selected model.</p>');
}
});
});
loadAllFeatures();
});
</script>
