Register
Please fill in the information below:
Already have an account?
Login
const TAG = "spz-custom-popup";
const DISPLAY_TYPE = {
POPUP: "PTT_POPUP" // 弹窗
};
const API = {
LIST: `/api/storefront/promotion/placement/list`, // 获取弹窗列表
REPORT: `/api/storefront/promotion/placement/data/report` // 上报数据
};
const DISPLAY_DEVICE = {
PC_AND_MOBILE: "PD_PC_MOBILE", // PC和移动端
PC: "PD_PC", // PC
MOBILE: "PD_MOBILE" // 移动端
};
const REPORT_EVENT = {
CLICK: "PE_CLICK", // 点击事件
IMPRESSION: "PE_IMPRESSION" // 曝光事件
};
class SpzCustomPopup extends SPZ.BaseElement {
constructor(element) {
super(element);
this.popupList_ = []; // 弹窗数据
this.popupZIndex = 1050; // 弹窗层级
// 节流处理 每5s内多次点击 算一次点击上报
this.throttleReport = this.win.SPZCore.Types.throttle(
this.win,
(data) => {
this.reportData(data)
},
5000
)
}
static deferredMount() {
return false;
}
buildCallback() {
this.action_ = SPZServices.actionServiceForDoc(this.element);
this.templates_ = SPZServices.templatesForDoc(this.element);
this.xhr_ = SPZServices.xhrFor(this.win);
this.setupAction_();
this.viewport_ = this.getViewport();
}
mountCallback() {
this.fetchData_();
}
// 接口请求，获取数据
fetchData_() {
const id = window.SHOPLAZZA.meta.page.template_type === 51 ? window.SHOPLAZZA.meta.page.resource_id : 0;
return this.xhr_.fetchJson(API.LIST, {
method: 'POST',
body: {
page_id: window.SHOPLAZZA.meta.page.template_type,
placement_type: DISPLAY_TYPE.POPUP,
discount_id: id
}
}).then((res) => {
// 请求成功 执行render
this.doRender_(res.list);
}).catch((err) => {
console.error(err);
});
}
// 渲染dom
doRender_(data) {
this.popupList_ = data || [];
if (this.popupList_.length > 0) {
this.popupList_.forEach((item) => {
item.config = JSON.parse(item.config);
})
}
return this.templates_
.findAndRenderTemplate(this.element, { list: this.popupList_ })
.then((el) => {
const children = this.element.querySelector('*:not(template)');
children && SPZCore.Dom.removeElement(children);
this.element.appendChild(el);
})
.then(() => {
// 遍历显示弹窗
this.popupList_.forEach((item) => {
this.showPopup_(item);
});
})
}
showPopup_(popup) {
// 展示弹窗 符合展示条件的弹窗
const $popup = document.querySelector(`#popup-${popup.id}`);
$popup && SPZ.whenApiDefined($popup).then((api)=> {
const isPC = this.viewport_.getWidth() >= 960;
const isMobile = this.viewport_.getWidth() < 960;
const isMatchPCDevice = popup.device === DISPLAY_DEVICE.PC_AND_MOBILE || popup.device === DISPLAY_DEVICE.PC;
const isMatchMobileDevice = popup.device == DISPLAY_DEVICE.PC_AND_MOBILE || popup.device === DISPLAY_DEVICE.MOBILE;
if((isPC && isMatchPCDevice) || (isMobile && isMatchMobileDevice)) {
// 根据推送时间 延迟展示弹窗
setTimeout(() => {
api.open();
}, popup.delay_seconds * 1000);
}
})
}
// 上报数据
async reportData(data) {
this.xhr_.fetchJson(API.REPORT, {
method: "POST",
body: {
placement_id: data.placement_id,
event: data.event
}
});
}
setupAction_() {
this.registerAction('handleTrack', async(invocation) => {
// 如果是主题编辑器则不用处理
if(window.top !== window.self) {
return;
}
const data = invocation.args;
const event = data.event;
// 点击上报 节流处理
if(event === REPORT_EVENT.CLICK) {
await this.throttleReport(data);
} else {
this.reportData(data);
}
});
}
triggerEvent_(name, data) {
const event = SPZUtils.Event.create(this.win, `${ TAG }.${ name }`, data || {});
this.action_.trigger(this.element, name, event);
}
isLayoutSupported(layout) {
return layout == SPZCore.Layout.CONTAINER;
}
}
SPZ.defineElement(TAG, SpzCustomPopup);
${function () {
const renderData = data.data;
const position_bottom = renderData.height;
const model_style = renderData.subwindow_style == "model1" ? "model-type-icon" : "model-type-icon-with-text";
const filterSubwindow = renderData.subwindow.filter(item =>
renderData.subwindow_style == "model1" && item.image || (renderData.subwindow_style == "model2" && (item.image || item.title))
);
const initFoldStyle = renderData.hover_display === 'foldable' && 'fold';
const initShowStyle = renderData.hover_mode != 'permanent' && 'app-floating-hidden';
const is_model_style_follow_theme = renderData.template_style == "follow_theme" && renderData.subwindow_style == "model2";
const is_model_style_custom = renderData.template_style == "custom" && renderData.subwindow_style == "model2"
let isShowApp = false;
let isCustomPage = false;
const current_page_url = 'https://hermes666jack.myshoplaza.com/account/register';
const current_page_type = 'register';
if(renderData.effective_pages.type === 'specify' && renderData.effective_pages.specify_page.includes('custom') && renderData.effective_pages.custom_page.length > 0) {
renderData.effective_pages.custom_page.forEach(item => {
const custom_url = item?.split('?')[0];
if(current_page_url === decodeURI(custom_url)) {
isCustomPage = true;
return;
}
})
}
if(renderData.effective_pages.type === 'all' || (renderData.effective_pages.type === 'specify' && renderData.effective_pages.specify_page.includes(current_page_type)) || isCustomPage) {
isShowApp = true;
}
if(isShowApp && filterSubwindow.length > 0) {
return `
${function() {
if(renderData.hover_mode === "scroll") {
return `
`
} else if (renderData.hover_mode === "threshold_scroll") {
return `
`
} else {
return ``
}
}()}
${function() {
const [firstIem, ...restItems] = filterSubwindow
const item = firstIem;
return `${firstIem ? `
-
`: ''}
${restItems.length > 0 ? `
-
${restItems.map(item => `
`).join('')
}
`: ''
}`
}()}
