const TAG = 'spz-custom-smart-search-location';
const SMART_PRODUCR_SEARCH_WRAP_CLASSNAME = 'app-smart-product-search-wrap';
const THEME_NAME = window.SHOPLAZZA.theme.merchant_theme_name;
const BREAKPOINT = 960;
const DELAY = 300;
class SpzCustomSmartSearchLocation extends SPZ.BaseElement {
constructor(element) {
super(element);
this.mobileHeaderPluginParentEle = null;
}
static deferredMount() {
return false;
}
isLayoutSupported(layout) {
return layout == SPZCore.Layout.LOGIC;
}
buildCallback() {
this.init();
this.listenerResize();
}
init() {
// PC-end not load
if (this.isDesktop()) {
return;
}
if (!window.__isLoadAppSmartSearch__) {
this.initSmartSearch();
console.log('__isLoadAppSmartSearch__');
}
// B-end must reload
if (window.self === window.top && !window.__isLoadAppSmartSearch__) {
window.__isLoadAppSmartSearch__ = true;
}
}
initSmartSearch() {
if (this.hasMobileUpperRightPlugin()) {
this.showMobileSmartSearch();
} else {
this.addMobileSmartSearch();
}
}
listenerResize() {
window.removeEventListener('resize', window.smartSearchResizeCallback);
window.smartSearchResizeCallback = SPZCore.Types.debounce(
this.win,
() => {
this.init();
},
DELAY
);
window.addEventListener('resize', window.smartSearchResizeCallback);
}
isDesktop() {
const mediaQueryList = window.matchMedia(`(min-width: ${BREAKPOINT}px)`);
return mediaQueryList.matches;
}
hasMobileUpperRightPlugin() {
return !['geek', 'flash', 'boost'].includes(THEME_NAME.toLocaleLowerCase());
}
showMobileSmartSearch() {
this.mobileHeaderPluginParentEle = this.getMobileHeaderPluginParentEle();
this.setMobileHeaderIconsPluginStyle(this.mobileHeaderPluginParentEle);
}
getMobileHeaderPluginParentEle() {
const MOBILE_HEADER_PLUGIN_PARENT_ELE_MAP = {
nova: '.header__mobile #header__plugin-container',
hero: '.header__icons .tw-flex.tw-justify-end.tw-items-center.tw-space-x-7',
onePage: '.header__mobile #header__plugin-container',
wind: '#header-icons .flex.justify-end.items-center',
eva: '#header__icons .plugin_content'
};
const headerPluginParentSelector = this.combineMultipleSelectors(
Object.values(MOBILE_HEADER_PLUGIN_PARENT_ELE_MAP)
);
return document.querySelector(headerPluginParentSelector);
}
setMobileHeaderIconsPluginStyle(pluginParentEle) {
if (!pluginParentEle) {
return;
}
const containHidden = pluginParentEle.classList.contains('md:hidden');
const containTwHidden = pluginParentEle.classList.contains('md:tw-hidden');
if (containHidden || containTwHidden) {
Array.from(pluginParentEle.children).forEach((pluginElement) => {
if (!this.hasSmartSearchPlugin(pluginElement)) {
pluginElement.style.display = 'none';
}
});
pluginParentEle.classList.remove('md:hidden', 'md:tw-hidden');
} else {
const smartSearchPluginElement = Array.from(pluginParentEle.children).find(
(pluginElement) => {
return this.hasSmartSearchPlugin(pluginElement);
}
);
smartSearchPluginElement.style.display = 'block';
}
}
hasSmartSearchPlugin(pluginElement) {
return (
pluginElement.classList.contains(`${SMART_PRODUCR_SEARCH_WRAP_CLASSNAME}`) ||
pluginElement.querySelectorAll(`.${SMART_PRODUCR_SEARCH_WRAP_CLASSNAME}`).length > 0
);
}
addMobileSmartSearch() {
this.mobileHeaderIconsEle = this.getMobileHeaderIconsEle();
this.smartSearchWrapEle = this.getSmartSearchWrapEle();
this.appendSmartSearchToHeader();
}
getMobileHeaderIconsEle() {
// Must be the parent element of the plugin
const MOBILE_HEADER_ICONS_ELE_MAP = {
geek: '#header-mobile-container .flex.items-center.justify-end.flex-shrink-0',
flash: '#header-layout .header__icons',
boost: '.header__mobile-bottom .tw-flex.tw-items-center.tw-justify-end.tw-flex-1'
};
const headerIconsSelector = this.combineMultipleSelectors(
Object.values(MOBILE_HEADER_ICONS_ELE_MAP)
);
return document.querySelector(headerIconsSelector);
}
getSmartSearchWrapEle() {
const smartSearchWrapEle = document.querySelector(this.getSmartSearchWrapSelector());
if (!smartSearchWrapEle) {
return null;
}
return smartSearchWrapEle;
}
appendSmartSearchToHeader() {
if (!this.smartSearchWrapEle) {
return;
}
this.mobileHeaderIconsEle.insertAdjacentElement('afterbegin', this.smartSearchWrapEle);
}
getSmartSearchWrapSelector() {
const PLUGIN_POSITION = {
DRAWER: 'drawer',
HEADER_TOP: 'headerTop'
};
// only one this plugin of ancestor element
const MOBILE_PLUGIN_POSITION_ELE_MAP = {
[PLUGIN_POSITION.DRAWER]: {
geek: '#header-menu-mobile #menu-drawer',
flash: '#menu-drawer .plugin__header-content',
boost: '.header__drawer'
},
[PLUGIN_POSITION.HEADER_TOP]: {
geek: '#header-menu-mobile #menu-drawer',
flash: '#menu-drawer .plugin__header-content',
boost: '.header-content .logo-wrap'
}
};
const MbPluginPositionInTheme = [
...Object.values(MOBILE_PLUGIN_POSITION_ELE_MAP[PLUGIN_POSITION.DRAWER]),
...Object.values(MOBILE_PLUGIN_POSITION_ELE_MAP[PLUGIN_POSITION.HEADER_TOP])
];
return Object.values(MbPluginPositionInTheme).reduce((pre, ancestor) => {
if (pre === '') {
return `${ancestor} .app-smart-product-search-wrap`;
}
if (pre.includes(ancestor)) {
return pre;
}
return `${pre},${ancestor} .app-smart-product-search-wrap`;
}, '');
}
combineMultipleSelectors(selectorList) {
return selectorList.reduce((pre, selector) => {
if (pre === '') {
return `${selector}`;
}
if (pre.includes(selector)) {
return pre;
}
return `${pre},${selector}`;
}, '');
}
}
SPZ.defineElement(TAG, SpzCustomSmartSearchLocation);
Limited time, Limited quantity. If you come in and can't find the product you want, it means the product is sold out. Please don't hesitate to buy when you see what you like, because others may have already placed an order when you are hesitant.
Flash Sale1
0 Product
Sorry, there are no products in this collection.
