${(function() {
const productsInfo = data.products || data.product;
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;
const show_sales_progress = !!product_display?.sales_progress?.enabled;
const sales_progress_format = product_display?.sales_progress?.format || '';
const limit_purchase = originData.limit_purchase;
const productConfig = product_display ? JSON.parse(product_display?.config).color : '';
const sale_progress_bg = productConfig?.sale_bar_background_color || '#F2F2F2';
const sale_progress_bg_start = productConfig?.progress_sale_bar_background_color_start || '#FF9C57';
const sale_progress_bg_end = productConfig?.progress_sale_bar_background_color_end || '#FF4559';
const sale_count_text = productConfig?.sale_bar_atc_color || '#FC5161';
const discount_label_start = productConfig?.discount_sign_background_color_start || '#FF9C57';
const discount_label_end = productConfig?.discount_sign_background_color_end || '#FF4559';
const discount_label_text = productConfig?.discount_sign_color || '#FFFFFF';
//限时促销首页卡片尺寸
const discount_image_size = data.discount_image_size || '100%';
//点击加购按钮需要的参数
let discount_id = data.discount_id;
let apply_scenario = data.apply_scenario;
if(!productsInfo.length) return '';
return productsInfo.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 discountType = product.discount_type;
const noNeedBtn = discountType !== "DT_MIX_MATCH_BUNDLE" && discountType !== "DT_CLASSIC_BUNDLE";
const defaultVariantTitle = product.variants[0]?.title.replace('-', '/');
const flash_sale_info = product?.flash_sale_info;
const is_flashsale_sold_out = flash_sale_info?.discount_sales_rate == "100";
const show_product_sold_progress = flash_sale_info?.discount_sales_rate > 0;
const off_ratio = flash_sale_info?.off_ratio;
price = flash_sale_info?.discount_price || price;
discount_id = discount_id || product.discount_id;
apply_scenario = apply_scenario || product.apply_scenario;
let imageWidth;
if (product.image.width) {
imageWidth = product.image.width;
} else {
imageWidth = 300;
}
let imageHeight;
if (product.image.height) {
imageHeight= product.image.height;
} else {
imageHeight = 300;
}
if (discount_image_size !== 'natural') {
imageHeight = (imageWidth * parseFloat(discount_image_size)) / 100;
}
if (product.published) {
return `
${function(){
if (soldOutLang1){
return `
${soldOutLang1}
`
}else{
return `
${soldOutLang2}
`
}
}()}
${product.title}
Almost sold out
${flash_sale_info?.discount_sales}
${flash_sale_info?.discount_sales_rate}%
sold
`
} else {
return ``;
}
}).join('');
})()}
${function(){
let hour = data.d * 24 + data.h;
if(hour < 10){
hour = '0' + hour;
}
return `
End in
${data.dd} D
${data.hh} :
${hour} :
${data.mm} :
${data.ss}
.
${data.SSS}
`
}()}
${function() {
const images = data.images || [];
const selectedVariant = data.variants.find(v => (v.available && v.is_hit_discount == true)) || data.variants[0];
const selectedIndex = !!selectedVariant ? images.findIndex(img => img.src === (selectedVariant.image && selectedVariant.image.src)) : 0;
const initialSlide = selectedIndex === -1 ? 0 : selectedIndex;
return `
${images.map((image, index) => `
${images.map(image => { const imageWidth = image.width || 450; const imageHeight = image.height || 450; return `
`;
}()}
${function() {
const productData = data;
const limit_purchase = data.limit_purchase || 0;
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 + `apps-discount-quick-shop-selected-variant-${opt.id}.rerender(data=event.selectedValues.${opt.name});`;
mouse_out_event = mouse_out_event + `apps-discount-quick-shop-selected-variant-${opt.id}.rerender(data=event.selectData.${opt.name});`;
mouse_over_event = mouse_over_event + `@${nameEscape}Mouseover="apps-discount-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];
const statusLan = ((selectedVariant && !selectedVariant.available) || (!selectedVariant && !productData.available)) ?
"Sold out" :
"Add to cart";
const status = (
(selectedVariant && !selectedVariant.available) ||
(!selectedVariant && !data.available)) ? 'soldout' : 'available';
return `
${data.title || data.brief}
Add ${productData.discount_min_purchase_qty} items for discount
`;
}()}
${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 currentProduct = data.product;
return (currentProduct.options || []).map((option, index) => {
const optionName = option.name || '';
const optionId = option.id || '';
const position = `option${index + 1}`;
return `
${optionName}:
${option.values.map((value,idx) => {
const selected = data.product.defaultSelectValues?.[optionName] == value ? 'checked' : '';
return `
${value}
`;
}).join('')}
`;
}).join('')
}()}
${function() {
const value = (data.originData && data.originData.value) || data.value;
const isHasValue = value ? true : false;
return `
${value}
`
}()}
The activity inventory has been sold out, flash sale discount will not be applied
Continue Shopping
class SpzCustomDiscountAtcAction extends SPZ.BaseElement {
constructor(element) {
super(element);
this.xhr_ = SPZServices.xhrFor(this.win);
this.product_title = "";
}
isLayoutSupported(layout) {
return layout == SPZCore.Layout.LOGIC;
}
async getProductTitle_ (data){
this.product_title = data.product_title;
}
handleLoading_ (event) {
const { type, action } = event;
const loadingElementId = '#apps-discount-whole-loading';
const loadingElement = document.querySelector(loadingElementId);
if (loadingElement) {
SPZ.whenApiDefined(loadingElement).then((api) => {
if (action === 'show') {
api.show_();
} else {
api.close_();
}
});
}
}
// 渲染加购弹窗内容
async renderQuickShop_ (data) {
this.handleLoading_({type: 'whole', action: 'show'});
const apply_scenario = data.apply_scenario;
const discount_id = data.discount_id;
const product_id = data.product_id;
const limit_purchase = data.limit_purchase;
this.xhr_.fetchJson(`/api/storefront/promotion/landing_page/product?product_id=${product_id}&discount_id=${discount_id}&apply_scenario=${apply_scenario}`, {
method: "get",
}).then(async(res)=>{
this.handleLoading_({type: 'whole', action: 'close'});
const $quickShop = await SPZ.whenApiDefined(document.querySelector('#apps-discount-quick-view-render'));
// 定义默认渲染的子款式
const selectedVariant = res.product.variants.find((v)=> (v.available && v.is_hit_discount)) || res.product.variants[0];
let selectedValues = {};
selectedVariant.options.length && selectedVariant.options.forEach(item => {
selectedValues[item.name] = item.value;
})
// 默认选中的 子款式、 options
res.product.defaultSelectValues = selectedValues;
let data = {...res.product, product:res.product, selectedVariant};
data.need_atc = true;
data.limit_purchase = limit_purchase;
$quickShop.render(data);
// 打开加购弹窗
SPZ.whenApiDefined(document.querySelector(`#apps-discount-quick-view`)).then((api)=>{
api.open();
});
}).catch((err)=>{
this.handleLoading_({type: 'whole', action: 'close'});
})
}
// 加入购物车
addToCart_(data) {
const apply_scenario = data.apply_scenario;
const discount_id = data.discount_id;
const product_id = data.product_id;
this.xhr_.fetchJson(`/api/storefront/promotion/landing_page/product?product_id=${data.product_id}&discount_id=${discount_id}&apply_scenario=${apply_scenario}`, {
method: "get",
}).then(async(res)=>{
// 单款式加购
const variant_id = res.product.variants[0]?.id;
const $productFormInput = document.querySelector(`#apps-discount-product-form-${data.product_id} input[name='variant_id'`);
$productFormInput.value = variant_id;
SPZ.whenApiDefined(document.querySelector(`#apps-discount-product-form-${data.product_id}`)).then((api)=>{
api.handleAddToCart_();
});
}).catch((err)=> {
this.handleLoading_({type: 'whole', action: 'close'});
})
}
// 加购弹窗未参与活动 加购按钮不可点击
handleNotHitDiscount_(data) {
const $quickShopBody = document.querySelector('#apps-discount-quick-shop-body');
const $limitTip = document.querySelector('.apps_discount_limit_purchase_tip');
//当前子框式未命中活动
if(data.variant.is_hit_discount == false) {
$quickShopBody.setAttribute('variantstatus', 'notHitDiscount');
$limitTip && $limitTip.setAttribute('selectedvariantstatus', 'notHitDiscount');
} else {
$quickShopBody.setAttribute('variantstatus', '');
$limitTip && $limitTip.setAttribute('selectedvariantstatus', '')
}
}
setupAction_() {
this.registerAction('renderQuickShop', (invocation) => {
const data = invocation.args;
this.renderQuickShop_(data);
});
// 加购
this.registerAction('addToCart', (invocation) => {
const data = invocation.args;
this.addToCart_(data);
});
// 子款式 未参与活动
this.registerAction('handleNotHitDiscount', (invocation) => {
const data = invocation.args.data;
this.handleNotHitDiscount_(data);
});
this.registerAction('getCartCount', (invocation) => {
//一些老主题还未用spz重构,需要手动触发一次老方法以更新购物车图标的数量
window.$ && $(document).trigger('dj.common.cart.change');
});
this.registerAction('getProductTitle', (invocation) => {
const data = invocation.args;
this.getProductTitle_(data);
});
this.registerAction('handleButton', (invocation) => {
const data = invocation.args;
window.location.href = this.product_title;
});
};
buildCallback() {
this.setupAction_();
};
}
SPZ.defineElement('spz-custom-discount-atc-action', SpzCustomDiscountAtcAction);
class SpzCustomDiscountBundle extends SPZ.BaseElement {
constructor(element) {
super(element);
}
isLayoutSupported(layout) {
return layout == SPZCore.Layout.LOGIC;
}
mountCallback() {}
unmountCallback() {}
setupAction_() {
this.registerAction('showAddToCartToast', () => {
const themeAddToCartToastEl = document.querySelector('#add-cart-event-proxy')
if(themeAddToCartToastEl) return
const toastEl = document.querySelector('#apps-match-drawer-add_to_cart_toast')
SPZ.whenApiDefined(toastEl).then((apis) => {
apis.showToast("Added successfully");
});
});
}
buildCallback() {
this.setupAction_();
};
}
SPZ.defineElement('spz-custom-discount-toast', SpzCustomDiscountBundle);
${function(){
if(originData.discount_info.discount_id === "0") return;
const homePageInfo = originData.home_page_info;
const hasBanner = homePageInfo?.banner?.enabled;
const bannerText = homePageInfo?.banner?.text;
const bannerConfig = JSON.parse(homePageInfo.banner.config);
const colorConfig = bannerConfig.color;
const banner_bg_start = colorConfig.banner_bg_start;
const banner_bg_end = colorConfig.banner_bg_end;
const text_color = colorConfig.banner_text;
const countdown_bg = colorConfig.countdown_bg;
const countdown_text_color = colorConfig.countdown_text;
const is_end_countdown = bannerConfig.countdown.end_opened;
const end_format = bannerConfig.countdown.end_format;
const is_show_day = end_format.indexOf("DD") != -1;
const is_show_millisecond = end_format.indexOf("SSS") != -1;
const ends_remaining_seconds = originData.discount_info.ends_remaining_seconds;
const promotioUrl = '/' + 'promotions/discount-default/' + originData.discount_info.id;
let dom = originData ? `
` : `
`;
return dom;
}()}
class SpzCustomDiscountFlashsale extends SPZ.BaseElement {
constructor(element) {
super(element);
this.xhr_ = SPZServices.xhrFor(this.win);
this.discountInfoApi = "\/api\/storefront\/promotion\/home_page\/campaign?discount_id="
this.product_display = {};
this.model = {
loading: false,
page: 2,
limit: 20,
total: 0, //已展示的商品数量
params: {
count: 0,
has_more: false,
sort: {
by: "recommend",
direction: "asc"
}
}
};
this.discount_id= "";
this.image_size="100%";
this.discount_info = {};
}
isLayoutSupported(layout) {
return layout == SPZCore.Layout.LOGIC;
}
async getDiscountList() {
const data = await this.xhr_.fetchJson(this.discountInfoApi + this.discount_id, {
method: "GET",
}).then(res => {
this.model.params = {
count: res.product_info.count,
has_more: res.product_info.has_more,
sort: {
by: "recommend",
direction: "asc"
}
}
if(!res.product_info.product.length) return;
this.model.total = res.product_info.product.length;
this.product_display = res.home_page_info.product_display;
this.discount_info = res.discount_info;
res.product_info.product.forEach((product) => {
product.url = appDiscountUtils.globalizePath(product.url);
})
SPZ.whenApiDefined(document.getElementById("appDiscountIndexFlashsale"))
.then(apis => {
apis.render(res).then(() => {
const hiddenArraw = res.home_page_info.banner.enabled ? res.product_info.product.length < 5 : res.product_info.product.length < 6
if(hiddenArraw) {
document.querySelectorAll('.app_discount_flashsale_arrow').forEach((item) => {
item.style.display="none";
})
}
SPZ.whenApiDefined(document.getElementById("flashsaleProductsRender")).then((api) => {
res.product_info.product_display = this.product_display;
res.product_info.discount_id = this.discount_id;
res.product_info.apply_scenario = 1;
res.product_info.limit_purchase = this.discount_info.limit_user_product_discount;
res.product_info.discount_image_size = this.image_size;
api.render(res.product_info,true).then(() => {this.bindEvent_()});
})
})
})
}).catch(err => {
console.error(err);
})
return data;
};
// 获取加载的商品数据，拼接html模板
async loadData(cb) {
// 请求数据
this.model.loading = true;
//查询活动商品接口
const reqBody = {
discount_id: this.discount_id,
page: this.model.page,
limit: this.model.limit,
apply_scenario: 1,
sort: this.model.params.sort,
sales_channel: {
sale_channel_type: "online",
sale_channel_id: '312509'
}
}
this.xhr_.fetchJson(`/api/storefront/promotion/landing_page/product/list`, {
method: "post",
body: reqBody
}).then(async(res)=>{
const count = res.count;
this.model.params.has_more = res.has_more;
this.model.total = this.model.total + res.products.length;
if (count > 0) {
this.model.page++;
if (res.products && res.products.length > 0) {
res.products.forEach((product) => {
product.url = appDiscountUtils.globalizePath(product.url);
})
res.product_display = this.product_display;
res.discount_id = this.discount_id;
res.apply_scenario = 1;
res.limit_purchase = this.discount_info.limit_user_product_discount;
res.discount_image_size = this.image_size;
// 获取商品列表渲染模板, dom挂载
const $content = document.querySelector(".app_discount_products_list_wrapper");
this.templates_ = SPZServices.templatesForDoc();
this.templates_.renderTemplate(document.querySelector('#apps-discounts_product_list_template'), res).then((el) => {
const childNodes = el.querySelectorAll('.as-render-product-item');
if (childNodes && childNodes.length > 0) {
$content.append(...childNodes);
}
})
// 监听load去掉灰色背景
document.dispatchEvent(new CustomEvent('fire.load.img'));
// 触发懒加载
cb && cb(products);
window.lazyLoadInstance && window.lazyLoadInstance.update();
}
}
this.model.loading = false;
}).catch((err)=>{
console.error(err);
this.model.loading = false;
})
};
setupAction_() {
this.registerAction('shiftMove', (data) => {
const $el = document.querySelector(".app_discount_products_list_wrapper");
const action = data.args.direct === "right";
const scrollwidth = action ? $el.offsetWidth : -$el.offsetWidth;
$el.scrollBy({
left: scrollwidth,
behavior: 'smooth'
});
});
this.registerAction('changeFlashSaleLimitPurchase', (invocation) => {
const data = invocation.args.data;
this.handleFlashsaleTip_(data);
});
};
//切换快速加购弹窗内限时促销限购提示
handleFlashsaleTip_(data) {
const flashsaleEl = document.querySelector('#quick-shop-flashsale-tip');
SPZ.whenApiDefined(flashsaleEl).then((api) => {
api.render(data);
});
}
bindEvent_() {
// 监听滚动，请求数据
const $el = document.querySelector(".app_discount_products_list_wrapper");
if($el) {
$el.addEventListener("scroll", this.win.SPZCore.Types.debounce(
this.win,
() => {
const isRightEnd = $el.scrollLeft + $el.offsetWidth + 10 >= $el.scrollWidth;
const isLeftEnd = Math.abs($el.scrollLeft) + $el.offsetWidth + 10 >= $el.scrollWidth;
const isRTL = document.documentElement.getAttribute('dir') == 'rtl';
const isEnd = isRTL ? isLeftEnd : isRightEnd;
if(isEnd && this.model.params.has_more && !this.model.loading && this.model.total < 100) {
this.loadData();
}
},
50
))
};
};
buildCallback() {
this.setupAction_();
};
mountCallback() {
const $el = document.querySelector("#appDiscountFlashsale")
this.discount_id = $el.getAttribute('flashsale-id');
this.image_size = $el.getAttribute('image-size');
if(!this.discount_id) return;
this.getDiscountList();
};
}
SPZ.defineElement('spz-custom-discount-flashsale', SpzCustomDiscountFlashsale);
KARGO PRO ANNI 2024
50L COFFEE TABLE BOX
KARGO
50L COFFEE TABLE BOX
${Array(data.total || 0).fill().map((val, idx) => idx).map((val, idx) => `
${function() {
return `
`
}()}
One Box, Your Entire Camping Tabletop.
KARGO
30L COFFEE TABLE BOX
${Array(data.total || 0).fill().map((val, idx) => idx).map((val, idx) => `
${function() {
return `
`
}()}
To Find The Outdoor Beauty
${Array(data.total || 0).fill().map((val, idx) => idx).map((val, idx) => `
${function() {
return `
`
}()}
${Array(data.total || 0).fill().map((val, idx) => idx).map((val, idx) => `
${function() {
return `
`
}()}
Revolutionize your adventure with our premium aluminum storage box that transforms instantly into a sturdy camp table. Travel lighter, set up faster, and experience the great outdoors with effortless style. Your ultimate portable camping table solution is here.
Designer Team
ROCKBROOK is on the road...
EXHIBITION
Shanghai ISPO 2024
EXHIBITION
SHANGHAI ISPO 2024
${Array(data.total || 0).fill().map((val, idx) => idx).map((val, idx) => `
${function() {
return `
`
}()}
(function () {
const TAG = "spz-custom-discount-placement";
class SpzCustomDiscountPlacement extends SPZ.BaseElement {
constructor(element) {
super(element);
this.placementTypeMap = {
PTT_POPUP: "PTT_POPUP",
PTT_BANNER: "PTT_BANNER"
};
this.placementTemplateMap = {
PT_POPUP_BUY_X_GET_Y: "PT_POPUP_BUY_X_GET_Y",
PT_BANNER_BUY_X_GET_Y: "PT_BANNER_BUY_X_GET_Y"
};
this.progressMap = {
PROGRESS_ONGOING: "PROGRESS_ONGOING",
PROGRESS_NOT_STARTED: "PROGRESS_NOT_STARTED",
PROGRESS_FINISHED: "PROGRESS_FINISHED",
PROGRESS_PAUSED: "PROGRESS_PAUSED"
};
}
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.handlePlacement();
}
// 上报数据
reportData = async(data) => {
const reqBody = {
placement_id: data.placement_id,
event: data.event
}
const url = `/api/storefront/promotion/placement/data/report`;
this.xhr_.fetchJson(url, {
method: "post",
body: reqBody
}).then((res)=>{
// todo ...
})
}
// 资源位数据获取
getplacementList = async() => {
const reqBody = {
page_id: window.SHOPLAZZA.meta.page.template_type
}
const url = `/api/storefront/promotion/placement/list`
const data = await this.xhr_.fetchJson(url, {
method: "post",
body: reqBody
})
return data;
}
handlePlacement = async() => {
const res = await this.getplacementList();
const BXGYPopupList = res.list.filter(item => (item.placement_type == this.placementTypeMap.PTT_POPUP && item.placement_template == this.placementTemplateMap.PT_POPUP_BUY_X_GET_Y));
if(BXGYPopupList.length) {
const $spz_custom_popup_bxgy = document.querySelector('#spz_custom_popup_bxgy');
SPZ.whenApiDefined($spz_custom_popup_bxgy).then((api)=> {
api.doRender_({popupList: BXGYPopupList});
})
}
}
doRender_ = (data) => {
const renderData = data || {};
return this.templates_
.findAndRenderTemplate(this.element, renderData)
.then((el) => {
const children = this.element.querySelector('*:not(template)');
children && SPZCore.Dom.removeElement(children);
this.element.appendChild(el);
})
}
setupAction_ = () => {
this.registerAction('handleTrack', (invocation) => {
const data = invocation.args;
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, SpzCustomDiscountPlacement)
})()
