https://www.remingtonlatam.com/wp-content/themes/remingtonla/assets/js/quiz.js?ver=1791494582

1
2var image_path = '/wp-content/uploads/2019/12/'
3
4var form = `
5    <style>
6.quiz-container {
7    width: 90%;
8    display: flex;
9    flex-wrap: wrap;
10    margin: 0 auto;
11    justify-content: center;
12    flex-direction: column;
13    align-content: center;
14}
15select {
16    height: 45px;
17}
18
19.quiz-container form {
20    width: 40%;
21    margin: 0 auto;
22}
23
24input, select {
25    background: white!important;
26    color: black;
27    font-size: 16px;
28    border-color: white!important;
29    border-bottom-color: black!important;
30    border-style: solid!important;
31    border-width: 1px!important;
32    box-shadow: none!important;
33}
34
35input::placeholder {
36    color: black;
37    font-size: 16px;
38}
39
40button.registerbtn {
41    background: white;
42    border-color: black;
43    border-style: solid;
44    border-width: 1px;
45    width: 45%;
46}
47
48.buttons-quiz {
49    display: flex;
50    justify-content: space-around;
51        margin-top: 50px;
52}
53
54.form-container {
55    flex-direction: column;
56    display: flex;
57}
58
59button:hover {
60    color: gray;
61    }
62    
63    select {
64     padding: 0.3em;
65    font-family: helvetica;
66}
67</style>
68<div><h2> ESCRIBE TUS DATOS PARA ENVIARTE EL RESULTADO </h2></div>
69<form id="quizForm">
70  <div class="form-container">
71    <input type="text" placeholder="Nombre*" name="first_name" required>
72
73    <input type="text" placeholder="Apellidos*" name="last_name" required>
74
75	<input type="text" placeholder="E-mail*" name="email" required>
76    
77    <select name="country" required>
78<option value="">País*</option>
79<option value="Argentina">Argentina</option>
80<option value="Bolivia">Bolivia</option>
81<option value="Brasil">Brasil</option>
82<option value="Chile">Chile</option>
83<option value="Costa Rica">Costa Rica</option>
84<option value="Colombia">Colombia</option>
85<option value="Ecuador">Ecuador</option>
86<option value="El Salvador">El Salvador</option>
87<option value="Guatemala">Guatemala</option>
88<option value="Honduras">Honduras</option>
89<option value="México">México</option>
90<option value="Nicaragua">NsetCicaragua</option>
91<option value="Panamá">Panamá</option>
92<option value="Paraguay">Paraguay</option>
93<option value="Perú">Perú</option>
94<option value="Puerto Rico">Puerto Rico</option>
95<option value="República Dominicana">República Dominicana</option>
96<option value="Uruguay">Uruguay</option>
97<option value="Venezuela">Venezuela</option>
98<option value="otro">Otro país</option>
99<select>
100<select name="genre" required>
101<option value="">Género*</option>
102<option value="Femenino">Femenino</option>
103<option value="Masculino">Masculino</option>
104<option value="No contesta">Prefiero no contestar</option>
105</select>
106<input type="text" placeholder="Fecha de Cumpleaños (MM/DD)" name="birthday">
107<hr>
108<input type="text" placeholder="Teléfono" name="phone">
109<div class="buttons-quiz"><button onclick="submitQuizForm();return false;"  class="registerbtn">Enviar</button>
110    </div>
111  </div>
112  
113
114</form>`;
115
116
117var quiz_text = `
118    <div class="quiz-question" id="quiz-question1">
119        <a onclick="clickQuiz(0, 0, 'Cabello mujer');return false;"><img src="/wp-content/uploads/2019/12/0-Cabello-de-Mujer.jpg">
120            <h2 class="quiz-subtitle">Cabello mujer</h2></a>
121    </div>
122    <div class="quiz-question" id="quiz-question2">
123        <a onclick="clickQuiz(1, 0, 'Barba');return false;"><img src="/wp-content/uploads/2019/12/0-Barba.jpg">
124            <h2 class="quiz-subtitle">Barba</h2></a>
125    </div>
126    <div class="quiz-question" id="quiz-question3">
127        <a onclick="clickQuiz(2, 0, 'Cabello hombre');return false;"><img src="/wp-content/uploads/2019/12/0-Cabello-de-Hombre.jpg">
128            <h2 class="quiz-subtitle">Cabello hombre</h2></a>
129    </div>
130    <div class="quiz-question" id="quiz-question4">
131        <a onclick="clickQuiz(3, 0, 'Depilación');return false;"><img src="/wp-content/uploads/2019/12/0-Depilacion.jpg">
132            <h2 class="quiz-subtitle">Depilación</h2></a>
133    </div>`;
134
135
136
137function initQuiz() {
138
139    var first_question = [{
140            icon: image_path + '0-Cabello-de-Mujer.jpg',
141            text: 'Cabello mujer'
142        },
143        {
144            icon: image_path + '0-Barba.jpg',
145            text: 'Barba'
146        },
147        {
148            icon: image_path + '0-Cabello-de-Hombre.jpg',
149            text: 'Cabello hombre'
150        },
151        {
152            icon: image_path + '0-Depilacion.jpg',
153            text: 'Depilación'
154        },
155    ]
156    first_question.forEach(function(question, i) {
157        var index = i + 1;
158        jQuery('#quiz-question' + index.toString()).html('<a onclick="clickQuiz(' + i + ', 0, \'' + question.text.trim() + '\');return false;"><img src="' + question.icon + '"><h2 class="quiz-subtitle">' + question.text + '</h2></a>');
159    });
160
161}
162
163var results = {}
164
165results['Liso perfecto-Cabello con Frizz-Estilo super rápido'] = ['S7300', 'S8510', 'S7710']
166results['Liso perfecto-Cabello con Frizz-Arreglarme sin apuros'] = ['S7710', '

166S9510', 'S5500TG']
167results['Liso perfecto-Cabello teñido-Estilo super rápido'] = ['S7300', 'S8607', 'S6300']
168results['Liso perfecto-Cabello teñido-Arreglarme sin apuros'] = ['S8607', 'S16A']
169results['Liso perfecto-Cabello maltratado-Estilo super rápido'] = ['S8607', 'S12A', 'S8599']
170results['Liso perfecto-Cabello maltratado-Arreglarme sin apuros'] = ['S2412', 'S4A500', 'S7740']
171results['Liso perfecto-Cabello sin brillo-Estilo super rápido'] = ['S7300', 'S12A', 'S9100']
172results['Liso perfecto-Cabello sin brillo-Arreglarme sin apuros'] = ['S7740', 'S12A', 'S8599']
173results['Liso perfecto-Cabello sin volumen-Estilo super rápido'] = ['S7300', 'S8598P', 'S9600']
174results['Liso perfecto-Cabello sin volumen-Arreglarme sin apuros'] = ['S8599', 'S9100', 'S12A']
175results['Ondas de playa-Cabello con Frizz-Estilo super rápido'] = ['CI91W1']
176results['Ondas de playa-Cabello con Frizz-Arreglarme sin apuros'] = ['CI606']
177results['Ondas de playa-Cabello teñido-Estilo super rápido'] = ['CI8607']
178results['Ondas de playa-Cabello teñido-Arreglarme sin apuros'] = ['S16A']
179results['Ondas de playa-Cabello maltratado-Estilo super rápido'] = ['CI96W1']
180results['Ondas de playa-Cabello maltratado-Arreglarme sin apuros'] = ['CI96W1']
181results['Ondas de playa-Cabello sin brillo-Estilo super rápido'] = ['S19A']
182results['Ondas de playa-Cabello sin brillo-Arreglarme sin apuros'] = ['CI11AF']
183results['Ondas de playa-Cabello sin volumen-Estilo super rápido'] = ['AS7051']
184results['Ondas de playa-Cabello sin volumen-Arreglarme sin apuros'] = ['AS800']
185results['Volumen Renovado-Cabello con Frizz-Estilo super rápido'] = ['AC8820', 'AC8607', 'AC5099']
186results['Volumen Renovado-Cabello con Frizz-Arreglarme sin apuros'] = ['D13A', 'D2045', 'D3019']
187results['Volumen Renovado-Cabello teñido-Estilo super rápido'] = ['D18A', 'AC9096', 'AC8607']
188results['Volumen Renovado-Cabello teñido-Arreglarme sin apuros'] = ['AC8607', 'D17A', 'CB8607']
189results['Volumen Renovado-Cabello maltratado-Estilo super rápido'] = ['D18A', 'D7777', 'AC8820']
190results['Volumen Renovado-Cabello maltratado-Arreglarme sin apuros'] = ['D5218', 'D2045', 'D5000']
191results['Volumen Renovado-Cabello sin brillo-Estilo super rápido'] = ['D18A', 'AC9096', 'AC8820']
192results['Volumen Renovado-Cabello sin brillo-Arreglarme sin apuros'] = ['D13A', 'D5218', 'D13A']
193results['Volumen Renovado-Cabello sin Volumen-Estilo super rápido'] = ['AC6120', 'AC5999', 'AC5099']
194results['Volumen Renovado-Cabello sin Volumen-Arreglarme sin apuros'] = ['AS800', 'AS7051', 'CB7400']
195results['Rizos Definidos-Cabello con Frizz	Estilo super rápido'] = ['CI96W1']
196results['Rizos Definidos-Cabello con Frizz	Arreglarme sin apuros'] = ['CI63N1']
197results['Rizos Definidos-Cabello teñido-Estilo super rápido'] = ['S16A']
198results['Rizos Definidos-Cabello teñido-Arreglarme sin apuros'] = ['CI8607']
199results['Rizos Definidos-Cabello maltratado-Estilo super rápido'] = ['CI11AF']
200results['Rizos Definidos-Cabello maltratado-Arreglarme sin apuros'] = ['S19A']
201results['Rizos Definidos-Cabello sin brillo-Estilo super rápido'] = ['CI11AF']
202results['Rizos Definidos-Cabello sin brillo-Arreglarme sin apuros'] = ['CI5329']
203results['Rizos Definidos-Cabello sin Volumen-Estilo super rápido'] = ['CI9132']
204results['Rizos Definidos-Cabello sin Volumen-Arreglarme sin apuros'] = ['CI5329']
205
206results['Barba-Poblado-Lavamanos'] = ['MB4130', 'MB320']
207results['Barba-Poblado-Ducha'] = ['MB051', 'PG6160']
208results['Barba-Poco vello-Lavamanos'] = ['MB08A', 'PG181']
209results['Barba-Poco vello-Ducha'] = ['XR1430', 'SF4880']
210results['Bigote-Poblado-Lavamanos'] = ['PG6025', 'PG6155']
211results['Bigote-Poblado-Ducha'] = ['MB051', 'PG6160']
212results['Bigote-Poco vello-Lavamanos'] = ['PG6020B', 'PG6855']
213results['Bigote-Poco vello-Ducha'] = ['PG6160', 'MB051']
214results['Afeitado al Ras-Poblado-Lavamanos'] = ['PR1330', 'PR1335']
215results['Afeitado al Ras-Poblado-Ducha'] = ['XR1395', 'PF7600']
216results['Afeitado al Ras-Poco vello-Lavamanos'] = ['PF7200', 'HF9000']
217results['Afeitado al Ras-Poco vello-Ducha'] = ['PR1342', 'XR1430']
218results['Barba y Bigote-Poblado-Lavamanos'] = ['PG6020B', 'PG6855']
219results['Barba y Bigote-Poblado-Ducha'] = ['PG6160', 'MB051']
220results['Barba y Bigote-Poco vello-Lavamanos'] = ['PF7200', 'HF9000']
221results['Barba y Bigote-Poco vello-Ducha'] = ['PR1342', 'XR1430']
222results['Rapado	Si'] = ['HC4050', 'HC4055T']
223results['Rapado	No'] = ['HC5850', 'HC03A']
224
225results['Rapado-Si'] = ['HC4050', 'HC4055T']
226results['Rapado-No'] = ['HC5850', 'HC03A']
227results['Caída Lateral-Si'] = ['HC07A', 'HC5300']
228results['Caída Lateral-No'] = ['HC1080', 'HC1095']
229results['Colita-Si'] = ['HC4051', 'HC4055T']
230results['Colita-No'] = ['HC335', 'HC5300']
231results['Capas-Si'] = ['HC4051', 'HC335']
232results['Capas-No'] = ['HC4050', 'HC5850']
233results['Piernas-Permanentes, no quiero saber más de afeitado.'] = ['IPL3500', 'IPL6500']
234results['Piernas-Temporales, solo para una ocasión especial.'] = ['WDF4821', 'WDF4815D']
235results['Bikini-Permanentes, no quiero saber más de afeitado.'] = ['IPL6000Q', 'IPL3500']
236results['Bikini-Temporales, solo para una ocasión especial.'] = ['WPG4050-MPT', 'EP7030']
237results['Cara-Permanentes, no quiero saber más de afeitado.'] = ['IPL6000Q', 'IPL3500']
238results['Cara-Temporales, solo para una ocasión especial.'] = ['MPT4000C-TWZ', 'WPG4200']
239results['Otros-Permanentes, no quiero saber más de afeitado.'] = ['IPL6000', 'IPL6500']
240results['Otros-Temporales, solo para una ocasión especial.'] = ['WSF5050', 'EP7020A']
241
242var final_result = [];
243var steps = [];
244steps[0] = [];
245steps[0][0] = {}
246steps[0][0]['title'] = '¿Cual es tu estilo favorito?';
247steps[0][0]['icon1'] = image_path + '1-Cabello-con-Liso-Perfecto.jpg';
248steps[0][0]['icon2'] = image_path + '1-Cabello-con-Ondas-de-Playa.jpg';
249steps[0][0]['icon3'] = image_path + '1-Cabello-con-Volumen-Renovado.jpg';
250steps[0][0]['icon4'] = image_path + '1-Cabello-con-Rizos-Definidos.jpg';
251steps[0][0]['title1'] = 'Liso perfecto';
252steps[0][0]['title2'] = 'Ondas de playa';
253steps[0][0]['title3'] = 'Volumen Renovado';
254steps[0][0]['title4'] = 'Rizos Definidos';
255
256steps[0][1] = {}
257steps[0][1]['title'] = '¿Qué buscas solucionar?';
258steps[0][1]['icon1'] = image_path + '2-Cabello-con-Frizz.jpg';
259steps[0][1]['icon2'] = image_path + '2-Cabello-Tenido.jpg';
260steps[0][1]['icon3'] = image_path + '2-Cabello-Maltratado.jpg';
261steps[0][1]['icon4'] = image_path + '2-Cabello-sin-Brillo.jpg';
262steps[0][1]['icon5'] = image_path + '2-Cabello-sin-Volumen.jpg';
263steps[0][1]['title1'] = 'Cabello con Frizz';
264steps[0][1]['title2'] = 'Cabello teñido';
265steps[0][1]['title3'] = 'Cabello maltratado';
266steps[0][1]['title4'] = 'Cabello sin brillo';
267steps[0][1]['title5'] = 'Cabello sin volumen';
268
269steps[0][2] = {}
270steps[0][2]['title'] = '¿A la hora de estilizar tu cabello prefieres...?';
271steps[0][2]['icon1'] = image_path + '3-Estilo-sin-apuros.jpg';
272steps[0][2]['icon2'] = image_path + '3-Estilo-Super-Rapido.jpg';
273steps[0][2]['title1'] = 'Arreglarme sin apuros';
274steps[0][2]['title2'] = 'Estilo super rápido';
275
276steps[1] = []
277steps[1][0] = {}
278steps[1][0]['title'] = '¿Cual es tu estilo favorito?';
279steps[1][0]['icon1'] = image_path + '4-Afeitado-al-Ras.jpg';
280steps[1][0]['icon2'] = image_path + '4-Barba.jpg';
281steps[1][0]['icon3'] = image_path + '4-Barba-y-Bigote.jpg';
282steps[1][0]['icon4'] = image_path + '4-Bigote.jpg';
283steps[1][0]['title1'] = 'Afeitado al Ras';
284steps[1][0]['title2'] = 'Barba';
285steps[1][0]['title3'] = 'Barba y Bigote';
286steps[1][0]['title4'] = 'Bigote';
287
288steps[1][1] = {}
289steps[1][1]['title'] = '¿Cuál es tu tipo de vello facial?';
290steps[1][1]['icon1'] = image_path + '5-Poco-Vello.jpg';
291steps[1][1]['icon2'] = image_path + '5-Vello-Poblado.jpg';
292steps[1][1]['title1'] = 'Poco vello';
293steps[1][1]['title2'] = 'Poblado';
294
295steps[1][2] = {}
296steps[1][2]['title'] = '¿Dónde te afeitas?';
297steps[1][2]['icon1'] = image_path + '6-Ducha.jpg';
298steps[1][2]['icon2'] = image_path + '6-Lavamanos.jpg';
299steps[1][2]['title1'] = 'Ducha';
300steps[1][2]['title2'] = 'Lavamanos';
301
302steps[2] = []
303steps[2][0] = {}
304steps[2][0]['title'] = '¿Cuál es tu estilo de corte?';

305steps[2][0]['icon1'] = image_path + '7-Cabello-Capas.jpg';
306steps[2][0]['icon2'] = image_path + '7-Cabello-Colita.jpg';
307steps[2][0]['icon3'] = image_path + '7-Cabello-con-Caida-Lateral.jpg';
308steps[2][0]['icon4'] = image_path + '7-Cabello-Rapado.jpg';
309steps[2][0]['title1'] = 'Capas';
310steps[2][0]['title2'] = 'Colita';
311steps[2][0]['title3'] = 'Caída Lateral';
312steps[2][0]['title4'] = 'Rapado';
313
314steps[2][1] = {}
315steps[2][1]['title'] = '¿Quieres incluir detalles en tu corte?';
316steps[2][1]['icon1'] = image_path + '8-Si-Detalles.jpg';
317steps[2][1]['icon2'] = image_path + '8-No-detalles.jpg';
318steps[2][1]['title1'] = 'Si';
319steps[2][1]['title2'] = 'No';
320
321steps[3] = []
322steps[3][0] = {}
323steps[3][0]['title'] = '¿Qué área del cuerpo quieres arreglarte?';
324steps[3][0]['icon1'] = image_path + '9-Depilacion-Piernas.jpg';
325steps[3][0]['icon2'] = image_path + '9-Depilacion-Bikini.jpg';
326steps[3][0]['icon3'] = image_path + '9-Depilacion-Cara.jpg';
327steps[3][0]['icon4'] = image_path + '9-Depilacion-Otros.jpg';
328steps[3][0]['title1'] = 'Piernas';
329steps[3][0]['title2'] = 'Bikini';
330steps[3][0]['title3'] = 'Cara';
331steps[3][0]['title4'] = 'Otros';
332
333steps[3][1] = {}
334steps[3][1]['title'] = '¿Buscas resultados permanentes o temporales?';
335steps[3][1]['icon1'] = image_path + '10-Infinito.jpg';
336steps[3][1]['icon2'] = image_path + '10-Sello.jpg';
337steps[3][1]['title1'] = 'Permanentes, no quiero saber más de afeitado.';
338steps[3][1]['title2'] = 'Temporales, solo para una ocasión especial.';
339
340var result_html = `
341<p>¡Hola!
342No hay duda de que tenemos el producto que estas buscando. Como resultado a tus respuestas consideramos que estos productos satisfacerán tus necesidades completamente. Si quieres saber más puedes visitar la página de cada uno, o si lo deseas, esperamos tus consultas a través de redes sociales. ¡No dejes Que Nada Te Detenga! 
343</p>
344<div class="product-container">
345`
346
347function resetQuiz() {
348    jQuery('.quiz-title').html('DESCUBRE NUESTRA RECOMENDACIÓN CON ESTE BREVE QUIZ<br>¿QUÉ ÁREA TE INTERESA?');
349    jQuery('.quiz-container').html(quiz_text);
350    final_result = [];
351    jQuery('.reset-quiz-button').hide();
352}
353
354jQuery.validator.addMethod(
355    "birthday",
356    function(value, element) {
357        console.log(value)
358        var pattern = '^([0-9]{2})\/([0-9]{2})$';
359        var re = new RegExp(pattern);
360        return this.optional(element) || re.test(value);
361    },
362    "El formato de la fecha es DD/MM."
363);
364
365function submitQuizForm() {
366    jQuery('#quizForm').validate({
367        rules: {
368            birthday: "birthday",
369        },
370    })
371    if (!jQuery('#quizForm').valid()) return;
372    var inputs = jQuery('#quizForm :input');
373    var values = {};
374    inputs.each(function() {
375        values[this.name] = jQuery(this).val();
376    });
377    jQuery('.registerbtn').attr('disabled', true);
378    jQuery('.registerbtn').html('...');
379    console.log(final_result);
380    var ids = results[final_result.join('-')];
381    console.log(ids);
382    jQuery.ajax({
383        type: "post",
384        dataType: "json",
385        url: '/wp-admin/admin-ajax.php',
386        data: {
387            action: 'products_get_images',
388            ids
389        },
390        success: function(msg) {
391            console.log(msg.data);
392            var images = msg.data.map(function(product) {
393                return '<div class="product-result product-carousel-item"> <a style="margin: 0!important;text-decoration: none;" href="' + product.url + '"> <img src="' + product.image_url + '" class="img-responsive quiz-product-result" alt=""/><h3>' + product.title + '</h3></a></div>';
394            })
395            jQuery.ajax({
396                type: "post",
397                dataType: "json",
398                url: '/wp-admin/admin-ajax.php',
399                data: {
400                    action: 'send_quiz_results',
401                    email: values['email'],
402                    first_name: values['first_name'],
403                    last_name: values['last_name'],
404                    phone: values['phone'],
405                    birthday: values['birthday'],
406                    genre: values['genre'],
407                    country: values['country'],
408                    ids,
409                    images
410
411                },
412                success: function(_msg) {
413                    console.log('images')
414                    console.log(result_html + images.join(' ') + '</div></div>')
415                    jQuery('.quiz-container').html(result_html + images.join(' ') + '</div></div>');
416                }
417            })
418        }
419    });
420
421
422}
423
424
425
426function clickQuiz(step, option, text) {
427    jQuery('button.reset-quiz-button.filter-button').show()
428    if (option > 0) final_result.push(text);
429    if (!steps[step][option]) {
430        jQuery('.quiz-title').html('');
431        jQuery('.quiz-container').html('Cargando resultados...');
432        console.log(final_result.join('-'))
433        jQuery('.quiz-container').html(form);
434
435        return;
436    }
437    jQuery('.quiz-title').html(steps[step][option]['title']);
438    jQuery('#quiz-question1 a img').attr('src', steps[step][option]['icon1']);
439    jQuery('#quiz-question1 a h2').html(steps[step][option]['title1']);
440    jQuery('#quiz-question1 a').attr('onclick', 'clickQuiz(' + step + ',' + (option + 1) + ',\'' + steps[step][option]['title1'].trim() + '\');return false;');
441
442    jQuery('#quiz-question2 a img').attr('src', steps[step][option]['icon2']);
443    jQuery('#quiz-question2 a h2').html(steps[step][option]['title2']);
444    jQuery('#quiz-question2 a').attr('onclick', 'clickQuiz(' + step + ',' + (option + 1) + ',\'' + steps[step][option]['title2'].trim() + '\');return false;');
445
446    if (steps[step][option]['icon3']) {
447        jQuery('#quiz-question3 a img').attr('src', steps[step][option]['icon3']);
448        jQuery('#quiz-question3 a h2').html(steps[step][option]['title3']);
449        jQuery('#quiz-question3 a').attr('onclick', 'clickQuiz(' + step + ',' + (option + 1) + ',\'' + steps[step][option]['title3'].trim() + '\');return false;');
450    } else {
451        jQuery('#quiz-question3').remove()
452    }
453
454    if (steps[step][option]['icon4']) {
455        jQuery('#quiz-question4 a img').attr('src', steps[step][option]['icon4']);
456        jQuery('#quiz-question4 a h2').html(steps[step][option]['title4']);
457        jQuery('#quiz-question4 a').attr('onclick', 'clickQuiz(' + step + ',' + (option + 1) + ',\'' + steps[step][option]['title4'].trim() + '\');return false;');
458    } else {
459        jQuery('#quiz-question4').remove()
460    }
461
462    if (steps[step][option]['icon5']) {
463        jQuery('#quiz-question4').after('<div class="quiz-question" id="quiz-question5"><a><img /><h2 /></a></div>');
464        jQuery('#quiz-question5 a img').attr('src', steps[step][option]['icon5']);
465        jQuery('#quiz-question5 a h2').html(steps[step][option]['title5']);
466        jQuery('#quiz-question5 a').attr('onclick', 'clickQuiz(' + step + ',' + (option + 1) + ',\'' + steps[step][option]['title5'].trim() + '\');return false;');
467    } else {
468        jQuery('#quiz-question5').remove()
469    }
470
471}