Last active
October 4, 2021 04:58
-
-
Save reciosonny/ebf5982ae0da75b4df3644a4711492cd to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment