https://www.changan.ph/scripts/home/showcase_home_image.js

1var showcaseSwiper = null;
2const swiper_wrapper = document.querySelector("#swiper_wrapper__showcase_home");
3const arrow__wrapper = document.querySelector('#swiper-arrow__wrapper');
4let clicked = false;
5let versionPrice = top.document.querySelector("#versionPrice");
6let leftArrow =document.querySelector('.showcase-home .swiper-button-prev');
7let RightArrow =document.querySelector('.showcase-home .swiper-button-next');
8
9
10//INSERTING UMBRACO CONTENT INTO DOM
11function fillingOut(selectedCategory) {
12    selectedCategory = selectedCategory.replace("Á","A");
13    selectedCategory = selectedCategory.replace("É","E");
14    selectedCategory = selectedCategory.replace("Í","I");
15    selectedCategory = selectedCategory.replace("Ó","O");
16    selectedCategory = selectedCategory.replace("Ú","U");
17
18    clicked = true;
19    const filteredCategoryVehicles = vehicleArrayShowcase.filter(item => item.categories.includes(selectedCategory));
20        
21    //const filteredCategoryVehicles = vehicleArray;
22
23    // adding the class "active" to the tab selected.
24    document.querySelectorAll(`.showcase_filter button.active`)
25        .forEach(btn => btn.classList.remove("active"));
26    const btnSelectedCategory = document.querySelector( `button[name='${selectedCategory}']`);
27    if(btnSelectedCategory)
28    btnSelectedCategory.classList.add("active");
29
30    swiper_wrapper.innerHTML = "";
31    // const middle = screen.width <= 768? 1: filteredCategoryVehicles.length > 4? 3: filteredCategoryVehicles.length % 2 == 0? filteredCategoryVehicles.length/2: Math.trunc(filteredCategoryVehicles.length/2 + 1);
32     const middle = 1;
33
34    let defaultActiveMiddle = null;
35    filteredCategoryVehicles.forEach((vehicle, index) => {
36        swiper_wrapper.innerHTML += `
37            <div class="swiper-slide showcase-slide ${index+1==middle?"active swiper-slide-active showcase-home-swiper-slide-active":""}" onclick="clickSlide(this)" data-vehicle-index="${vehicle.index}">
38                <div class="show-slide__content">
39                    <img class="vehicle_mini_img" src="${vehicle.vehicleImage}" alt="${vehicle.nombreDelModelo}" loading="lazy" decoding="asynchronous">
40                    ${vehicle.nombreDelModeloComoImagen != "" ? `<img class="showcase-vehicle_name_img" src="${vehicle.nombreDelModeloComoImagen}" alt="Imagen del nombre del modelo">` : `<h5>${vehicle.nombreDelModelo}</h5>`}
41
42
43            </div>
44            `
45        if(index+1==middle){
46            defaultActiveMiddle = vehicle;
47        }
48    });
49
50    //  arrow__wrapper.style.display = "none";
51    // swiper_wrapper.classList.add("justify-content-center");
52     if(showcaseSwiper != null){
53        showcaseSwiper.destroy();
54        showcaseSwiper = null;
55        leftArrow.classList.remove('d-none')
56        RightArrow.classList.remove('d-none')
57    }
58
59
60    if(swiper_wrapper.scrollWidth-1 > window.innerWidth*0.9){
61        swiper_wrapper.classList.remove("justify-content-center");
62    }
63    showcaseSwiper = new Swiper(".showcase-home .showcaseSwiper", {
64        slidesPerView: 4,
65        centeredSlides: true,
66        loop: false,
67        loopPreventsSliding: false,
68        loopedSlides: 1,
69        updateOnWindowResize: true,
70        watchSlidesProgress: true,
71        centeredSlidesBounds: true,
72        centerInsufficientSlides: true,
73        slideToClickedSlide: true,
74        watchOverflow: true,
75        spaceBetween: 0,
76
77        breakpoints: {
78            768: { // Tablet and above
79                slidesPerView: 4
80            },
81            320: { // Mobile (below 768px)
82                slidesPerView: 1
83            }
84        },
85
86        navigation: {
87            nextEl: ".showcase-home .swiper-button-next",
88            prevEl: ".showcase-home .swiper-button-prev",
89        },
90        on: {
91            transitionEnd: function(){
92                /* const slideSelected = $(".swiper-slide.showcase-slide.swiper-slide-visible.swiper-slide-active").one();
93                slideSelected.click();  */
94                if(!clicked){
95                    let activeSlide = swiper_wrapper.querySelector(".swiper-slide-active");
96                    selectVehicle(activeSlide);
97                }
98                clicked = false;

99            }
100        }
101    });
102
103    if(defaultActiveMiddle){
104        selectVehicle(defaultActiveMiddle);
105    }
106    if(!!document.querySelector('.showcase-home .swiper-button-prev.swiper-button-disabled')&&!!document.querySelector('.showcase-home .swiper-button-next.swiper-button-disabled')){
107        leftArrow.classList.add('d-none')
108        RightArrow.classList.add('d-none')
109    }
110}
111
112const selectVehicle = (cardSelected) => {
113    let vehicleActived = null;
114    if(cardSelected && !cardSelected.vehicleImage){
115    // just activing the slide active.
116        swiper_wrapper.querySelectorAll(".showcase-slide.active").forEach(cardSelectedBefore => cardSelectedBefore.classList.remove("active"));
117        swiper_wrapper.querySelectorAll(".showcase-home-swiper-slide-active").forEach(sw => sw.classList.remove("showcase-home-swiper-slide-active"));
118        swiper_wrapper.querySelectorAll(".swiper-slide-active").forEach(sw => sw.classList.remove("swiper-slide-active"));
119        cardSelected.classList.add("active");
120        cardSelected.classList.add("showcase-home-swiper-slide-active");
121        cardSelected.classList.add("swiper-slide-active");
122        vehicleActived = vehicleArrayShowcase[cardSelected.getAttribute("data-vehicle-index")];
123    }else{
124        vehicleActived = cardSelected;
125    }
126    if(vehicleActived && vehicleActived.colorInformationPerVehicle.length > 0){
127        const titleVehicleMark = document.querySelector(".title-vehicle-mark");
128        const model_name_img = document.querySelector('#model_name_img');
129        const titleVehicleModel = document.querySelector(".title-vehicle-model");
130
131        if(vehicleActived.nombreDelModeloComoImagen){
132            model_name_img.classList.add("active");
133            model_name_img.src = `${vehicleActived.nombreDelModeloComoImagen}`;
134            titleVehicleModel.classList.remove("active");
135        }else{
136            titleVehicleModel.classList.add("active");
137            model_name_img.classList.remove("active");
138            titleVehicleModel.innerHTML = vehicleActived.nombreDelModelo;
139        }
140
141        //Inyection: model name y const creada en linea #104
142        titleVehicleModel.innerHTML = `${vehicleActived.brandName} ${vehicleActived.nombreDelModelo}`;
143        titleVehicleMark.innerText = `${vehicleActived.marca}`;
144
145
146        //Inyection: model description
147        const showcase_descripcion = document.querySelector('.showcase_descripcion');
148        showcase_descripcion.innerHTML = `${vehicleActived.descripcionDelModelo}`;
149
150        const modelsDescription = document.querySelector('.models_description');
151        if (modelsDescription) {
152            modelsDescription.innerHTML = vehicleActived.feature1 || ''; 
153        }
154
155        const modelsDescription1 = document.querySelector('.models_description1');
156        if (modelsDescription1) {
157            modelsDescription1.innerHTML = vehicleActived.content1 || ''; 
158        }
159        const models_description2 = document.querySelector('.models_description2');
160        if (models_description2) {
161            models_description2.innerHTML = vehicleActived.feature2 || '';
162        }
163
164        const models_description3 = document.querySelector('.models_description3');
165        if (models_description3) {
166            models_description3.innerHTML = vehicleActived.content2 || '';
167        }
168        const models_description4 = document.querySelector('.models_description4');
169        if (models_description4) {
170            models_description4.innerHTML = vehicleActived.feature3 || '';
171        }
172
173        const models_description5 = document.querySelector('.models_description5');
174        if (models_description5) {
175            models_description5.innerHTML = vehicleActived.content3 || '';
176        }
177
178
179
180        // Inyection: model price
181        let priceLabels = "";
182            if(vehicleActived.etiquetaPrecio != null && vehicleActived.etiquetaPrecio != ""){
183               priceLabels += `
184               <div class="showcase_label-price">
185                <p class="showcase_label_cuota">${vehicleActived.etiquetaPrecio}</p>
186
187                    <p class="showcase_cuota">${vehicleActived.precioDelModelo}</p>
188                    <p class="showcase_cuota_currency">${vehicleActived.precioSegundaMoneda}</p>
189                </div>`;
190            }
191            if(vehicleActived.etiquetaCuota != null && vehicleActived.etiquetaCuota != ""){
192                priceLabels +=`
193                <p class="showcase_label_cuota">${vehicleActived.etiquetaCuota}</p>
194                <div class="d-flex">
195                    <p class="showcase_cuota">${vehicleActived.cuotaMensualDelModelo}</p>
196                    <p class="showcase_cuota_currency">${vehicleActived.cuotaSegundaMoneda}</p>
197                </div>`;
198            }
199            if(vehicleActived.etiquetaPrecioLista != null && vehicleActived.etiquetaPrecioLista != ""){
200                priceLabels +=`
201                <div class="labels-price">
202                    <p class="showcase_label_precio_lista">${vehicleActived.etiquetaPrecioLista}</p>
203                    <p class="showcase_precio_lista">${vehicleActived.precioLista}</p>
204                    <p class="showcase_precio_lista_currency">${vehicleActived.precioListaSegundaMoneda}</p>
205
206                </div>`;
207            }
208            if(vehicleActived.etiquetaBonoMarca != null && vehicleActived.etiquetaBonoMarca != ""){
209                priceLabels +=`
210                <div class="labels-price">
211                    <p class="showcase_label_bono_marca">${vehicleActived.etiquetaBonoMarca}</p>
212                    <p class="showcase_bono_marca">${vehicleActived.bonoMarca}</p>
213                    <p class="showcase_bono_marca_currency">${vehicleActived.bonoMarcaSegundaMoneda}</p>
214
215                </div>`;
216            }
217            if(vehicleActived.etiquetaBonoFinanciamiento != null && vehicleActived.etiquetaBonoFinanciamiento != ""){
218                priceLabels +=`
219                <div class="labels-price">
220                    <p class="showcase_label_bono_financiamiento">${vehicleActived.etiquetaBonoFinanciamiento}</p>
221                    <p class="showcase_bono_financiamiento">${vehicleActived.bonoFinanciamiento}</p>
222                    <p class="showcase_bono_financiamiento_currency">${vehicleActived.bonoFinanciamientoSegundaMoneda}</p>
223
224                </div>`;
225            }
226
227            versionPrice.innerHTML = priceLabels;
228
229        const showcase_label_description = document.querySelector('.label-description');
230        showcase_label_description.innerHTML = `${vehicleActived.labelDescripcion}`;
231        // Inyection: check model page CTA
232        let vehicle_url = document.querySelector('#vehicle_cta_btn');
233        vehicle_url.href = `${vehicleActived.Url}`
234        // Inyection: CTA
235        const vehicle_cta_btn = document.querySelector('#vehicle_cta_btn');
236        vehicle_cta_btn.classList.remove("active");
237        if(vehicleActived.RedirectURL){
238            vehicle_cta_btn.classList.add("active");
239            vehicle_cta_btn.href = `${vehicleActived.RedirectURL}`;
240            vehicle_cta_btn.target = `${vehicleActived.RedirectTarget}`;
241            vehicle_cta_btn.innerHTML = `${vehicleActived.RedirectName}`;
242        }
243
244        const vehicle_cta_btn2 = document.querySelector('#vehicle_cta_btn2');
245        vehicle_cta_btn2.classList.remove("active");
246        if (vehicleActived.RedirectURL) {
247            vehicle_cta_btn2.classList.add("active");
248            vehicle_cta_btn2.href = `${vehicleActived.Redirect2URL}`;
249            vehicle_cta_btn2.target = `${vehicleActived.Redirect2Target}`;
250            vehicle_cta_btn2.innerHTML = `${vehicleActived.Redirect2Name}`;
251        }
252        // Inyection: Colors (wrapper)
253        let color_wrapper = document.querySelector('.color-wrapper');
254        color_wrapper.innerHTML = `
255        ${vehicleActived.colorInformationPerVehicle.map((elem,index) => (index==0) ? `<div class="color-selector-wrapper color-selector-wrapper-selected" data-color-name="${elem.nombreColor}" data-color-source="${elem.imagenDelShowcase}" onclick="changingColor(this)"><div class="color-selector" style="background-color:${elem.colorHex}"></div></div>` : `<div class="color-selector-wrapper" data-color-name="${elem.nombreColor}" data-color-source="${elem.imagenDelShowcase}" onclick="changingColor(this)"><div class="color-selector" style="background-color:${elem.colorHex}"></div></div>`).join('')}
256        `
257        // Inyection: Colors (wrapper)
258        let color_name = document.querySelector("#color_name");
259        color_name.innerHTML = `Color seleccionado: <strong>${vehicleActived.colorInformationPerVehicle[0].nombreColor}</strong>`
260        // Inyection: Showcase image (main image + background + colors)
261        let backgroundImage = document.querySelector(".showcase-vehicle__image");
262        backgroundImage.style.backgroundImage = `url(${vehicleActived.imagenDeFondo})`;
263        let color_image = document.querySelector("#color_image");
264        color_image.src = `${vehicleActived.colorInformationPerVehicle[0].imagenDelShowcase}`;
265        color_image.alt = `${vehicleActived.nombreDelModelo} ${vehicleActived.colorInformationPerVehicle[0].nombreColor}`;
266        // Inyection: Showcase image (redirection)
267        let vehicle_url_model = document.querySelector('#vehicle_url_model');
268        vehicle_url_model.href = `${vehicleActived.Url}`
269    }
270}
271function clickSlide(cardSelected){
272    clicked = true;
273    selectVehicle(cardSelected);
274}
275
276const changingColor = (arg) => {
277    let selectedColor = arg.getAttribute("data-color-name");
278    let selectedImage = arg.getAttribute("data-color-source");
279

280    let color_name = document.querySelector('#color_name');
281    let color_image = document.querySelector('#color_image');
282
283
284    color_name.innerHTML = `Color seleccionado: <strong>${selectedColor}</strong>`;
285    color_image.src=`${selectedImage}`;
286
287    //change border color
288    var colorWrapper = document.getElementsByClassName("color-wrapper");
289    for (let index = 0; index < colorWrapper[0].children.length; index++) {
290        if(colorWrapper[0].children[index].dataset.colorName == selectedColor){
291            colorWrapper[0].children[index].classList.add("color-selector-wrapper-selected");
292        }else{
293            colorWrapper[0].children[index].classList.remove("color-selector-wrapper-selected");
294        }
295    }
296};
297
298
299$(".h__scroll").forEachChild((element) => {
300    const container = element.parentContainer
301    $(element).onClick(e => $(e.target).centerElementIn(container));
302});
303
304
305document.addEventListener("DOMContentLoaded", function () {
306    const buttons = document.querySelectorAll(".showcase_filter button");
307
308    buttons.forEach((button) => {
309        button.addEventListener("click", function () {
310            buttons.forEach((btn) => btn.classList.remove("active"));
311            this.classList.add("active"); 
312        });
313    });
314});
315
316document.addEventListener('DOMContentLoaded', function () {
317    new Swiper('.home-showcase-filter', {
318        slidesPerView: '3',
319        loop: false,
320        breakpoints: {
321            1024: { slidesPerView: 3 },
322            768: { slidesPerView: 1.5 },
323            480: { slidesPerView: 1.5 },
324            320: { slidesPerView: 1.5 },
325        },
326        navigation: {
327            nextEl: '.filter-next',
328            prevEl: '.filter-prev',
329        }
330    });
331});