${(function(){ const get_random_six_digits = () => { return Math.random().toString().slice(-6) }; const wholesale_enabled = false; const setting_product_image_display = "133.33%"; const product_image = data.image; const secondary_image = data.secondImage; const image_width = product_image.width | 600; let image_height = product_image.height | 600; if(setting_product_image_display == '100%'){ image_height = image_width }else if(setting_product_image_display == '133.33%'){ image_height = image_width * 1.3333; }; let product_image_hover_on = false; const has_save_label = true && ((+data.compare_at_price) > (+data.price)); const is_single_variant = data.variants.length == 1; const min_price_variant_href = (data.min_price_variant && data.min_price_variant.available) ? data.min_price_variant.withinUrl : data.withinUrl; const retail_price_max = data.retail_price_max || data.compare_at_price_max; const THUMBNAILS_MAX_SIZE = 3; const thumbnails = data.thumbVariants.slice(0, THUMBNAILS_MAX_SIZE); const image_wrap_id = 'image_wrap_' + get_random_six_digits(); const image_carousel_id = 'image_carousel_' + get_random_six_digits(); const thumbnails_selector_id = 'thumbnails_selector_' + get_random_six_digits(); const form_id = 'form_' + get_random_six_digits() + ""; const mixed_wholesale = data.mixed_wholesale; return `
${ data.available ? `${ (+data.compare_at_price > +data.price) ? `Save
` : '' }` : "Sold out" }
Mixed Lot
${data.title}
${ data.price_min != data.price_max ? `from
` : `
` }
+${data.remainInvisibleThumbCount}
` })()}
class SpzCustomLabelScript extends SPZ.BaseElement { constructor(element) { super(element); } isLayoutSupported(layout) { return true; } mountCallback() { const script = this.element; const boxEl = script.closest('.product_snippet_label_area'); const labelEl = boxEl.querySelector('.product_snippet__label'); if(!labelEl) return; const observer = new ResizeObserver((entries) => { const labelEls = boxEl.querySelectorAll('.product_snippet__label'); const offsetWidth = Math.max(...Array.from(labelEls).map(el => el.offsetWidth)); if(offsetWidth>0){ const padding = offsetWidth / 2 + 8 + 'px'; boxEl.style.left = padding; boxEl.style.right = padding; boxEl.style.visibility = 'visible'; } }); observer.observe(labelEl); } } SPZ.defineElement('spz-custom-label-script', SpzCustomLabelScript);
(function () { class SPZCustomEventTrack extends SPZ.BaseElement { constructor(element) { super(element); this.action_ = SPZServices.actionServiceForDoc(this.element); } isLayoutSupported(layout) { return true; } buildCallback() { this.setupAction_(); } track(key, value) { console.log('tracking...', key, value); if(window.sa){ window.sa.track(key, value); }else{ let sa = null; Object.defineProperty(window, 'sa',{ get: function() { return sa; }, set(val){ sa = val; sa.track(key, value); } }) } } setupAction_() { const clickParams = { business_type: 'product_theme', event_name: 'function_click', function_name: 'Farida', plugin_name: 'Farida', template_name: "register", template_type: 30, module: 'online_store', module_type: 'online_store', tab_name: '', card_name: '', event_developer: 'ccbGolumn', event_type: 'click', }; this.registerAction('trackClick', (e) => { const event_info = e.args || {}; this.track('function_click', { ...clickParams, event_info: JSON.stringify(event_info), }); }); this.registerAction('trackExpose', (e) => { const event_info = e.args || {}; this.track('function_expose', { ...clickParams, event_name: 'function_expose', event_type: 'expose', event_info: JSON.stringify(event_info), }); }); } } SPZ.defineElement('spz-custom-event-track', SPZCustomEventTrack); }())
Hassle-free returns. 30-day postage paid returns
Hassle-free returns. 30-day postage paid returns
FREE SHIPPING FOR ALL ORDER OVER $49
FREE SHIPPING FOR ALL ORDER OVER $49
Log in
Create an account
${data.data && data.data.count}
HOME
MAKEUPS
HAIR
BODY
TRACKING ORDER
More links
${(function(){ const formatLinks = (links) => { return links.map(link => { link.tag = tags[link.title.toUpperCase()] || {}; link.target_attr = link.target == '_blank' ? 'target="_blank"' : ''; link.href_attr = link.url ? `href="${link.url}"` : ''; if(link.children && link.children.length){ link.children = formatLinks(link.children); } return link; }) }; const tags = "{}"; let linkList = [ { id: 62229159, title: "HOME", url: "\/", target: "", levels: 0, product0: { id: (null) }, children: [ ] }, { id: 62229161, title: "MAKEUPS", url: "\/collections\/makeups", target: "", levels: 0, product0: { id: (null) }, children: [ ] }, { id: 62229163, title: "HAIR", url: "\/collections\/hair", target: "", levels: 0, product0: { id: (null) }, children: [ ] }, { id: 62229165, title: "BODY", url: "\/collections\/body", target: "", levels: 0, product0: { id: (null) }, children: [ ] }, { id: 62229167, title: "TRACKING ORDER", url: "\/account\/order-lookup", target: "", levels: 0, product0: { id: (null) }, children: [ ] }, ].slice(offset); linkList = formatLinks(linkList); const hasChild = linkList.some(link => !!(link.children && link.children.length || link.product0.id)); for (const item of linkList) { if (item.children?.length > 0) { item.active = 'active'; break; } } return `
${link.title}
${link.tag.label}
${second_link.cover}
${second_link.title}
${second_link.tag.label}
${third_links.title}
${third_links.tag.label}
${link.title}
${link.tag.label}
` })()}
Log in
Create an account
${data.data && data.data.count}
${(function(){ if (data === undefined || typeof data !== 'string' || data == '') return '
'; const keyword = encodeURIComponent(data); return `
View more
Your search for '${data}' did not yield any results.
` })()}
HOME
MAKEUPS
HAIR
BODY
TRACKING ORDER
Log in
(function(){ let w = window.innerWidth; function setHeaderCssVar() { const headerEle = document.getElementById('shoplaza-section-header'); if(!headerEle){ return }; document.body.style.setProperty('--window-height', `${window.innerHeight}px`); document.body.style.setProperty('--header-height', `${headerEle.clientHeight}px`); const mdScorllHideEle = headerEle.querySelector('.header__mobile .header__scroll_hide'); if (mdScorllHideEle) { document.body.style.setProperty('--header-scroll-hide-height-md', `${mdScorllHideEle.clientHeight}px`); } const pcScorllHideEle = headerEle.querySelector('.header__desktop .header__scroll_hide'); if (pcScorllHideEle) { document.body.style.setProperty('--header-scroll-hide-height-pc', `${pcScorllHideEle.clientHeight}px`); } } function handlResize() { if(w == window.innerWidth){return}; w = window.innerWidth; setHeaderCssVar(); }; function init(){ setHeaderCssVar(); window.removeEventListener('resize', window._theme_header_listener) window._theme_header_listener = handlResize; window.addEventListener('resize', window._theme_header_listener); } init(); })();
Register
Please fill in the information below:
${data.errors && data.errors[0]}
First name
First name is required.
Contains invalid characters
Last name
Last name is required.
Contains invalid characters
Email
Email is required
Please enter a valid email.
Password
Password is required.
Password must be between 6-16 characters long.
Subscribe to get latest offers and discounts.
Register
Register for more discounts
(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); }())
Cart ${function() { const show = data && data.line_items && data.line_items.length > 0; const count = show ? data.line_items.reduce((acc, line) => { acc += parseInt(line.quantity); return acc; }, 0) : 0; return `
(${count})
`; }()}
Invalid
(${data.invalidSkus.length})
Sold out
${item.product_title}
${item.options.map(option => option.value).join('/')}
${propertie.name}/${propertie.isImage ? `
View image
` : propertie.value}
Free gift
Mixed Lot
${item.item_text}
Similar products
Similar products
${item.product_title}
${item.options.map(option => option.value).join('/')}
${propertie.name}/${propertie.isImage ? `
View image
` : propertie.value}
Free gift
Mixed Lot
*${item.quantity}
${item.item_text}
${discount_item.title}
(-
)
${item.product_title}
${item.options.map(option => option.value).join('/')}
${propertie.name}/${propertie.isImage ? `
View image
` : propertie.value}
Free gift
Mixed Lot
${item.item_text}
Reselect
Reselect product specialfications
Reselect
Reselect product specialfications
Your shopping cart is empty
Continue shopping
Total:
${function() { const textArray = ("Save {{save_amount}}").split(/\{\{\s*save_amount\}\}/); if (textArray.length > 0 && textArray.length < 2) { textArray.push(''); } return textArray.map((text, index) => { if (index == 0) { return `
${text}
`; } return `
${text}
`; }).join(''); }()}
${function() { const textArray = ("Save {{save_amount}}").split(/\{\{\s*save_amount\}\}/); if (textArray.length > 0 && textArray.length < 2) { textArray.push(''); } return textArray.map((text, index) => { if (index == 0) { return `
${text}
`; } return `
${text}
`; }).join(''); }()}
${discount_application.title}:
-
${data.invalid_msg}
Check out
Taxes and shipping cost are calculated at checkout
${data.invalid_msg}
Total:
${function() { const textArray = ("Save {{save_amount}}").split(/\{\{\s*save_amount\}\}/); if (textArray.length > 0 && textArray.length < 2) { textArray.push(''); } return textArray.map((text, index) => { if (index == 0) { return `
${text}
`; } return `
${text}
`; }).join(''); }()}
${function() { const textArray = ("Save {{save_amount}}").split(/\{\{\s*save_amount\}\}/); if (textArray.length > 0 && textArray.length < 2) { textArray.push(''); } return textArray.map((text, index) => { if (index == 0) { return `
${text}
`; } return `
${text}
`; }).join(''); }()}
${function() { const textArray = ("Save {{save_amount}}").split(/\{\{\s*save_amount\}\}/); if (textArray.length > 0 && textArray.length < 2) { textArray.push(''); } return textArray.map((text, index) => { if (index == 0) { return `
${text}
`; } return `
${text}
`; }).join(''); }()}
${discount_application.title}:
-
Check out
${data.invalid_msg}
Check out
Taxes and shipping cost are calculated at checkout
Subtotal:
Save:
-
${discount_application.title}:
-
Total:
Check out
Taxes and shipping cost are calculated at checkout
const summaryStickyRender = document.querySelector('#cart-drawer-summary-sticky-render'); if (summaryStickyRender) { document.body.style.setProperty('--cart-drawer-summary-sticky-height', summaryStickyRender.clientHeight + 'px'); }
${function() { const variantData = data.variant || data.product.variants.find(v => v.available) || data.product.variants[0]; const saveType = null; const productLabelDiscountOn = null; return `
${saveType == 'percentage' ? `-${variantData.off_ratio}%` : `
-
` }
`; }()}
See detail
${function() { let variantImageShowed = false; const currentProduct = data.product; // fix default selected variant let selectedValues = data.selectedValues; if (Object.keys(data.selectedValues.length === 0)) { const selectedVariant = currentProduct.variants.find(v => v.available) || currentProduct.variants[0]; if (selectedVariant) { selectedVariant.options.forEach((option, idx) => { if (!selectedValues[option.name]) { selectedValues[option.name] = []; } if (selectedValues[option.name].indexOf(option.value) === -1) { selectedValues[option.name].push(option.value); } }); } } return (currentProduct.options || []).map((option, index) => { const optionName = option.name || ''; const position = `option${index + 1}`; let isThumbImage = false; if (currentProduct.need_variant_image && !variantImageShowed) { const variantNames = ["color"] || []; for (let i = 0, len = variantNames.length; i < len; i++) { const name = variantNames[i].toLowerCase(); if (name === optionName.toLowerCase()) { isThumbImage = true; variantImageShowed = true; } } } const variantType = "button"; const thumbStyle = "image_with_text"; return `
${optionName}:
${option.values.map((value, idx) => { const selected = data.selectedValues[optionName] == value ? 'checked' : ''; let thumbImage = null; if (isThumbImage) { const variants = currentProduct.variants; for (let i = 0, len = variants.length; i < len; i++) { const variant = variants[i]; if (variant[position] == value && thumbImage == null) { thumbImage = variant.image; break; } } } return `
${value}
` }).join('')}
${optionName}
${option.values.map(value => { const selected = data.selectedValues[optionName] == value ? 'selected' : ''; return `
${value}
` }).join('')}
` }).join(''); }()}
${data.originData && data.originData.value || data.value}
${data.index + 1}/${data.total}
${Array(data.total).fill(0).map((num, index) => { return `
`; }).join('')}
${function(){ const wholesale_enabled = false; const qty = data.quantity || 1; const currentSelectVariant = data.variant; const defaultVariant = (data.product && data.product.variants && data.product.variants[0]); const productVariant = null; const variantData = currentSelectVariant || defaultVariant || productVariant; const wholesale_price = variantData.wholesale_price || []; if(wholesale_enabled && wholesale_price.length > 0) { let wholesaleIndex = wholesale_price.findIndex(item => { return item.min_quantity > qty; }); if(wholesaleIndex < 0){ wholesaleIndex = wholesale_price.length - 1; }else if(wholesaleIndex > 0){ wholesaleIndex = wholesaleIndex - 1; } const wholesalePrice = wholesale_price[wholesaleIndex] || ''; return `
` }else { const price = variantData && variantData.price; return price != undefined ? `
` : '
'; } }()}
${function() { const selectedVariant = data.variant; const isSoldOut = ((selectedVariant && !selectedVariant.available) || (!selectedVariant && !productData.available)); const statusLan = isSoldOut ? "Sold out" : "Add to cart"; return `
${statusLan}
`; }()}
const summaryStickyRender = document.querySelector('#cart-reselect-drawer-summary-sticky-render'); if (summaryStickyRender) { document.body.style.setProperty('--cart-reselect-drawer-summary-sticky-height', summaryStickyRender.clientHeight + 'px'); }
Back
${function(){ const productData = data.product; let product_change_event = '', mouse_over_event = ' '; mouse_out_event = ''; const product_options = productData.options.filter(Boolean) || []; for (let opt of product_options) { product_change_event = product_change_event + `cart-reselect-drawer-selected-variant-${opt.name}.rerender(data=event.selectedValues.${opt.name});`; mouse_out_event = mouse_out_event + `cart-reselect-drawer-selected-variant-${opt.name}.rerender(data=event.selectData.${opt.name});`; mouse_over_event = mouse_over_event + `@${opt.name}Mouseover="cart-reselect-drawer-selected-variant-${opt.name}.rerender(data=event);"`; } const selectedVariant = productData.variants.find(v => v.available) || productData.variants[0]; const statusLan = ((selectedVariant && !selectedVariant.available) || (!selectedVariant && !productData.available)) ? "Sold out" : "Add to cart"; const mobSelectedVariant = productData.variants.find(v => v.available) || productData.variants[0]; const mobInitialSlideIndex = productData.images.findIndex((item) => item.src === selectedVariant.image.src); const mobImages = productData.images; const mobImageSize = productData.images.length; const stickyEvent = "cart-reselect-drawer-summary-sticky-render.toggleClass(class='visible', force=false);cart-reselect-drawer-summary-sticky-compensation-container.toggleClass(class='visible', force=false);cart-reselect-drawer-observer.restart();cart-reselect-drawer-summary-sticky-render.rerender(data=event);"; return `
${function() { const force_image_size = 'natural'; const thumbnailPosition = 'below'; const selectedVariant = data.product.variants.find(v => v.available) || data.product.variants[0]; const initialSlideIndex = data.product.images.findIndex((item) => item.src === selectedVariant.image.src); const images = data.product.images; const imageSize = data.product.images.length; return `
${data.product.images.map((item, index0) => { const extra = index0 === initialSlideIndex ? 'ssr size-ratio="2"' : ''; return `
`; }).join('')}
${imageSize > 1 ? `
${images.map((index1) => { return `
`; }).join('')}
` : ''}
${imageSize > 1 ? `
${images.map((imageItem, index1) => { const extra2 = initialSlideIndex == index1 ? 'selected' : ''; return`
`; }).join('')}
` : ''}`; }()}
${productData.title}
${productData.title}
Quantity
Mixed Lot
${statusLan}
`; }()}
${function(){ const currentSelectVariant = data.variant; const defaultVariant = (data.product && data.product.variants && data.product.variants[0]); const variantData = currentSelectVariant || defaultVariant || data; const retail_price = variantData.retail_price || 0; return `
Retail
` }()}
${function(){ const wholesale_enabled = false; const qty = data.quantity || 1; const currentSelectVariant = data.variant; const defaultVariant = (data.product && data.product.variants && data.product.variants[0]); const productVariant = null; const variantData = currentSelectVariant || defaultVariant || productVariant; const wholesale_price = variantData.wholesale_price || []; if(wholesale_enabled && wholesale_price.length > 0) { let wholesaleIndex = wholesale_price.findIndex(item => { return item.min_quantity > qty; }); if(wholesaleIndex < 0){ wholesaleIndex = wholesale_price.length - 1; }else if(wholesaleIndex > 0){ wholesaleIndex = wholesaleIndex - 1; } const wholesalePrice = wholesale_price[wholesaleIndex] || ''; return `
` }else { const price = variantData && variantData.price; return price != undefined ? `
` : '
'; } }()}
You may also like
${(function(){ const get_random_six_digits = () => { return Math.random().toString().slice(-6) }; const wholesale_enabled = false; const setting_product_image_display = "133.33%"; const product_image = data.image; const secondary_image = data.secondImage; const image_width = product_image.width; let image_height = product_image.height; if(setting_product_image_display == '100%'){ image_height = image_width; }else if(setting_product_image_display == '133.33%'){ image_height = image_width * 1.3333; }; let product_image_hover_on = false; const has_save_label = true && ((+data.compare_at_price) > (+data.price)); const is_single_variant = data.variants.length == 1; const min_price_variant_href = (data.min_price_variant && data.min_price_variant.available) ? data.min_price_variant.withinUrl : data.withinUrl; const retail_price_max = data.retail_price_max || data.compare_at_price_max; const THUMBNAILS_MAX_SIZE = 3; const thumbnails = data.thumbVariants.slice(0, THUMBNAILS_MAX_SIZE); const image_wrap_id = 'image_wrap_' + get_random_six_digits(); const image_carousel_id = 'image_carousel_' + get_random_six_digits(); const thumbnails_selector_id = 'thumbnails_selector_' + get_random_six_digits(); const form_id = 'form_' + get_random_six_digits(); const mixed_wholesale = data.mixed_wholesale; let atc_handler = ''; if (data.has_only_default_variant) { atc_handler = `custom-cart-drawer-sku.manualAddToCart(id=${data.id});add-card-toast-success.showToast(content='Added successfully');`; } else { atc_handler = `cart-invalid-drawer-quick-shop-render.render(src='/api/products/${data.id}',redo=true);cart-invalid-product-detail-drawer.open();`; } return `
${ data.available ? `${ (+data.compare_at_price > +data.price) ? `Save
` : '' }` : "Sold out" }
Mixed Lot
${data.title}
${ data.price_min != data.price_max ? `from
` : `
` }
+${data.remainInvisibleThumbCount}
` })()}
${function() { const isEmpty = data && data.length === 0; if (isEmpty) { return `
oops! There are currently no similar products in the store
`; } return `
`; }()}
Back
${Array(data.total).fill(0).map((num, index) => { return `
`; }).join('')}
${function() { let variantImageShowed = false; const currentProduct = data.product; // fix default selected variant let selectedValues = data.selectedValues; if (Object.keys(data.selectedValues.length === 0)) { const selectedVariant = currentProduct.variants.find(v => v.available) || currentProduct.variants[0]; if (selectedVariant) { selectedVariant.options.forEach((option, idx) => { if (!selectedValues[option.name]) { selectedValues[option.name] = []; } if (selectedValues[option.name].indexOf(option.value) === -1) { selectedValues[option.name].push(option.value); } }); } } return (currentProduct.options || []).map((option, index) => { const optionName = option.name || ''; const position = `option${index + 1}`; let isThumbImage = false; if (currentProduct.need_variant_image && !variantImageShowed) { const variantNames = ["color"] || []; for (let i = 0, len = variantNames.length; i < len; i++) { const name = variantNames[i].toLowerCase(); if (name === optionName.toLowerCase()) { isThumbImage = true; variantImageShowed = true; } } } const variantType = "button"; const thumbStyle = "image_with_text"; return `
${optionName}:
${option.values.map((value, idx) => { const selected = data.selectedValues[optionName] == value ? 'checked' : ''; let thumbImage = null; if (isThumbImage) { const variants = currentProduct.variants; for (let i = 0, len = variants.length; i < len; i++) { const variant = variants[i]; if (variant[position] == value && thumbImage == null) { thumbImage = variant.image; break; } } } return `
${value}
` }).join('')}
${optionName}
${option.values.map(value => { const selected = data.selectedValues[optionName] == value ? 'selected' : ''; return `
${value}
` }).join('')}
` }).join(''); }()}
${data.originData && data.originData.value || data.value}
${function() { const variantData = data.variant || data.product.variants.find(v => v.available) || data.product.variants[0]; const saveType = "amount"; const productLabelDiscountOn = true; return `
${saveType == 'percentage' ? `-${variantData.off_ratio}%` : `
-
` }
`; }()}
See detail
${function(){ const currentSelectVariant = data.variant; const defaultVariant = (data.product && data.product.variants && data.product.variants[0]); const variantData = currentSelectVariant || defaultVariant || data; const retail_price = variantData.retail_price || 0; return `
Retail
` }()}
${function(){ const wholesale_enabled = false; const qty = data.quantity || 1; const currentSelectVariant = data.variant; const defaultVariant = (data.product && data.product.variants && data.product.variants[0]); const productVariant = null; const variantData = currentSelectVariant || defaultVariant || productVariant; const wholesale_price = variantData.wholesale_price || []; if(wholesale_enabled && wholesale_price.length > 0) { let wholesaleIndex = wholesale_price.findIndex(item => { return item.min_quantity > qty; }); if(wholesaleIndex < 0){ wholesaleIndex = wholesale_price.length - 1; }else if(wholesaleIndex > 0){ wholesaleIndex = wholesaleIndex - 1; } const wholesalePrice = wholesale_price[wholesaleIndex] || ''; return `
` }else { const price = variantData && variantData.price; return price != undefined ? `
` : '
'; } }()}
${function(){ const wholesale_enabled = false; const qty = data.quantity || 1; const currentSelectVariant = data.variant; const defaultVariant = (data.product && data.product.variants && data.product.variants[0]); const productVariant = null; const variantData = currentSelectVariant || defaultVariant || productVariant; const wholesale_price = variantData.wholesale_price || []; if(wholesale_enabled && wholesale_price.length > 0) { let wholesaleIndex = wholesale_price.findIndex(item => { return item.min_quantity > qty; }); if(wholesaleIndex < 0){ wholesaleIndex = wholesale_price.length - 1; }else if(wholesaleIndex > 0){ wholesaleIndex = wholesaleIndex - 1; } const wholesalePrice = wholesale_price[wholesaleIndex] || ''; return `
` }else { const price = variantData && variantData.price; return price != undefined ? `
` : '
'; } }()}
${function() { const selectedVariant = data.variant; const isSoldOut = ((selectedVariant && !selectedVariant.available) || (!selectedVariant && !productData.available)); const statusLan = isSoldOut ? "Sold out" : "Add to cart"; return `
${statusLan}
`; }()}
const summaryStickyRender = document.querySelector('#cart-invalid-drawer-quick-shop-summary-sticky-render'); if (summaryStickyRender) { document.body.style.setProperty('--cart-product-drawer-summary-sticky-height', summaryStickyRender.clientHeight + 'px'); }
${function() { const variantData = data.variant || data.product.variants.find(v => v.available) || data.product.variants[0]; const saveType = "amount"; const productLabelDiscountOn = true; return `
${saveType == 'percentage' ? `-${variantData.off_ratio}%` : `
-
` }
`; }()}
See detail
${function(){ const productData = data.product; let product_change_event = '', mouse_over_event = ' ', mouse_out_event = ''; const product_options = productData.options.filter(Boolean) || []; for (let opt of product_options) { product_change_event = product_change_event + `cart-invalid-drawer-quick-shop-selected-variant-${opt.name}.rerender(data=event.selectedValues.${opt.name});`; mouse_out_event = mouse_out_event + `cart-invalid-drawer-quick-shop-selected-variant-${opt.name}.rerender(data=event.selectData.${opt.name});`; mouse_over_event = mouse_over_event + `@${opt.name}Mouseover="cart-invalid-drawer-quick-shop-selected-variant-${opt.name}.rerender(data=event);"`; } const selectedVariant = productData.variants.find(v => v.available) || productData.variants[0]; const statusLan = ((selectedVariant && !selectedVariant.available) || (!selectedVariant && !productData.available)) ? "Sold out" : "Add to cart"; const mobSelectedVariant = productData.variants.find(v => v.available) || productData.variants[0]; const mobInitialSlideIndex = productData.images.findIndex((item) => item.src === selectedVariant.image.src); const mobImages = productData.images; const mobImageSize = productData.images.length; const stickyEvent = "cart-invalid-drawer-quick-shop-summary-sticky-render.toggleClass(class='visible', force=false);cart-invalid-drawer-quick-shop-summary-sticky-compensation-container.toggleClass(class='visible', force=false);cart-invalid-drawer-quick-shop-observer.restart();cart-invalid-drawer-quick-shop-summary-sticky-render.rerender(data=event);"; return `
${function() { const force_image_size = 'natural'; const thumbnailPosition = 'below'; const selectedVariant = data.product.variants.find(v => v.available) || data.product.variants[0]; let initialSlideIndex = data.product.images.findIndex((item) => item.src === selectedVariant.image.src); if (initialSlideIndex === -1) { initialSlideIndex = 0; } const images = data.product.images; const imageSize = data.product.images.length; console.log('cart-product-drawer product images render', data, selectedVariant, initialSlideIndex, images, imageSize); return `
${images.map((item, index0) => { const extra = index0 === initialSlideIndex ? 'ssr size-ratio="2"' : ''; return `
`; }).join('')}
${imageSize > 1 ? `
${images.map((index1) => { return `
`; }).join('')}
` : ''}
${imageSize > 1 ? `
${images.map((imageItem, index1) => { const extra2 = initialSlideIndex == index1 ? 'selected' : ''; return`
`; }).join('')}
` : ''}`; }()}
${productData.title}
${productData.title}
Quantity
Mixed Lot
${statusLan}
`; }()}
View Cart
${function(){ const productData = data.product; let product_change_event = '', mouse_over_event = ' '; mouse_out_event = ''; const product_options = productData.options.filter(Boolean) || []; for (let opt of product_options) { product_change_event = product_change_event + `quick-shop-selected-variant-${opt.name}.rerender(data=event.selectedValues.${opt.name});`; mouse_out_event = mouse_out_event + `quick-shop-selected-variant-${opt.name}.rerender(data=event.selectData.${opt.name});`; mouse_over_event = mouse_over_event + `@${opt.name}Mouseover="quick-shop-selected-variant-${opt.name}.rerender(data=event);"`; } const selectedVariant = productData.variants.find(v => v.available) || productData.variants[0]; const statusLan = ((selectedVariant && !selectedVariant.available) || (!selectedVariant && !productData.available)) ? "Sold out" : "Add to cart"; return `
${statusLan}
` }()}
${function(){ const currentSelectVariant = data.variant; const defaultVariant = (data.product && data.product.variants && data.product.variants[0]); const variantData = currentSelectVariant || defaultVariant || data; const retail_price = variantData.retail_price || 0; return `
Retail
` }()}
${function(){ const wholesale_enabled = false; const qty = data.quantity || 1; const currentSelectVariant = data.variant; const defaultVariant = (data.product && data.product.variants && data.product.variants[0]); const productVariant = null; const variantData = currentSelectVariant || defaultVariant || productVariant; const wholesale_price = variantData.wholesale_price || []; if(wholesale_enabled && wholesale_price.length > 0) { let wholesaleIndex = wholesale_price.findIndex(item => { return item.min_quantity > qty; }); if(wholesaleIndex < 0){ wholesaleIndex = wholesale_price.length - 1; }else if(wholesaleIndex > 0){ wholesaleIndex = wholesaleIndex - 1; } const wholesalePrice = wholesale_price[wholesaleIndex] || ''; return `
` }else { const price = variantData && variantData.price; return price != undefined ? `
` : '
'; } }()}
${function() { let variantImageShowed = false; const currentProduct = data.product; return (currentProduct.options || []).map((option, index) => { const optionName = option.name || ''; const position = `option${index + 1}`; let isThumbImage = false; if (currentProduct.need_variant_image && !variantImageShowed) { const variantNames = ["color"] || []; for (let i = 0, len = variantNames.length; i < len; i++) { const name = variantNames[i].toLowerCase(); if (name === optionName.toLowerCase()) { isThumbImage = true; variantImageShowed = true; } } } const variantType = "button"; const thumbStyle = "image_with_text"; return `
${optionName}:
${option.values.map((value, idx) => { const selected = data.selectedValues[optionName] == value ? 'checked' : ''; let thumbImage = null; if (isThumbImage) { const variants = currentProduct.variants; for (let i = 0, len = variants.length; i < len; i++) { const variant = variants[i]; if (variant[position] == value && thumbImage == null) { thumbImage = variant.image; break; } } } return `
${value}
` }).join('')}
${optionName}
${option.values.map(value => { const selected = data.selectedValues[optionName] == value ? 'selected' : ''; return `
${value}
` }).join('')}
` }).join(''); }()}
${data.originData && data.originData.value || data.value}