🛍️ اشتري الآن وادفع عند وصول الطلب إلى بابك!

🛍️ اشتري الآن وادفع عند وصول الطلب إلى بابك!

🛍️ اشتري الآن وادفع عند وصول الطلب إلى بابك!

🛍️ اشتري الآن وادفع عند وصول الطلب إلى بابك!

const SITE = (window.C_SETTINGS || window[atob('U0hPUExBWlpB')])?.routes?.root || ''; const MARKET_THEME_SETTINGS = `${SITE}/api/markets/theme_setting`; const MARKET_COUNTRIES = `${SITE}/api/markets/countries`; const IP_MATCHING_MARKET = `${SITE}/api/front/station`; const MARKET_LANGUAGES = `${SITE}/api/markets/:id/active_languages`; const URL_REDIRECT = '_market_redirected'; const COOKIE_TIPS_NAME = 'market_no_tips'; const COOKIE_TIPS_EXPIRES = 1000 * 60 * 60 * 24 * 14; const MARKET_COUNTRY_COOKIE = '_shoplazza_market_country'; const MARKET_MODAL_LOADED = '__market_modal_loaded__'; const PROPERTY_SELECTED = 'selected'; const MARKET_PC_HEADER_TRIGGER = 'market-pc-header-trigger'; const MARKET_PC_HEADER_COUNTRY_SELECT_TITLE = 'market-pc-header-country-select-title'; const MARKET_PC_HEADER_LANGUAGE_SELECT_TITLE = 'market-pc-header-language-select-title'; const MARKET_PC_HEADER_LANGUAGE_SELECT_SUB_TITLE = 'market-pc-header-language-select-sub-title'; const MARKET_PC_HEADER_COUNTRY_SELECT_SUB_TITLE = 'market-pc-header-country-select-sub-title'; const MARKET_FLAG = 'market-flag'; const MARKET_SELECT_VALUE = 'market-select-value'; const MARKET_CURRENCY = 'market-currency'; const MARKET_CURRENCY_SYMBOL = 'market-currency-symbol'; const MARKET_SELECT_ITEM = 'market-select-item'; const MARKET_SELECT_ITEM_ID = 'market-select-item-id'; const MARKET_SELECT_LIST = 'market-select-list'; const MARKET_LANGUAGE_SELECT = 'market-language-select'; const MARKET_COUNTRY_SELECT = 'market-country-select'; const MARKET_MODAL = 'market-modal'; const MARKET_GATEWAY_REDIRECT_MODAL = 'market-gateway-redirect-modal'; const MARKET_RESELECT_MODAL = 'market-reselect-modal'; const MARKET_MODAL_FLAG = 'market-modal-flag'; const MARKET_MODAL_COUNTRY_CODE = 'market-modal-country-code'; const MARKET_MODAL_CURRENCY_SYMBOL = 'market-modal-currency-symbol'; const MARKET_MODAL_CLOSE = 'market-modal-close'; const MARKET_MODAL_CONFIRM = 'market-modal-confirm'; const MARKET_MODAL_RESELECT = 'market-modal-reselect'; const MARKET_MODAL_RESELECT_COUNTRY_SELECT = 'market-modal-reselect-country-select'; const DATA_SECTION_TYPE = 'data-section-type'; const SECTION_TYPE_HEADER = 'header'; const SECTION_TYPE_FOOTER = 'footer'; class SpzCustomMarket extends SPZ.BaseElement { constructor(element) { super(element); this.global = null; this.useCountrySelect_ = false; this.useLanguageSelect_ = false; this.useModal_ = false; this.isSingleSelectMode_ = false; this.blockSectionPosition_ = ''; this.isEditMode = false; this.ipMatchingMarket = null; this.marketCountryList = []; this.marketLanguages = []; this.toast = null; } static deferredMount() { return false; } isLayoutSupported(layout) { return layout == SPZCore.Layout.LOGIC; } buildCallback() { console.debug('Geolocation'); this.xhr_ = SPZServices.xhrFor(this.win); const platform = SPZServices.platformFor(this.win); this.isIOS_ = platform.isIos(); this.action_ = SPZServices.actionServiceForDoc(this.element); this.global = this.win.C_SETTINGS || this.win[atob('U0hPUExBWlpB')]; this.isEditMode = new URLSearchParams(this.win.location.search).get('preview_theme_id') && new URLSearchParams(this.win.location.search).get('oseid'); this.init_(); } showToast_(content) { if (!this.toast) { this.toast = self.document.createElement('ljs-toast'); this.toast.setAttribute('layout', 'nodisplay'); this.toast.setAttribute('hidden', ''); this.toast.setAttribute('duration', '2000'); this.element.appendChild(this.toast); } SPZ.whenApiDefined(this.toast).then((apis) => { apis.showToast(content); }); } triggerEvent_(name, data) { const event = SPZUtils.Event.create(this.win, `${TAG}.${name}`, data); this.action_.trigger(this.element, name, event); } findBlockSectionPosition() { let current = this.element; while (current) { const dataSectionType = current.getAttribute(DATA_SECTION_TYPE); if ( dataSectionType === SECTION_TYPE_HEADER || dataSectionType === SECTION_TYPE_FOOTER ) { return dataSectionType; } current = current.parentElement; } return ''; } async initSettings_() { await this.getMarketThemeSettings_(); if (this.useCountrySelect_) { this.element.setAttribute('use-country-select', true); } if (this.useLanguageSelect_) { this.element.setAttribute('use-language-select', true); } if (this.useModal_) { this.element.setAttribute('use-modal', true); } if ( (this.useCountrySelect_ && !this.useLanguageSelect_) || (!this.useCountrySelect_ && this.useLanguageSelect_) ) { this.isSingleSelectMode_ = true; } this.blockSectionPosition_ = this.findBlockSectionPosition(); this.isPCLayout_ = this.win.matchMedia('(min-width: 960px)').matches; } renderMarketSelectTemplateNode_(clonedTemplate, data) { this.renderTemplateImg_(clonedTemplate, MARKET_FLAG, { src: data?.flag, width: '24', height: '24', }); this.renderTemplateElement_( clonedTemplate, MARKET_SELECT_VALUE, data.value ); this.renderTemplateElement_( clonedTemplate, MARKET_CURRENCY, data?.currency ); this.renderTemplateElement_( clonedTemplate, MARKET_CURRENCY_SYMBOL, data?.currencySymbol ); } bindDropdownOpenClickEvent_(triggerElement, dropdown) { if (!triggerElement) return; const triggerOpen = () => { SPZ.whenApiDefined(dropdown).then((apis) => { if (!dropdown.hasAttribute('open')) { apis.open(triggerElement); } }); }; if (this.isIOS_) { triggerElement.addEventListener('touchstart', triggerOpen); } else { triggerElement.addEventListener('click', triggerOpen); } } createDropdown_() { const dropdown = self.document.createElement('ljs-dropdown'); dropdown.setAttribute('layout', 'nodisplay'); if (this.blockSectionPosition_ === 'header') { dropdown.setAttribute('overlay-style', 'top: 4px;'); dropdown.setAttribute('placement', 'bottomRight'); } else if (this.blockSectionPosition_ === 'footer') { dropdown.setAttribute('overlay-style', 'top: -4px;'); dropdown.setAttribute('placement', 'top'); } return dropdown; } createDropdownIcon_() { const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svgElement.setAttribute("class", "market-rotate-180"); svgElement.setAttribute("width", "16"); svgElement.setAttribute("height", "16"); const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path"); path1.setAttribute("d", "M7.47 5.172a.75.75 0 0 1 1.06 0l4.596 4.596a.75.75 0 1 1-1.06 1.06L7.468 6.232a.75.75 0 0 1 0-1.06Z"); path1.setAttribute("fill", "currentColor"); const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path"); path2.setAttribute("d", "M8.533 5.172a.75.75 0 0 1 0 1.06l-4.596 4.596a.75.75 0 1 1-1.061-1.06l4.596-4.596a.75.75 0 0 1 1.06 0Z"); path2.setAttribute("fill", "currentColor"); svgElement.appendChild(path1); svgElement.appendChild(path2); return svgElement; } renderDropdownListWithClickEvent_({ triggerElement, dataList, subTitleRole, listElementWithTemplate, defaultValue, itemHandler, shouldUpdateSelectedItem = false, }) { const dropdown = this.createDropdown_(); const itemTemplate = SPZCore.Dom.scopedQuerySelector( listElementWithTemplate, 'template' ); const clonedItemTemplate = itemTemplate.cloneNode(true); const fragment = self.document.createDocumentFragment(); dataList.forEach((data) => { const tempParentNode = self.document.createElement('div'); const clonedTemplate = self.document.importNode( clonedItemTemplate.content, true ); tempParentNode.appendChild(clonedTemplate); tempParentNode.firstElementChild.classList.add( 'market-select-item' ); this.renderMarketSelectTemplateNode_(tempParentNode, data); const selectItemElement = SPZCore.Dom.scopedQuerySelector( tempParentNode, `[role="${MARKET_SELECT_ITEM}"]` ); if (!selectItemElement) { return; } if (defaultValue === data.value) { if (shouldUpdateSelectedItem) { const clonedSelectItemElement = selectItemElement.cloneNode(true); triggerElement.replaceChild( clonedSelectItemElement, triggerElement.firstElementChild ); } selectItemElement.setAttribute(PROPERTY_SELECTED, ''); } selectItemElement.setAttribute(MARKET_SELECT_ITEM_ID, data.value); fragment.appendChild(tempParentNode.firstElementChild); }); let value = defaultValue; listElementWithTemplate.addEventListener( 'click', (e) => { if (this.isEditMode) { this.showToast_('编辑器下不支持切换国家'); SPZ.whenApiDefined(dropdown).then((apis) => { apis.close(); }); return; } let targetElement = e.target; while (targetElement) { if ( !targetElement || targetElement.getAttribute(MARKET_SELECT_ITEM_ID) ) { break; } targetElement = targetElement.parentNode; } if ( !targetElement || !targetElement.hasAttribute(MARKET_SELECT_ITEM_ID) ) { return; } const selectValue = targetElement.getAttribute(MARKET_SELECT_ITEM_ID); if (value === selectValue) { SPZ.whenApiDefined(dropdown).then((apis) => { apis.close(); }); return; } const selectedData = dataList.find((c) => c.value === selectValue); if (shouldUpdateSelectedItem) { const tempParentNode = self.document.createElement('div'); const clonedTemplate = self.document.importNode( clonedItemTemplate.content, true ); tempParentNode.appendChild(clonedTemplate); this.renderMarketSelectTemplateNode_(tempParentNode, selectedData); tempParentNode.firstElementChild.classList.add( 'market-select-item' ); triggerElement.replaceChild( tempParentNode.firstElementChild, triggerElement.firstElementChild ); } value = selectValue; itemHandler?.(selectedData); SPZ.whenApiDefined(dropdown).then((apis) => { apis.close(); }); }, false ); listElementWithTemplate.removeChild(itemTemplate); listElementWithTemplate.appendChild(fragment); listElementWithTemplate.classList.add('market-select-list'); dropdown.appendChild(listElementWithTemplate); if (subTitleRole) { this.renderSelectTitle_(dropdown, subTitleRole); } return dropdown; } createSelect_({ parent, defaultValue, dataList, listElementWithTemplate, itemHandler, titleRole, }) { const triggerElement = self.document.createElement('div'); triggerElement.classList.add('market-select'); const displayElement = self.document.createElement('div'); triggerElement.appendChild(displayElement); triggerElement.appendChild(this.createDropdownIcon_()); const dropdown = this.renderDropdownListWithClickEvent_({ triggerElement, dataList, listElementWithTemplate, defaultValue, itemHandler, shouldUpdateSelectedItem: true, }); this.bindDropdownOpenClickEvent_(triggerElement, dropdown); const dropdownContainer = self.document.createElement('div'); dropdownContainer.appendChild(triggerElement); dropdownContainer.appendChild(dropdown); dropdownContainer.classList.add('market-select-container'); this.renderSelectTitle_(dropdownContainer, titleRole); parent.appendChild(dropdownContainer); } getListElementWithTemplate_(role) { const template = SPZCore.Dom.scopedQuerySelector( this.element, `[role="${role}"]` ); if (template) { const clonedTemplate = template.cloneNode(true); const tempParent = self.document.createElement("div"); tempParent.appendChild(clonedTemplate.content); const listElementWithTemplate = SPZCore.Dom.scopedQuerySelector( tempParent, `[role="${MARKET_SELECT_LIST}"]` ); return listElementWithTemplate; } return null; } renderSelectTitle_(parent, role) { if (!parent || !role) { return; } const template = SPZCore.Dom.scopedQuerySelector( this.element, `[role="${role}"]` ); const content = self.document.importNode(template.content, true); parent.insertBefore(content, parent.firstElementChild); parent.firstElementChild.classList.add( role.includes('sub') ? 'market-pc-header-select-sub-title' : 'market-pc-header-select-title' ); } initSelect_(rootNode, options) { const parent = rootNode || this.element; if (this.useCountrySelect_) { this.createSelect_({ parent, titleRole: options?.shouldRenderSelectTitle ? MARKET_PC_HEADER_COUNTRY_SELECT_TITLE : undefined, defaultValue: this.getDefaultCountryValue_(), dataList: this.marketCountryList.map(this.mapCountryRenderData_), listElementWithTemplate: this.getListElementWithTemplate_( MARKET_COUNTRY_SELECT ), itemHandler: this.handleCountrySelectChange_.bind(this), }); } if (this.useLanguageSelect_) { this.createSelect_({ parent, titleRole: options?.shouldRenderSelectTitle ? MARKET_PC_HEADER_LANGUAGE_SELECT_TITLE : undefined, defaultValue: this.getDefaultLanguageValue_(), dataList: this.marketLanguages.map(this.mapLanguageRenderData_), listElementWithTemplate: this.getListElementWithTemplate_( MARKET_LANGUAGE_SELECT ), itemHandler: this.handleLanguageSelectChange_.bind(this), }); } } initPcHeaderTriggerElement() { const headerTriggerElementTemplate = SPZCore.Dom.scopedQuerySelector( this.element, `[role="${MARKET_PC_HEADER_TRIGGER}"]` ); const headerTriggerElement = self.document.importNode( headerTriggerElementTemplate.content, true ); const parentDivElement = self.document.createElement('div'); parentDivElement.setAttribute('role', MARKET_PC_HEADER_TRIGGER); parentDivElement.appendChild(headerTriggerElement); this.element.removeChild(headerTriggerElementTemplate); return parentDivElement; } initPanelWithSelect_() { const triggerElement = this.initPcHeaderTriggerElement(); const dropdown = this.createDropdown_(); const panelElement = self.document.createElement('div'); panelElement.classList.add('market-panel'); this.initSelect_(panelElement, {shouldRenderSelectTitle: true}); dropdown.appendChild(panelElement); this.bindDropdownOpenClickEvent_(triggerElement, dropdown); this.element.appendChild(triggerElement); this.element.insertBefore(dropdown, triggerElement); } initSingleSelectDropdown_() { const triggerElement = this.initPcHeaderTriggerElement(); let dropdown; if (this.useCountrySelect_) { dropdown = this.renderDropdownListWithClickEvent_({ triggerElement, subTitleRole: MARKET_PC_HEADER_COUNTRY_SELECT_SUB_TITLE, dataList: this.marketCountryList.map(this.mapCountryRenderData_), listElementWithTemplate: this.getListElementWithTemplate_( MARKET_COUNTRY_SELECT ), defaultValue: this.getDefaultCountryValue_(), itemHandler: this.handleCountrySelectChange_.bind(this), }); } else if (this.useLanguageSelect_) { dropdown = this.renderDropdownListWithClickEvent_({ triggerElement, subTitleRole: MARKET_PC_HEADER_LANGUAGE_SELECT_SUB_TITLE, dataList: this.marketLanguages.map(this.mapLanguageRenderData_), listElementWithTemplate: this.getListElementWithTemplate_( MARKET_LANGUAGE_SELECT ), defaultValue: this.getDefaultLanguageValue_(), itemHandler: this.handleLanguageSelectChange_.bind(this), }); } if (dropdown) { this.bindDropdownOpenClickEvent_(triggerElement, dropdown); this.element.appendChild(triggerElement); this.element.appendChild(dropdown); } } initEntry_() { if (this.blockSectionPosition_ === SECTION_TYPE_HEADER) { if (this.isSingleSelectMode_) { this.initSingleSelectDropdown_(); } else if (this.useCountrySelect_ && this.useLanguageSelect_) { this.initPanelWithSelect_(); } } this.initSelect_(this.element); } async initData_() { const promises = []; if (this.useCountrySelect_ || this.useModal_) { promises.push(this.getCountryList_(), this.getIpMatchingMarket_()); } if (this.useLanguageSelect_) { promises.push(this.getMarketLanguages_(this.global.market.market_id)); } return Promise.all(promises).then((results) => { const ipMatchingMarket = results.find((result) => result.hasOwnProperty('matching_station') ); const marketCountryList = results.find((result) => result.hasOwnProperty('data') ); if (ipMatchingMarket && marketCountryList) { this.ipMatchingMarket = ipMatchingMarket?.matching_station?.find?.( (item) => item.type === 'multiple_market' ) || { img: marketCountryList.length ? marketCountryList?.[0]?.detail && marketCountryList[0].detail?.flag : '', }; } }); } initModal_() { if ( this.isEditMode || !this.ipMatchingMarket?.market_id || !this.useModal_ || this.hasCookie_(COOKIE_TIPS_NAME) || this.win[MARKET_MODAL_LOADED] ) { return; } this.win[MARKET_MODAL_LOADED] = true; const redirectParam = new URLSearchParams(this.win.location.search).get( URL_REDIRECT ); if (redirectParam) { this.initModalEntry_(MARKET_GATEWAY_REDIRECT_MODAL); } else if ( this.ipMatchingMarket.market_id !== this.global?.market?.market_id ) { this.initModalEntry_(MARKET_MODAL); } } async init_() { await this.initSettings_(); await this.initData_(); this.initEntry_(); this.initModal_(); } getDefaultCountryValue_() { return this.getCookie_(MARKET_COUNTRY_COOKIE) || this.marketCountryList[0]?.country_code; } mapCountryRenderData_(country) { return { flag: country?.detail?.flag || '', value: country?.country_code, currency: country?.currency, currencySymbol: country?.symbol?.val || '', url: country?.url, }; } handleCountrySelectChange_(selectedData) { this.setCookie_(MARKET_COUNTRY_COOKIE, selectedData.value); this.handleChangeURL_(selectedData.url); } getDefaultLanguageValue_() { return this.marketLanguages?.find?.( (lang) => lang.code === this.global?.market?.market_lang )?.name; } mapLanguageRenderData_(language) { return { value: language.name, url: language.url, }; } handleLanguageSelectChange_(selectedData) { this.handleChangeURL_(selectedData.url); } renderTemplateElement_(parent, role, value) { const elements = SPZCore.Dom.scopedQuerySelectorAll( parent, `[role="${role}"]` ); elements.forEach((element) => { if (element && value) { element.innerHTML = value; } }); } renderTemplateImg_(parent, role, options) { const flagElement = SPZCore.Dom.scopedQuerySelector( parent, `[role="${role}"]` ); if (flagElement && options?.src && options?.height && options?.width) { const spzImg = self.document.createElement('ljs-img'); spzImg.setAttribute('src', options.src); spzImg.setAttribute('layout', 'responsive'); spzImg.setAttribute('width', options.width); spzImg.setAttribute('height', options.height); spzImg.setAttribute( 'style', `width: ${options.width}px; height: ${options.height}px;` ); flagElement.appendChild(spzImg); } } handleChangeURL_(url) { if (!!url) { let {origin, pathname, search} = this.win.location; pathname = pathname.replace(SITE, url != '/' ? url : ''); this.win.location.href = `${origin}${pathname}${search}`; } else { this.win.location.reload(true); } } initModalEntry_(role) { const marketModalTemplate = SPZCore.Dom.scopedQuerySelector( this.element, `[role="${role}"]` ); if (marketModalTemplate) { const tempParentNode = self.document.createElement('div'); const clonedTemplate = self.document.importNode( marketModalTemplate.content, true ); tempParentNode.appendChild(clonedTemplate); this.renderTemplateImg_(tempParentNode, MARKET_MODAL_FLAG, { src: this.ipMatchingMarket?.img, width: '80', height: '80', }); this.renderTemplateElement_( tempParentNode, MARKET_MODAL_COUNTRY_CODE, this.ipMatchingMarket?.name ); this.renderTemplateElement_( tempParentNode, MARKET_MODAL_CURRENCY_SYMBOL, this.ipMatchingMarket?.currency_with_symbol ); const lightbox = self.document.createElement('ljs-lightbox'); lightbox.setAttribute('layout', 'nodisplay'); lightbox.appendChild(tempParentNode.firstElementChild); self.document.body.appendChild(lightbox); SPZ.whenApiDefined(lightbox).then((apis) => { SPZCore.Dom.scopedQuerySelectorAll( lightbox, `[role="${MARKET_MODAL_CLOSE}"]` ).forEach((ele) => { ele.addEventListener('click', () => { this.setCookie_(COOKIE_TIPS_NAME, 1, COOKIE_TIPS_EXPIRES); apis.close(); }); }); const marketModalConfirmElement = SPZCore.Dom.scopedQuerySelector( lightbox, `[role="${MARKET_MODAL_CONFIRM}"]` ); if (marketModalConfirmElement && this.ipMatchingMarket?.url) { marketModalConfirmElement.addEventListener('click', () => { this.setCookie_(COOKIE_TIPS_NAME, 1, COOKIE_TIPS_EXPIRES); this.setCookie_(MARKET_COUNTRY_COOKIE, this.ipMatchingMarket?.name); this.handleChangeURL_(this.ipMatchingMarket?.url); }); } const marketModalReselectElement = SPZCore.Dom.scopedQuerySelector( lightbox, `[role="${MARKET_MODAL_RESELECT}"]` ); if (marketModalReselectElement) { marketModalReselectElement.addEventListener('click', () => { this.setCookie_(COOKIE_TIPS_NAME, 1, COOKIE_TIPS_EXPIRES); const marketReselectTemplate = SPZCore.Dom.scopedQuerySelector( this.element, `[role="${MARKET_RESELECT_MODAL}"]` ); if (marketReselectTemplate && lightbox.firstElementChild) { const clonedTemplate = self.document.importNode( marketReselectTemplate.content, true ); const selectParent = SPZCore.Dom.scopedQuerySelector( clonedTemplate, `[role="${MARKET_MODAL_RESELECT_COUNTRY_SELECT}"]` ); if (selectParent) { this.createSelect_({ parent: selectParent, defaultValue: this.getDefaultCountryValue_(), dataList: this.marketCountryList.map( this.mapCountryRenderData_ ), listElementWithTemplate: this.getListElementWithTemplate_( MARKET_COUNTRY_SELECT ), itemHandler: this.handleCountrySelectChange_.bind(this), }); } lightbox.replaceChild(clonedTemplate, lightbox.firstElementChild); SPZCore.Dom.scopedQuerySelectorAll( lightbox, `[role="${MARKET_MODAL_CLOSE}"]` ).forEach((ele) => { ele.addEventListener('click', () => { this.setCookie_(COOKIE_TIPS_NAME, 1, COOKIE_TIPS_EXPIRES); apis.close(); }); }); } }); } apis.open(); }); } } async getMarketThemeSettings_() { return this.xhr_.fetchJson(MARKET_THEME_SETTINGS).then((res) => { this.useCountrySelect_ = !!res.country_selector_enabled; this.useLanguageSelect_ = !!res.language_selector_enabled && this.global?.market?.market_id; this.useModal_ = !!res.redirect_pop_enabled; return res; }); } async getCountryList_() { return this.xhr_.fetchJson(MARKET_COUNTRIES).then((res) => { this.marketCountryList = res.data.length ? res.data : []; return res; }); } async getIpMatchingMarket_() { return this.xhr_.fetchJson(IP_MATCHING_MARKET, { method: 'POST', body: { stations: [], }, }); } async getMarketLanguages_(marketId) { return this.xhr_ .fetchJson(MARKET_LANGUAGES.replace(/:id/gim, marketId)) .then((res) => { this.marketLanguages = res?.languages?.length ? res.languages : []; return res; }); } hasCookie_(name) { const m = self.document.cookie .split(';') .filter((pair) => pair.trim().startsWith(name + '=')); return !!(m && m[0]); } getCookie_(name) { const m = self.document.cookie .split(';') .filter((pair) => pair.trim().startsWith(name + '=')); return m && m[0] ? m[0].split('=')[1] : null; } setCookie_(name, value, expires) { const expiresDate = new Date(Date.now() + expires).toGMTString(); self.document.cookie = `${name}=${encodeURIComponent( value )};expires=${expiresDate};path=/`; } } SPZ.defineElement('spz-custom-market', SpzCustomMarket);

