component-using-mixin-sample2.vue

<template>
<div>
    <div class="error-panel callout alert" v-if="categoryError">
        <h2>
            Invalid category selected: '{{ selectionJson.rootCategory }}<span v-if="selectionJson.category">/{{ selectionJson.category }}</span>'.
        </h2>
        <div class="sub-text">
            To continue browsing, please return to the <ps-page-navigator page="home" link-text="home page"></ps-page-navigator>.
        </div>
    </div>
    <div class="results-container">
        <div>
            <div class="row">
                <div class="small-12 columns">
                    <selected-facets id="selected-facets" :facet-selections="selectedFacets"
                                     :facets="facets" :clear-facet-fn="clearFacet" :page-config="rfkPageConfig" :resultsNumber="resultSet.recordSetTotal"
                    :from-plp="true" :selected-category-page-text="selectedCategory.name" :root-category-page-text="rootCategory.name">
                    </selected-facets>
                </div>
            </div>
            <div class="product-tileset-header clearfix" v-if="lastResponse.status !== 404 && loadProductsAttempted">
                <div class="small-12 medium-6 large-7 columns">
                    <h2 class="category-header show-for-large">
                        {{ selectedCategory.name}}
                        <span class="root-category" v-if="selectedCategory.name !== rootCategory.name">
                            in {{rootCategory.name}}
                        </span>
                        <span class="total-results show-for-large" v-if="!isLoading">{{resultSet.recordSetTotal}} Results</span>
                    </h2>
                </div>
                <div class="small-6 columns hide-for-medium" v-if="!isLoading">
                    <span class="total-results">{{ resultSet.recordSetTotal }} Results</span>
                    <!-- <pagination class="noselect" :item-set="resultSet" :page-config="pageConfig" :max-pages="6"></pagination> -->
                    <pagination 
                        class="noselect" 
                        :rfk-page-config="rfkPageConfig" 
                        :max-pages="8" 
                        :rfk-page-number="resultSet.recordSetPageNumber"
                        :rfk-total-pages="resultSet.totalPages"
                        :is-rfk="isRfk"
                    >
                    </pagination>
                </div>
                <div class="small-6 large-5 columns" v-if="!isLoading">
                    <div class="result-metadata" v-if="resultSet.recordSetTotal">
                        <div class="page-size-select hide-for-small-only">
                            <span class="total-results show-for-medium-only">{{ resultSet.recordSetTotal }} Results</span>
                            <items-per-page-select v-model="rfkPageConfig.pageSize"></items-per-page-select>
                        </div>
                        <div class="sort-select show-for-large">
                            <label>
                                <span class="label-text">Sort by:</span>
                                <sort-select v-model="rfkPageConfig.orderBy" :is-rfk="true" :rfk-sort-options="rfkSortOptions"></sort-select>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="small-12 columns">
                    <hr class="smart-divider"/>
                </div>
            </div>
        </div>
        <div class="loader-wrapper" v-if="isLoading">
            <div class="loader"></div>
            <div class="loader-text">Loading products...</div>
        </div>
        <h3 class="no-results" v-if="lastResponse.status === 404">
            Search for {{ selectedCategory.name }} in {{ rootCategory.name }} yielded 0 results.
        </h3>
        <div v-show="!isLoading">
            <div class="header-pagination show-for-medium" v-if="resultSet.recordSetTotal">
                <pagination
                    class="noselect" 
                    :rfk-page-config="rfkPageConfig" 
                    :max-pages="8" 
                    :rfk-page-number="resultSet.recordSetPageNumber"
                    :rfk-total-pages="resultSet.totalPages"
                    :is-rfk="true"
                >
                </pagination>
                <div class="result-metadata">
                    <div class="total-results">{{ resultSet.recordSetTotal }} Results</div>
                    <div class="page-size-select hide-for-small-only">
                        <items-per-page-select v-model="rfkPageConfig.pageSize"></items-per-page-select>
                    </div>
                </div>
            </div>
            <product-tile-list-reflektion 
                id="product-tileset" 
                class="product-tileset" 
                v-show="!productsLoading"
                :loyalty-club="loyaltyClub"
                :loyalty-club-pdp-redesign="loyaltyClubPdpRedesign"
                :item-set="rfkProductResults"
                :ratings-by-id="ratingsById"
                :default-rfk-id="defaultRfkId"
                :page-config="rfkPageConfig"
            >
            </product-tile-list-reflektion>

            <div class="footer-pagination" v-if="resultSet.recordSetTotal">
                <pagination 
                    class="noselect" 
                    :rfk-page-config="rfkPageConfig" 
                    :max-pages="8" 
                    :rfk-page-number="resultSet.recordSetPageNumber"
                    :rfk-total-pages="resultSet.totalPages"
                    :is-rfk="true"
                >
                </pagination>
                <div class="result-metadata">
                    <div class="total-results">{{ resultSet.recordSetTotal }} Results</div>
                    <div class="page-size-select hide-for-small-only">
                        <items-per-page-select v-model="rfkPageConfig.pageSize"></items-per-page-select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import { EventBus } from '@/eventBus';
