Vue - Reused similar functionalities using mixins

component-using-mixin-sample1.vue

<template>
    <div class="plp-wrapper" :class="{'adjust-wrapper-background-scroll-plp': dockFacetMenuListToTop}">
        <facet-menu-list-reflektion  
            :rfk-facets="rfkFacets"
            :facet-selections="selectedFacets"
            :preselected-facets="urlParams" 
            :rfk-page-config="rfkPageConfig" 
            :rfk-sort-options="rfkSortOptions"
            id="facet-menu-list"
            :class="{ 'ps-is-stuck' : !inView.stickyWrapper && (isTouchScreen || storeScrollPosition > minimumScrollPositionForFacetsSticky), 'adjust-with-warning-without-toolbar': stickyWarningOn && !inView.stickyWrapper, 'dock-facets-to-top': dockFacetMenuListToTop && !stickyWarningOn}"
            class="facet-menu-list-bottom-box-shadow"
        >
        </facet-menu-list-reflektion>

        <div class="product-viewport">
            <div id="plp-header"></div>
            

            <plp-products id="plp-products" 
                :is-loading="productsLoading" 
                :result-set="resultSet"
                :last-response="lastResponse" 
                :root-category="rootCategory"
                :ratings-by-id="ratingsByIdRfk" 
                :category-error="categoryError"
                :selection-json="selectionJson" 
                :selected-facets="selectedFacets"
                :loyalty-club="loyaltyClub"
                :loyalty-club-pdp-redesign="loyaltyClubPdpRedesign"
                :selected-category="selectedCategory" :load-products-attempted="loadProductsAttempted"
                :rfk-page-config="rfkPageConfig"
                :rfk-sort-options="rfkSortOptions"
                :clear-facet="clearFacet"
                :default-rfk-id="defaultRfkId"
            >
            </plp-products>

            <div id="plp-footer"></div>
        </div>
    </div>