STYLIYI

const SITE = (window.C_SETTINGS || window[atob('U0hPUExBWlpB')])?.routes?.root || ''; const MARKET_THEME_SETTINGS = `${SITE}/api/markets/theme_setting`; const MARKET_COUNTRIES = `${SITE}/api/markets/countries`; const IP_MATCHING_MARKET = `${SITE}/api/front/station`; const MARKET_LANGUAGES = `${SITE}/api/markets/:id/active_languages`; const URL_REDIRECT = '_market_redirected'; const COOKIE_TIPS_NAME = 'market_no_tips'; const COOKIE_TIPS_EXPIRES = 1000 * 60 * 60 * 24 * 14; const MARKET_COUNTRY_COOKIE = '_shoplazza_market_country'; const MARKET_MODAL_LOADED = '__market_modal_loaded__'; const PROPERTY_SELECTED = 'selected'; const MARKET_PC_HEADER_TRIGGER = 'market-pc-header-trigger'; const MARKET_PC_HEADER_COUNTRY_SELECT_TITLE = 'market-pc-header-country-select-title'; const MARKET_PC_HEADER_LANGUAGE_SELECT_TITLE = 'market-pc-header-language-select-title'; const MARKET_PC_HEADER_LANGUAGE_SELECT_SUB_TITLE = 'market-pc-header-language-select-sub-title'; const MARKET_PC_HEADER_COUNTRY_SELECT_SUB_TITLE = 'market-pc-header-country-select-sub-title'; const MARKET_FLAG = 'market-flag'; const MARKET_SELECT_VALUE = 'market-select-value'; const MARKET_CURRENCY = 'market-currency'; const MARKET_CURRENCY_SYMBOL = 'market-currency-symbol'; const MARKET_SELECT_ITEM = 'market-select-item'; const MARKET_SELECT_ITEM_ID = 'market-select-item-id'; const MARKET_SELECT_LIST = 'market-select-list'; const MARKET_LANGUAGE_SELECT = 'market-language-select'; const MARKET_COUNTRY_SELECT = 'market-country-select'; const MARKET_MODAL = 'market-modal'; const MARKET_GATEWAY_REDIRECT_MODAL = 'market-gateway-redirect-modal'; const MARKET_RESELECT_MODAL = 'market-reselect-modal'; const MARKET_MODAL_FLAG = 'market-modal-flag'; const MARKET_MODAL_COUNTRY_CODE = 'market-modal-country-code'; const MARKET_MODAL_CURRENCY_SYMBOL = 'market-modal-currency-symbol'; const MARKET_MODAL_CLOSE = 'market-modal-close'; const MARKET_MODAL_CONFIRM = 'market-modal-confirm'; const MARKET_MODAL_RESELECT = 'market-modal-reselect'; const MARKET_MODAL_RESELECT_COUNTRY_SELECT = 'market-modal-reselect-country-select'; const DATA_SECTION_TYPE = 'data-section-type'; const SECTION_TYPE_HEADER = 'header'; const SECTION_TYPE_FOOTER = 'footer'; class SpzCustomMarket extends SPZ.BaseElement { constructor(element) { super(element); this.global = null; this.useCountrySelect_ = false; this.useLanguageSelect_ = false; this.useModal_ = false; this.isSingleSelectMode_ = false; this.blockSectionPosition_ = ''; this.isEditMode = false; this.ipMatchingMarket = null; this.marketCountryList = []; this.marketLanguages = []; this.toast = null; } static deferredMount() { return false; } isLayoutSupported(layout) { return layout == SPZCore.Layout.LOGIC; } buildCallback() { console.debug('Geolocation'); this.xhr_ = SPZServices.xhrFor(this.win); const platform = SPZServices.platformFor(this.win); this.isIOS_ = platform.isIos(); this.action_ = SPZServices.actionServiceForDoc(this.element); this.global = this.win.C_SETTINGS || this.win[atob('U0hPUExBWlpB')]; this.isEditMode = new URLSearchParams(this.win.location.search).get('preview_theme_id') && new URLSearchParams(this.win.location.search).get('oseid'); this.init_(); } showToast_(content) { if (!this.toast) { this.toast = self.document.createElement('ljs-toast'); this.toast.setAttribute('layout', 'nodisplay'); this.toast.setAttribute('hidden', ''); this.toast.setAttribute('duration', '2000'); this.element.appendChild(this.toast); } SPZ.whenApiDefined(this.toast).then((apis) => { apis.showToast(content); }); } triggerEvent_(name, data) { const event = SPZUtils.Event.create(this.win, `${TAG}.${name}`, data); this.action_.trigger(this.element, name, event); } findBlockSectionPosition() { let current = this.element; while (current) { const dataSectionType = current.getAttribute(DATA_SECTION_TYPE); if ( dataSectionType === SECTION_TYPE_HEADER || dataSectionType === SECTION_TYPE_FOOTER ) { return dataSectionType; } current = current.parentElement; } return ''; } async initSettings_() { await this.getMarketThemeSettings_(); if (this.useCountrySelect_) { this.element.setAttribute('use-country-select', true); } if (this.useLanguageSelect_) { this.element.setAttribute('use-language-select', true); } if (this.useModal_) { this.element.setAttribute('use-modal', true); } if ( (this.useCountrySelect_ && !this.useLanguageSelect_) || (!this.useCountrySelect_ && this.useLanguageSelect_) ) { this.isSingleSelectMode_ = true; } this.blockSectionPosition_ = this.findBlockSectionPosition(); this.isPCLayout_ = this.win.matchMedia('(min-width: 960px)').matches; } renderMarketSelectTemplateNode_(clonedTemplate, data) { this.renderTemplateImg_(clonedTemplate, MARKET_FLAG, { src: data?.flag, width: '24', height: '24', }); this.renderTemplateElement_( clonedTemplate, MARKET_SELECT_VALUE, data.value ); this.renderTemplateElement_( clonedTemplate, MARKET_CURRENCY, data?.currency ); this.renderTemplateElement_( clonedTemplate, MARKET_CURRENCY_SYMBOL, data?.currencySymbol ); } bindDropdownOpenClickEvent_(triggerElement, dropdown) { if (!triggerElement) return; const triggerOpen = () => { SPZ.whenApiDefined(dropdown).then((apis) => { if (!dropdown.hasAttribute('open')) { apis.open(triggerElement); } }); }; if (this.isIOS_) { triggerElement.addEventListener('touchstart', triggerOpen); } else { triggerElement.addEventListener('click', triggerOpen); } } createDropdown_() { const dropdown = self.document.createElement('ljs-dropdown'); dropdown.setAttribute('layout', 'nodisplay'); if (this.blockSectionPosition_ === 'header') { dropdown.setAttribute('overlay-style', 'top: 4px;'); dropdown.setAttribute('placement', 'bottomRight'); } else if (this.blockSectionPosition_ === 'footer') { dropdown.setAttribute('overlay-style', 'top: -4px;'); dropdown.setAttribute('placement', 'top'); } return dropdown; } createDropdownIcon_() { const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svgElement.setAttribute("class", "market-rotate-180"); svgElement.setAttribute("width", "16"); svgElement.setAttribute("height", "16"); const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path"); path1.setAttribute("d", "M7.47 5.172a.75.75 0 0 1 1.06 0l4.596 4.596a.75.75 0 1 1-1.06 1.06L7.468 6.232a.75.75 0 0 1 0-1.06Z"); path1.setAttribute("fill", "currentColor"); const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path"); path2.setAttribute("d", "M8.533 5.172a.75.75 0 0 1 0 1.06l-4.596 4.596a.75.75 0 1 1-1.061-1.06l4.596-4.596a.75.75 0 0 1 1.06 0Z"); path2.setAttribute("fill", "currentColor"); svgElement.appendChild(path1); svgElement.appendChild(path2); return svgElement; } renderDropdownListWithClickEvent_({ triggerElement, dataList, subTitleRole, listElementWithTemplate, defaultValue, itemHandler, shouldUpdateSelectedItem = false, }) { const dropdown = this.createDropdown_(); const itemTemplate = SPZCore.Dom.scopedQuerySelector( listElementWithTemplate, 'template' ); const clonedItemTemplate = itemTemplate.cloneNode(true); const fragment = self.document.createDocumentFragment(); dataList.forEach((data) => { const tempParentNode = self.document.createElement('div'); const clonedTemplate = self.document.importNode( clonedItemTemplate.content, true ); tempParentNode.appendChild(clonedTemplate); tempParentNode.firstElementChild.classList.add( 'market-select-item' ); this.renderMarketSelectTemplateNode_(tempParentNode, data); const selectItemElement = SPZCore.Dom.scopedQuerySelector( tempParentNode, `[role="${MARKET_SELECT_ITEM}"]` ); if (!selectItemElement) { return; } if (defaultValue === data.value) { if (shouldUpdateSelectedItem) { const clonedSelectItemElement = selectItemElement.cloneNode(true); triggerElement.replaceChild( clonedSelectItemElement, triggerElement.firstElementChild ); } selectItemElement.setAttribute(PROPERTY_SELECTED, ''); } selectItemElement.setAttribute(MARKET_SELECT_ITEM_ID, data.value); fragment.appendChild(tempParentNode.firstElementChild); }); let value = defaultValue; listElementWithTemplate.addEventListener( 'click', (e) => { if (this.isEditMode) { this.showToast_('编辑器下不支持切换国家'); SPZ.whenApiDefined(dropdown).then((apis) => { apis.close(); }); return; } let targetElement = e.target; while (targetElement) { if ( !targetElement || targetElement.getAttribute(MARKET_SELECT_ITEM_ID) ) { break; } targetElement = targetElement.parentNode; } if ( !targetElement || !targetElement.hasAttribute(MARKET_SELECT_ITEM_ID) ) { return; } const selectValue = targetElement.getAttribute(MARKET_SELECT_ITEM_ID); if (value === selectValue) { SPZ.whenApiDefined(dropdown).then((apis) => { apis.close(); }); return; } const selectedData = dataList.find((c) => c.value === selectValue); if (shouldUpdateSelectedItem) { const tempParentNode = self.document.createElement('div'); const clonedTemplate = self.document.importNode( clonedItemTemplate.content, true ); tempParentNode.appendChild(clonedTemplate); this.renderMarketSelectTemplateNode_(tempParentNode, selectedData); tempParentNode.firstElementChild.classList.add( 'market-select-item' ); triggerElement.replaceChild( tempParentNode.firstElementChild, triggerElement.firstElementChild ); } value = selectValue; itemHandler?.(selectedData); SPZ.whenApiDefined(dropdown).then((apis) => { apis.close(); }); }, false ); listElementWithTemplate.removeChild(itemTemplate); listElementWithTemplate.appendChild(fragment); listElementWithTemplate.classList.add('market-select-list'); dropdown.appendChild(listElementWithTemplate); if (subTitleRole) { this.renderSelectTitle_(dropdown, subTitleRole); } return dropdown; } createSelect_({ parent, defaultValue, dataList, listElementWithTemplate, itemHandler, titleRole, }) { const triggerElement = self.document.createElement('div'); triggerElement.classList.add('market-select'); const displayElement = self.document.createElement('div'); triggerElement.appendChild(displayElement); triggerElement.appendChild(this.createDropdownIcon_()); const dropdown = this.renderDropdownListWithClickEvent_({ triggerElement, dataList, listElementWithTemplate, defaultValue, itemHandler, shouldUpdateSelectedItem: true, }); this.bindDropdownOpenClickEvent_(triggerElement, dropdown); const dropdownContainer = self.document.createElement('div'); dropdownContainer.appendChild(triggerElement); dropdownContainer.appendChild(dropdown); dropdownContainer.classList.add('market-select-container'); this.renderSelectTitle_(dropdownContainer, titleRole); parent.appendChild(dropdownContainer); } getListElementWithTemplate_(role) { const template = SPZCore.Dom.scopedQuerySelector( this.element, `[role="${role}"]` ); if (template) { const clonedTemplate = template.cloneNode(true); const tempParent = self.document.createElement("div"); tempParent.appendChild(clonedTemplate.content); const listElementWithTemplate = SPZCore.Dom.scopedQuerySelector( tempParent, `[role="${MARKET_SELECT_LIST}"]` ); return listElementWithTemplate; } return null; } renderSelectTitle_(parent, role) { if (!parent || !role) { return; } const template = SPZCore.Dom.scopedQuerySelector( this.element, `[role="${role}"]` ); const content = self.document.importNode(template.content, true); parent.insertBefore(content, parent.firstElementChild); parent.firstElementChild.classList.add( role.includes('sub') ? 'market-pc-header-select-sub-title' : 'market-pc-header-select-title' ); } initSelect_(rootNode, options) { const parent = rootNode || this.element; if (this.useCountrySelect_) { this.createSelect_({ parent, titleRole: options?.shouldRenderSelectTitle ? MARKET_PC_HEADER_COUNTRY_SELECT_TITLE : undefined, defaultValue: this.getDefaultCountryValue_(), dataList: this.marketCountryList.map(this.mapCountryRenderData_), listElementWithTemplate: this.getListElementWithTemplate_( MARKET_COUNTRY_SELECT ), itemHandler: this.handleCountrySelectChange_.bind(this), }); } if (this.useLanguageSelect_) { this.createSelect_({ parent, titleRole: options?.shouldRenderSelectTitle ? MARKET_PC_HEADER_LANGUAGE_SELECT_TITLE : undefined, defaultValue: this.getDefaultLanguageValue_(), dataList: this.marketLanguages.map(this.mapLanguageRenderData_), listElementWithTemplate: this.getListElementWithTemplate_( MARKET_LANGUAGE_SELECT ), itemHandler: this.handleLanguageSelectChange_.bind(this), }); } } initPcHeaderTriggerElement() { const headerTriggerElementTemplate = SPZCore.Dom.scopedQuerySelector( this.element, `[role="${MARKET_PC_HEADER_TRIGGER}"]` ); const headerTriggerElement = self.document.importNode( headerTriggerElementTemplate.content, true ); const parentDivElement = self.document.createElement('div'); parentDivElement.setAttribute('role', MARKET_PC_HEADER_TRIGGER); parentDivElement.appendChild(headerTriggerElement); this.element.removeChild(headerTriggerElementTemplate); return parentDivElement; } initPanelWithSelect_() { const triggerElement = this.initPcHeaderTriggerElement(); const dropdown = this.createDropdown_(); const panelElement = self.document.createElement('div'); panelElement.classList.add('market-panel'); this.initSelect_(panelElement, {shouldRenderSelectTitle: true}); dropdown.appendChild(panelElement); this.bindDropdownOpenClickEvent_(triggerElement, dropdown); this.element.appendChild(triggerElement); this.element.insertBefore(dropdown, triggerElement); } initSingleSelectDropdown_() { const triggerElement = this.initPcHeaderTriggerElement(); let dropdown; if (this.useCountrySelect_) { dropdown = this.renderDropdownListWithClickEvent_({ triggerElement, subTitleRole: MARKET_PC_HEADER_COUNTRY_SELECT_SUB_TITLE, dataList: this.marketCountryList.map(this.mapCountryRenderData_), listElementWithTemplate: this.getListElementWithTemplate_( MARKET_COUNTRY_SELECT ), defaultValue: this.getDefaultCountryValue_(), itemHandler: this.handleCountrySelectChange_.bind(this), }); } else if (this.useLanguageSelect_) { dropdown = this.renderDropdownListWithClickEvent_({ triggerElement, subTitleRole: MARKET_PC_HEADER_LANGUAGE_SELECT_SUB_TITLE, dataList: this.marketLanguages.map(this.mapLanguageRenderData_), listElementWithTemplate: this.getListElementWithTemplate_( MARKET_LANGUAGE_SELECT ), defaultValue: this.getDefaultLanguageValue_(), itemHandler: this.handleLanguageSelectChange_.bind(this), }); } if (dropdown) { this.bindDropdownOpenClickEvent_(triggerElement, dropdown); this.element.appendChild(triggerElement); this.element.appendChild(dropdown); } } initEntry_() { if (this.blockSectionPosition_ === SECTION_TYPE_HEADER) { if (this.isSingleSelectMode_) { this.initSingleSelectDropdown_(); } else if (this.useCountrySelect_ && this.useLanguageSelect_) { this.initPanelWithSelect_(); } } this.initSelect_(this.element); } async initData_() { const promises = []; if (this.useCountrySelect_ || this.useModal_) { promises.push(this.getCountryList_(), this.getIpMatchingMarket_()); } if (this.useLanguageSelect_) { promises.push(this.getMarketLanguages_(this.global.market.market_id)); } return Promise.all(promises).then((results) => { const ipMatchingMarket = results.find((result) => result.hasOwnProperty('matching_station') ); const marketCountryList = results.find((result) => result.hasOwnProperty('data') ); if (ipMatchingMarket && marketCountryList) { this.ipMatchingMarket = ipMatchingMarket?.matching_station?.find?.( (item) => item.type === 'multiple_market' ) || { img: marketCountryList.length ? marketCountryList?.[0]?.detail && marketCountryList[0].detail?.flag : '', }; } }); } initModal_() { if ( this.isEditMode || !this.ipMatchingMarket?.market_id || !this.useModal_ || this.hasCookie_(COOKIE_TIPS_NAME) || this.win[MARKET_MODAL_LOADED] ) { return; } this.win[MARKET_MODAL_LOADED] = true; const redirectParam = new URLSearchParams(this.win.location.search).get( URL_REDIRECT ); if (redirectParam) { this.initModalEntry_(MARKET_GATEWAY_REDIRECT_MODAL); } else if ( this.ipMatchingMarket.market_id !== this.global?.market?.market_id ) { this.initModalEntry_(MARKET_MODAL); } } async init_() { await this.initSettings_(); await this.initData_(); this.initEntry_(); this.initModal_(); } getDefaultCountryValue_() { return this.getCookie_(MARKET_COUNTRY_COOKIE) || this.marketCountryList[0]?.country_code; } mapCountryRenderData_(country) { return { flag: country?.detail?.flag || '', value: country?.country_code, currency: country?.currency, currencySymbol: country?.symbol?.val || '', url: country?.url, }; } handleCountrySelectChange_(selectedData) { this.setCookie_(MARKET_COUNTRY_COOKIE, selectedData.value); this.handleChangeURL_(selectedData.url); } getDefaultLanguageValue_() { return this.marketLanguages?.find?.( (lang) => lang.code === this.global?.market?.market_lang )?.name; } mapLanguageRenderData_(language) { return { value: language.name, url: language.url, }; } handleLanguageSelectChange_(selectedData) { this.handleChangeURL_(selectedData.url); } renderTemplateElement_(parent, role, value) { const elements = SPZCore.Dom.scopedQuerySelectorAll( parent, `[role="${role}"]` ); elements.forEach((element) => { if (element && value) { element.innerHTML = value; } }); } renderTemplateImg_(parent, role, options) { const flagElement = SPZCore.Dom.scopedQuerySelector( parent, `[role="${role}"]` ); if (flagElement && options?.src && options?.height && options?.width) { const spzImg = self.document.createElement('ljs-img'); spzImg.setAttribute('src', options.src); spzImg.setAttribute('layout', 'responsive'); spzImg.setAttribute('width', options.width); spzImg.setAttribute('height', options.height); spzImg.setAttribute( 'style', `width: ${options.width}px; height: ${options.height}px;` ); flagElement.appendChild(spzImg); } } handleChangeURL_(url) { if (!!url) { let {origin, pathname, search} = this.win.location; pathname = pathname.replace(SITE, url != '/' ? url : ''); this.win.location.href = `${origin}${pathname}${search}`; } else { this.win.location.reload(true); } } initModalEntry_(role) { const marketModalTemplate = SPZCore.Dom.scopedQuerySelector( this.element, `[role="${role}"]` ); if (marketModalTemplate) { const tempParentNode = self.document.createElement('div'); const clonedTemplate = self.document.importNode( marketModalTemplate.content, true ); tempParentNode.appendChild(clonedTemplate); this.renderTemplateImg_(tempParentNode, MARKET_MODAL_FLAG, { src: this.ipMatchingMarket?.img, width: '80', height: '80', }); this.renderTemplateElement_( tempParentNode, MARKET_MODAL_COUNTRY_CODE, this.ipMatchingMarket?.name ); this.renderTemplateElement_( tempParentNode, MARKET_MODAL_CURRENCY_SYMBOL, this.ipMatchingMarket?.currency_with_symbol ); const lightbox = self.document.createElement('ljs-lightbox'); lightbox.setAttribute('layout', 'nodisplay'); lightbox.appendChild(tempParentNode.firstElementChild); self.document.body.appendChild(lightbox); SPZ.whenApiDefined(lightbox).then((apis) => { SPZCore.Dom.scopedQuerySelectorAll( lightbox, `[role="${MARKET_MODAL_CLOSE}"]` ).forEach((ele) => { ele.addEventListener('click', () => { this.setCookie_(COOKIE_TIPS_NAME, 1, COOKIE_TIPS_EXPIRES); apis.close(); }); }); const marketModalConfirmElement = SPZCore.Dom.scopedQuerySelector( lightbox, `[role="${MARKET_MODAL_CONFIRM}"]` ); if (marketModalConfirmElement && this.ipMatchingMarket?.url) { marketModalConfirmElement.addEventListener('click', () => { this.setCookie_(COOKIE_TIPS_NAME, 1, COOKIE_TIPS_EXPIRES); this.setCookie_(MARKET_COUNTRY_COOKIE, this.ipMatchingMarket?.name); this.handleChangeURL_(this.ipMatchingMarket?.url); }); } const marketModalReselectElement = SPZCore.Dom.scopedQuerySelector( lightbox, `[role="${MARKET_MODAL_RESELECT}"]` ); if (marketModalReselectElement) { marketModalReselectElement.addEventListener('click', () => { this.setCookie_(COOKIE_TIPS_NAME, 1, COOKIE_TIPS_EXPIRES); const marketReselectTemplate = SPZCore.Dom.scopedQuerySelector( this.element, `[role="${MARKET_RESELECT_MODAL}"]` ); if (marketReselectTemplate && lightbox.firstElementChild) { const clonedTemplate = self.document.importNode( marketReselectTemplate.content, true ); const selectParent = SPZCore.Dom.scopedQuerySelector( clonedTemplate, `[role="${MARKET_MODAL_RESELECT_COUNTRY_SELECT}"]` ); if (selectParent) { this.createSelect_({ parent: selectParent, defaultValue: this.getDefaultCountryValue_(), dataList: this.marketCountryList.map( this.mapCountryRenderData_ ), listElementWithTemplate: this.getListElementWithTemplate_( MARKET_COUNTRY_SELECT ), itemHandler: this.handleCountrySelectChange_.bind(this), }); } lightbox.replaceChild(clonedTemplate, lightbox.firstElementChild); SPZCore.Dom.scopedQuerySelectorAll( lightbox, `[role="${MARKET_MODAL_CLOSE}"]` ).forEach((ele) => { ele.addEventListener('click', () => { this.setCookie_(COOKIE_TIPS_NAME, 1, COOKIE_TIPS_EXPIRES); apis.close(); }); }); } }); } apis.open(); }); } } async getMarketThemeSettings_() { return this.xhr_.fetchJson(MARKET_THEME_SETTINGS).then((res) => { this.useCountrySelect_ = !!res.country_selector_enabled; this.useLanguageSelect_ = !!res.language_selector_enabled && this.global?.market?.market_id; this.useModal_ = !!res.redirect_pop_enabled; return res; }); } async getCountryList_() { return this.xhr_.fetchJson(MARKET_COUNTRIES).then((res) => { this.marketCountryList = res.data.length ? res.data : []; return res; }); } async getIpMatchingMarket_() { return this.xhr_.fetchJson(IP_MATCHING_MARKET, { method: 'POST', body: { stations: [], }, }); } async getMarketLanguages_(marketId) { return this.xhr_ .fetchJson(MARKET_LANGUAGES.replace(/:id/gim, marketId)) .then((res) => { this.marketLanguages = res?.languages?.length ? res.languages : []; return res; }); } hasCookie_(name) { const m = self.document.cookie .split(';') .filter((pair) => pair.trim().startsWith(name + '=')); return !!(m && m[0]); } getCookie_(name) { const m = self.document.cookie .split(';') .filter((pair) => pair.trim().startsWith(name + '=')); return m && m[0] ? m[0].split('=')[1] : null; } setCookie_(name, value, expires) { const expiresDate = new Date(Date.now() + expires).toGMTString(); self.document.cookie = `${name}=${encodeURIComponent( value )};expires=${expiresDate};path=/`; } } SPZ.defineElement('spz-custom-market', SpzCustomMarket);

