https://quatrorodas.abril.com.br/wp-content/themes/abril-quatrorod…/js/abril-kbb.js?ver=0298283839390303

1$('.kbb .kbb-seletor .vehicleBrand_id').change(function () {
2    let select = document.getElementById('vehicleModel_id');
3    let option = document.createElement('OPTION');
4
5    option.appendChild(document.createTextNode('Carregando modelos...'));
6    option.setAttribute('hidden', '');
7    option.value = '';
8    select.innerHTML = '';
9    select.appendChild(option)
10
11    GetAllVehicleModel(this.value, function (response) {
12        select.innerHTML = '';
13        option = document.createElement('OPTION');
14        option.setAttribute('hidden', '');
15        option.value = '';
16        option.appendChild(document.createTextNode('Escolha o modelo...'));
17        select.appendChild(option)
18        for (let i in response.Response) {
19            let model = response.Response[i];
20            option = document.createElement('OPTION');
21            option.setAttribute('value', model.ID);
22            option.appendChild(document.createTextNode(model.Name));
23            select.appendChild(option);
24        }
25    });
26});
27
28$('.kbb .vehicleYear button').click(function () {
29    loadAllVehicleVersion(this.value);
30});
31$('.kbb select.vehicleYear').change(function () {
32    loadAllVehicleVersion(this.value);
33});
34$('.kbb .vehicleVersion').change(function () {
35    
36    const selected = this.options[this.selectedIndex]
37    $('.kbb .step3, .kbb .step4').removeClass('ready');
38    jQuery('.preloader-step3').toggleClass('preloading');
39
40    GetVehicle(selected.dataset.vehicleid, function (response) {
41        $('.kbb-tab span.av-mileage').text(new Intl.NumberFormat('pt-BR', { }).format(response.Response.AVMileage));
42        $('.kbb-tab input.av-mileage').prop('value', response.Response.AVMileage);
43        document.querySelector('.kbb-modelo-tabela-titulo .brand').textContent = response.Response.BrandName;
44        document.querySelector('.kbb-modelo-tabela-titulo .version').textContent = response.Response.VersionName;
45        document.querySelector('.kbb-modelo-tabela-titulo .year').textContent = response.Response.Year;
46        document.querySelector('.kbb-modelo .thumbnail').src = response.Response.FirstMediaCompleteURLLarge;
47        document.querySelector('.kbb-modelo-tabela .specs.doors .dynamic').textContent = response.Response.NrDoors;
48        document.querySelector('.kbb-modelo-tabela .specs.seats .dynamic').textContent = response.Response.NrSeats;
49        document.querySelector('.kbb-modelo-tabela .specs.acceleration .dynamic').textContent = response.Response.Acceleration0to100;
50        document.querySelector('.kbb-modelo-tabela .specs.hp .dynamic').textContent = response.Response.HP;
51        document.querySelector('.kbb-modelo-tabela .specs.urban-consumption .dynamic').textContent = response.Response.UrbanConsumption;
52
53        GetBodyType(response.Response.BodyTypeID, function (response) {
54            document.querySelector('.kbb-modelo-tabela .specs.body-type .dynamic').textContent = response.Response.Name;
55        });
56
57        GetVehicleDriveTrain(response.Response.DriveTrainID, function (response) {
58            document.querySelector('.kbb-modelo-tabela .specs.drive-train-id .dynamic').textContent = response.Response.Name;
59        });
60
61        GetVehicleTransmissionType(response.Response.TransmissionTypeID, function (response) {
62            document.querySelector('.kbb-modelo-tabela .specs.transmission .dynamic').textContent = response.Response.Name;
63        });
64
65        GetVehicleFuelType(response.Response.FuelTypeID, function (response) {
66            document.querySelector('.kbb-modelo-tabela .specs.fuel .dynamic').textContent = response.Response.Name;
67            $('.kbb .step3').addClass('ready');
68            jQuery('.preloader-step3').toggleClass('preloading');
69        });
70    })
71});
72
73$('.kbb .update-price').click(function () {
74    kbbLoadPrices(true);
75});
76$('.kbb .show-price').click(function () {
77    kbbLoadPrices();
78});
79$('.kbb input.av-mileage, .kbb select.vehicleGrade').change(function () {
80    kbbLoadPrices(true);
81});
82function kbbLoadPrices(keep)
83{
84    const version = document.getElementById('vehicleVersion');
85    const selectedVersion = version.options[version.selectedIndex];
86    const vehicleGradeID = document.querySelector('.kbb select.vehicleGrade').value;
87    const vehiclePriceTypeId = document.getElementById('vehiclePriceTypeId').value;
88    const opt = {
89        locationStateID: document.getElementById('state_id').value,
90        year: document.querySelector('.kbb-modelo-tabela-titulo .year').textContent,
91        mileage: document.querySelector('#loja .av-mileage').value,

92        equipmentCost: 0
93    };
94    $('#modal-optional input:checked:enabled').each(function() {
95        opt.equipmentCost += $(this).data('price')
96    });
97
98    if (typeof keep === 'undefined') {
99        keep = false;
100        $('.kbb .step4').removeClass('ready');
101    }
102
103    GetPriceAdvisor(vehiclePriceTypeId, vehicleGradeID, selectedVersion.dataset.vehicleid, opt, function (response) {
104        $('.kbb .step4').addClass('ready');
105        document.getElementById('PriceAdvisorSVG') ? document.getElementById('PriceAdvisorSVG').remove() : null;
106        document.querySelector('.kbb #loja figure').insertAdjacentHTML('afterbegin', response.Response);
107
108        if(keep === false) {
109          if (null === document.querySelector(".block.listagem .col-l-7 .title")) {
110              $('.kbb .step5').removeClass('ready');
111          } else {
112              $('.kbb .step5').addClass('ready');
113          }
114          GetEquipmentsByVehicleID(selectedVersion.dataset.vehicleid, function (response) {
115            kbbCreateOptCategory(response.Response);
116            });
117        }
118    });
119}
120
121function kbbCreateOptCategory(itens) {

122    let categoryList = document.querySelector('#modal-optional .rolagem');
123    categoryList.innerHTML = '';
124    for (let i in itens) {
125        let category = itens[i];
126        let button = document.createElement('button');
127        let divOpcionais = document.createElement('div');
128        if (typeof category.Id === 'undefined') {continue;}
129
130        divOpcionais.classList.add('opcionais');
131        divOpcionais.classList.add('category' + category.Id);
132        button.textContent = category.Name;
133        button.classList.add('btn-opcional');
134        divOpcionais.appendChild(button);
135
136        categoryList.appendChild(divOpcionais);
137    }
138    kbbCreateOptSubCategory(itens);
139}
140function kbbCreateOptSubCategory(itens) {
141    for (let i in itens) {
142        let category = itens[i];
143        let categoryItem = document.querySelector('#modal-optional .rolagem .category' + category.Id);
144
145        for (let j in category) {
146            let subcategory = category[j];
147            let div = document.createElement('div');
148            let h4 = document.createElement('h4');
149            h4.textContent = subcategory.Name;
150            div.appendChild(h4);
151
152            for (let l in subcategory) {
153                let item = subcategory[l];
154                let input = document.createElement('input');
155                let span = document.createElement('span');
156                let br = document.createElement('br');
157                if (typeof item.ID === 'undefined') {continue;}
158
159                input.type = 'checkbox';
160                input.value = item.ID;
161                input.disabled = item.Price === 0;
162                input.checked = item.FlagOptionID === 0;
163                input.setAttribute('data-price', item.Price);
164                span.textContent = item.Name;
165                div.appendChild(input);
166                div.appendChild(span);
167                div.appendChild(br);
168            }
169            categoryItem.appendChild(div);
170        }
171
172    }
173
174    $('.kbb .btn-opcional').click(function() {
175        var qualOpcional = $(this).parent('div').children("div");
176        qualOpcional.toggle(200);
177    });
178}
179function loadAllVehicleVersion(year) {
180    const modelId = document.getElementById('vehicleModel_id').value
181    let select = document.getElementById('vehicleVersion');
182    let option = document.createElement('OPTION');
183
184    $('.kbb .step3, .kbb .step4').removeClass('ready');
185
186    select.innerHTML = '';
187    option.appendChild(document.createTextNode('Carregando versões...'));
188    select.appendChild(option);
189
190    GetAllVehicleVersion(modelId, year, function (response) {
191        select.innerHTML = '';
192        option = document.createElement('OPTION');
193        option.setAttribute('hidden', '');
194        option.appendChild(document.createTextNode('Versão...'));
195        select.appendChild(option)
196        for (let i in response.Response) {
197            let version = response.Response[i];
198            option = document.createElement('OPTION');
199            option.setAttribute('value', version.ID);
200            option.setAttribute('data-vehicleID', version.KBBID);
201            option.appendChild(document.createTextNode(version.Name));
202            select.appendChild(option);
203        }
204    })
205}
206
207function GetVehicleModel(modelID, callback) {
208    const data = {
209        'action': 'GetVehicleModel',
210        'kbb_ajax_nonce': document.getElementById('kbb_ajax_nonce').value,
211        'modelID': modelID
212    };
213    jQuery.post(ajaxurl, data, callback);
214}
215function GetAllVehicleModel(brandID, callback) {
216    const data = {
217        'action': 'GetAllVehicleModel',
218        'kbb_ajax_nonce': document.getElementById('kbb_ajax_nonce').value,
219        'brandID': brandID
220    };
221    jQuery.post(ajaxurl, data, callback);
222}
223
224function GetAllLocationState(callback) {
225    jQuery.post(ajaxurl, {'action': 'GetAllLocationState'}, callback);
226}
227
228function GetAllVehiclePriceType(callback) {
229    jQuery.post(ajaxurl, {'action': 'GetAllVehiclePriceType'}, callback);
230}
231
232function GetAllVehicleGrade(callback) {
233    jQuery.post(ajaxurl, {'action': 'GetAllVehicleGrade'}, callback);
234}
235
236function GetAllVehicleVersion(modelId, year, callback) {
237    const data = {
238        'action': 'GetAllVehicleVersion',
239        'kbb_ajax_nonce': document.getElementById('kbb_ajax_nonce').value,
240        'modelId': modelId,
241        'year': year,
242    };
243    jQuery.post(ajaxurl, data, callback);
244}
245
246function GetVehicle(vehicleId, callback) {
247    const data = {
248        'action': 'GetVehicle',
249        'kbb_ajax_nonce': document.getElementById('kbb_ajax_nonce').value,
250        'vehicleId': vehicleId,
251    };
252    jQuery.post(ajaxurl, data, callback);
253}
254
255function GetEquipmentsByVehicleID(vehicleId, callback) {
256    const data = {
257        'action': 'GetEquipmentsByVehicleID',
258        'kbb_ajax_nonce': document.getElementById('kbb_ajax_nonce').value,
259        'vehicleId': vehicleId,
260    };
261    jQuery.post(ajaxurl, data, callback);
262}
263
264function GetBodyType(bodyTypeID, callback) {
265    const data = {
266        'action': 'GetBodyType',
267        'kbb_ajax_nonce': document.getElementById('kbb_ajax_nonce').value,
268        'bodyTypeID': bodyTypeID,
269    };
270    jQuery.post(ajaxurl, data, callback);
271}
272
273function GetVehicleTransmissionType(transmissionTypeID, callback) {
274    const data = {
275        'action': 'GetVehicleTransmissionType',
276        'kbb_ajax_nonce': document.getElementById('kbb_ajax_nonce').value,
277        'transmissionTypeID': transmissionTypeID,
278    };
279    jQuery.post(ajaxurl, data, callback);
280}
281
282function GetVehicleDriveTrain(driveTrainID, callback) {
283    const data = {
284        'action': 'GetVehicleDriveTrain',
285        'kbb_ajax_nonce': document.getElementById('kbb_ajax_nonce').value,
286        'driveTrainID': driveTrainID,
287    };
288    jQuery.post(ajaxurl, data, callback);
289}
290
291function GetVehicleFuelType(fuelTypeID, callback) {
292    const data = {
293        'action': 'GetVehicleFuelType',
294        'kbb_ajax_nonce': document.getElementById('kbb_ajax_nonce').value,
295        'fuelTypeID': fuelTypeID,
296    };
297    jQuery.post(ajaxurl, data, callback);
298}
299
300function GetPriceAdvisor(vehiclePriceTypeID, vehicleGradeID, vehicleID, opt, callback) {
301    const data = {
302        'action': 'GetPriceAdvisor',
303        'kbb_ajax_nonce': document.getElementById('kbb_ajax_nonce').value,
304        'vehiclePriceTypeID': vehiclePriceTypeID,
305        'vehicleGradeID': vehicleGradeID,
306        'vehicleID': vehicleID,
307        'opt': opt,
308    };
309    jQuery.post(ajaxurl, data, callback);
310}