const template_name = SHOPLAZZA?.meta?.page?.template_name || '';
const SEARCH_URL = '/search';
const TAG = 'spz-custom-smart-search-location';
const SMART_PRODUCR_SEARCH_WRAP_CLASSNAME = 'app-smart-product-search-container';
const THEME_NAME = window.SHOPLAZZA.theme.merchant_theme_name.replace(/ /g,'');
const BREAKPOINT = 960;
const DELAY = 300;
function diffThemeName(themeNameA, themeNameB){
return themeNameA.toLocaleLowerCase().includes(themeNameB.toLocaleLowerCase())
}
const HEADER_DOM_MAP = {
eva: 'header .header_grid_layout',
geek: `.header-mobile-inner-container`,
onePage: 'header .header',
wind: 'header #header-nav',
nova: 'header .header',
hero: 'header .header__nav',
'flash': '#shoplaza-section-header>div>div',
'lifestyle': '#shoplaza-section-header .header__wrapper'
}
let HEADER_DOM = 'header';
Object.keys(HEADER_DOM_MAP)
.map(themeName=>{
if (diffThemeName(THEME_NAME, themeName)) {
HEADER_DOM = HEADER_DOM_MAP[themeName];
}
})
const SEARCH_ICON_CLASS_MAP = {
'flash': 'app-smart-icon-search-large-flash',
'hero': 'app-smart-icon-search-large-hero',
'geek': 'app-smart-icon-search-large-geek',
'nova': 'app-smart-icon-search-large-nova',
};
let SEARCH_ICON_CLASS = 'app-smart-icon-search-large-default';
Object.keys(SEARCH_ICON_CLASS_MAP)
.map(themeName=>{
if (diffThemeName(THEME_NAME, themeName)) {
SEARCH_ICON_CLASS = SEARCH_ICON_CLASS_MAP[themeName];
}
})
class SpzCustomSmartSearchLocation extends SPZ.BaseElement {
constructor(element) {
super(element);
this.mobileHeaderPluginParentEle = null;
this.outsideCarouselIndex = 0;
this.insideCarouselIndex = 0;
this.searchItemType = 'icon';
}
static deferredMount() {
return false;
}
isLayoutSupported(layout) {
return layout == SPZCore.Layout.LOGIC;
}
buildCallback() {
this.init();
this.listenerResize();
this.initRegisterActions();
}
addIconClass(){
document.querySelectorAll('.app-smart-icon-search-large').forEach(e=>{
e.classList.add(SEARCH_ICON_CLASS)
});
}
moveIcon(){
if (!diffThemeName(THEME_NAME, 'lifestyle')) return;
if (this.searchItemType === 'input') return;
if (this.isDesktop()) return;
const smart_search_dom = document.querySelector('#app-smart-product-search-container-970');
if (!smart_search_dom) return;
const hasMovedIcon = !!document.querySelector('.header__wrapper .container .row.header>div>#app-smart-product-search-container-970');
if (hasMovedIcon) return;
const headerDivList = document.querySelectorAll('.header__wrapper .container .row.header>div');
const iconBoxDom = headerDivList[headerDivList.length-1]
iconBoxDom.appendChild(smart_search_dom, iconBoxDom.firstChild);
}
init() {
this.addIconClass();
this.moveIcon();
if ( this.searchItemType === 'input' ) {
document.querySelectorAll('.app-smart-icon-search-large').forEach(e=>e.style.display = 'none');
const mobileSmartSearchDom = document.querySelector(`.smart-search-mobile-container .app-smart-product-search-wrap`);
if ( this.isDesktop() ) {
document.querySelector(`#app-smart-product-search-container-970`).style="display: block";
if (mobileSmartSearchDom) {
document.querySelector(`#app-smart-product-search-container-970`).appendChild(mobileSmartSearchDom);
}
}else{
if( template_name=='search' ) return;
if (!document.querySelector(`.smart-search-mobile-container`)) {
const appSmartSearchContainer = document.createElement('div');
appSmartSearchContainer.classList.add('smart-search-mobile-container');
appSmartSearchContainer.classList.add('smart-search-mobile-container-'+THEME_NAME.toLocaleLowerCase());
document.querySelector(HEADER_DOM).appendChild(appSmartSearchContainer);
}
if (!mobileSmartSearchDom) {
document.querySelector(`.smart-search-mobile-container`).appendChild(
document.querySelector(`.app-smart-product-search-wrap`)
)
}
}
}else{
document.querySelectorAll('.app-smart-icon-search-large').forEach(e=>e.style.display = 'flex');
}
// 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();
}
}
initRegisterActions(){
this.registOnSearchInputChange();
this.registOnSearchFormSubmit();
this.registOnOutsideCarouselIndexChange();
this.registOnInsideCarouselIndexChange();
this.registGetSearchItemType();
this.registGenerateHotKeywordList();
this.registerAction('onTapHotWord',(invocation)=>{
this.onTapHotWord(invocation.args.type);
});
}
registOnSearchInputChange(){
this.registerAction('onSearchInputChange',(invocation)=>{
const keyword = invocation.args.keyword;
if (keyword === null || !keyword.length) {
document.querySelectorAll('.hot-words-carousel-inner-container').forEach(e=>{
e.style='display: block';
});
} else {
document.querySelectorAll('.hot-words-carousel-inner-container').forEach(e=>{
e.style='display: none';
});
}
})
}
registOnSearchFormSubmit(){
this.registerAction('onSearchFormSubmit',(invocation)=>{
const event = invocation.args.event;
const keywordArray = event.q || [];
const keyword = keywordArray[0];
if (keyword!==null && keyword.length) {
this.handleSearchSubmit_(keywordArray,1);
} else {
this.onTapHotWord('inside')
}
})
}
handleSearchSubmit_(value, retryNum){
SPZ.whenApiDefined(document.getElementById('app-smart-search-970'))
.then((ljsSearch) => {
try{
ljsSearch.handleSearchSubmit_({
value: value
})
}catch(e){
console.log('catch error',retryNum)
if( 3 > retryNum ){
this.handleSearchSubmit_(value, retryNum + 1);
return;
}
const searchStr = value[0] || '';
const searchResult = ljsSearch.setThinkSearchData_(searchStr);
ljsSearch.afterSearching({
query: searchResult.query,
url: `${SEARCH_URL}?q=${searchStr}`,
queryType: searchResult.queryType,
})
}
})
}
registOnOutsideCarouselIndexChange(){
this.registerAction('onOutsideCarouselIndexChange',(invocation)=>{
this.outsideCarouselIndex = invocation.args.index || 0;
})
}
registOnInsideCarouselIndexChange(){
this.registerAction('onInsideCarouselIndexChange',(invocation)=>{
this.insideCarouselIndex = invocation.args.index || 0;
})
}
registGetSearchItemType(searchItemType){
this.registerAction('getSearchItemType',(invocation)=>{
SPZ.whenApiDefined(document.getElementById('app-smart-search-outside-item-970'))
.then((appSmartSearchOutsideItem) => {
const search_item_type = appSmartSearchOutsideItem.getData()?.search_item_type;
this.searchItemType = search_item_type || this.searchItemType;
this.init();
})
})
}
registGenerateHotKeywordList(){
this.registerAction('generateHotKeywordList',(invocation)=>{
const search_keywords = invocation.args?.data?.data?.hotKeywordList || [];
const isShowHotKeyword = invocation.args?.data?.data?.isShowHotKeyword || false;
SPZ.whenApiDefined(document.getElementById('app-smart-search-outside-item-970'))
.then((appSmartSearchOutsideItem) => {
const hotwords = appSmartSearchOutsideItem.getData()?.search_keywords || [];
const new_search_keywords = search_keywords.map((item, index) => {
item.url_obj = item.url_obj || {};
const hotwordItem = hotwords.find(e=>e.word === item.word);
if (hotwordItem) {
item.icon = hotwordItem.icon || '';
}
if (!item.urlObj || !item.urlObj.url) {
item.urlObj = {
...item.url_obj,
url: item.url_obj.type === 'search' ? `${SEARCH_URL}?q=${item.word}` : item.url_obj.url,
};
}
return item;
});
document.querySelectorAll('.app-hot-keyword-render-child')
.forEach((ele) => {
SPZ.whenApiDefined(ele)
.then((hotWordsChildDom) => {
hotWordsChildDom.render({
list: new_search_keywords,
isShowHotKeyword: isShowHotKeyword,
});
})
});
})
});
}
onTapHotWord(type){
const index = type === 'inside' ? this.insideCarouselIndex : this.outsideCarouselIndex;
SPZ.whenApiDefined(document.getElementById('app-smart-search-outside-item-970'))
.then((appSmartSearchOutsideItem) => {
const hotwords = appSmartSearchOutsideItem.getData()?.search_keywords || [];
const currentHotwordItem = hotwords[index] || null;
if (currentHotwordItem && currentHotwordItem.url_obj) {
currentHotwordItem.url_obj.url = currentHotwordItem.url_obj.type === 'search' ? `${SEARCH_URL}?q=${currentHotwordItem.word}` : currentHotwordItem.url_obj.url;
}
SPZ.whenApiDefined(document.getElementById('app-smart-search-970'))
.then((ljsSearch) => {
if (currentHotwordItem) {
ljsSearch.handleHotKeyword_({
word: currentHotwordItem.word,
query_type: currentHotwordItem.type,
url: currentHotwordItem.url_obj?.url,
});
} else {
this.handleSearchSubmit_([''],1);
}
})
})
}
getOutsideCarouselConfig(){
return SPZ.whenApiDefined(document.getElementById('app-smart-search-outside-item-970'))
.then((appSmartSearchOutsideItem) => {
return {
...appSmartSearchOutsideItem.getData(),
outsideCarouselIndex: this.outsideCarouselIndex,
}
})
}
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-container`;
}
if (pre.includes(ancestor)) {
return pre;
}
return `${pre},${ancestor} .app-smart-product-search-container`;
}, '');
}
combineMultipleSelectors(selectorList) {
return selectorList.reduce((pre, selector) => {
if (pre === '') {
return `${selector}`;
}
if (pre.includes(selector)) {
return pre;
}
return `${pre},${selector}`;
}, '');
}
}
SPZ.defineElement(TAG, SpzCustomSmartSearchLocation);
After finishing the diamond painting, are you still worrying about not being able to buy a suitable frame? 🤔 ✅ Discount Price ✅ Easy installation ✅ Reusable
Frame
72 Products
Sorry, there are no products in this collection.