Account

Close

Home
Best seller
New Arrival
Designers' Pick
Clearance Sale
Two Pieces
Jumpsuit
Dresses
Party dress
Kaftans
Abayas
Accessories
- Accessories
- Necklaces
- Bracelets
- Rings
- Earrings
- Watches
- Sets
- Handbag
Kids
Log in
Create an account

const SITE = (window.C_SETTINGS || window[atob('U0hPUExBWlpB')])?.routes?.root || ''; const MARKET_THEME_SETTINGS = `${SITE}/api/markets/theme_setting`; const MARKET_COUNTRIES = `${SITE}/api/markets/countries`; const IP_MATCHING_MARKET = `${SITE}/api/front/station`; const MARKET_LANGUAGES = `${SITE}/api/markets/:id/active_languages`; const URL_REDIRECT = '_market_redirected'; const COOKIE_TIPS_NAME = 'market_no_tips'; const COOKIE_TIPS_EXPIRES = 1000 * 60 * 60 * 24 * 14; const MARKET_COUNTRY_COOKIE = '_shoplazza_market_country'; const MARKET_MODAL_LOADED = '__market_modal_loaded__'; const PROPERTY_SELECTED = 'selected'; const MARKET_PC_HEADER_TRIGGER = 'market-pc-header-trigger'; const MARKET_PC_HEADER_COUNTRY_SELECT_TITLE = 'market-pc-header-country-select-title'; const MARKET_PC_HEADER_LANGUAGE_SELECT_TITLE = 'market-pc-header-language-select-title'; const MARKET_PC_HEADER_LANGUAGE_SELECT_SUB_TITLE = 'market-pc-header-language-select-sub-title'; const MARKET_PC_HEADER_COUNTRY_SELECT_SUB_TITLE = 'market-pc-header-country-select-sub-title'; const MARKET_FLAG = 'market-flag'; const MARKET_SELECT_VALUE = 'market-select-value'; const MARKET_CURRENCY = 'market-currency'; const MARKET_CURRENCY_SYMBOL = 'market-currency-symbol'; const MARKET_SELECT_ITEM = 'market-select-item'; const MARKET_SELECT_ITEM_ID = 'market-select-item-id'; const MARKET_SELECT_LIST = 'market-select-list'; const MARKET_LANGUAGE_SELECT = 'market-language-select'; const MARKET_COUNTRY_SELECT = 'market-country-select'; const MARKET_MODAL = 'market-modal'; const MARKET_GATEWAY_REDIRECT_MODAL = 'market-gateway-redirect-modal'; const MARKET_RESELECT_MODAL = 'market-reselect-modal'; const MARKET_MODAL_FLAG = 'market-modal-flag'; const MARKET_MODAL_COUNTRY_CODE = 'market-modal-country-code'; const MARKET_MODAL_CURRENCY_SYMBOL = 'market-modal-currency-symbol'; const MARKET_MODAL_CLOSE = 'market-modal-close'; const MARKET_MODAL_CONFIRM = 'market-modal-confirm'; const MARKET_MODAL_RESELECT = 'market-modal-reselect'; const MARKET_MODAL_RESELECT_COUNTRY_SELECT = 'market-modal-reselect-country-select'; const DATA_SECTION_TYPE = 'data-section-type'; const SECTION_TYPE_HEADER = 'header'; const SECTION_TYPE_FOOTER = 'footer'; class SpzCustomMarket extends SPZ.BaseElement { constructor(element) { super(element); this.global = null; this.useCountrySelect_ = false; this.useLanguageSelect_ = false; this.useModal_ = false; this.isSingleSelectMode_ = false; this.blockSectionPosition_ = ''; this.isEditMode = false; this.ipMatchingMarket = null; this.marketCountryList = []; this.marketLanguages = []; this.toast = null; } static deferredMount() { return false; } isLayoutSupported(layout) { return layout == SPZCore.Layout.LOGIC; } buildCallback() { console.debug('Geolocation'); this.xhr_ = SPZServices.xhrFor(this.win); const platform = SPZServices.platformFor(this.win); this.isIOS_ = platform.isIos(); this.action_ = SPZServices.actionServiceForDoc(this.element); this.global = this.win.C_SETTINGS || this.win[atob('U0hPUExBWlpB')]; this.isEditMode = new URLSearchParams(this.win.location.search).get('preview_theme_id') && new URLSearchParams(this.win.location.search).get('oseid'); this.init_(); } showToast_(content) { if (!this.toast) { this.toast = self.document.createElement('ljs-toast'); this.toast.setAttribute('layout', 'nodisplay'); this.toast.setAttribute('hidden', ''); this.toast.setAttribute('duration', '2000'); this.element.appendChild(this.toast); } SPZ.whenApiDefined(this.toast).then((apis) => { apis.showToast(content); }); } triggerEvent_(name, data) { const event = SPZUtils.Event.create(this.win, `${TAG}.${name}`, data); this.action_.trigger(this.element, name, event); } findBlockSectionPosition() { let current = this.element; while (current) { const dataSectionType = current.getAttribute(DATA_SECTION_TYPE); if ( dataSectionType === SECTION_TYPE_HEADER || dataSectionType === SECTION_TYPE_FOOTER ) { return dataSectionType; } current = current.parentElement; } return ''; } async initSettings_() { await this.getMarketThemeSettings_(); if (this.useCountrySelect_) { this.element.setAttribute('use-country-select', true); } if (this.useLanguageSelect_) { this.element.setAttribute('use-language-select', true); } if (this.useModal_) { this.element.setAttribute('use-modal', true); } if ( (this.useCountrySelect_ && !this.useLanguageSelect_) || (!this.useCountrySelect_ && this.useLanguageSelect_) ) { this.isSingleSelectMode_ = true; } this.blockSectionPosition_ = this.findBlockSectionPosition(); this.isPCLayout_ = this.win.matchMedia('(min-width: 960px)').matches; } renderMarketSelectTemplateNode_(clonedTemplate, data) { this.renderTemplateImg_(clonedTemplate, MARKET_FLAG, { src: data?.flag, width: '24', height: '24', }); this.renderTemplateElement_( clonedTemplate, MARKET_SELECT_VALUE, data.value ); this.renderTemplateElement_( clonedTemplate, MARKET_CURRENCY, data?.currency ); this.renderTemplateElement_( clonedTemplate, MARKET_CURRENCY_SYMBOL, data?.currencySymbol ); } bindDropdownOpenClickEvent_(triggerElement, dropdown) { if (!triggerElement) return; const triggerOpen = () => { SPZ.whenApiDefined(dropdown).then((apis) => { if (!dropdown.hasAttribute('open')) { apis.open(triggerElement); } }); }; if (this.isIOS_) { triggerElement.addEventListener('touchstart', triggerOpen); } else { triggerElement.addEventListener('click', triggerOpen); } } createDropdown_() { const dropdown = self.document.createElement('ljs-dropdown'); dropdown.setAttribute('layout', 'nodisplay'); if (this.blockSectionPosition_ === 'header') { dropdown.setAttribute('overlay-style', 'top: 4px;'); dropdown.setAttribute('placement', 'bottomRight'); } else if (this.blockSectionPosition_ === 'footer') { dropdown.setAttribute('overlay-style', 'top: -4px;'); dropdown.setAttribute('placement', 'top'); } return dropdown; } createDropdownIcon_() { const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svgElement.setAttribute("class", "market-rotate-180"); svgElement.setAttribute("width", "16"); svgElement.setAttribute("height", "16"); const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path"); path1.setAttribute("d", "M7.47 5.172a.75.75 0 0 1 1.06 0l4.596 4.596a.75.75 0 1 1-1.06 1.06L7.468 6.232a.75.75 0 0 1 0-1.06Z"); path1.setAttribute("fill", "currentColor"); const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path"); path2.setAttribute("d", "M8.533 5.172a.75.75 0 0 1 0 1.06l-4.596 4.596a.75.75 0 1 1-1.061-1.06l4.596-4.596a.75.75 0 0 1 1.06 0Z"); path2.setAttribute("fill", "currentColor"); svgElement.appendChild(path1); svgElement.appendChild(path2); return svgElement; } renderDropdownListWithClickEvent_({ triggerElement, dataList, subTitleRole, listElementWithTemplate, defaultValue, itemHandler, shouldUpdateSelectedItem = false, }) { const dropdown = this.createDropdown_(); const itemTemplate = SPZCore.Dom.scopedQuerySelector( listElementWithTemplate, 'template' ); const clonedItemTemplate = itemTemplate.cloneNode(true); const fragment = self.document.createDocumentFragment(); dataList.forEach((data) => { const tempParentNode = self.document.createElement('div'); const clonedTemplate = self.document.importNode( clonedItemTemplate.content, true ); tempParentNode.appendChild(clonedTemplate); tempParentNode.firstElementChild.classList.add( 'market-select-item' ); this.renderMarketSelectTemplateNode_(tempParentNode, data); const selectItemElement = SPZCore.Dom.scopedQuerySelector( tempParentNode, `[role="${MARKET_SELECT_ITEM}"]` ); if (!selectItemElement) { return; } if (defaultValue === data.value) { if (shouldUpdateSelectedItem) { const clonedSelectItemElement = selectItemElement.cloneNode(true); triggerElement.replaceChild( clonedSelectItemElement, triggerElement.firstElementChild ); } selectItemElement.setAttribute(PROPERTY_SELECTED, ''); } selectItemElement.setAttribute(MARKET_SELECT_ITEM_ID, data.value); fragment.appendChild(tempParentNode.firstElementChild); }); let value = defaultValue; listElementWithTemplate.addEventListener( 'click', (e) => { if (this.isEditMode) { this.showToast_('编辑器下不支持切换国家'); SPZ.whenApiDefined(dropdown).then((apis) => { apis.close(); }); return; } let targetElement = e.target; while (targetElement) { if ( !targetElement || targetElement.getAttribute(MARKET_SELECT_ITEM_ID) ) { break; } targetElement = targetElement.parentNode; } if ( !targetElement || !targetElement.hasAttribute(MARKET_SELECT_ITEM_ID) ) { return; } const selectValue = targetElement.getAttribute(MARKET_SELECT_ITEM_ID); if (value === selectValue) { SPZ.whenApiDefined(dropdown).then((apis) => { apis.close(); }); return; } const selectedData = dataList.find((c) => c.value === selectValue); if (shouldUpdateSelectedItem) { const tempParentNode = self.document.createElement('div'); const clonedTemplate = self.document.importNode( clonedItemTemplate.content, true ); tempParentNode.appendChild(clonedTemplate); this.renderMarketSelectTemplateNode_(tempParentNode, selectedData); tempParentNode.firstElementChild.classList.add( 'market-select-item' ); triggerElement.replaceChild( tempParentNode.firstElementChild, triggerElement.firstElementChild ); } value = selectValue; itemHandler?.(selectedData); SPZ.whenApiDefined(dropdown).then((apis) => { apis.close(); }); }, false ); listElementWithTemplate.removeChild(itemTemplate); listElementWithTemplate.appendChild(fragment); listElementWithTemplate.classList.add('market-select-list'); dropdown.appendChild(listElementWithTemplate); if (subTitleRole) { this.renderSelectTitle_(dropdown, subTitleRole); } return dropdown; } createSelect_({ parent, defaultValue, dataList, listElementWithTemplate, itemHandler, titleRole, }) { const triggerElement = self.document.createElement('div'); triggerElement.classList.add('market-select'); const displayElement = self.document.createElement('div'); triggerElement.appendChild(displayElement); triggerElement.appendChild(this.createDropdownIcon_()); const dropdown = this.renderDropdownListWithClickEvent_({ triggerElement, dataList, listElementWithTemplate, defaultValue, itemHandler, shouldUpdateSelectedItem: true, }); this.bindDropdownOpenClickEvent_(triggerElement, dropdown); const dropdownContainer = self.document.createElement('div'); dropdownContainer.appendChild(triggerElement); dropdownContainer.appendChild(dropdown); dropdownContainer.classList.add('market-select-container'); this.renderSelectTitle_(dropdownContainer, titleRole); parent.appendChild(dropdownContainer); } getListElementWithTemplate_(role) { const template = SPZCore.Dom.scopedQuerySelector( this.element, `[role="${role}"]` ); if (template) { const clonedTemplate = template.cloneNode(true); const tempParent = self.document.createElement("div"); tempParent.appendChild(clonedTemplate.content); const listElementWithTemplate = SPZCore.Dom.scopedQuerySelector( tempParent, `[role="${MARKET_SELECT_LIST}"]` ); return listElementWithTemplate; } return null; } renderSelectTitle_(parent, role) { if (!parent || !role) { return; } const template = SPZCore.Dom.scopedQuerySelector( this.element, `[role="${role}"]` ); const content = self.document.importNode(template.content, true); parent.insertBefore(content, parent.firstElementChild); parent.firstElementChild.classList.add( role.includes('sub') ? 'market-pc-header-select-sub-title' : 'market-pc-header-select-title' ); } initSelect_(rootNode, options) { const parent = rootNode || this.element; if (this.useCountrySelect_) { this.createSelect_({ parent, titleRole: options?.shouldRenderSelectTitle ? MARKET_PC_HEADER_COUNTRY_SELECT_TITLE : undefined, defaultValue: this.getDefaultCountryValue_(), dataList: this.marketCountryList.map(this.mapCountryRenderData_), listElementWithTemplate: this.getListElementWithTemplate_( MARKET_COUNTRY_SELECT ), itemHandler: this.handleCountrySelectChange_.bind(this), }); } if (this.useLanguageSelect_) { this.createSelect_({ parent, titleRole: options?.shouldRenderSelectTitle ? MARKET_PC_HEADER_LANGUAGE_SELECT_TITLE : undefined, defaultValue: this.getDefaultLanguageValue_(), dataList: this.marketLanguages.map(this.mapLanguageRenderData_), listElementWithTemplate: this.getListElementWithTemplate_( MARKET_LANGUAGE_SELECT ), itemHandler: this.handleLanguageSelectChange_.bind(this), }); } } initPcHeaderTriggerElement() { const headerTriggerElementTemplate = SPZCore.Dom.scopedQuerySelector( this.element, `[role="${MARKET_PC_HEADER_TRIGGER}"]` ); const headerTriggerElement = self.document.importNode( headerTriggerElementTemplate.content, true ); const parentDivElement = self.document.createElement('div'); parentDivElement.setAttribute('role', MARKET_PC_HEADER_TRIGGER); parentDivElement.appendChild(headerTriggerElement); this.element.removeChild(headerTriggerElementTemplate); return parentDivElement; } initPanelWithSelect_() { const triggerElement = this.initPcHeaderTriggerElement(); const dropdown = this.createDropdown_(); const panelElement = self.document.createElement('div'); panelElement.classList.add('market-panel'); this.initSelect_(panelElement, {shouldRenderSelectTitle: true}); dropdown.appendChild(panelElement); this.bindDropdownOpenClickEvent_(triggerElement, dropdown); this.element.appendChild(triggerElement); this.element.insertBefore(dropdown, triggerElement); } initSingleSelectDropdown_() { const triggerElement = this.initPcHeaderTriggerElement(); let dropdown; if (this.useCountrySelect_) { dropdown = this.renderDropdownListWithClickEvent_({ triggerElement, subTitleRole: MARKET_PC_HEADER_COUNTRY_SELECT_SUB_TITLE, dataList: this.marketCountryList.map(this.mapCountryRenderData_), listElementWithTemplate: this.getListElementWithTemplate_( MARKET_COUNTRY_SELECT ), defaultValue: this.getDefaultCountryValue_(), itemHandler: this.handleCountrySelectChange_.bind(this), }); } else if (this.useLanguageSelect_) { dropdown = this.renderDropdownListWithClickEvent_({ triggerElement, subTitleRole: MARKET_PC_HEADER_LANGUAGE_SELECT_SUB_TITLE, dataList: this.marketLanguages.map(this.mapLanguageRenderData_), listElementWithTemplate: this.getListElementWithTemplate_( MARKET_LANGUAGE_SELECT ), defaultValue: this.getDefaultLanguageValue_(), itemHandler: this.handleLanguageSelectChange_.bind(this), }); } if (dropdown) { this.bindDropdownOpenClickEvent_(triggerElement, dropdown); this.element.appendChild(triggerElement); this.element.appendChild(dropdown); } } initEntry_() { if (this.blockSectionPosition_ === SECTION_TYPE_HEADER) { if (this.isSingleSelectMode_) { this.initSingleSelectDropdown_(); } else if (this.useCountrySelect_ && this.useLanguageSelect_) { this.initPanelWithSelect_(); } } this.initSelect_(this.element); } async initData_() { const promises = []; if (this.useCountrySelect_ || this.useModal_) { promises.push(this.getCountryList_(), this.getIpMatchingMarket_()); } if (this.useLanguageSelect_) { promises.push(this.getMarketLanguages_(this.global.market.market_id)); } return Promise.all(promises).then((results) => { const ipMatchingMarket = results.find((result) => result.hasOwnProperty('matching_station') ); const marketCountryList = results.find((result) => result.hasOwnProperty('data') ); if (ipMatchingMarket && marketCountryList) { this.ipMatchingMarket = ipMatchingMarket?.matching_station?.find?.( (item) => item.type === 'multiple_market' ) || { img: marketCountryList.length ? marketCountryList?.[0]?.detail && marketCountryList[0].detail?.flag : '', }; } }); } initModal_() { if ( this.isEditMode || !this.ipMatchingMarket?.market_id || !this.useModal_ || this.hasCookie_(COOKIE_TIPS_NAME) || this.win[MARKET_MODAL_LOADED] ) { return; } this.win[MARKET_MODAL_LOADED] = true; const redirectParam = new URLSearchParams(this.win.location.search).get( URL_REDIRECT ); if (redirectParam) { this.initModalEntry_(MARKET_GATEWAY_REDIRECT_MODAL); } else if ( this.ipMatchingMarket.market_id !== this.global?.market?.market_id ) { this.initModalEntry_(MARKET_MODAL); } } async init_() { await this.initSettings_(); await this.initData_(); this.initEntry_(); this.initModal_(); } getDefaultCountryValue_() { return this.getCookie_(MARKET_COUNTRY_COOKIE) || this.marketCountryList[0]?.country_code; } mapCountryRenderData_(country) { return { flag: country?.detail?.flag || '', value: country?.country_code, currency: country?.currency, currencySymbol: country?.symbol?.val || '', url: country?.url, }; } handleCountrySelectChange_(selectedData) { this.setCookie_(MARKET_COUNTRY_COOKIE, selectedData.value); this.handleChangeURL_(selectedData.url); } getDefaultLanguageValue_() { return this.marketLanguages?.find?.( (lang) => lang.code === this.global?.market?.market_lang )?.name; } mapLanguageRenderData_(language) { return { value: language.name, url: language.url, }; } handleLanguageSelectChange_(selectedData) { this.handleChangeURL_(selectedData.url); } renderTemplateElement_(parent, role, value) { const elements = SPZCore.Dom.scopedQuerySelectorAll( parent, `[role="${role}"]` ); elements.forEach((element) => { if (element && value) { element.innerHTML = value; } }); } renderTemplateImg_(parent, role, options) { const flagElement = SPZCore.Dom.scopedQuerySelector( parent, `[role="${role}"]` ); if (flagElement && options?.src && options?.height && options?.width) { const spzImg = self.document.createElement('ljs-img'); spzImg.setAttribute('src', options.src); spzImg.setAttribute('layout', 'responsive'); spzImg.setAttribute('width', options.width); spzImg.setAttribute('height', options.height); spzImg.setAttribute( 'style', `width: ${options.width}px; height: ${options.height}px;` ); flagElement.appendChild(spzImg); } } handleChangeURL_(url) { if (!!url) { let {origin, pathname, search} = this.win.location; pathname = pathname.replace(SITE, url != '/' ? url : ''); this.win.location.href = `${origin}${pathname}${search}`; } else { this.win.location.reload(true); } } initModalEntry_(role) { const marketModalTemplate = SPZCore.Dom.scopedQuerySelector( this.element, `[role="${role}"]` ); if (marketModalTemplate) { const tempParentNode = self.document.createElement('div'); const clonedTemplate = self.document.importNode( marketModalTemplate.content, true ); tempParentNode.appendChild(clonedTemplate); this.renderTemplateImg_(tempParentNode, MARKET_MODAL_FLAG, { src: this.ipMatchingMarket?.img, width: '80', height: '80', }); this.renderTemplateElement_( tempParentNode, MARKET_MODAL_COUNTRY_CODE, this.ipMatchingMarket?.name ); this.renderTemplateElement_( tempParentNode, MARKET_MODAL_CURRENCY_SYMBOL, this.ipMatchingMarket?.currency_with_symbol ); const lightbox = self.document.createElement('ljs-lightbox'); lightbox.setAttribute('layout', 'nodisplay'); lightbox.appendChild(tempParentNode.firstElementChild); self.document.body.appendChild(lightbox); SPZ.whenApiDefined(lightbox).then((apis) => { SPZCore.Dom.scopedQuerySelectorAll( lightbox, `[role="${MARKET_MODAL_CLOSE}"]` ).forEach((ele) => { ele.addEventListener('click', () => { this.setCookie_(COOKIE_TIPS_NAME, 1, COOKIE_TIPS_EXPIRES); apis.close(); }); }); const marketModalConfirmElement = SPZCore.Dom.scopedQuerySelector( lightbox, `[role="${MARKET_MODAL_CONFIRM}"]` ); if (marketModalConfirmElement && this.ipMatchingMarket?.url) { marketModalConfirmElement.addEventListener('click', () => { this.setCookie_(COOKIE_TIPS_NAME, 1, COOKIE_TIPS_EXPIRES); this.setCookie_(MARKET_COUNTRY_COOKIE, this.ipMatchingMarket?.name); this.handleChangeURL_(this.ipMatchingMarket?.url); }); } const marketModalReselectElement = SPZCore.Dom.scopedQuerySelector( lightbox, `[role="${MARKET_MODAL_RESELECT}"]` ); if (marketModalReselectElement) { marketModalReselectElement.addEventListener('click', () => { this.setCookie_(COOKIE_TIPS_NAME, 1, COOKIE_TIPS_EXPIRES); const marketReselectTemplate = SPZCore.Dom.scopedQuerySelector( this.element, `[role="${MARKET_RESELECT_MODAL}"]` ); if (marketReselectTemplate && lightbox.firstElementChild) { const clonedTemplate = self.document.importNode( marketReselectTemplate.content, true ); const selectParent = SPZCore.Dom.scopedQuerySelector( clonedTemplate, `[role="${MARKET_MODAL_RESELECT_COUNTRY_SELECT}"]` ); if (selectParent) { this.createSelect_({ parent: selectParent, defaultValue: this.getDefaultCountryValue_(), dataList: this.marketCountryList.map( this.mapCountryRenderData_ ), listElementWithTemplate: this.getListElementWithTemplate_( MARKET_COUNTRY_SELECT ), itemHandler: this.handleCountrySelectChange_.bind(this), }); } lightbox.replaceChild(clonedTemplate, lightbox.firstElementChild); SPZCore.Dom.scopedQuerySelectorAll( lightbox, `[role="${MARKET_MODAL_CLOSE}"]` ).forEach((ele) => { ele.addEventListener('click', () => { this.setCookie_(COOKIE_TIPS_NAME, 1, COOKIE_TIPS_EXPIRES); apis.close(); }); }); } }); } apis.open(); }); } } async getMarketThemeSettings_() { return this.xhr_.fetchJson(MARKET_THEME_SETTINGS).then((res) => { this.useCountrySelect_ = !!res.country_selector_enabled; this.useLanguageSelect_ = !!res.language_selector_enabled && this.global?.market?.market_id; this.useModal_ = !!res.redirect_pop_enabled; return res; }); } async getCountryList_() { return this.xhr_.fetchJson(MARKET_COUNTRIES).then((res) => { this.marketCountryList = res.data.length ? res.data : []; return res; }); } async getIpMatchingMarket_() { return this.xhr_.fetchJson(IP_MATCHING_MARKET, { method: 'POST', body: { stations: [], }, }); } async getMarketLanguages_(marketId) { return this.xhr_ .fetchJson(MARKET_LANGUAGES.replace(/:id/gim, marketId)) .then((res) => { this.marketLanguages = res?.languages?.length ? res.languages : []; return res; }); } hasCookie_(name) { const m = self.document.cookie .split(';') .filter((pair) => pair.trim().startsWith(name + '=')); return !!(m && m[0]); } getCookie_(name) { const m = self.document.cookie .split(';') .filter((pair) => pair.trim().startsWith(name + '=')); return m && m[0] ? m[0].split('=')[1] : null; } setCookie_(name, value, expires) { const expiresDate = new Date(Date.now() + expires).toGMTString(); self.document.cookie = `${name}=${encodeURIComponent( value )};expires=${expiresDate};path=/`; } } SPZ.defineElement('spz-custom-market', SpzCustomMarket);

