STORY

(function() { class SPZCustomProductValidate extends SPZ.BaseElement { constructor(element) { super(element); this.action_ = SPZServices.actionServiceForDoc(this.element); } isLayoutSupported(layout) { return layout == SPZCore.Layout.LOGIC; } buildCallback() { this.setupAction_(); } setupAction_() { this.registerAction('handleProductDetailError', (invocation) => { this.handleProductDetailError_(invocation); }); } handleProductDetailError_(invocation) { const tipText = this.transformToastTips_(invocation.args.content); const container = document.getElementById('product-info-body'); this.waitForElement_('.product-info__variants-tips', container) .then(element => { element.scrollIntoView({ block: 'center' }); this.trigger_('error', tipText); }) .catch((error) => { this.trigger_('error', tipText); console.warn(error); }); } waitForElement_(selector, container = document.body, timeout = 3000) { return new Promise((resolve, reject) => { // 首先检查元素是否已经存在 const element = container.querySelector(selector); if (element) { return resolve(element); } // 设置超时 const timeoutId = setTimeout(() => { observer.disconnect(); reject(new Error(`等待元素 ${selector} 超时`)); }, timeout); // 创建观察器 const observer = new MutationObserver((mutations, obs) => { const element = container.querySelector(selector); if (element) { clearTimeout(timeoutId); obs.disconnect(); resolve(element); } }); // 开始观察指定容器 observer.observe(container, { childList: true, subtree: true }); }); } transformToastTips_(data) { let result = ''; data.split(',').forEach(item => { result += "Please select a {{ name }}".replace(/\{\{\s+name\s+\}\}/g, item); }); return result; } trigger_(name, data) { const event = SPZUtils.Event.create(this.win, 'spz-custom-product-validate.${name}', { data }); this.action_.trigger(this.element, name, event); } } SPZ.defineElement('spz-custom-product-validate', SPZCustomProductValidate); }())