import pagination from '@/sei/js/components/facets/pagination';
import sortSelect from '@/sei/js/components/facets/sortSelect';
import productTileList from '@/sei/js/components/productTileList';
import productTileListReflektion from '@/sei/js/components/productTileListReflektion';
import selectedFacets from '@/sei/js/components/facets/selectedFacets';
import itemsPerPageSelect from '@/sei/js/components/facets/itemsPerPageSelect';
import PsPageNavigator from '@/pointsource/widgets/js/components/ps-page-navigator';
import rfkWidgetMixin from '@/sei/js/components/mixins/rfkWidgetMixin';
import _ from 'lodash';

import rfkUtil from '@/sei/js/utils/rfkUtil';

export default {
    name: 'plpProducts',
    mixins: [rfkWidgetMixin],
    props: [ 'facets', 'productsLoading', 'resultSet', 'pageConfig', 'lastResponse', 'rootCategory', 'ratingsById',
            'favoritesById', 'categoryError', 'selectionJson', 'facetSelections', 'selectedFacets', 'selectedCategory', 'loadProductsAttempted', 'loyaltyClub', 'loyaltyClubPdpRedesign', 'rfkPageConfig', 'rfkSortOptions', 'clearFacet', 'defaultRfkId', 'enableRfkTileWidgetCalls', 'rfkTilesLoading', 'spContextualData' ],
    components: {
        PsPageNavigator, pagination, itemsPerPageSelect, sortSelect, selectedFacets, productTileList, productTileListReflektion
    },
    data: function() {
        return {
            isLoading: true,
            isRfk: true,
            rfkProductResults: null,
            rfkTileWidgetStore: {}
        };
    },
    mounted: function () {

        //Step 5 PLP tile widget call: This is where the rfk tile contents will be rendered after we mounted the extra tiles for the widget on the PLP product results
        EventBus.$on('onRfkTilesMounted', () => {

            setTimeout(() => {

                const reflektionIds = _.get(this.spContextualData.authData, 'reflektionIds');

                const rfkidTileWidget1 = _.get(reflektionIds, 'shortTextNumber2');
                const rfkidTileWidget2 = _.get(reflektionIds, 'shortTextNumber3');

                const tileWidget1Contents = this.rfkTileWidgetStore[rfkidTileWidget1];
                const tileWidget2Contents = this.rfkTileWidgetStore[rfkidTileWidget2];

                this.rfkWidgetMixinMethods.insertWidgetIntoDomWithStyles(rfkidTileWidget1, tileWidget1Contents, '[data-rfkid].rfk2_html_block.rfk2_rfkid_promotile1', 'unhandled error on loading RFK widget for PLP widget tile 1: ');
                this.rfkWidgetMixinMethods.insertWidgetIntoDomWithStyles(rfkidTileWidget2, tileWidget2Contents, '[data-rfkid].rfk2_html_block.rfk2_rfkid_promotile2', 'unhandled error on loading RFK widget for PLP widget tile 2: ');

            }, 1000);
        });
    }
};
</script>

rfkWidgetMixin.js

import rfkUtil from '@/sei/js/utils/rfkUtil';


const rfkWidgetMixin = {
  created: function () {
    this.initializeMethods();
  },
  methods: {
    initializeMethods: function () {

      this.rfkWidgetMixinMethods = {
        insertWidgetIntoDomWithStyles: (elementId, widgetContents, trimCssClass, msgError) => {

          try {
            const enabled = rfkUtil.widgetContentEnabled(widgetContents);

            if (enabled) {
                let widgetHtmlContent = '';
                let widgetCssContent = '';

                const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(window.navigator.userAgent);

                if (isMobile) {
                  widgetHtmlContent = rfkUtil.widgetGetHtmlContentMobile(widgetContents);
                  widgetCssContent = rfkUtil.widgetGetCssContentMobile(widgetContents);
                } 
                else {
                  widgetHtmlContent = rfkUtil.widgetGetHtmlContent(widgetContents);
                  widgetCssContent = rfkUtil.widgetGetCssContent(widgetContents);
                }

                if (trimCssClass) {
                  widgetCssContent = widgetCssContent.replaceAll(trimCssClass, '');
                }

                $(`#${elementId}`).html(widgetHtmlContent);                        
                this.insertCssIntoDOM(elementId, widgetCssContent);
            }
          } catch (ex) {
              console.error(msgError, ex);
          }

        }
      }

    },
    insertCssIntoDOM: function (elementId, cssContent) {
      var styleSheet = document.createElement("style");
      styleSheet.type = "text/css";
      styleSheet.innerText = cssContent;

      const element = document.querySelector(`#${elementId}`);

      if (element) {
        element.appendChild(styleSheet);
      }
    }

  }
}

export default rfkWidgetMixin;