Below 100AED

163 Products

163 Products

Cubic Zirconia Alloy Star Moon Two Tone Stud Earrings

Cubic Zirconia Alloy Star Moon Two Tone Stud Earrings

Cubic Zirconia Alloy Star Moon Two Tone Stud Earrings

$25

Rhinestone Necklace Bracelet Earrings Women's Bride Accessories Set

Rhinestone Necklace Bracelet Earrings Women's Bride Accessories Set

Rhinestone Necklace Bracelet Earrings Women's Bride Accessories Set

$22

Rhinestone Necklace Bracelet Earrings Women's Three-piece Set Accessories

Rhinestone Necklace Bracelet Earrings Women's Three-piece Set Accessories

Rhinestone Necklace Bracelet Earrings Women's Three-piece Set Accessories

$22

Droplet Design Necklace Bracelet Earrings Bride Accessories Set

Droplet Design Necklace Bracelet Earrings Bride Accessories Set

Droplet Design Necklace Bracelet Earrings Bride Accessories Set

$22

Palace Style Openwork Flower Carving Vintage Wide Bracelet

Palace Style Openwork Flower Carving Vintage Wide Bracelet

Palace Style Openwork Flower Carving Vintage Wide Bracelet

$15

Diamond Wedding Earrings Bracelet Necklace Three Pieces Set