</template>
<script>
    import _ from 'lodash';
    import axios from 'axios';
    import Commerce from '@/pointsource/commerce/currency/commerce';
    import { EventBus } from '@/eventBus';
    import GeneralUtilsSvc from '@/sei/js/services/generalUtils.service';
    import SearchSvc from '@/sei/js/services/search.service';
    import plpProducts from '@/sei/js/scriptPortlets/plp-reflektion/plp.products';
    import spContextualDataStore from '@/sei/js/services/spContextualData.service';
    import facetMenuListReflektion from '@/sei/js/components/facets/facetMenuListReflektion';
    import productTileListReflektion from '@/sei/js/components/productTileListReflektion';
    import reflektionContainerMixin from '@/sei/js/components/reflektion/reflektionContainerMixin';
    import parseAuthoredDataSvc from '@/sei/js/services/parseAuthoredData.service';
    import Dx from '@/sei/js/dx';


    export default {
        name: 'plpReflektion',
        mixins: [reflektionContainerMixin],
        components: { plpProducts, facetMenuListReflektion, productTileListReflektion
        },
        data: function () {
            return {
                rootCategory: {},
                selectionJson: {},
                rootCategoryName: '',
                selectedCategory: {},
                topLevelCategories: {},
                categoryError: false,
                lastResponse: {},
                categoryViewUri: null,
                defaultRfkId: Dx.getRfkIdCategory()
            };
        },
        watch: {
            isStuck: function () {
                this.dummyResize();
            },
            facetSelections: function () {
                this.selectedFacets = this.facetSelections;
            },
        },
        created: function () {

            this.isCategoryPage = true;

            this.spContextualData = spContextualDataStore.getSPContextualData('plp-reflektion-vue');
            this.selectionJson = this.spContextualData.selectionJson;
            this.categoryViewUri = this.spContextualData.categoryViewUri;

            this.loadLoyaltyClubAuthoredData();

//#region Event listeners
            EventBus.$on('category.error', () => {
                this.categoryError = true;
            });

            EventBus.$on('selected.category.changed', (newCategory) => {
                this.selectedCategory = newCategory;
                this.loadProducts();
            });

            EventBus.$on('onRfkDataLoaded', result => {

                try {
                    const { reflektionIds } = this.spContextualData.authData;
    
                    const rfkIdPlpHeader = reflektionIds.shortText4;
                    const rfkIdPlpFooter = reflektionIds.shortText5;
    
                    if (rfkIdPlpHeader) {
                        
                        const resultWidget = result.widgets[rfkIdPlpHeader];
    
                        if (resultWidget) {
    
                            const htmlContent = resultWidget.templates.html.devices.pc.content;
                            
                            this.renderPlpHeaderContentCustom(htmlContent);
                        }
                        else { //fallback to default Header Content from WCM if no widget found for reflektion
                            this.renderPlpHeaderContentWCM();
                        }
                    }
    
                    if (rfkIdPlpFooter) {
                        
                        const resultWidget = result.widgets[rfkIdPlpFooter];
    
                        if (resultWidget) {
                            const htmlContent = resultWidget.templates.html.devices.pc.content;
                            
                            this.renderPlpFooterContentCustom(htmlContent);                        
                        } 
                        else { //fallback to default Footer Content from WCM if no widget found for reflektion
                            this.renderPlpFooterContentWCM();
                        }
                    }
                    
                } catch (ex) {
                    console.error('unhandled error on loading RFK widget: ', ex);
                    this.renderPlpHeaderContentWCM();
                    this.renderPlpFooterContentWCM();                    
                }
                

            });

            //fallback if RFK request for UI widgets failed
            EventBus.$on('onRfkRequestWidgetError', () => {
                this.renderPlpHeaderContentWCM();
                this.renderPlpFooterContentWCM();
            });
//#endregion
            
            this.initializeCategoryName();
            this.loadProducts();
        },
        mounted: async function () {

            const { reflektionIds } = this.spContextualData.authData;

            const rfkIdPlpHeader = reflektionIds.shortText4;
            const rfkIdPlpFooter = reflektionIds.shortText5;
            
            if (!rfkIdPlpHeader) {
                this.renderPlpHeaderContentWCM();
            }
            if (!rfkIdPlpFooter) {
                this.renderPlpFooterContentWCM();
            }

            const currentPage = `${window.location.pathname}${window.location.search}`;
            const uuid = this.getRfkUidCookie();

            try {
                const { reflektionIds } = this.spContextualData.authData;

                if (reflektionIds) {
                    
                    let rfkUiWidgets = { widgets: {} };

                    const enableRfkWidgetCalls = _.get(reflektionIds, 'shortTextNumber1');

                    if(enableRfkWidgetCalls === 'true') {
                        rfkUiWidgets = await this.getRfkUIWidgets(currentPage, uuid);
                    }
                    
                    EventBus.$emit('onRfkDataLoaded', rfkUiWidgets);
                }
                else {
                    console.error("Script Portlet data for reflektionIds doesn't exist. Please check so UI widgets can be rendered from RFK");
                    EventBus.$emit('onRfkRequestWidgetError');
                }
                    
            } catch (ex) {
                console.error('RFK UI widget request failed: ', ex);
                EventBus.$emit('onRfkRequestWidgetError');
            }
        },
        methods: {
            renderPlpHeaderContentWCM: function () {
                const plpCompEl = $(this.$el);
                const plpSPEle = $('.product-list-page');

                let renderedPlpHeaderContent = plpSPEle.find('#plp-header-content').html();
                
                // append the header content from the script portlet (template)
                plpCompEl.find('#plp-header').html(renderedPlpHeaderContent);                
            },
            renderPlpFooterContentWCM: function() {
                const plpCompEl = $(this.$el);
                const plpSPEle = $('.product-list-page');

                let renderedPlpFooterContent = plpSPEle.find('#plp-footer-content').html();
                
                // append the footer content from the script portlet (template)
                plpCompEl.find('#plp-footer').html(renderedPlpFooterContent);
            },
            renderPlpHeaderContentCustom: function (customHtml) {
                const plpCompEl = $(this.$el);
                
                plpCompEl.find('#plp-header').html(customHtml);                
            },
            renderPlpFooterContentCustom: function (customHtml) {
                const plpCompEl = $(this.$el);
                
                plpCompEl.find('#plp-footer').html(customHtml);                
            },
            getRfkUIWidgets: async function (targetUrl, uuid) {
                let rfkBatchData = {};
                const rfkRes = await SearchSvc.rfkGetUIWidgets(targetUrl, uuid);

                if (rfkRes.data) {
                    if (rfkRes.data.batch) {
                        
                        rfkBatchData = rfkRes.data.batch.reduce((obj, currVal) => {
            
                            if (!obj.widgets) obj.widgets = {};
            
                            // only get widgets with HTML templates
                            if(currVal.widget && currVal.appearance) {
                                
                                const { widget } = currVal;
            
                                if(!obj.widgets[widget.rfkid]) obj.widgets[widget.rfkid] = {};
            
                                if(currVal.appearance.variables) { //contains CSS properties from reflektion widget
                                    obj.widgets[widget.rfkid].cssVariables = currVal.appearance.variables;
                                }
                                if (currVal.appearance.templates) {
                                    obj.widgets[widget.rfkid].templates = currVal.appearance.templates;
                                }
                            }
        
                            return obj;
                        }, {});

                    } else { //results goes here if rfk only returned 1 widget result

                        const { widget, appearance } = rfkRes.data;
                        rfkBatchData = {
                            widgets: {
                                [widget.rfkid]: {
                                    ...widget,
                                    cssVariables: appearance.variables,
                                    templates: appearance.templates
                                }
                            }
                        }
                    }
                }
                
                return rfkBatchData;
            },
            initializeCategoryName: function () {
                const categoryName = this.selectionJson.category || this.selectionJson.rootCategory;
                this.selectedCategory.name = _.startCase(_.toLower(_.trim(categoryName)));

                this.rootCategory = {
                    name: _.startCase(this.selectionJson.rootCategory)
                }
            },
            loadLoyaltyClubAuthoredData: function () {

                const authData = parseAuthoredDataSvc.fetchData('commonAuthoredData');
                this.hasPageCopyData = !!(authData && authData.loyaltyClub2);
                if (this.hasPageCopyData) {
                    this.loyaltyClub = {
                        arialLabel: _.get(authData.loyaltyClub2, 'shortText1'),
                        xlinkRef: _.get(authData.loyaltyClub2, 'shortText2'),
                        linkText: _.get(authData.loyaltyClub2, 'shortText3'),
                        pointsEarnableText: _.get(authData.loyaltyClub2, 'shortText4'),
                        withGoalClubText: _.get(authData.loyaltyClub2, 'text1'),
                        mapPriceText: _.get(authData.loyaltyClub2, 'text4')
                    };
                    this.loyaltyClubPdpRedesign = {
                        goalClubBenefitsApplyLinkText: _.get(authData.loyaltyClub2, 'shortText5'),
                        withGoalClubText: _.get(authData.loyaltyClub2, 'text1'),
                        plusText: _.get(authData.loyaltyClub2, 'text2'),
                        learnMoreLinkText: _.get(authData.loyaltyClub2, 'text3'),
                        mapPriceText: _.get(authData.loyaltyClub2, 'text4'),
                        pointsText: _.get(authData.loyaltyClub2, 'text5')
                    };
                }
            }
        }
    }
</script>

mixinCode1.js

import axios from 'axios';
import { EventBus } from '@/eventBus';
import _ from 'lodash';
import Dx from '@/sei/js/dx';
import ContinueShoppingCookieSvc from '@/sei/js/services/continueShopping.service';
import FacetInterpreterSvc from '@/sei/js/services/facetInterpreter.service';
import GeneralUtilsSvc from '@/sei/js/services/generalUtils.service';
import ProductRatingsSvc from '@/sei/js/services/productRatings.service';
import psWidgetHelper from '@/pointsource/widgets/js/psWidgetHelper';
import SearchSvc from '@/sei/js/services/search.service';
import * as Cookies from 'js-cookie';


