API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jun 19th, 2019
62
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.17 KB | None | 0 0
raw download clone embed print report
  1. define([
  2. 'jquery',
  3. 'underscore',
  4. 'mage/template',
  5. 'mage/translate',
  6. 'mage/url',
  7. 'jquery/ui',
  8. 'slick'
  9. ], function ($, _, mageTemplate, $translate, url) {
  10. 'use strict';
  11.  
  12. var Shadefinder = {
  13.  
  14. init: function () {
  15. var msSfLoader = '.ms-sf-loader';
  16.  
  17. var _this = this;
  18. _this.shade = '';
  19. _this.skin = '';
  20. _this.underlyingColor = '';
  21. _this.desiredFormula = '';
  22. _this.skinTone = '';
  23. _this.baseurl = url;
  24. _this.mediaurl = $('#mediaUrl').val()+'shade_finder/';
  25. // _this.skinurl = skin;
  26. _this.currentStep = 0;
  27. _this.result = '';
  28. _this.mediaurlshade = $('#mediaUrl').val()+'images/';
  29.  
  30. $('ms-sf-step-2', 'ms-sf-step-3', 'ms-sf-step-4', 'ms-sf-step-5', 'final').hide();
  31.  
  32. jQuery(document).on('click', '.start-over', function () {
  33. _this.startOver();
  34. });
  35.  
  36. jQuery(document).on('click', '.skinlabel1', function () {
  37. _this.nextStep(this, 0);
  38.  
  39. });
  40. jQuery(document).on('click', '.skinlabel2', function () {
  41. _this.nextStep(this, 0);
  42.  
  43. });
  44. jQuery(document).on('click', '.skinlabel3', function () {
  45. _this.nextStep(this, 0);
  46.  
  47. });
  48. jQuery(document).on('click', '.skinlabel4', function () {
  49. _this.nextStep(this, 0);
  50.  
  51. });
  52. jQuery(document).on('click', '.ms-shade-color-title', function () {
  53. _this.underlyingColor = jQuery(this).attr('value');
  54. });
  55.  
  56. jQuery(document).on('click', '#bulk_add', function () {
  57. _this.bulkAddToCart(jQuery(this).val());
  58. jQuery(this).attr('disabled', true);
  59. });
  60.  
  61. jQuery('.ms-shadefinder-logo').on('click', function (e) {
  62. jQuery(this).addClass('selected');
  63. jQuery('.ms-shadefinder-overlay').show();
  64. jQuery('.shadefinder-widget-main').show();
  65. });
  66.  
  67. jQuery('.ms-shadefinder-close').on('click', function (e) {
  68. jQuery('.ms-shadefinder-overlay, .ms-shadefinder-popup, #ms-sf-step-2, #ms-sf-step-3, #ms-sf-step-4, #ms-sf-step-5, #final').hide();
  69. jQuery('#ms-sf-step-1').show();
  70. jQuery('.ms-shadefinder-logo, .shade-box').removeClass('selected');
  71. jQuery('.shade-box').removeClass('unselected');
  72. });
  73.  
  74.  
  75. jQuery('.icon_help').on('click', function () {
  76. jQuery(this).toggleClass('help_selected');
  77. jQuery('.ms-shadefinder-help').slideToggle();
  78. });
  79.  
  80.  
  81. jQuery(document).on('click', '#stpcont-4 .shade-box:first-child', function () {
  82. if (jQuery('#stpcont-4 .shade-box:first-child').hasClass('selected')) {
  83. jQuery('#step-nav-next-4').html('<span>Finish</span>');
  84. } else {
  85. var foundationResultLink = jQuery('#stpcont-4 .shade-box:first-child .ms-foundation-result-finish').attr('href');
  86. jQuery('#step-nav-next-4').html('<a href=' + foundationResultLink + '><span>Finish</span></a>');
  87. }
  88. });
  89.  
  90. jQuery(document).on('click', '#stpcont-4 .shade-box:nth-child(2)', function () {
  91. if (jQuery('#stpcont-4 .shade-box:nth-child(2)').hasClass('selected')) {
  92. jQuery('#step-nav-next-4').html('<span>Finish</span>');
  93. } else {
  94. var foundationResultLink2 = jQuery('#stpcont-4 .shade-box:nth-child(2) .ms-foundation-result-link a').attr('href');
  95. jQuery('#step-nav-next-4').html('<a href=' + foundationResultLink2 + '><span>Finish</span></a>');
  96. }
  97. });
  98.  
  99. jQuery(document).on('click', '#step-nav-next-4', function () {
  100. if (!jQuery('#ms-sf-step-4 .shade-box.selected').hasClass('selected')) {
  101. jQuery('#ms-sf-step-4 .ms-error-msg').show();
  102. } else {
  103. jQuery('#ms-sf-step-4 .ms-error-msg').hide();
  104. }
  105. });
  106.  
  107. jQuery('#step-nav-next-1').on('click', function () {
  108. if (jQuery('.ms-shadefinder-step1 .ms-shadefinder-step1-item').hasClass('selected')) {
  109. jQuery('#ms-sf-step-1 .ms-shadefinder-container2 .ms-error-msg').hide();
  110. var _this = this;
  111. jQuery(msSfLoader).show();
  112. var skintype = jQuery('.ms-shadefinder-step1 .ms-shadefinder-step1-item.selected .skinlabel').text();
  113. var html = '';
  114. jQuery('.shade-box-container').empty();
  115. $.ajax({
  116. url: url.build('foundation-shade-finder/index/getSkinToneBySkinType'),
  117. type: "GET",
  118. data: {skintype: skintype},
  119. success: function (response) {
  120. var res = response.responseText.evalJSON();
  121. if (res.status === 'success') {
  122. if (res.content.length) {
  123. res.content.each(function (e, i) {
  124. html += e.content;
  125. });
  126. }
  127. jQuery('#ms-sf-step-1').hide();
  128. jQuery('#ms-sf-step-2').show();
  129. //jQuery('.shade-box-container').html(html).slick("refresh");
  130. jQuery('.shade-box-container').html(html);
  131. jQuery('.shade-box-container').removeClass("slick-initialized slick-slider");
  132.  
  133. /*var options = {
  134. selector: '.shade-box-container',
  135. show: 3,
  136. scroll: 1,
  137. responsive: [3, 2, 1]
  138. };*/
  139. //$.tam.slider(options);
  140.  
  141. jQuery('.shade-box-container').slick({
  142. infinite: false,
  143. slidesToShow: 3,
  144. slidesToScroll: 1,
  145. responsive: [
  146. {
  147. breakpoint: 767,
  148. settings: {
  149. vertical: true,
  150. slidesToShow: 3,
  151. slidesToScroll: 1,
  152. dots: true,
  153. arrows: false
  154. }
  155. }
  156. ]
  157. });
  158.  
  159. jQuery('html, body').animate({scrollTop: 0}, 0);
  160. jQuery(msSfLoader).hide();
  161. } else {
  162. jQuery(msSfLoader).hide();
  163. }
  164. },
  165. fail: function (response) {
  166.  
  167. }
  168. });
  169. } else {
  170. jQuery('#ms-sf-step-1 .ms-shadefinder-container2 .ms-error-msg').show();
  171. }
  172. });
  173.  
  174. jQuery(document).on('click', '#step-nav-back-2', function () {
  175. jQuery('#ms-sf-step-2').hide();
  176. jQuery('#ms-sf-step-1').show();
  177. jQuery('html, body').animate({scrollTop: 0}, 0);
  178. });
  179.  
  180. jQuery(document).on('click', '.shade-box', function () {
  181. var stepParentId = '#' + jQuery(this).parents('.stp-cont').attr('id');
  182. jQuery(this).siblings().removeClass('selected');
  183. jQuery(this).siblings().addClass('unselected');
  184. if (jQuery(this).hasClass('selected')) {
  185. jQuery(this).removeClass('selected');
  186. jQuery(this).siblings().removeClass('unselected');
  187. } else {
  188. jQuery(this).addClass('selected');
  189. jQuery(this).removeClass('unselected');
  190. }
  191.  
  192. if (jQuery(stepParentId + ' .shade-box.selected').hasClass('selected')) {
  193. jQuery(stepParentId + ' .ms-error-msg').hide();
  194. jQuery(stepParentId + ' .ms-shadefinder-step-next').removeClass('ms-shadefinder-item-unselected');
  195. } else {
  196. jQuery(stepParentId + ' .ms-error-msg').show();
  197. jQuery(stepParentId + ' .ms-shadefinder-step-next').addClass('ms-shadefinder-item-unselected');
  198. }
  199. });
  200.  
  201. jQuery(document).on('click', '#step-nav-next-2', function () {
  202. if (jQuery('#ms-sf-step-2 .shade-box.selected').hasClass('selected')) {
  203. jQuery('#ms-sf-step-2 .ms-shadefinder-step-container .ms-error-msg').hide();
  204. var _this = this;
  205. jQuery(msSfLoader).show();
  206. var skintype = jQuery('#ms-sf-step-1 .ms-shadefinder-step1-item.selected .skinlabel').text();
  207. var skintone = jQuery('#ms-sf-step-2 .shade-box.selected .sf-label').text();
  208. var html = '';
  209. $.ajax({
  210. url: url.build('foundation-shade-finder/index/getUndertoneBySkinTypeAndSkinTone'),
  211. type: "GET",
  212. data: {skintype: skintype, skintone: skintone},
  213. success: function(response){
  214. var res = response.responseText.evalJSON();
  215. if(res.status === 'success'){
  216. if (res.content.length) {
  217. res.content.each(function (e, i) {
  218. html += e.content;
  219. });
  220. }
  221. jQuery('#ms-sf-step-2').hide();
  222. jQuery('#ms-sf-step-3').show();
  223. jQuery('#ms-sf-step-3 #stpcont-3').html(html);
  224. jQuery('html, body').animate({scrollTop: 0}, 0);
  225. jQuery(msSfLoader).hide();
  226. }else{
  227. jQuery(msSfLoader).hide();
  228. }
  229.  
  230. },
  231. fail: function(response){
  232.  
  233. }
  234. });
  235. } else {
  236. jQuery('#ms-sf-step-2 .ms-shadefinder-step-container .ms-error-msg').show();
  237. }
  238. });
  239.  
  240. jQuery(document).on('click', '#step-nav-back-3', function () {
  241. jQuery('#ms-sf-step-3').hide();
  242. jQuery('#ms-sf-step-2').show();
  243. jQuery('html, body').animate({
  244. scrollTop: jQuery(".stp-cont").offset().top
  245. }, 2000);
  246. });
  247.  
  248. jQuery(document).on('click', '#step-nav-next-3', function () {
  249. if (jQuery('#ms-sf-step-3 .shade-box.selected').hasClass('selected')) {
  250. jQuery('#ms-sf-step-3 .ms-shadefinder-step-container .ms-error-msg').hide();
  251. var _this = this;
  252. jQuery(msSfLoader).show();
  253. var skintype = jQuery('#ms-sf-step-1 .ms-shadefinder-step1-item.selected .skinlabel').text();
  254. var skintone = jQuery('#ms-sf-step-2 .shade-box.selected .sf-label').text();
  255. var undertone = jQuery('#ms-sf-step-3 .shade-box.selected .ms-shade-color-title').text();
  256. var html = '';
  257. var html2 = '';
  258. $.ajax({
  259. url: url.build('foundation-shade-finder/index/getIdealFoundationBySkinTypeAndSkinToneAndUndertone'),
  260. type: "GET",
  261. data: {skintype: skintype, skintone: skintone, undertone: undertone},
  262. success: function(response){
  263. var res = response.responseText.evalJSON();
  264. if(res.status === 'success'){
  265. if (res.content.length) {
  266. res.content.each(function (e, i) {
  267. html += '<div class="shade-box ms-shadefinder-ico-item" id="shadeid-' + e.id + '" sf-label="' + e.ideal_fondation + '">';
  268. html += e.content;
  269. html += '<div class="ms-foundation-result-link"><a class="ms-foundation-result-finish" href="' + url + 'foundation-shade-finder/?shadeid=' + e.id + '" class="ms-shadefinder-url" title="' + e.ideal_fondation + '"></a></div>';
  270. html += '</div>';
  271. });
  272. }
  273. jQuery('#ms-sf-step-3').hide();
  274. jQuery('#ms-sf-step-4').show();
  275. jQuery('#ms-sf-step-4 .step-content .shade-wrap').html(html);
  276. jQuery('html, body').animate({scrollTop: 0}, 0);
  277. jQuery(msSfLoader).hide();
  278. }else{
  279. jQuery(msSfLoader).hide();
  280. }
  281.  
  282. },
  283. fail: function(response){
  284.  
  285. }
  286. });
  287. } else {
  288. jQuery('#ms-sf-step-3 .ms-shadefinder-step-container .ms-error-msg').show();
  289. }
  290. });
  291.  
  292. jQuery(document).on('click', '#step-nav-back-4', function () {
  293. jQuery('#ms-sf-step-4').hide();
  294. jQuery('#ms-sf-step-3').show();
  295. jQuery('html, body').animate({
  296. scrollTop: jQuery(".stp-cont").offset().top
  297. }, 2000);
  298. });
  299. },
  300.  
  301. startOver: function () {
  302. this.displayStep(0, 0);
  303. $$('.selection-text').each(function (e, i) {
  304. e.innerHTML = '';
  305. });
  306. $$('.shade-box').each(function (e, i) {
  307. e.removeClassName('selected');
  308. });
  309. this.currentStep = 0;
  310. this.result = '';
  311.  
  312. },
  313.  
  314. getUnderLyingColors: function (shade) {
  315. var _this = this;
  316. var html = '';
  317. $.ajax({
  318. url: url.build('foundation-shade-finder/index/getUnderlyingColors'),
  319. type: "GET",
  320. data: {shade: shade, skin: _this.skin},
  321. success: function(response){
  322. var res = response.responseText.evalJSON();
  323. if(res.status === 'success'){
  324. if (res.content.length) {
  325. html += '<div class="shade-box"><div class="shade-wrap ms-shade-color-box" style="background-color:#d3b9ab;"><div class="ms-shade-color-title" value="Cool" id="Cool">Cool</div><div class="ms-shade-color-description"><ul><li>Pink, red or blush undertones</li><li>Skin burns easily, rarely tans</li><li>Veins on underside of wrist appear blue/purple</li></ul></div></div></div>';
  326. html += '<div class="shade-box"><div class="shade-wrap ms-shade-color-box" style="background-color:#cfb8a4;"><div class="ms-shade-color-title" value="Neutral" id="Neutral">Neutral</div><div class="ms-shade-color-description"><ul><li>Olive, or a mix of warm and cool understones.</li><li>Skin tans well but may burn.</li><li>Veins on underside of wrist appear blue/green</li></ul></div></div></div>';
  327. html += '<div class="shade-box"><div class="shade-wrap ms-shade-color-box" style="background-color:#e0c5a2;"><div class="ms-shade-color-title" value="warm"id="warm">Warm</div><div class="ms-shade-color-description"><ul><li>Yellow, peachy understones.</li><li>Skin tans easily</li><li>Veins on underside of wrist appear green</li></ul></div></div></div>';
  328. }
  329. $('stpcont-3').innerHTML = html;
  330. $('ms-sf-step-2', 'ms-sf-step-4').invoke('hide');
  331. // set body
  332. $('ms-sf-step-2').removeClassName('active');
  333. $('ms-sf-step-3').addClassName('active');
  334. $('ms-sf-step-3').show();
  335. // set header
  336. $('step_2').addClassName('active');
  337. _this.hideLoader();
  338. }else{
  339. _this.hideLoader();
  340. }
  341.  
  342. },
  343. fail: function(response){
  344.  
  345. }
  346. });
  347. },
  348.  
  349. displayStep: function (content, header) {
  350. var _this = this;
  351. $$('.stp-cont').each(function (e, i) {
  352. var stepNum = e.readAttribute('step-num');
  353. if (content === stepNum) {
  354. e.show();
  355. e.addClassName('active');
  356. } else {
  357. e.hide();
  358. e.removeClassName('active');
  359. }
  360. });
  361. $$('.steps').each(function (e, i) {
  362. var stepNum = e.readAttribute('step-num');
  363. if (header === stepNum) {
  364. e.addClassName('active');
  365. } else {
  366. if (header === 1) {
  367. e.removeClassName('active');
  368. }
  369. }
  370. });
  371. },
  372.  
  373. step2: function (ele) {
  374.  
  375. var _this = this;
  376. _this.showLoader();
  377. var _shade = ele.down('div.sf-label').innerHTML;
  378. _this.shade = _shade;
  379. ele.siblings().each(function (e, i) {
  380. e.removeClassName('selected');
  381. });
  382. var underLying = _this.getUnderLyingColors(_this.shade);
  383.  
  384. ele.addClassName('selected');
  385. $('sel_1').innerHTML = _this.shade;
  386.  
  387. },
  388.  
  389. showLoader: function () {
  390. $(msSfLoader).show();
  391. },
  392. hideLoader: function () {
  393. $(msSfLoader).hide();
  394. },
  395. step3: function (ele) {
  396. var _this = this;
  397. var html = '';
  398.  
  399. html += '<div class="shade-wrap ms-shadefinder-ico">';
  400. html += '<div class="shade-box ms-shadefinder-ico-item" sf-label="LUMINOUS, DEWY">';
  401. html += '<div class="image sf-image shade-image">';
  402. html += '<img src="' + _this.mediaurlshade + 'icon_luminus-dewy.png' + '" alt="" />';
  403. html += '</div>';
  404. html += '<h3><div class = "skinlabel">Luminous, Dewy</div></h3>';
  405. html += '<p>Healthy, Hydrated Glow</p>';
  406. html += '<a href="/foundation-shade-finder?id=' + _this.mediaurlshade + '" class="ms-shadefinder-url">Luminous, Dewy</a>';
  407. html += '</div>';
  408.  
  409. html += '<div class="shade-box ms-shadefinder-ico-item" sf-label="NATURAL, SEMI-MATTE">';
  410. html += '<div class="image sf-image shade-image">';
  411. html += '<img src="' + _this.mediaurlshade + 'icon_natural-semi-matte.png' + '" alt="" />';
  412. html += '</div>';
  413. html += '<h3><div class = "skinlabel">Natural, semi matte</div></h3>';
  414. html += '<p>Your Skin, Perfected</p>';
  415. html += '<a href="/foundation-shade-finder?id=' + _this.mediaurlshade + '" class="ms-shadefinder-url">Natural, semi matte</a>';
  416. html += '</div>';
  417. html += '</div>';
  418. $('stpcont-4').innerHTML = html;
  419. var _this = this;
  420. _this.showLoader();
  421. var _color = ele.next(0).innerHTML;
  422. //_this.underlyingColor = _color;
  423. ele.siblings().invoke('removeClassName', 'selected');
  424. ele.addClassName('selected');
  425. $('sel_2').innerHTML = _this.underlyingColor;
  426. _this.displayStep(_this.currentStep, _this.currentStep);
  427. _this.hideLoader();
  428.  
  429. },
  430. step4: function (ele) {
  431. //console.log('aaaaa');
  432. var _this = this;
  433. _this.showLoader();
  434. ele.siblings().invoke('removeClassName', 'selected');
  435. ele.addClassName('selected');
  436. _this.desiredFormula = ele.readAttribute('sf-label');
  437. $('sel_3').innerHTML = _this.desiredFormula;
  438.  
  439. $.ajax({
  440. url: url.build('foundation-shade-finder/index/getResults'),
  441. type: "GET",
  442. data: { skin: _this.skin, underlying_color: _this.underlyingColor, shade: this.shade, desired_formula: _this.desiredFormula },
  443. success: function(response){
  444. var res = response.responseText.evalJSON();
  445. // console.log(response.responseText);
  446. if(res.status === 'success'){
  447. _this.result = res; // update global variable to use further
  448. if (res.skin_tone.length > 0) { // check for tone step
  449. // display skin tones
  450. //alert("test");
  451. var html = "";
  452. res.skin_tone.each(function (e, i) {
  453. html += '<div class="shade-box" sf-label="' + e.label + '">';
  454. html += '<div class="sf-image shade-image">' +
  455. '<img width="418" height="373" src="' + _this.mediaurl + e.image + '" title="' + e.underlying_color + '" alt="" /></div>';
  456. html += '<div class="sf-label skin-tone" style="background-color:">' + e.label + '</div>';
  457. html += '</div>';
  458. });
  459. $('stpcont-5').innerHTML = html;
  460. // set body
  461. _this.displayStep(4, 3);
  462. if (res.skin_tone.length === 1) {
  463. jQuery('#stpcont-5 .shade-box').trigger('click');
  464. }
  465. _this.hideLoader();
  466. } else {
  467. _this.skinTone = '';
  468. _this.showResults(res);
  469. }
  470. }else{
  471. _this.hideLoader();
  472. jQuery(".ms-error-msg").show();
  473. }
  474.  
  475. },
  476. fail: function(response){
  477. _this.currentStep = 2;
  478. }
  479. });
  480. },
  481. step5: function (ele) {
  482. var _this = this;
  483. _this.showLoader();
  484. var _tone = ele.readAttribute('sf-label');
  485. _this.skinTone = _tone;
  486. ele.addClassName('selected');
  487. $('sel_4').innerHTML = _this.skinTone;
  488. _this.showResults();
  489. // update current step counter on final step
  490. _this.currentStep = 5;
  491. },
  492. showResults: function () {
  493. var _this = this;
  494. _this.showLoader();
  495. var res = _this.result;
  496. if (res.res_items.length > 0) {
  497. var line = '';
  498.  
  499. res.res_items.each(function (e, i) {
  500. if (e.shade === _this.shade && e.underlying_color === _this.underlyingColor && e.skin_tone === _this.skinTone) {
  501. line = e;
  502. }
  503. });
  504. if (line !== '') {
  505. _this.renderproducts(line);
  506. } else {
  507. _this.hideLoader();
  508. }
  509. }
  510. },
  511.  
  512. renderproducts: function (line) {
  513. var _this = this;
  514. var html = '';
  515. var child_skus = {
  516. 'foundation': line.foundation.split('||')[2],
  517. 'blush': line.blush.split('||')[2],
  518. 'highlighter': line.highlighter.split('||')[2],
  519. 'concealer': line.concealer.split('||')[2],
  520. 'netural': line.netural_lip.split('||')[2],
  521. 'intense': line.intense_lip.split('||')[2],
  522. 'kit': line.perfection_kit.split('||')[2]
  523. };
  524. html += '<div id="products-left" class="product-content-left">';
  525.  
  526. var _image = '<img src="' + _this.mediaurl + line.skin_tone_image + '" width="418" height="372" alt=""/>';
  527. html += '<div class="selected-tone">' +
  528. '<div class="image">' + _image + '</div> ' +
  529. '<div class="label">' + _this.skinTone + '</div> ' +
  530. '</div> ';
  531. html += '<div class="item kit">' +
  532. '<div class="product-title">' + line.kit_title + '</div> ' +
  533. '<div class="product-image"><img src="' + _this.mediaurl + 'temptuairstarterset_web_1.jpg" width="141" height="150" /> </div> ' +
  534. '<div class="product-info">' +
  535. '<div class="desc">Kit includes:<br />' + line.kit_description + '</div><div class="price-box"><span class="regular-price"><span class="price">$195 ($230 value)</span></span></div><div class="actions"><button sku_optn="' + line.perfection_kit + '" class="button btn-cart addtocart"><span>Add To Cart</span></button> </div> ' +
  536. '</div> ' +
  537. '</div> ';
  538. html += '</div> <div id="products-right" class="product-content-right">' +
  539. '<ul class="products-grid">';
  540. if (line.foundation_sku) {
  541. var f_image = _this.result.infos.images[child_skus.foundation];
  542. html += '<li class="item">' +
  543. '<div class="product-info">' +
  544. '<div class="product-title">Foundation</div> ' +
  545. '<div class="option-label">' + line.f_optn_label + '</div> ' +
  546. '</div> ' +
  547. '<img src="' + f_image + '" title="Foundation" width="150" height="150" />' +
  548. '<div class="price-box"><span class="regular-price"><span class="price">$' + _this.result.infos.prices[child_skus.foundation] + '</span></span></div>' +
  549. '<div class="actions"><button class="button btn-cart addtocart" sku_optn="' + line.foundation + '" type="button"><span>Add To Cart</span></button> </div> ' +
  550. '</li>';
  551. }
  552. html += '</ul>' +
  553. '<div class="bulk-addtocart-container">' +
  554. '<input type="checkbox" value="' + line.foundation + '--' + line.blush + '--' + line.highlighter + '" name="bulk_add" id="bulk_add" /><span class="bulk-label desktop">Select to add all 3 items above to cart</span><span class="bulk-label mobile">Select to add all 3 items below to cart</span>' +
  555. '</div>' +
  556. '<div class="toggle-container">' +
  557. '<div class="toggle-header closed">Looking for additional products to complement your skin tone? </div> ' +
  558. '<div class="toggle-body" style="display: none">' +
  559. '<div class="left">' +
  560. '<div class="product-title current" id="head_neutral">Neutral Lip</div> ' +
  561. '<div class="product-title" id="head_intense">Intense Lip</div> ';
  562. if (line.concealer !== 'N/A') {
  563. html += '<div class="product-title" id="head_concealer">Concealer</div> ';
  564. }
  565.  
  566. html += '</ul>' +
  567. '</div> ' +
  568. '</div> ' +
  569. '</div> ' +
  570. '</div>';
  571. $('stpcont-final').innerHTML = html;
  572. _this.displayStep(5, 4);
  573. _this.hideLoader();
  574.  
  575. },
  576.  
  577. nextStep: function (ele, step) {
  578. if (step === 0) {
  579. this.step0(ele);
  580. }
  581. if (step === 1) {
  582. this.step2(ele);
  583. this.currentStep = 2;
  584. } else if (step === 2) {
  585. this.currentStep = 3;
  586. this.step3(ele);
  587. } else if (step === 3) {
  588. this.currentStep = 4;
  589. this.step4(ele);
  590. } else if (step === 4) {
  591. this.step5(ele);
  592. //this.currentStep = 4;
  593. }
  594. },
  595.  
  596. };
  597. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!