Diamond Wedding Earrings Bracelet Necklace Three Pieces Set

Diamond Wedding Earrings Bracelet Necklace Three Pieces Set

From $5 $13

-62%

Gold Plated Openwork Jewelry Bridal Wedding Bracelet

Gold Plated Openwork Jewelry Bridal Wedding Bracelet

$15

Vintage Embossed Punk Wide Brim Bracelet

Vintage Embossed Punk Wide Brim Bracelet

Vintage Embossed Punk Wide Brim Bracelet

$17

Pearl Handmade Wire Link Bracelet

Pearl Handmade Wire Link Bracelet

Pearl Handmade Wire Link Bracelet

$20

Gold Plated Openwork Accessory Bridal Bracelet

Gold Plated Openwork Accessory Bridal Bracelet

$15

Sparkling Elegant Earrings Necklace Two Piece Set

Sparkling Elegant Earrings Necklace Two Piece Set

Sparkling Elegant Earrings Necklace Two Piece Set

$21

Fashion Exaggerated Wide Edge Drum Bracelet

Fashion Exaggerated Wide Edge Drum Bracelet

Fashion Exaggerated Wide Edge Drum Bracelet

$25

Retro smeared craft pattern fragrant flower spring bracelet

Retro smeared craft pattern fragrant flower spring bracelet