const reflektionContainerMixin = {
    data: function () {
        return {
            isCategoryPage: true, //set isCategory to `false` when this mixin is used in search-reflektion.vue
            rfkDefaultPageConfig: {
                pageSize: Number(Dx.getRfkSearchDefaultItemsPerPage()),
                pageNumber: 1,
                sort: {
                    value: []
                }
            },
            rfkSearchConfig: Dx.getRfkSearchConfig(),
            resultSet: {},
            rfkPageConfig: {},
            rfkPageNumber: null,
            rfkTotalPages: null,
            facetSelections: null,
            selectedFacets: {},
            dockFacetMenuListToTop: false,
            minimumScrollPositionForFacetsSticky: 20,
            storeScrollPosition: null,
            stickyWarningOn: false,
            contextualDataStoreName: '',
            rfkProductResults: {},
            ratingsByIdRfk: null,
            hasPageCopyData: {},
            rfkFacets: null,
            rfkSortOptions: [],
            urlParams: {},
            spContextualData: null,
            loyaltyClub: {},
            loyaltyClubPdpRedesign: {},
            query: '',
            inView : {},
            loadProductsAttempted: false,
            isTouchScreen: false,
            productsLoading: false,
            applyDefaultSort: false, //set to true if user selected a sort option in dropdown. Note: also set to true based on WCM settings later. We can use this to determine if default sort is applied the first time page loads
            cfgInitialized: false
        }
    },
    created() {

        this.isTouchScreen = psWidgetHelper.detectTouchScreen();
        this.selectedFacets = this.facetSelections;   
        
        EventBus.$on('navBarShowsEvent', () => {
            this.dockFacetMenuListToTop = false;
        });

        EventBus.$on('navBarHidesEvent', () => {
            this.dockFacetMenuListToTop = true;
        });

        EventBus.$on('ps-inview.status.in', this.updateInviewStatus);
        EventBus.$on('ps-inview.status.out', this.updateInviewStatus);

        EventBus.$on('sticky.warning.on', () => {
            this.stickyWarningOn = true;
        });
        EventBus.$on('sticky.warning.off', () => {
            this.stickyWarningOn = false;
        });

        EventBus.$on('sort.order.changed', (optionObj) => {

            this.rfkPageConfig.pageNumber = 1;
            this.rfkPageConfig.orderBy = optionObj.value;
            this.rfkPageConfig.sort.value = [];
            this.rfkPageConfig.sort.value.push(optionObj.sort);
            
            this.applyDefaultSort = true; //need to set to true when user selected a dropdown so that the sort options they selected will be applied

            this.loadProducts();
        });

        EventBus.$on('items.per.page.changed', (itemsPerPage) => {
            this.rfkPageConfig.pageNumber = 1;
            this.rfkPageConfig.pageSize = itemsPerPage;
            this.loadProducts();
        });

        EventBus.$on('selected.facets.changed', (newFacets) => {

            if (!_.isEqual(newFacets, this.selectedFacets)) {
                this.rfkPageConfig.pageNumber = 1;
            }
            this.loadProducts();
        });

        EventBus.$on('selected.facets.clear', this.clearFacet);

        EventBus.$on('selected.page.changed', (newPageNumber) => {
            this.rfkPageConfig.pageNumber = newPageNumber;
            $(window).scrollTop(0);
            this.loadProducts();
        });

        window.addEventListener('popstate', (event) => {
            let oldState = event.state;
            this.query = oldState.query; //only in search-reflektion
            this.facetSelections = oldState.facetSelections;
            
            this.processRfkPageConfig();
            this.loadProducts();
        });
    },
    methods: {
        initializeRfkConfig: function () { //note: This should be called first before calling `updateAddressBar` to load querystring values like sort options

            if (!this.cfgInitialized) {
                // reflektion page config. Set it in order
                this.setSortOptions();
                this.updateRfkDefaultPageConfig();
                this.rfkPageConfig = _.cloneDeep(this.rfkDefaultPageConfig);
                this.processRfkPageConfig();
                
                this.cfgInitialized = true;
            }
        },
        clearFacet: function (facetPayload) {

            var facetToClear = facetPayload.facetToClear;
            var facetGroup = this.facetSelections[facetToClear.key];
            // if only one facet remains, remove it
            if (facetGroup) {
                if (facetGroup.length === 1) {
                    delete this.facetSelections[facetToClear.key];
                }
                else {
                    _.remove(this.facetSelections[facetToClear.key], function (facet) {
                        return facetToClear.key === facet.key &&
                            facetToClear.label === facet.label &&
                            facetToClear.value === facet.value &&
                            facetToClear.filterName === facet.filterName;
                    });
                }
            }
            this.selectedFacets = Object.assign({}, this.facetSelections);

            if (facetPayload.lastFacet) {
                EventBus.$emit('selected.facets.changed', facetToClear);
            }
        },
        loadProducts: function () {

            EventBus.$emit('products.loading');

            this.initializeRfkConfig();
            this.updateAddressBar(!this.isCategoryPage);

            // put setTimeout to update addressbar first with queries like search or facets
            setTimeout(() => {

                const currentPage = `${window.location.pathname}${window.location.search}`;
        
                if (this.lastRequestUrl !== currentPage) {
                    this.requestProducts(this.lastRequestUrl = currentPage);
                } 
                else {
                    EventBus.$emit('products.loaded');
                }            
            }, 150);
        },
        addressBarQueryBuilder: function (hasQuerySearch) {
            let newPath =  `${window.location.pathname}`;
            let facetQuery = '';

            const pgConfig = this.getPageConfigString(true);

            if (this.selectedFacets) {
                const facetString = FacetInterpreterSvc.getFacetStringRfk(this.selectedFacets, ':');
                facetQuery = facetString;
            }

            let queryStringResults = '';
            if (hasQuerySearch) {
                queryStringResults += this.query && `query=${this.query}`;
                queryStringResults += facetQuery && `&${facetQuery}`;
                queryStringResults += pgConfig && `&${pgConfig}`;
            } 
            else {
                queryStringResults += pgConfig ? `${pgConfig}${facetQuery && `&${facetQuery}`}` : `${facetQuery}`;
            }

            if (queryStringResults.length > 0) {
                newPath = `${newPath}?${queryStringResults}`;
            }

            return newPath;
        },
        updateAddressBar: function (hasQuerySearch) {
            setTimeout(() => {
                var oldPath = window.location.pathname + window.location.search;
                
                const newPath = this.addressBarQueryBuilder(hasQuerySearch);

                var historyObj = {
                    url: newPath,
                    query: this.query,
                    facetSelections: this.selectedFacets
                };

                if (decodeURIComponent(oldPath) !== newPath) {
                    window.history.pushState(historyObj, null, newPath);
                }
                else { // handles the initial page load
                    window.history.replaceState(historyObj, null, newPath);
                }
                // Update Continue Shopping Link used by Cart
                ContinueShoppingCookieSvc.setContinueShoppingLink();
            });
        },
        getCategoryString: function() {
            return GeneralUtilsSvc.jsonToQueryString({
                categoryId: this.selectedCategory.uniqueID
            });
        },
        getPageConfigString: function (nonDefaultsOnly) {
            // copy the rfkPageConfig
            let currConfig = _.omit(_.cloneDeep(this.rfkPageConfig), ['catalogId', 'query', 'sort', 'filter', 'facets']);
            let diffObj = nonDefaultsOnly ? {} : currConfig;

            if (nonDefaultsOnly) {
                // remove items that match defaults
                _.forOwn(currConfig, (value, key) => {
                    if (value !== this.rfkDefaultPageConfig[key]) {
                        diffObj[key] = value;
                    }
                });
            }

            // if orderBy is null, remove it so it won't be included in querystring
            if (diffObj.orderBy === null) {
                delete diffObj.orderBy;
            }

            return GeneralUtilsSvc.jsonToQueryString(diffObj);
        },
        finishLoading: function() {
            this.productsLoading = false;
            this.loadProductsAttempted = true;
            EventBus.$emit('products.loaded');
        },
        initializeRfkFacets: function (facetData) {
            this.rfkFacets = FacetInterpreterSvc.getVisibleFacetsRfk(facetData);

            this.rfkFacets = this.updateRfkFacetsWithSolrFieldNames(this.rfkFacets);
            
            this.groupSizeFacetsRfk();
        },
        getRfkUidCookie: function() {
            return Cookies.get('__ruid') || {};
        },
        requestProducts: async function (targetUrl) {

            this.rfkProductResults = {};
            this.productsLoading = true;
            setTimeout(async () => {
                
                if (!_.isEmpty(this.selectedFacets)) {
                    Object.assign(this.rfkPageConfig, {query: this.query, facets: this.selectedFacets});
                }

                const uuid = this.getRfkUidCookie();
                
                try {
                    const hasQuerySearch = !this.isCategoryPage;
                    const hasSortOption = this.rfkPageConfig.sort.value[0];
                    const pageConfig = _.cloneDeep(this.rfkPageConfig);

                    if (!hasSortOption) {
                        delete pageConfig.sort;
                    }
                    
                    const rfkRes = await SearchSvc.rfkProductSearch(pageConfig, targetUrl, uuid, this.selectedFacets, hasQuerySearch);

                    if (rfkRes.status === 200) {
                        this.initializeRfkFacets(rfkRes.data.facet);

                        const totalItems = rfkRes.data.total_item;
                        
                        if (Dx.showBvReviews()) {
                            // note: use `rfkProductResults` to display the content results from reflektion
                            this.rfkProductResults = rfkRes.data.content.product;
                            this.rfkPageNumber = rfkRes.data.page_number;
                            this.rfkTotalPages = rfkRes.data.total_page;

                            this.resultSet = { rfkProductResults: this.rfkProductResults, recordSetTotal: totalItems, recordSetPageNumber: this.rfkPageNumber, totalPages: this.rfkTotalPages  };
                        } 
                        else {
                            this.updateRatingsByIdRfk(rfkRes.data.content.product.value)
                                .then(() => {
    
                                    this.rfkProductResults = rfkRes.data;
                                    this.rfkPageNumber = rfkRes.data.page_number;
                                    this.rfkTotalPages = rfkRes.data.total_page;
    
                                    this.resultSet = { rfkProductResults: this.rfkProductResults, recordSetTotal: totalItems, recordSetPageNumber: this.rfkPageNumber, totalPages: this.rfkTotalPages  };
                                });
                        }
                    }

                } catch (ex) {
                    console.error(ex);
                }
                
                this.finishLoading();
                
            }, 150);
        },
        updateRatingsByIdRfk: function (items) {
            let itemIds = _.map(items, function (item) {
                return item.commerceProductId;
            });
            return ProductRatingsSvc.getRatings(itemIds)
                .then((ratingsMap) => {
                    this.ratingsByIdRfk = ratingsMap;
                });
        },
        updateInviewStatus: function (inviewObj) {
            var ctrl = this;
            ctrl.$set(ctrl.inView, _.camelCase(inviewObj.id), inviewObj.inView);
        },
        updateRfkDefaultPageConfig: function () {

            const urlParams = GeneralUtilsSvc.queryStringToJson(window.location.search);
            if (urlParams.orderBy) {
                this.applyDefaultSort = true; //if orderBy querystring is detected, we need to apply the sort the first page load.
            }

            //we can use this to set the default order of the list results. Null for no sort applied by default during page load
            if (this.applyDefaultSort) {
                this.rfkDefaultPageConfig.orderBy = _.get(this.spContextualData, 'defaultSort', 1); //default of 1 = Featured
            } 
            else {
                this.rfkDefaultPageConfig.orderBy = null;
            }
        },
        setSortOptions: function () {

            const getWcmRfkSortOptions = _.get(this.spContextualData, 'rfkSortOptions');
            const makeSortOptions = [{label: 'Select Sort:', value: null}].concat(getWcmRfkSortOptions);

            this.rfkSortOptions = makeSortOptions;
        },
        processRfkPageConfig: function () {

            this.urlParams = GeneralUtilsSvc.queryStringToJson(window.location.search);
            this.facetSelections = FacetInterpreterSvc.facetArrayToJson(this.urlParams.facet, true);
            this.rfkPageConfig = _.merge(this.rfkPageConfig, this.urlParams);
            this.rfkPageConfig.orderBy = this.urlParams.orderBy ? Number(this.urlParams.orderBy) : this.rfkDefaultPageConfig.orderBy;
            this.rfkPageConfig.pageNumber = Number(this.urlParams.pageNumber) || this.rfkDefaultPageConfig.pageNumber;
            this.rfkPageConfig.pageSize = Number(this.urlParams.pageSize) || this.rfkDefaultPageConfig.pageSize;
            this.rfkPageConfig.sort.value = [];
            let sortObj = _.find(this.rfkSortOptions, {'value': this.rfkPageConfig.orderBy});
            if (typeof sortObj !== 'undefined') {
                this.rfkPageConfig.sort.value.push(sortObj.sort);
            }
            else {
                this.rfkPageConfig.sort.value.push(this.rfkDefaultPageConfig.sort.value[0]);
            }
            delete this.rfkPageConfig.facet;
        },
        groupSizeFacetsRfk: function () {
            let groupedSizeFacets = {};
            groupedSizeFacets.name = 'SIZE';
            groupedSizeFacets.Entry = [];
            groupedSizeFacets.value = 'SizesUrls';

            if (this.rfkFacets && this.rfkFacets.length > 0) {
                _.each(this.rfkFacets, function(facet) {

                    if (facet.name && (_.endsWith(facet.name.toLowerCase(), 'size') || _.startsWith(facet.filterName, 'footwear'))) {

                        if (facet.Entry && facet.Entry.length > 0) {
                            _.each(facet.Entry, function (entry) {
                                entry.originalFacetType = facet.value;
                                entry.urlValue = 'Size';
                                entry.filterName = facet.filterName;
                                groupedSizeFacets.Entry.push(entry);
                            });
                        }
                    }
                });
            }

            _.remove(this.rfkFacets, function (facet) {
                return _.endsWith(facet.name.toLowerCase(), 'size') || _.startsWith(facet.filterName, 'footwear');
            });

            if (groupedSizeFacets.Entry.length > 0) {
                this.rfkFacets.unshift(groupedSizeFacets);
            }
        },
        updateRfkFacetsWithSolrFieldNames: function(rfkFacets) {
            if (rfkFacets && rfkFacets.length > 0) {

                const result = _.map(rfkFacets, facet => {
                    
                    const model = Object.assign({}, facet);

                    model.name = facet.display_name;
                    model.value = facet.display_name.replace(/ |\//g, '-');
                    
                    model.Entry = facet.value.map(e => {

                        var newEntry = Object.assign({}, e);
                        delete newEntry.text;

                        newEntry.label = e.text;
                        newEntry.filterName = facet.filterName;

                        return newEntry;
                    });

                    return model;
                });


                return result;
            }
        },
    }
};


export default reflektionContainerMixin;

search-reflektion.vue

<template>
    <div class="plp-wrapper" :class="{'adjust-wrapper-background-scroll-search': dockFacetMenuListToTop}">
        <div id="sticky-wrapper" class="sticky-wrapper" v-ps-inview="{ offset : { bottom : 163 } }">
            <facet-menu-list-reflektion 
                :facet-selections="selectedFacets" 
                :rfk-facets="rfkFacets"
                :preselected-facets="urlParams" 
                :rfk-page-config="rfkPageConfig" id="facet-menu-list"
                :class="{ 'ps-is-stuck' : !inView.stickyWrapper && (isTouchScreen || storeScrollPosition > minimumScrollPositionForFacetsSticky), 'adjust-with-warning-without-toolbar': stickyWarningOn && !inView.stickyWrapper, 'dock-facets-to-top': dockFacetMenuListToTop && !stickyWarningOn}"
                class="facet-menu-list-bottom-box-shadow">
            </facet-menu-list-reflektion>
        </div>
        <div class="search-viewport">
            <div class="small-12 columns selected-facets-area-margin-bottom">
                <selected-facets 
                    id="selected-facets" 
                    :rfk-page-config="rfkPageConfig" 
                    :rfk-sort-options="rfkSortOptions"
                    :query="query"
                    :resultsNumber="rfkProductResults.total_item" :facet-selections="selectedFacets"
                    :rfk-facets="rfkFacets" :clear-facet-fn="clearFacet" :is-rfk="true">
                </selected-facets>
            </div>
            <div class="products-column small-12 columns"
                 :class="{'large-8': searchSource('blogs'), 'large-12': !searchSource('blogs')}"
                 v-if="searchSource('products')">

                <div class="product-tileset-header clearfix">
                    <div class="small-12 medium-6 columns show-for-large">
                        <h2>Products
                            <span class="total-results">
                                {{ rfkProductResults.total_item > 0 ? rfkProductResults.total_item + ' results' : '&nbsp;' }}
                            </span>
                        </h2>
                    </div>
                    <div class="small-6 columns show-for-small-only">
                        <div class="header-pagination search-results-pagination-placement-small"
                             v-if="!productsLoading && rfkProductResults.total_item && rfkProductResults.total_item > 0">

                            <pagination class="noselect" :rfk-page-config="rfkPageConfig" :max-pages="8" :rfk-page-number="rfkPageNumber" :rfk-total-pages="rfkTotalPages" :is-rfk="true"></pagination>
                        </div>
                    </div>
                    <div class="small-6 columns">
                        <div class="result-metadata" v-if="!productsLoading">
                            <div class="page-size-select" ref="pageSizeSelect">
                                <items-per-page-select
                                    v-if="!productsLoading && rfkProductResults && rfkProductResults.total_item && rfkProductResults.total_item > 0"
                                    v-model="rfkPageConfig.pageSize"></items-per-page-select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="loader-wrapper" v-if="query && productsLoading">
                    <div class="loader"></div>
                    <div class="loader-text">Searching products...</div>
                </div>
                <h3 class="no-results"
                    v-if="!(productsLoading || (rfkProductResults.value && rfkProductResults.value.length))">
                    Search for "{{ query }}" yielded 0 products.
                </h3>
                <div class="header-pagination hide-for-small-only"
                     v-if="!productsLoading && rfkProductResults.total_item && rfkProductResults.total_item > 0">
                    <pagination class="noselect" :rfk-page-config="rfkPageConfig" :max-pages="8" :rfk-page-number="rfkPageNumber" :rfk-total-pages="rfkTotalPages" :is-rfk="true"></pagination>
                </div>

                <product-tile-list-reflektion id="product-tileset" class="product-tileset" v-if="!productsLoading"
                    :default-rfk-id="defaultRfkId"
                    :from-search="query"
                    :loyalty-club="loyaltyClub"
                    :loyalty-club-pdp-redesign="loyaltyClubPdpRedesign"
                    :item-set="rfkProductResults.value"
                    :ratings-by-id="ratingsByIdRfk"
                >
                </product-tile-list-reflektion>


                <div class="footer-pagination"
                     v-if="!productsLoading && rfkProductResults.total_item && rfkProductResults.total_item > 0">
                    <pagination class="noselect" :rfk-page-config="rfkPageConfig" :max-pages="8" :rfk-page-number="rfkPageNumber" :rfk-total-pages="rfkTotalPages" :is-rfk="true"></pagination>
                </div>

                <div class="show-for-large modified-rfk-product-suggestions-header" :data-rfkid="rfkId"></div>
            </div>
            <div class="blog-column large-4 small-12 columns">
                <div class="hide-for-large modified-rfk-product-suggestions-header" :data-rfkid="rfkId"></div>
                <div v-if="searchSource('blogs')">
                    <div v-if="filteredTeams.length > 0">
                        <h2 class="other-results-header">
                            Teams
                            <span class="total-results">
              {{ filteredTeams.length }} <span v-if="totalNumberOfFilteredTeamsResults> filteredTeams.length">/ {{totalNumberOfFilteredTeamsResults}}</span> results
            </span>
                            <a v-if="searchLinks.teams1Text && searchLinks.teams1Text.length > 0" @click="goToTeamSearchPage()" class="see-all-clubs-teams-players-articles-link"> {{ searchLinks.teams1Text.toUpperCase() }} </a>
                            <a v-if="searchLinks.teams2Text && searchLinks.teams2Text.length > 0" @click="goToTeam2SearchPage()" class="see-all-clubs-teams-players-articles-link"> {{ searchLinks.teams2Text.toUpperCase() }} </a>
                        </h2>

                        <div class="team-entry-list">
                            <div class="teamEntry" v-for="entry in filteredTeams"
                                 @click="goToTeamPage(entry.teamPath)">
                                <div>
                                    <img class="other-search-results-club-team-image"
                                         :src="entry.thumbnailUrl? entry.thumbnailUrl : spContextualData.teamPlaceholder"/>
                                    <span
                                        class="other-search-results-club-team-image-caption">{{ entry.teamName }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div v-if="filteredClubs.length > 0">
                        <h2 class="other-results-header">
                            Clubs
                            <span class="total-results">{{ filteredClubs.length }} <span
                                v-if="totalNumberOfFilteredClubsResults > filteredClubs.length">/ {{totalNumberOfFilteredClubsResults}}</span> results</span>
                            <a @click="goToClubSearchPage()" class="see-all-clubs-teams-players-articles-link">{{searchLinks.clubText.toUpperCase()}}</a>
                        </h2>

                        <div class="club-entry-list">
                            <div class="clubEntry" v-for="entry in filteredClubs"
                                 @click="goToClubPage(entry.clubIdentifier)">
                                <div>
                                    <img class="other-search-results-club-team-image" :src="entry.imageUrl"
                                         @error="adjustClubImageUrl(entry)"/>
                                    <span class="other-search-results-club-team-image-caption">{{ entry.name }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div v-if="filteredPlayers.length > 0">
                        <h2 class="other-results-header">
                            Players
                            <span class="total-results">
                                {{ filteredPlayers.length }} <span v-if="totalNumberOfFilteredPlayersResults > filteredPlayers.length">/ {{totalNumberOfFilteredPlayersResults}}</span> results
                            </span>
                            <a @click="goToPlayerSearchPage()" class="see-all-clubs-teams-players-articles-link">{{ searchLinks.playersText.toUpperCase() }}</a>
                        </h2>
                        <div class="player-entry-list">
                            <div class="playerEntry" v-for="entry in filteredPlayers"
                                 @click="goToPlayerPage(entry.playerPath)">
                                <div>
                                    <figure class="other-search-results-player-image">
                                        <img
                                            :src="entry.imageUrl ? entry.imageUrl : spContextualData.playerPlaceholder"/>
                                        <figcaption class="other-search-results-player-image-caption">{{ entry.firstName }} {{ entry.lastName }}
                                        </figcaption>
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div v-if="blogResults.searchResults && blogResults.searchResults.length > 0">
                        <h2 class="other-results-header">
                            Articles
                            <span class="total-results">
                                {{ blogResults.searchResults.length }} results
                            </span>
                            <a @click="goToBlogSearchPage()" class="see-all-clubs-teams-players-articles-link">{{ searchLinks.blogText.toUpperCase() }}</a>
                        </h2>
                        <div class="loader-wrapper" v-if="query && blogLoading">
                            <div class="loader"></div>
                            <div class="loader-text">Searching articles...</div>
                        </div>
                        <div class="article-list" v-if="!blogLoading && blogResults.searchResults">
                            <div class="article" @click="goToBlogPage(entry.path)"
                                 v-for="(entry,index) in blogResults.searchResults">
                                <div class="image" :class="entry.id"
                                     :aria-labelledby="'Click to read article: '+entry.title" v-if="entry.image"
                                     v-html="getBlogEntryStyle(entry)">
                                </div>
                                <div class="title" :aria-labelledby="'Click to read article: '+entry.title">
                                    {{ entry.title }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <h2 class="searching-for-something-text">Looking for Something?</h2>
                    <div class="check-out-other-sections-text">Check out these other sections of {{ storeTitle }}</div>
                    <button v-if="searchLinks.clubText && searchLinks.clubText.length > 0" class="button check-out-other-sections-button" @click="goToClubSearchPage()">{{searchLinks.clubText}}
                    </button>
                    <button v-if="searchLinks.teams1Text && searchLinks.teams1Text.length > 0" class="button check-out-other-sections-button" @click="goToTeamSearchPage()">{{searchLinks.teams1Text}}
                    </button>
                    <button v-if="searchLinks.teams2Text && searchLinks.teams2Text.length > 0" class="button check-out-other-sections-button" @click="goToTeam2SearchPage()">{{searchLinks.teams2Text}}
                    </button>
                    <button class="button check-out-other-sections-button" @click="goToPlayerSearchPage()">{{ searchLinks.playersText }}
                    </button>
                    <button class="button check-out-other-sections-button" @click="goToBlogSearchPage()">{{ searchLinks.blogText }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    /*
* Copyright (c) 2019-2020 SEI.
* All rights reserved.
*/
    import dashboardUtils from '@/sei/js/services/dashboard-utils.service';
    import Dx from '@/sei/js/dx';
    import {EventBus} from '@/eventBus';
    import facetMenuList from '@/sei/js/components/facets/facetMenuList';
    import facetMenuListReflektion from '@/sei/js/components/facets/facetMenuListReflektion';
    import GeneralUtilsSvc from '@/sei/js/services/generalUtils.service';
    import itemsPerPageSelect from '@/sei/js/components/facets/itemsPerPageSelect';
    import pagination from '@/sei/js/components/facets/pagination';
    import parseAuthoredDataSvc from '@/sei/js/services/parseAuthoredData.service';
    import PlayerpassDataSvc from '@/sei/js/scriptPortlets/playerpass/services/playerpassData.service';
    import productTileListReflektion from '@/sei/js/components/productTileListReflektion';
    import psWidget from '@/pointsource/widgets/js/psWidget';
    import SearchSvc from '@/sei/js/services/search.service';
    import selectedFacets from '@/sei/js/components/facets/selectedFacets';
    import sortSelect from '@/sei/js/components/facets/sortSelect';
    import spContextualDataStore from '@/sei/js/services/spContextualData.service';
    import wcmFetchSvc from '@/sei/js/services/wcmFetch.service';
    import reflektionContainerMixin from '@/sei/js/components/reflektion/reflektionContainerMixin';

    export default {
        name: 'searchReflektion',
        mixins: [reflektionContainerMixin],
        components: {
            facetMenuList, facetMenuListReflektion, itemsPerPageSelect, pagination, productTileListReflektion, selectedFacets, sortSelect
        },
        data: function () {
            return {
                blogResults: {},
                isStuck: false,
                blogLoading: false,
                fullTeamsList: [],
                fullClubsList: [],
                fullPlayersList: [],
                storeTitle: null,
                blogParams: {},
                teamParams: {},
                playerParams: {},
                searchLinks: {},
                totalNumberOfFilteredClubsResults: 0,
                totalNumberOfFilteredPlayersResults: 0,
                totalNumberOfFilteredTeamsResults: 0,
                modalOpen: false,
                rfkSearchConfig: Dx.getRfkSearchConfig(),
                defaultRfkId: ''
            };
        },
        watch: {
            isStuck: function () {
                this.dummyResize();
            },
            facetSelections: function () {
                this.selectedFacets = this.facetSelections;
            },
            query: function () {
                this.search(this);
            }
        },
        computed: {
            filteredTeams: function () {
                if (this.query && this.fullTeamsList.length > 0) {
                    this.fullTeamsList = _.filter(this.fullTeamsList, function (team) {
                        return team.teamName;
                    });
                    this.fullTeamsList = _.sortBy(this.fullTeamsList, 'teamName');

                    var filteredTeamsVar = _.filter(this.fullTeamsList, (team) => {
                        return team.teamName.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
                    });

                    this.totalNumberOfFilteredTeamsResults = filteredTeamsVar.length;
                    return filteredTeamsVar.splice(0, 4);
                }
                return [];
            },
            filteredPlayers: function () {
                if (this.query && this.fullPlayersList.length > 0) {

                    this.fullPlayersList = _.filter(this.fullPlayersList, function (player) {
                        return player.firstName;
                    });
                    this.fullPlayersList = _.sortBy(this.fullPlayersList, 'lastName');

                    var filteredPlayersVar = _.filter(this.fullPlayersList, (player) => {
                        return (player.lastName.toLowerCase().indexOf(this.query.toLowerCase()) > -1) || (player.firstName.toLowerCase().indexOf(this.query.toLowerCase()) > -1);
                    });

                    this.totalNumberOfFilteredPlayersResults = filteredPlayersVar.length;

                    return filteredPlayersVar.splice(0, 4);
                }
                return [];
            },
            filteredClubs: function () {
                if (this.query && this.fullClubsList.length > 0) {
                    var filteredClubsVar = _.filter(
                        this.fullClubsList,
                        (clubObj) => {
                            return _.includes(
                                _.lowerCase(clubObj.name),
                                _.lowerCase(this.query)
                            );
                        });

                    this.totalNumberOfFilteredClubsResults = filteredClubsVar.length;

                    _.each(filteredClubsVar, function (club) {
                        club.imageUrl = '//www.soccer.com/wcsstore/sasSOCsoccer/upload/images/club/SAP' + club.clubIdentifier + '_logo.png';
                    });

                    return filteredClubsVar.splice(0, 4);
                }
                return [];
            }
        },
        created: function () {
            this.defaultRfkId = _.get(this.rfkSearchConfig, 'urlConfig.rfkFullPageSearchWidget');
            this.isCategoryPage = false;
            
            this.spContextualData = spContextualDataStore.getSPContextualData('search-reflektion-vue');
            this.storeTitle = Dx.getStoreTitle();
            this.getClub = Dx.getShowPlayerPass();

            this.urlParams = GeneralUtilsSvc.queryStringToJson(window.location.search);

            if (this.urlParams.query) {
                this.query = this.urlParams.query;
            }

            if (this.spContextualData) {
                this.rfkId = _.get(this.spContextualData, 'search[0].rfkId');
                this.teamParams = _.get(this.spContextualData, 'wcmParms2');
                this.blogParams = _.get(this.spContextualData, 'wcmParms1');
                this.playerParams = _.get(this.spContextualData, 'wcmParms3');
            }

            $(document).on('open.zf.reveal', '[data-reveal]', () => {
                this.modalOpen = true;
            });

            $(document).on('closed.zf.reveal', '[data-reveal]', () => {
                this.modalOpen = false;
            });

            EventBus.$on('selected.facets.changed', (newFacets) => {

                if (_.isEqual(newFacets, this.selectedFacets)) {
                    this.checkPerformBlogSearch();
                }
            });

            // note: unique to search-reflektion
            if (Foundation.MediaQuery.atLeast('medium') && !this.isTouchScreen) {
                const navBar = $('#sticky-nav');

                $(window).on('scroll', _.throttle(() => {
                    if (!this.productsLoading && !this.modalOpen) {
                        if ($(window).scrollTop() > 0) {
                            if (!navBar.hasClass('hide-nav-categories')) {
                                EventBus.$emit('navBarHidesEvent');
                            }
                        }
                        else {
                            EventBus.$emit('navBarShowsEvent');
                        }
                    }
                }, 50));

                EventBus.$on('products.loading', () => {
                    this.storeScrollPosition = 0;
                });
            }

            $(document).scroll(() => {
                _.debounce(this.dummyResize, 250);
            });

            this.loadLoyaltyClubAuthoredData();            

            if (this.getClub) {
                if (this.searchSource('blogs')) {
                    PlayerpassDataSvc.getClubList()
                        .then((clubList) => {
                            this.fullClubsList = clubList;
                        });
                }
            }
            if (this.teamParams) {
                wcmFetchSvc.componentFetch(null, this.teamParams.contentContext, this.teamParams.inlineSearchTarget, this.teamParams.componentId, null, null, null, this.teamParams.menu_co, null, this.teamParams.cacheId )
                    .then((response) => {
                        this.fullTeamsList = response.data;
                    });
            }
            if (this.playerParams) {
                wcmFetchSvc.componentFetch(null, this.playerParams.contentContext, this.playerParams.inlineSearchTarget, this.playerParams.componentId, null, null, null, this.playerParams.menu_co, null, this.playerParams.cacheId)
                    .then((response) => {
                        this.fullPlayersList = response.data;
                    });
            }
        },
        mounted: function () {
            $('#query-text-trigger').addClass('modify-search-bar-mobile');
        },
        methods: {

            loadLoyaltyClubAuthoredData: function () {

                const authData = parseAuthoredDataSvc.fetchData('commonAuthoredData');
                const loyaltyClubCopy = !!(authData && authData.loyaltyClub);
                if (loyaltyClubCopy) {
                    this.loyaltyClub = {
                        arialLabel: _.get(authData.loyaltyClub2, 'shortText1'),
                        xlinkRef: _.get(authData.loyaltyClub2, 'shortText2'),
                        linkText: _.get(authData.loyaltyClub2, 'shortText3'),
                        pointsEarnableText: _.get(authData.loyaltyClub2, 'shortText4'),
                        withGoalClubText: _.get(authData.loyaltyClub2, 'text1'),
                        mapPriceText: _.get(authData.loyaltyClub2, 'text4')
                    };
                    this.loyaltyClubPdpRedesign = {
                        goalClubBenefitsApplyLinkText: _.get(authData.loyaltyClub2, 'shortText5'),
                        withGoalClubText: _.get(authData.loyaltyClub2, 'text1'),
                        plusText: _.get(authData.loyaltyClub2, 'text2'),
                        learnMoreLinkText: _.get(authData.loyaltyClub2, 'text3'),
                        mapPriceText: _.get(authData.loyaltyClub2, 'text4'),
                        pointsText: _.get(authData.loyaltyClub2, 'text5')
                    };
                }

                this.searchLinks = {
                    blogLink: _.get(authData.linkPaths, 'shortText1'),
                    clubLink: _.get(authData.linkPaths2, 'shortText1'),
                    teams1Link: _.get(authData.linkPaths, 'shortText3'),
                    teams2Link: _.get(authData.linkPaths, 'shortText4'),
                    playersLink: _.get(authData.linkPaths, 'shortText5'),
                    blogText: _.get(authData.linkPaths, 'text1'),
                    clubText: _.get(authData.linkPaths, 'text2'),
                    teams1Text: _.get(authData.linkPaths, 'text3'),
                    teams2Text: _.get(authData.linkPaths, 'text4'),
                    playersText: _.get(authData.linkPaths, 'text5'),
                    blogLabel: _.get(authData.linkPaths, 'shortTextNumber1'),
                    clubLabel: _.get(authData.linkPaths, 'shortTextNumber2'),
                    teams1Label: _.get(authData.linkPaths, 'shortTextNumber3'),
                    teams2Label: _.get(authData.linkPaths, 'shortTextNumber4'),
                    playersLabel: _.get(authData.linkPaths, 'shortTextNumber5'),
                }
            },
            adjustClubImageUrl: function (entry) {
                entry.imageUrl = _.get(this.spContextualData, 'clubPlaceholder');
                this.$forceUpdate();
            },
            dummyResize: function () {
                $(window).trigger('resize');
            },
            performSearch: function () {

                this.loadProducts();
                this.checkPerformBlogSearch();
                
                this.lastQuery = this.query;
            },
            performBlogSearch: function () {
                this.blogResults = {};
                this.blogLoading = true;

                
                SearchSvc.blogSearch(this.query, null, null, this.blogParams.contentContext, this.blogParams.inlineSearchTarget, this.blogParams.componentId)
                    .then((response) => {
                        if (response.status === 200) {
                            this.blogResults = response.data;
                            if (!_.isEmpty(this.blogResults)) {
                                this.blogResults.searchResults = _.slice(this.blogResults.searchResults, 0, 4);
                            }
                            this.blogLoading = false;
                        }
                    })
                    .catch((error) => {
                        if (error.status !== 1) {
                            this.blogLoading = false;
                        }
                    });
            },
            checkPerformBlogSearch: function () {

                if (Dx.getShowBlog() && this.lastQuery !== this.query) {
                    this.performBlogSearch();
                }
                this.lastQuery = this.query;
            },
            searchSource: function (source) {
                return _.includes(Dx.getSearchSources(), source);
            },
            goToBlogSearchPage: function () {
                var queryString = GeneralUtilsSvc.jsonToQueryString({query: this.query});
                window.location.href = psWidget.getPageURI(this.searchLinks.blogLink) + '?' + queryString;
            },
            goToBlogPage: function (target) {
                window.location.href = psWidget.getPageURI(this.searchLinks.blogLabel, target);
            },
            goToClubSearchPage: function () {
                sessionStorage.setItem('clubsSearch', this.query);
                window.location.href = psWidget.getPageURI(this.searchLinks.clubLink);
            },
            goToClubPage: function (clubId) {
                dashboardUtils.goToClub(clubId);
            },
            goToTeamSearchPage: function () {
                sessionStorage.setItem('teamsSearch', this.query);
                window.location.href = psWidget.getPageURI(this.searchLinks.teams1Link);
            },

            goToTeam2SearchPage: function () {
                sessionStorage.setItem('teamsSearch', this.query);
                window.location.href = psWidget.getPageURI(this.searchLinks.teams2Link);
            },

            goToTeamPage: function (target) {
                window.location.href = psWidget.getPageURI('cat', target.toLowerCase());
            },

            goToPlayerSearchPage: function () {
                sessionStorage.setItem('playersSearch', this.query);
                window.location.href = psWidget.getPageURI(this.searchLinks.playersLink);
            },

            goToPlayerPage: function (target) {
                window.location.href = psWidget.getPageURI(this.searchLinks.playersLabel, target.toLowerCase());
            },

            getBlogEntryStyle: function (blogEntry) {
                var style = '<style>';
                style += '.' + blogEntry.id + '{';
                style += 'background : url(' + blogEntry.image.replace(/\/myconnect\//g, '/connect/') + ') no-repeat center center;';
                style += 'background-size: cover;';
                style += '}</style>';
                return style;
            },

            // leading value changed to from 500 to 300 to help catch users that hit enter very quickly
            // maxWait changed from 1500 to 3000 since some users were getting the wrong results since the search text was incomplete
            // the net result is that the call could be fired a lot more but should result in the right page more often
            search: _.debounce((vm) => {
                vm.performSearch();
            }, 300, {'maxWait': 3000})
        }
    };
</script>