const TAG = 'spz-custom-utils';
const DEFAULT_DELAY_TIME = 100;
class SpzCustomUtils extends SPZ.BaseElement {
constructor(element) {
super(element);
this.templates_ = SPZServices.templatesForDoc();
}
buildCallback() {
this.action_ = SPZServices.actionServiceForDoc(this.element);
this.templates_ = SPZServices.templatesForDoc(this.element);
this.xhr_ = SPZServices.xhrFor(this.win);
}
static deferredMount() {
return false;
}
mountCallback() {
}
//判断是否为移动端
isMobile() {
/* 判断机型与处理 */
const u = navigator.userAgent
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // android终端
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
return (isAndroid || isiOS);
};
/**
* url query param to object
* @param {string} url
* @returns {object} query object
*/
params(url) {
url = url || window.location.href;
let params = {};
url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (str, key, value) {
try {
params[key] = decodeURIComponent(value);
} catch (e) {
params[key] = value;
}
});
return params;
};
/**
* @param fn {Function} 实际要执行的函数
* @param delay {Number} 延迟时间，单位是毫秒（ms）
* @return {Function} 返回一个“防反跳”了的函数
*/
debounce(fn, delay) {
// 定时器，用来 setTimeout
let timer;
// 返回一个函数，这个函数会在一个时间区间结束后的 delay 毫秒时执行 fn 函数
return function () {
// 保存函数调用时的上下文和参数，传递给 fn
const context = this;
const args = arguments;
// 每次这个返回的函数被调用，就清除定时器，以保证不执行 fn
clearTimeout(timer);
// 当返回的函数被最后一次调用后（也就是用户停止了某个连续的操作），
// 再过 delay 毫秒就执行 fn
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
};
/* 节流防抖 */
throttle(func, wait, mustRun) {
var timeout,
startTime = new Date();
return function () {
var context = this,
args = arguments,
curTime = new Date();
clearTimeout(timeout);
// 如果达到了规定的触发时间间隔，触发 handler
if (mustRun && curTime - startTime >= mustRun) {
func.apply(context, args);
startTime = curTime;
// 没达到触发间隔，重新设定定时器
} else {
timeout = setTimeout(func, wait);
}
};
};
//滚动加载方法
isToPageEnd(id) {
const $el = document.querySelector(`[data-section-id='${id}']`);
const scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop; //滚动条距离顶部的高度
const clientHeight = window.innerHeight; //当前可视的页面高度
const scrollHeight = document.body.scrollHeight; //当前页面的总高度
const elOffsetTop = $el.getBoundingClientRect().top + window.pageYOffset - document.documentElement.clientTop; // 元素距离文档顶部距离
// 如果改卡片下面还有卡片或者dom,计算滚动加载需要考虑这个高度
const toBottom = scrollHeight - ($el.offsetHeight + elOffsetTop); //元素到浏览器底部的高度
if (scrollTop + clientHeight + toBottom + 100 >= scrollHeight) {
return true;
}
return false;
};
/**
* url 添加前缀
* @param {string} path , 必须是前面有斜杠前缀的路径
* @returns string
*/
prefixionPath(prefix,urlPath) {
if(typeof prefix !== 'string') return ;
if(typeof urlPath !== 'string') return ;
if(urlPath.indexOf('/') !== 0){
throw new Error('prefixPath: urlPath must be start with /');
}
if(prefix.indexOf('/') !== 0){
throw new Error('prefixPath: prefix must be start with /');
}
return prefix+urlPath;
}
/**
* @param {string} urlPath
* @returns {string}
* @example globalizePath('/path_a/path_b')// => '/en/path_a/path_b'
*/
globalizePath(urlPath) {
if(typeof urlPath !== 'string') return ;
if(urlPath.indexOf('/') !== 0){
urlPath = '/'+urlPath;
}
let prefix = ((SHOPLAZZA && SHOPLAZZA.routes && SHOPLAZZA.routes.root) || '');
if(prefix.length>0){
if(prefix.indexOf('/') !== 0){
prefix = '/'+prefix;
}
return this.prefixionPath(prefix,urlPath);
}else{
return urlPath;
}
}
image_padding_bottom(width, height, origin) {
origin = origin || 'limit';
if (width && height) {
const hw_ratio = height / width;
if (origin == 'limit') {
if (hw_ratio < 0.62) {
return '62%';
} else if (hw_ratio > 1.6) {
return '160%';
}
}
return parseInt(hw_ratio * 100) + '%';
}
return '100%';
}
getNumber(str) {
str = str + '';
return str.match(/\d+(\.\d+)?/g) ? Number(str.match(/\d+(\.\d+)?/g)[0]) : str;
};
// 处理货币符号
finance_money_with_shop_symbol(price, onlyNumber) {
const symbol = onlyNumber ? '' : window.SHOPLAZZA.currency_symbol;
const position = window.SHOPLAZZA ? window.SHOPLAZZA.currency_symbol_pos : 'left';
const format = window.SHOPLAZZA ? window.SHOPLAZZA.money_format : 'amount';
if (position == 'right') {
return Number(Number(price) * 1).format(format) + symbol;
}
return symbol + Number(Number(price) * 1).format(format);
};
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, SpzCustomUtils)
${function() {
const options = data.options;
const defaultValue = data.defaultValue || options[0].value;
let defaultText = options[0].text;
const hasOption = Array.apply(null, options).find((option) => {
return option.value === defaultValue;
});
if(hasOption){
defaultText = hasOption.text;
}
return `
`
}()}
const TAG = 'spz-custom-sort';
class SpzCustomSort extends SPZ.BaseElement {
constructor(element) {
super(element);
this.spz_custom_id = '';
}
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_();
}
init() {
this.bindEvent();
}
bindEvent() {
const $selectList = SPZCore.Dom.scopedQuerySelectorAll(
this.element,
".sort_custom_content li"
);
const $customerSelect = SPZCore.Dom.scopedQuerySelector(
this.element,
".sort_custom_select"
);
// 选择下拉选项
Array.from($selectList).forEach((node) => {
SPZUtils.Event.listen(node, 'click', ()=> {
let value = node.getAttribute('value');
let text = node.getAttribute('text');
// 触发selectChange 事件
this.triggerEvent_('selectChange', {
value: value,
name: value
})
$customerSelect.innerHTML = text;
const panelChilds = this.element.querySelectorAll(".sort_custom_panel li");
// 清空其他选项的勾选状态
Array.from(panelChilds).forEach((el) => {
if(el.getAttribute('value') == value) {
el.classList.add("active")
} else {
el.classList.remove('active');
}
})
});
})
}
// 渲染界面
async doRender_(data) {
// 操作该组件的dom id
this.spz_custom_id = data.id;
return this.templates_
.findAndRenderTemplate(this.element, data)
.then((el) => {
const children = this.element.querySelector('*:not(template)');
children && SPZCore.Dom.removeElement(children);
this.element.appendChild(el);
}).then(() => {
this.init();
});
}
setupAction_() {
this.registerAction('render', async(invocation) => {
const data = invocation.args.data;
this.doRender_(data)
});
this.registerAction('handleSelect', async(invocation) => {
const data = invocation.args.data;
});
this.registerAction('handleDropdownOpen', async(invocation) => {
const $selectDropDown = SPZCore.Dom.scopedQuerySelector(
this.element,
".select_drop_down"
);
$selectDropDown.classList.add('select_drop_down_rotate');
});
this.registerAction('handleDropdownClose', async(invocation) => {
const $selectDropDown = SPZCore.Dom.scopedQuerySelector(
this.element,
".select_drop_down"
);
$selectDropDown.classList.remove('select_drop_down_rotate');
});
}
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, SpzCustomSort)
${(function() {
const products = data.products;
const discountType = data.discount_info.discount_type;
const progress = 'PROGRESS_ONGOING';
const product_grid_image_size = "natural";
const product_display = originData?.product_display;
const show_atc = product_display ? product_display?.show_add_to_cart : true;
const show_discount_label = product_display?.show_discount_label || false;
const show_sales_progress = product_display?.sales_progress?.enabled || false;
const sales_progress_format = product_display?.sales_progress?.format || '';
const limit_purchase_tip = data.limit_purchase_tip || "";
const productConfig = product_display?.config && JSON.parse(product_display?.config).color;
const sale_progress_bg = productConfig.sale_bar_background_color;
const sale_progress_bg_start = productConfig.progress_sale_bar_background_color_start;
const sale_progress_bg_end = productConfig.progress_sale_bar_background_color_end;
const sale_count_text = productConfig.sale_bar_atc_color;
const discount_label_start = productConfig.discount_sign_background_color_start;
const discount_label_end = productConfig.discount_sign_background_color_end;
const discount_label_text = productConfig.discount_sign_color;
if(!products.length) return '';
return products.map(product => {
let price = product.price || 0;
let priceMin = product.price_min || 0;
let priceMax = product.price_max || 0;
let compareAtPriceMax = product.compare_at_price_max || 0;
let compareAtPrice = product.compare_at_price || 0;
let title = product.title || '';
let id = product.id || '';
let url = product.url || '';
let type = product.type || '';
let is_sold_out = false;
if (product.available == false && product.inventory_policy != 'continue') {
is_sold_out = true;
}
const soldOutLang1 = "Sold out";
const soldOutLang2 = "Sold out";
const noNeedBtn = discountType !== "DT_MIX_MATCH_BUNDLE" && discountType !== "DT_CLASSIC_BUNDLE";
let imageWidth;
if (product.image.width) {
imageWidth = product.image.width;
} else {
imageWidth = "300px";
}
let imageHeight;
if (product.image.height) {
imageHeight= product.image.height;
} else {
imageHeight = "300px";
}
if (product_grid_image_size !== 'natural') {
imageHeight = (imageWidth * parseFloat(product_grid_image_size)) / 100;
}
const flash_sale_info = product?.flash_sale_info;
const is_flashsale_sold_out = flash_sale_info?.discount_sales_rate == "100";
const off_ratio = flash_sale_info?.off_ratio;
price = flash_sale_info?.discount_price || price;
const defaultVariantTitle = product.variants[0].title.replace('-', '/') || '';
const variantDiscountInfo = product.variants[0].discount_info || {};
const minPurchaseQty = product.discount_min_purchase_qty || product.variants[0].discount_info.discount_min_purchase_qty || 0;
if (product.published) {
return `
x ${minPurchaseQty}
${product.title}
Almost sold out
${flash_sale_info?.discount_sales}
${flash_sale_info?.discount_sales_rate}%
sold
${function(){
if (soldOutLang1){
return `
${soldOutLang1}
`
}else{
return `
${soldOutLang2}
`
}
}()}
`
} else {
return ``;
}
}).join('');
})()}
The activity inventory has been sold out, flash sale discount will not be applied.
Continue Shopping
${function() {
const productData = data;
let product_change_event = '';
let mouse_over_event = '';
let mouse_out_event = '';
const product_options = productData.options.filter(Boolean) || [];
for (let opt of product_options) {
const nameEscape = opt.name.replace(/\/|\\|\s|\'|\"|`|\<|\>/g, '');
product_change_event = product_change_event + `quick-shop-selected-variant-${opt.id}.rerender(data=event.selectedValues.${opt.name});`;
mouse_out_event = mouse_out_event + `quick-shop-selected-variant-${opt.id}.rerender(data=event.selectData.${opt.name});`;
mouse_over_event = mouse_over_event + `@${nameEscape}Mouseover="quick-shop-selected-variant-${opt.id}.rerender(data=event);"`;
}
const selectedVariant = productData.variants.find(v => (v.available && v.is_hit_discount == true)) || productData.variants[0];
return `
`;
}()}
${function() {
const selectedVariant = data.variant || data.variants[0];
const image = selectedVariant.image || data.product.image;
const imageWidth = image?.width || 120;
const imageHeight = image?.height || 120;
return `
`
}()}
${function() {
const defaultVariant = data.variants?.find(v => (v.available && v.is_hit_discount == true)) || data.variants?.[0];
const selectedVariant = data.variant || defaultVariant;
const isHasRrice = (selectedVariant.price || selectedVariant.price == 0) ? true : false;
if(selectedVariant.flash_sale_info && selectedVariant.flash_sale_info.discount_price) {
selectedVariant.price = selectedVariant.flash_sale_info.discount_price;
}
if(data.flash_sale_info && data.flash_sale_info.discount_price) {
data.price = data.flash_sale_info.discount_price;
}
return !!selectedVariant ? `
` : `
-
`;
}()}
${function(){
const defaultVariant = data.variants?.find(v => (v.available && v.is_hit_discount == true)) || data.variants?.[0];
const selectedVariant = data.variant || defaultVariant;
let show_flashsale_limit_tip = false;
let limit_user_product_discount;
if(selectedVariant.flash_sale_info && selectedVariant.flash_sale_info?.limit_user_product_type != "LUPT_NO_LIMIT" && selectedVariant.flash_sale_info?.limit_user_product_discount > 0) {
show_flashsale_limit_tip = true;
limit_user_product_discount = selectedVariant.flash_sale_info?.limit_user_product_discount;
}
if(data.flash_sale_info && data.flash_sale_info?.limit_user_product_type != "LUPT_NO_LIMIT" && data.flash_sale_info?.limit_user_product_discount > 0) {
show_flashsale_limit_tip = true;
limit_user_product_discount = data.flash_sale_info?.limit_user_product_discount;
}
return `
Promo products limited to ${limit_user_product_discount} item per person.
`
}()}
${function() {
const value = (data.originData && data.originData.value) || data.value;
const isHasValue = value ? true : false;
return `
${value}
`
}()}
(function() {
function setupMarquee() {
var marquee = document.querySelector('#promotionBanner .marquee');
if (!marquee) return;
var text = marquee.querySelector('.discount_banner_text');
if (!text) return;
// 仅在文本溢出容器时才启用滚动
if (text.scrollWidth <= marquee.clientWidth + 1) return;
marquee.classList.add('is-scrolling');
// 复制一份文本，与原始文本拼成 .marquee-track 实现无缝循环
var track = document.createElement('div');
track.className = 'marquee-track';
var clone = text.cloneNode(true);
clone.setAttribute('aria-hidden', 'true');
marquee.removeChild(text);
track.appendChild(text);
track.appendChild(clone);
marquee.appendChild(track);
// 速度 ~ 50px/s，对照单份文本宽度计算时长
var duration = text.offsetWidth / 50;
track.style.animation = 'marquee ' + duration + 's linear infinite';
}
if (document.readyState === 'complete') {
setupMarquee();
} else {
window.addEventListener('load', setupMarquee);
}
})();
(function() {
const STATUS = {
LOADING: 'loading',
FINISH: 'finish'
};
const RESULT = {
EMPTY: 'data-empty'
};
class SPZCustomCartSku extends SPZ.BaseElement {
renderData = [];
/**
* add to cart reselect item, and delete process:
* 1. record reselect id before show reselect modal
* 2. add to cart success, mark `needDeleteReselectRecord` to true
* 3. close reselect modal / drawer
* 4. spz-cart re-render, triggered mounted event
* 5. call refresh
*/
// mark delete reselect id
recordReselectId = null;
// mark should delete reselect record after spz-cart mounted event
needDeleteReselectRecord = false;
refreshLock = false;
addToCartSuccess = false;
// cache paused refresh data
refreshDataCache = [];
// cache similar products data, for manual add to cart
similarData = [];
constructor(element) {
super(element);
this.xhr_ = SPZServices.xhrFor(this.win);
this.action_ = SPZServices.actionServiceForDoc(this.element);
}
setupAction_() {
this.registerAction('refresh', (invocation) => {
const data = invocation && invocation.args && invocation.args.data || {};
this.refresh(data);
});
this.registerAction('deleteReselect', SPZCore.Types.debounce(
this.win,
(invocation) => {
this.deleteReselect(invocation?.args?.id);
},
200
));
this.registerAction('deleteInvalid', SPZCore.Types.debounce(
this.win,
(invocation) => {
this.deleteInvalid(invocation?.args?.id);
},
200
));
this.registerAction('setReselectRecordId', (invocation) => {
this.setReselectRecordId(invocation?.args?.id);
});
this.registerAction('clearNeedReselectRecord', (invocation) => {
this.clearNeedReselectRecord();
});
this.registerAction('registerDeleteReselectTask', (invocation) => {
this.registerDeleteReselectTask(invocation?.args?.data);
});
this.registerAction('lockRefresh', (invocation) => {
this.lockRefresh();
});
this.registerAction('releaseRefreshLock', (invocation) => {
this.releaseRefreshLock();
});
this.registerAction('manualAddToCart', (invocation) => {
this.manualAddToCart(invocation?.args?.id);
});
this.registerAction('syncSimilarData', (invocation) => {
this.syncSimilarData(invocation?.args?.data);
});
// DEBUG
this.registerAction('log', (invocation) => {
const data = invocation && invocation.args && invocation.args.data || {};
console.log('log', invocation);
});
}
buildCallback() {
this.setupAction_();
}
isLayoutSupported(layout) {
return true;
}
/**
* 数据去重
* @param {Array} data
*/
uniq_(data) {
const result = [];
for(let i = 0; i < data.length; i++) {
if(!result.includes(data[i])) {
result.push(data[i]);
}
}
return result;
}
checkRefreshLock() {
if (this.refreshLock) {
return false;
}
return true;
}
setLoading(isLoading) {
SPZCore.Dom.toggleAttribute(this.element, STATUS.LOADING, isLoading);
SPZCore.Dom.toggleAttribute(this.element, STATUS.FINISH, !isLoading);
}
setDataResult(data) {
const isDataEmpty = !data.reselectSkus.length && !data.invalidSkus.length && !data.line_items.length;
SPZCore.Dom.toggleAttribute(this.element, RESULT.EMPTY, isDataEmpty);
}
// 存在多次请求顺序问题
async refresh(_data) {
// 接口失败时返回数据不为对象
if (!(typeof _data === 'object' && _data.line_items && _data.line_items.length > 0)) {
const newData = {
line_items: [],
reselectSkus: [],
invalidSkus: [],
displayInvalidSkus: []
};
this.trigger_('refreshError', newData);
this.setLoading(false);
return;
}
if (!this.checkRefreshLock()) {
this.setRefreshCache(_data);
return;
}
this.setLoading(true);
let data = _data;
if (this.needDeleteReselectRecord && this.recordReselectId) {
let hasError = false;
try {
data = await this.deleteReselectRecordBeforeRefresh(_data);
} catch (e) {
hasError = true;
console.error(e);
const newData = {
...data,
reselectSkus: [],
invalidSkus: [],
displayInvalidSkus: []
};
this.trigger_('refreshError', newData);
this.setLoading(false);
this.setDataResult(newData);
return;
}
this.needDeleteReselectRecord = false;
if (hasError) {
return;
}
}
// 获取失效商品
const invisibleItems = data.ineffectives;
// 获取失效商品内仅售罄商品的sku
const soldOutItems = invisibleItems.filter(item => item.reason === "line_item_sold_out");
// 通过失效 sku 获取 spu, 注意去重
const soldOutSpuIds = this.uniq_(soldOutItems.map(item => item.product_id));
const querySpuIds = soldOutSpuIds.map(spuId => `ids[]=${spuId}`).join('&');
if (!soldOutSpuIds.length) {
const newData = {
...data,
reselectSkus: [],
invalidSkus: [],
displayInvalidSkus: []
};
this.trigger_('refreshSuccess', newData);
this.renderData = newData;
this.setLoading(false);
this.setDataResult(newData);
return;
}
// 请求 spu 下其他 sku 库存
this.xhr_.fetchJson(`/api/product/list?limit=${soldOutSpuIds.length}&${querySpuIds}`)
.then(res => {
const reselectSkus = [];
const invalidSkus = [];
// spu 维度展示
const displayInvalidSkus = [];
res.data.list.forEach(product => {
// spu 匹配, 存在多 sku 情况
const soldOutSkus = soldOutItems.filter(item => item.product_id === product.id);
if (!soldOutSkus.length) {
return;
}
// 通过失效 sku 获取 spu 下其他 sku 库存, 存在其他可用库存时标记为 "Reselect" 按钮可用
//const allowReselect = product.variants
// .filter(variant => variant.option1 === soldOutProduct.variant.option1 && variant.option2 === soldOutProduct.variant.option2 && variant.option3 === soldOutProduct.variant.option3)
// .some(variant => variant.available);
// 查询售罄 sku 对应商品是否可加购, 标记为 Reselect 可用项
if (product.available) {
reselectSkus.push(...soldOutSkus);
// 若商品不可用(全部 sku 售罄), 归纳到失效商品列表
} else {
invalidSkus.push(...soldOutSkus);
// spu 维度, 仅添加一项 sku
displayInvalidSkus.push(soldOutSkus[0]);
}
});
const newData = {
...data,
reselectSkus,
invalidSkus,
displayInvalidSkus
};
this.trigger_('refreshSuccess', newData);
this.renderData = newData;
this.setLoading(false);
this.setDataResult(newData);
})
.catch(err => {
this.setLoading(false);
console.error(err);
this.trigger_('refreshError', data);
}).finally(() => {
});
}
async deleteReselect(id, ignoreEmit) {
if (!id) {
return;
}
const targetSku = this.renderData.reselectSkus.find(item => item.id === id);
try {
const res = await this.xhr_.fetchJson(`/api/cart/${targetSku.variant_id}`, {
method: 'DELETE',
body: {
id: targetSku.id,
product_id: targetSku.product_id,
variant_id: targetSku.variant_id,
}
});
const newData = {
...this.renderData,
reselectSkus: this.renderData.reselectSkus.filter(item => item.id !== id),
};
this.renderData = newData;
!ignoreEmit && this.trigger_('deleteSuccess', newData);
} catch (err) {
console.error(err);
!ignoreEmit && this.trigger_('deleteError', err);
}
}
deleteInvalid(id) {
if (!id) {
return;
}
const targetSku = this.renderData.invalidSkus.find(item => item.id === id);
this.xhr_.fetchJson(`/api/cart/${targetSku.variant_id}`, {
method: 'DELETE',
body: {
id: targetSku.id,
product_id: targetSku.product_id,
variant_id: targetSku.variant_id,
}
})
.then(res => {
const newData = {
...this.renderData,
invalidSkus: this.renderData.invalidSkus.filter(item => item.id !== id),
displayInvalidSkus: this.renderData.displayInvalidSkus.filter(item => item.id !== id),
};
this.trigger_('deleteSuccess', newData);
this.renderData = newData;
})
.catch(err => {
console.error(err);
this.trigger_('deleteError', err);
});
}
// record reselect sku id before show reselect modal
setReselectRecordId(id) {
if (!id) {
return;
}
this.recordReselectId = id;
}
async deleteReselectRecordBeforeRefresh(data) {
if (!this.recordReselectId) {
return;
}
await this.deleteReselect(this.recordReselectId, true);
return {
...data,
ineffectives: data.ineffectives.filter(item => item.id !== this.recordReselectId)
}
}
clearNeedReselectRecord() {
this.needDeleteReselectRecord = false;
}
registerDeleteReselectTask(productData) {
const targetSku = this.renderData.reselectSkus.find(item => item.id === this.recordReselectId);
if (targetSku?.variant_id && productData?.variant.id) {
if (targetSku.variant_id === productData?.variant.id) {
this.needDeleteReselectRecord = false;
return;
}
}
this.needDeleteReselectRecord = true;
}
// pause cart refresh(trigger by similar products)
lockRefresh() {
if (this.refreshLock) {
return;
}
this.refreshLock = true;
}
releaseRefreshLock() {
if (!this.refreshLock) {
return;
}
this.refreshLock = false;
this.refreshWithCache();
}
// direct add_to_cart(trigger by similar products)
async manualAddToCart(id) {
const target = this.similarData.find(item => item.id === id);
this.lockRefresh();
try {
const res = await this.xhr_.fetchJson(`/api/cart`, {
method: 'POST',
body: {
note: '',
product_id: target.id,
quantity: '1',
variant_id: target.variants[0].id,
refer_info: {
source: 'add_to_cart'
}
}
});
const newCartItems = res.data.items;
this.setRefreshCache(newCartItems, true);
} catch (err) {
console.error(err);
}
}
syncSimilarData(data) {
this.similarData = data.data;
}
setRefreshCache(data, patch) {
if (patch) {
this.refreshDataCache = {
...this.refreshDataCache,
line_items: [...this.refreshDataCache.line_items, ...data]
};
} else {
this.refreshDataCache = data;
}
}
refreshWithCache() {
this.refresh(this.refreshDataCache);
}
mountCallback() {
}
unmountCallback() {
}
/**
* trigger event
* @param {Object} data
*/
trigger_(name, data) {
const event = SPZUtils.Event.create(this.win, `spz-custom-cart-sku.${name}`, {
data,
});
this.action_.trigger(this.element, name, event);
}
}
SPZ.defineElement('spz-custom-cart-sku', SPZCustomCartSku);
}())
(function () {
class SPZCustomCartTrack extends SPZ.BaseElement {
constructor(element) {
super(element);
this.action_ = SPZServices.actionServiceForDoc(this.element);
}
isLayoutSupported(layout) {
return true;
}
buildCallback() {
this.setupAction_();
}
hash(val) {
const hashKey = Object.keys(val).sort((a, b) => a - b).reduce((acc, k) => {
acc += `{'${k}':'${val[k]}'}`;
return acc;
}, '');
return hashKey;
}
trackExtra(key, value) {
console.log('trackExtra...', key, value);
if (!window.sa) {
return;
}
const hashKey = this.hash(value);
let hasExtraInfo = false;
if (window.sa.eventInfo && window.sa.eventInfo[key] && window.sa.eventInfo[key].extra_properties) {
hasExtraInfo = window.sa.eventInfo[key].extra_properties.some(p => {
return hashKey === this.hash(p);
});
}
if (hasExtraInfo) {
return;
}
window.sa && window.sa.registerExtraInfo(key, value);
}
delExtraTrack(key, value) {
const hashKey = this.hash(value);
if (window.sa.eventInfo && window.sa.eventInfo[key] && window.sa.eventInfo[key].extra_properties) {
window.sa.eventInfo[key].extra_properties = window.sa.eventInfo[key].extra_properties.filter(p => hashKey !== this.hash(p));
}
}
track(key, value) {
console.log('tracking...', key, value);
window.sa && window.sa.track(key, value);
}
setupAction_() {
this.registerAction('registerReselectAtc', () => {
this.trackExtra('add_to_cart', {
function_name: 'Farida',
action_type: 'reselect'
});
});
this.registerAction('clearReselectAtc', () => {
this.delExtraTrack('add_to_cart', {
function_name: 'Farida',
action_type: 'reselect'
});
});
this.registerAction('registerSimilarAtc', () => {
this.trackExtra('add_to_cart', {
function_name: 'Farida',
action_type: 'similar_product'
});
});
this.registerAction('clearSimilarAtc', () => {
this.delExtraTrack('add_to_cart', {
function_name: 'Farida',
action_type: 'similar_product'
});
});
const clickParams = {
business_type: 'product_plugin',
event_name: 'function_click',
function_name: 'Farida',
plugin_name: 'Farida',
template_name: 'cart',
template_type: '13',
module: 'online_store',
module_type: 'online_store',
tab_name: '',
card_name: '',
event_developer: 'ccbken',
event_type: 'click',
};
this.registerAction('trackDelReselect', () => {
this.track('function_click', {
...clickParams,
event_info: JSON.stringify({
action_type: 'cart_delete',
element_type: 'sku'
})
});
});
this.registerAction('trackClickReselect', () => {
this.track('function_click', {
...clickParams,
event_info: JSON.stringify({
action_type: 'reselect',
element_type: 'sku'
})
});
});
this.registerAction('trackDelSimilar', () => {
this.track('function_click', {
...clickParams,
event_info: JSON.stringify({
action_type: 'cart_delete',
element_type: 'spu'
})
});
});
this.registerAction('trackClickSimilar', () => {
this.track('function_click', {
...clickParams,
event_info: JSON.stringify({
action_type: 'reselect',
element_type: 'spu'
})
});
});
this.registerAction('trackOpenSimilar', () => {
this.track('function_expose', {
...clickParams,
event_name: 'function_expose',
event_type: 'expose',
event_info: JSON.stringify({
popup_name: 'farida_product_popup'
})
});
});
}
}
SPZ.defineElement('spz-custom-cart-track', SPZCustomCartTrack);
}())
`
}).join('')
}