Retro smeared craft pattern fragrant flower spring bracelet

$12

Round Rhinestone Alloy Necklace

Round Rhinestone Alloy Necklace

Round Rhinestone Alloy Necklace

$25

Gold Plated Bracelet Ring Bridal Wedding Jewelry

Gold Plated Bracelet Ring Bridal Wedding Jewelry

$20

Gold Plated Copper Wheat Ear Wedding Dust Gold Bracelet Ring Set of Two

Gold Plated Copper Wheat Ear Wedding Dust Gold Bracelet Ring Set of Two

$15

Blue Rhinestone Necklace Women's Accessories Three-piece Set

Blue Rhinestone Necklace Women's Accessories Three-piece Set

Blue Rhinestone Necklace Women's Accessories Three-piece Set

$22

Stainless Steel Openwork Arabian Muslim Necklace

Stainless Steel Openwork Arabian Muslim Necklace

Stainless Steel Openwork Arabian Muslim Necklace

$25

Blue Crystal Earrings Bracelet Necklace Three Pieces Set

Blue Crystal Earrings Bracelet Necklace Three Pieces Set

Blue Crystal Earrings Bracelet Necklace Three Pieces Set

$5 $18

-72%

Hollow Design Tassel Bracelet And Ring

Hollow Design Tassel Bracelet And Ring

