0

I am having a problem, while initializing. If I define those in document.ready it works as expected,but of-course my functions couldn't be called from that scope.

web/js/shadefinder.js

define([
'jquery',
'underscore',
'mage/template',
'mage/translate',
'mage/url',
'jquery/ui',
'slick'
], function ($, _, mageTemplate, $translate, url) {
'use strict';

var Shadefinder = {

    init: function () {
        var msSfLoader = '.ms-sf-loader';

        var _this = this;
        _this.shade = '';
        _this.skin = '';
        _this.underlyingColor = '';
        _this.desiredFormula = '';
        _this.skinTone = '';
        _this.baseurl = url;
        _this.mediaurl = $('#mediaUrl').val()+'shade_finder/';
        // _this.skinurl = skin;
        _this.currentStep = 0;
        _this.result = '';
        _this.mediaurlshade = $('#mediaUrl').val()+'images/';

        $('ms-sf-step-2', 'ms-sf-step-3', 'ms-sf-step-4', 'ms-sf-step-5', 'final').hide();

        jQuery(document).on('click', '.start-over', function () {
            _this.startOver();
        });

        jQuery(document).on('click', '.skinlabel1', function () {
            _this.nextStep(this, 0);

        });
        jQuery(document).on('click', '.skinlabel2', function () {
            _this.nextStep(this, 0);

        });
        jQuery(document).on('click', '.skinlabel3', function () {
            _this.nextStep(this, 0);

        });
        jQuery(document).on('click', '.skinlabel4', function () {
            _this.nextStep(this, 0);

        });
        jQuery(document).on('click', '.ms-shade-color-title', function () {
            _this.underlyingColor = jQuery(this).attr('value');
        });

        jQuery(document).on('click', '#bulk_add', function () {
            _this.bulkAddToCart(jQuery(this).val());
            jQuery(this).attr('disabled', true);
        });

        jQuery('.ms-shadefinder-logo').on('click', function (e) {
            jQuery(this).addClass('selected');
            jQuery('.ms-shadefinder-overlay').show();
            jQuery('.shadefinder-widget-main').show();
        });

        jQuery('.ms-shadefinder-close').on('click', function (e) {
            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();
            jQuery('#ms-sf-step-1').show();
            jQuery('.ms-shadefinder-logo, .shade-box').removeClass('selected');
            jQuery('.shade-box').removeClass('unselected');
        });


        jQuery('.icon_help').on('click', function () {
            jQuery(this).toggleClass('help_selected');
            jQuery('.ms-shadefinder-help').slideToggle();
        });


        jQuery(document).on('click', '#stpcont-4 .shade-box:first-child', function () {
            if (jQuery('#stpcont-4 .shade-box:first-child').hasClass('selected')) {
                jQuery('#step-nav-next-4').html('<span>Finish</span>');
            } else {
                var foundationResultLink = jQuery('#stpcont-4 .shade-box:first-child .ms-foundation-result-finish').attr('href');
                jQuery('#step-nav-next-4').html('<a href=' + foundationResultLink + '><span>Finish</span></a>');
            }
        });

        jQuery(document).on('click', '#stpcont-4 .shade-box:nth-child(2)', function () {
            if (jQuery('#stpcont-4 .shade-box:nth-child(2)').hasClass('selected')) {
                jQuery('#step-nav-next-4').html('<span>Finish</span>');
            } else {
                var foundationResultLink2 = jQuery('#stpcont-4 .shade-box:nth-child(2) .ms-foundation-result-link a').attr('href');
                jQuery('#step-nav-next-4').html('<a href=' + foundationResultLink2 + '><span>Finish</span></a>');
            }
        });

        jQuery(document).on('click', '#step-nav-next-4', function () {
            if (!jQuery('#ms-sf-step-4 .shade-box.selected').hasClass('selected')) {
                jQuery('#ms-sf-step-4 .ms-error-msg').show();
            } else {
                jQuery('#ms-sf-step-4 .ms-error-msg').hide();
            }
        });

        jQuery('#step-nav-next-1').on('click', function () {
            if (jQuery('.ms-shadefinder-step1 .ms-shadefinder-step1-item').hasClass('selected')) {
                jQuery('#ms-sf-step-1 .ms-shadefinder-container2 .ms-error-msg').hide();
                var _this = this;
                jQuery(msSfLoader).show();
                var skintype = jQuery('.ms-shadefinder-step1 .ms-shadefinder-step1-item.selected .skinlabel').text();
                var html = '';
                jQuery('.shade-box-container').empty();
                $.ajax({
                    url: url.build('foundation-shade-finder/index/getSkinToneBySkinType'),
                    type: "GET",
                    data: {skintype: skintype},
                    success: function (response) {
                        var res = response.responseText.evalJSON();
                        if (res.status === 'success') {
                            if (res.content.length) {
                                res.content.each(function (e, i) {
                                    html += e.content;
                                });
                            }
                            jQuery('#ms-sf-step-1').hide();
                            jQuery('#ms-sf-step-2').show();
                            //jQuery('.shade-box-container').html(html).slick("refresh");
                            jQuery('.shade-box-container').html(html);
                            jQuery('.shade-box-container').removeClass("slick-initialized slick-slider");

                            /*var options = {
                                selector: '.shade-box-container',
                                show: 3,
                                scroll: 1,
                                responsive: [3, 2, 1]
                            };*/
                            //$.tam.slider(options);

                            jQuery('.shade-box-container').slick({
                                infinite: false,
                                slidesToShow: 3,
                                slidesToScroll: 1,
                                responsive: [
                                    {
                                        breakpoint: 767,
                                        settings: {
                                            vertical: true,
                                            slidesToShow: 3,
                                            slidesToScroll: 1,
                                            dots: true,
                                            arrows: false
                                        }
                                    }
                                ]
                            });

                            jQuery('html, body').animate({scrollTop: 0}, 0);
                            jQuery(msSfLoader).hide();
                        } else {
                            jQuery(msSfLoader).hide();
                        }
                    },
                    fail: function (response) {

                    }
                });
            } else {
                jQuery('#ms-sf-step-1 .ms-shadefinder-container2 .ms-error-msg').show();
            }
        });

        jQuery(document).on('click', '#step-nav-back-2', function () {
            jQuery('#ms-sf-step-2').hide();
            jQuery('#ms-sf-step-1').show();
            jQuery('html, body').animate({scrollTop: 0}, 0);
        });

        jQuery(document).on('click', '.shade-box', function () {
            var stepParentId = '#' + jQuery(this).parents('.stp-cont').attr('id');
            jQuery(this).siblings().removeClass('selected');
            jQuery(this).siblings().addClass('unselected');
            if (jQuery(this).hasClass('selected')) {
                jQuery(this).removeClass('selected');
                jQuery(this).siblings().removeClass('unselected');
            } else {
                jQuery(this).addClass('selected');
                jQuery(this).removeClass('unselected');
            }

            if (jQuery(stepParentId + ' .shade-box.selected').hasClass('selected')) {
                jQuery(stepParentId + ' .ms-error-msg').hide();
                jQuery(stepParentId + ' .ms-shadefinder-step-next').removeClass('ms-shadefinder-item-unselected');
            } else {
                jQuery(stepParentId + ' .ms-error-msg').show();
                jQuery(stepParentId + ' .ms-shadefinder-step-next').addClass('ms-shadefinder-item-unselected');
            }
        });

        jQuery(document).on('click', '#step-nav-next-2', function () {
            if (jQuery('#ms-sf-step-2 .shade-box.selected').hasClass('selected')) {
                jQuery('#ms-sf-step-2 .ms-shadefinder-step-container .ms-error-msg').hide();
                var _this = this;
                jQuery(msSfLoader).show();
                var skintype = jQuery('#ms-sf-step-1 .ms-shadefinder-step1-item.selected .skinlabel').text();
                var skintone = jQuery('#ms-sf-step-2 .shade-box.selected .sf-label').text();
                var html = '';
                $.ajax({
                    url: url.build('foundation-shade-finder/index/getUndertoneBySkinTypeAndSkinTone'),
                    type: "GET",
                    data: {skintype: skintype, skintone: skintone},
                    success: function(response){
                        var res = response.responseText.evalJSON();
                        if(res.status === 'success'){
                            if (res.content.length) {
                                res.content.each(function (e, i) {
                                    html += e.content;
                                });
                            }
                            jQuery('#ms-sf-step-2').hide();
                            jQuery('#ms-sf-step-3').show();
                            jQuery('#ms-sf-step-3 #stpcont-3').html(html);
                            jQuery('html, body').animate({scrollTop: 0}, 0);
                            jQuery(msSfLoader).hide();
                        }else{
                            jQuery(msSfLoader).hide();
                        }

                    },
                    fail: function(response){

                    }
                });
            } else {
                jQuery('#ms-sf-step-2 .ms-shadefinder-step-container .ms-error-msg').show();
            }
        });

        jQuery(document).on('click', '#step-nav-back-3', function () {
            jQuery('#ms-sf-step-3').hide();
            jQuery('#ms-sf-step-2').show();
            jQuery('html, body').animate({
                scrollTop: jQuery(".stp-cont").offset().top
            }, 2000);
        });

        jQuery(document).on('click', '#step-nav-next-3', function () {
            if (jQuery('#ms-sf-step-3 .shade-box.selected').hasClass('selected')) {
                jQuery('#ms-sf-step-3 .ms-shadefinder-step-container .ms-error-msg').hide();
                var _this = this;
                jQuery(msSfLoader).show();
                var skintype = jQuery('#ms-sf-step-1 .ms-shadefinder-step1-item.selected .skinlabel').text();
                var skintone = jQuery('#ms-sf-step-2 .shade-box.selected .sf-label').text();
                var undertone = jQuery('#ms-sf-step-3 .shade-box.selected .ms-shade-color-title').text();
                var html = '';
                var html2 = '';
                $.ajax({
                    url: url.build('foundation-shade-finder/index/getIdealFoundationBySkinTypeAndSkinToneAndUndertone'),
                    type: "GET",
                    data: {skintype: skintype, skintone: skintone, undertone: undertone},
                    success: function(response){
                        var res = response.responseText.evalJSON();
                        if(res.status === 'success'){
                            if (res.content.length) {
                                res.content.each(function (e, i) {
                                    html += '<div class="shade-box ms-shadefinder-ico-item" id="shadeid-' + e.id + '" sf-label="' + e.ideal_fondation + '">';
                                    html += e.content;
                                    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>';
                                    html += '</div>';
                                });
                            }
                            jQuery('#ms-sf-step-3').hide();
                            jQuery('#ms-sf-step-4').show();
                            jQuery('#ms-sf-step-4 .step-content .shade-wrap').html(html);
                            jQuery('html, body').animate({scrollTop: 0}, 0);
                            jQuery(msSfLoader).hide();
                        }else{
                            jQuery(msSfLoader).hide();
                        }

                    },
                    fail: function(response){

                    }
                });
            } else {
                jQuery('#ms-sf-step-3 .ms-shadefinder-step-container .ms-error-msg').show();
            }
        });

        jQuery(document).on('click', '#step-nav-back-4', function () {
            jQuery('#ms-sf-step-4').hide();
            jQuery('#ms-sf-step-3').show();
            jQuery('html, body').animate({
                scrollTop: jQuery(".stp-cont").offset().top
            }, 2000);
        });
    },

    startOver: function () {
        this.displayStep(0, 0);
        $$('.selection-text').each(function (e, i) {
            e.innerHTML = '';
        });
        $$('.shade-box').each(function (e, i) {
            e.removeClassName('selected');
        });
        this.currentStep = 0;
        this.result = '';

    },

    getUnderLyingColors: function (shade) {
        var _this = this;
        var html = '';
        $.ajax({
            url: url.build('foundation-shade-finder/index/getUnderlyingColors'),
            type: "GET",
            data: {shade: shade, skin: _this.skin},
            success: function(response){
                var res = response.responseText.evalJSON();
                if(res.status === 'success'){
                    if (res.content.length) {
                        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>';
                        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>';
                        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>';
                    }
                    $('stpcont-3').innerHTML = html;
                    $('ms-sf-step-2', 'ms-sf-step-4').invoke('hide');
                    // set body
                    $('ms-sf-step-2').removeClassName('active');
                    $('ms-sf-step-3').addClassName('active');
                    $('ms-sf-step-3').show();
                    // set header
                    $('step_2').addClassName('active');
                    _this.hideLoader();
                }else{
                    _this.hideLoader();
                }

            },
            fail: function(response){

            }
        });
    },

    displayStep: function (content, header) {
        var _this = this;
        $$('.stp-cont').each(function (e, i) {
            var stepNum = e.readAttribute('step-num');
            if (content === stepNum) {
                e.show();
                e.addClassName('active');
            } else {
                e.hide();
                e.removeClassName('active');
            }
        });
        $$('.steps').each(function (e, i) {
            var stepNum = e.readAttribute('step-num');
            if (header === stepNum) {
                e.addClassName('active');
            } else {
                if (header === 1) {
                    e.removeClassName('active');
                }
            }
        });
    },

    step2: function (ele) {

        var _this = this;
        _this.showLoader();
        var _shade = ele.down('div.sf-label').innerHTML;
        _this.shade = _shade;
        ele.siblings().each(function (e, i) {
            e.removeClassName('selected');
        });
        var underLying = _this.getUnderLyingColors(_this.shade);

        ele.addClassName('selected');
        $('sel_1').innerHTML = _this.shade;

    },

    showLoader: function () {
        $(msSfLoader).show();
    },
    hideLoader: function () {
        $(msSfLoader).hide();
    },
    step3: function (ele) {
        var _this = this;
        var html = '';

        html += '<div class="shade-wrap ms-shadefinder-ico">';
        html += '<div class="shade-box ms-shadefinder-ico-item" sf-label="LUMINOUS, DEWY">';
        html += '<div class="image sf-image shade-image">';
        html += '<img src="' + _this.mediaurlshade + 'icon_luminus-dewy.png' + '" alt="" />';
        html += '</div>';
        html += '<h3><div class = "skinlabel">Luminous, Dewy</div></h3>';
        html += '<p>Healthy, Hydrated Glow</p>';
        html += '<a href="/foundation-shade-finder?id=' + _this.mediaurlshade + '" class="ms-shadefinder-url">Luminous, Dewy</a>';
        html += '</div>';

        html += '<div class="shade-box ms-shadefinder-ico-item" sf-label="NATURAL, SEMI-MATTE">';
        html += '<div class="image sf-image shade-image">';
        html += '<img src="' + _this.mediaurlshade + 'icon_natural-semi-matte.png' + '" alt="" />';
        html += '</div>';
        html += '<h3><div class = "skinlabel">Natural, semi matte</div></h3>';
        html += '<p>Your Skin, Perfected</p>';
        html += '<a href="/foundation-shade-finder?id=' + _this.mediaurlshade + '" class="ms-shadefinder-url">Natural, semi matte</a>';
        html += '</div>';
        html += '</div>';
        $('stpcont-4').innerHTML = html;
        var _this = this;
        _this.showLoader();
        var _color = ele.next(0).innerHTML;
        //_this.underlyingColor = _color;
        ele.siblings().invoke('removeClassName', 'selected');
        ele.addClassName('selected');
        $('sel_2').innerHTML = _this.underlyingColor;
        _this.displayStep(_this.currentStep, _this.currentStep);
        _this.hideLoader();

    },
    step4: function (ele) {
        //console.log('aaaaa');
        var _this = this;
        _this.showLoader();
        ele.siblings().invoke('removeClassName', 'selected');
        ele.addClassName('selected');
        _this.desiredFormula = ele.readAttribute('sf-label');
        $('sel_3').innerHTML = _this.desiredFormula;

        $.ajax({
            url: url.build('foundation-shade-finder/index/getResults'),
            type: "GET",
            data: { skin: _this.skin, underlying_color: _this.underlyingColor, shade: this.shade, desired_formula: _this.desiredFormula },
            success: function(response){
                var res = response.responseText.evalJSON();
                // console.log(response.responseText);
                if(res.status === 'success'){
                    _this.result = res; // update global variable to use further
                    if (res.skin_tone.length > 0) { // check for tone step
                        // display skin tones
                        //alert("test");
                        var html = "";
                        res.skin_tone.each(function (e, i) {
                            html += '<div class="shade-box" sf-label="' + e.label + '">';
                            html += '<div class="sf-image shade-image">' +
                                '<img width="418" height="373" src="' + _this.mediaurl + e.image + '" title="' + e.underlying_color + '" alt="" /></div>';
                            html += '<div class="sf-label skin-tone" style="background-color:">' + e.label + '</div>';
                            html += '</div>';
                        });
                        $('stpcont-5').innerHTML = html;
                        // set body
                        _this.displayStep(4, 3);
                        if (res.skin_tone.length === 1) {
                            jQuery('#stpcont-5 .shade-box').trigger('click');
                        }
                        _this.hideLoader();
                    } else {
                        _this.skinTone = '';
                        _this.showResults(res);
                    }
                }else{
                    _this.hideLoader();
                    jQuery(".ms-error-msg").show();
                }

            },
            fail: function(response){
                _this.currentStep = 2;
            }
        });
    },
    step5: function (ele) {
        var _this = this;
        _this.showLoader();
        var _tone = ele.readAttribute('sf-label');
        _this.skinTone = _tone;
        ele.addClassName('selected');
        $('sel_4').innerHTML = _this.skinTone;
        _this.showResults();
        // update current step counter on final step
        _this.currentStep = 5;
    },
    showResults: function () {
        var _this = this;
        _this.showLoader();
        var res = _this.result;
        if (res.res_items.length > 0) {
            var line = '';

            res.res_items.each(function (e, i) {
                if (e.shade === _this.shade && e.underlying_color === _this.underlyingColor && e.skin_tone === _this.skinTone) {
                    line = e;
                }
            });
            if (line !== '') {
                _this.renderproducts(line);
            } else {
                _this.hideLoader();
            }
        }
    },

    renderproducts: function (line) {
        var _this = this;
        var html = '';
        var child_skus = {
            'foundation': line.foundation.split('||')[2],
            'blush': line.blush.split('||')[2],
            'highlighter': line.highlighter.split('||')[2],
            'concealer': line.concealer.split('||')[2],
            'netural': line.netural_lip.split('||')[2],
            'intense': line.intense_lip.split('||')[2],
            'kit': line.perfection_kit.split('||')[2]
        };
        html += '<div id="products-left" class="product-content-left">';

        var _image = '<img src="' + _this.mediaurl + line.skin_tone_image + '" width="418" height="372" alt=""/>';
        html += '<div class="selected-tone">' +
            '<div class="image">' + _image + '</div> ' +
            '<div class="label">' + _this.skinTone + '</div> ' +
            '</div> ';
        html += '<div class="item kit">' +
            '<div class="product-title">' + line.kit_title + '</div> ' +
            '<div class="product-image"><img src="' + _this.mediaurl + 'temptuairstarterset_web_1.jpg" width="141" height="150" /> </div> ' +
            '<div class="product-info">' +
            '<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> ' +
            '</div> ' +
            '</div> ';
        html += '</div> <div id="products-right" class="product-content-right">' +
            '<ul class="products-grid">';
        if (line.foundation_sku) {
            var f_image = _this.result.infos.images[child_skus.foundation];
            html += '<li class="item">' +
                '<div class="product-info">' +
                '<div class="product-title">Foundation</div> ' +
                '<div class="option-label">' + line.f_optn_label + '</div> ' +
                '</div> ' +
                '<img src="' + f_image + '" title="Foundation" width="150" height="150" />' +
                '<div class="price-box"><span class="regular-price"><span class="price">$' + _this.result.infos.prices[child_skus.foundation] + '</span></span></div>' +
                '<div class="actions"><button class="button btn-cart addtocart" sku_optn="' + line.foundation + '" type="button"><span>Add To Cart</span></button> </div> ' +
                '</li>';
        }
        html += '</ul>' +
            '<div class="bulk-addtocart-container">' +
            '<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>' +
            '</div>' +
            '<div class="toggle-container">' +
            '<div class="toggle-header closed">Looking for additional products to complement your skin tone? </div> ' +
            '<div class="toggle-body" style="display: none">' +
            '<div class="left">' +
            '<div class="product-title current" id="head_neutral">Neutral Lip</div> ' +
            '<div class="product-title" id="head_intense">Intense Lip</div> ';
        if (line.concealer !== 'N/A') {
            html += '<div class="product-title" id="head_concealer">Concealer</div> ';
        }

        html += '</ul>' +
            '</div> ' +
            '</div> ' +
            '</div> ' +
            '</div>';
        $('stpcont-final').innerHTML = html;
        _this.displayStep(5, 4);
        _this.hideLoader();

    },

    nextStep: function (ele, step) {
        if (step === 0) {
            this.step0(ele);
        }
        if (step === 1) {
            this.step2(ele);
            this.currentStep = 2;
        } else if (step === 2) {
            this.currentStep = 3;
            this.step3(ele);
        } else if (step === 3) {
            this.currentStep = 4;
            this.step4(ele);
        } else if (step === 4) {
            this.step5(ele);
            //this.currentStep = 4;
        }
    },

};
});

1 Answer 1

0

So, somehow I figured it out by myself. So from now anyone come here looking for the same issue can look into it :)

I was not returning the variable I created. That is the why phtml was not able to recognize what init and any function would be. It was out of its scope

var Shadefinder = {
    init: function() {
        //initialize whatever you want
    }
   //other methods
};

return Shadefinder;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.