Hollow Design Tassel Bracelet And Ring

$15

Red Green Crystal Heart with Tennis Chain Necklace

Red Green Crystal Heart with Tennis Chain Necklace

Red Green Crystal Heart with Tennis Chain Necklace

$19 $29

-34%

Shiny Rhinestone Hoop Earrings Jewelry for Women

Shiny Rhinestone Hoop Earrings Jewelry for Women

Shiny Rhinestone Hoop Earrings Jewelry for Women

$19 $39

-51%

Luxury Rhinestone Big Flower Ear Clip Earrings for Women

Luxury Rhinestone Big Flower Ear Clip Earrings for Women

Luxury Rhinestone Big Flower Ear Clip Earrings for Women

$19 $29

-34%

Rhinestone Wing Shape Women Stud Earrings

Rhinestone Wing Shape Women Stud Earrings

Rhinestone Wing Shape Women Stud Earrings

$20 $29

-31%

Luxury Black Rhinestone Long Tassel Drop Earrings

Luxury Black Rhinestone Long Tassel Drop Earrings

Luxury Black Rhinestone Long Tassel Drop Earrings

$19 $32

-41%

8mm Tennis White Bracelet

8mm Tennis White Bracelet

8mm Tennis White Bracelet

From $26

Rhinestone Crystals Drop Earrings

Rhinestone Crystals Drop Earrings

Rhinestone Crystals Drop Earrings

$19 $29

-34%

Marquise Flower Full Mirco Paved Crystal Earrings

Marquise Flower Full Mirco Paved Crystal Earrings

Marquise Flower Full Mirco Paved Crystal Earrings

$24 $34

-29%

Rhinestone LuxuryTassel Drop Dangle Earrings For Women Party Jewelry

Rhinestone LuxuryTassel Drop Dangle Earrings For Women Party Jewelry

Rhinestone LuxuryTassel Drop Dangle Earrings For Women Party Jewelry

$19 $29

-34%

Rhinestone Tassel Back Crystal Long Drop Clip Earrings

Rhinestone Tassel Back Crystal Long Drop Clip Earrings

Rhinestone Tassel Back Crystal Long Drop Clip Earrings

$19 $29

-34%

Bling Cubic Zircon Elegant Tassels Earrings For Women

Bling Cubic Zircon Elegant Tassels Earrings For Women

Bling Cubic Zircon Elegant Tassels Earrings For Women

$22 $36

-39%

Personality Asymmetric Star Moon Drop Earrings

Personality Asymmetric Star Moon Drop Earrings

Personality Asymmetric Star Moon Drop Earrings

$10 $24

-58%

Fashionable Rhinestone Star Moon Earrings

Fashionable Rhinestone Star Moon Earrings

Fashionable Rhinestone Star Moon Earrings

$10 $24

-58%

Asymmetric Hollow Out Star Moon Sun Earrings

Asymmetric Hollow Out Star Moon Sun Earrings

Asymmetric Hollow Out Star Moon Sun Earrings

$17

Fashion Pearl Rhinestone Tassel Single Cuff Earring

Fashion Pearl Rhinestone Tassel Single Cuff Earring

Fashion Pearl Rhinestone Tassel Single Cuff Earring

$15

Gold Plating Women Bridal Wedding Open Bangle Bracelet

Gold Plating Women Bridal Wedding Open Bangle Bracelet

Gold Plating Women Bridal Wedding Open Bangle Bracelet

$16

Gold Plated Asymmetric Leaf Shaped Women's Bangle Bracelet

Gold Plated Asymmetric Leaf Shaped Women's Bangle Bracelet

Gold Plated Asymmetric Leaf Shaped Women's Bangle Bracelet

$15

Fashion Rhinestone Necklace + Bracelet + Earrings

Fashion Rhinestone Necklace + Bracelet + Earrings

Fashion Rhinestone Necklace + Bracelet + Earrings

$12

Bridal Green Crystal Necklace Earrings Two-piece Set

Bridal Green Crystal Necklace Earrings Two-piece Set

Bridal Green Crystal Necklace Earrings Two-piece Set

$11

Lady Zircon Inlaid Star Hoop Earrings

Lady Zircon Inlaid Star Hoop Earrings

Lady Zircon Inlaid Star Hoop Earrings

$12

Sorry, there are no products in this collection.

Subscribe today to hear first about our sales

Thanks for subscribing

We accept

Get in touch

Email us

Follow us

© 2024 STYLIYI

Return & Refund

Terms & Conditions

Cart