Eyeglass

We are excited to announce that our website is currently undergoing an update to enhance your user experience.

During this process, you may encounter some errors or unexpected issues. We apologize for any inconvenience this may cause.

Website is currently undergoing an update to enhance your user experience.

Eyeglass

160 Products

Filter

Save CA$100.00 Save CA$100.00

(647) 679-2020

pros@theiaoptik.ca.

Live chat

(647) 679-2020

pros@theiaoptik.ca.

Live chat

class SpzTryonComponent extends SPZ.BaseElement { constructor(element) { super(element); this.settings_ = null; this.variant_id = ''; } static deferredMount() { return false; } isLayoutSupported(layout) { return layout == SPZCore.Layout.CONTAINER; } buildCallback() { this.templates_ = SPZServices.templatesForDoc(this.element); this.xhr_ = SPZServices.xhrFor(this.win); this.setAction_(); const localData = localStorage.getItem('tryon_local_list') ? JSON.parse(localStorage.getItem('tryon_local_list')) : []; this.local_list = localData; } mountCallback() { document.addEventListener('dj.variantChange', (event) => { const variant = event.detail.selected; this.variant_id = variant.id; if (variant.product_id == '') { if (!this.settings_) { this.getSettings().then((data) => { this.showBtn(); }); } else { this.showBtn(); } } }); if (!this.settings_) { this.getSettings().then((data) => { this.showBtn(); }); } else { this.showBtn(); } } getSettings () { return this.xhr_.fetchJson('/api/whiteant/setting') .then((data) => { data.model_list = this.local_list.concat(data.model_image_enable ? data.applyed_face_model_images : []); this.settings_ = data; document.documentElement.style.setProperty('--tryon-custom-color', data.color_style); return data; }) .catch((err) => { console.log(err); }) } showBtn() { if (this.settings_ && this.settings_.product_page_tryon_enable) { this.getVariantMeta(this.variant_id).then((meta) => { if (meta && meta.metafields && meta.metafields.length && meta.metafields[0].value) { this.toggleTryonBtn(true); } else { this.toggleTryonBtn(false); } }); } } getVariantMeta(id) { return this.xhr_.fetchJson('/api/front/metafields/product_variant/batch?namespace=tryon&key=tryon_switch&owner_ids=' + id) .then((data) => { return data; }) .catch((err) => { console.log(err); }); } toggleTryonBtn(visible = true) { const that = this; const container = document.querySelector('.product-main-images-container'); let btnContainer = document.getElementById('tryon_product_image_btn'); if (container && !btnContainer) { const tryonBtn = document.createElement('div'); tryonBtn.id = 'tryon_product_image_btn'; tryonBtn.style.position = 'absolute'; tryonBtn.style.right = '8px'; tryonBtn.style.top = '8px'; tryonBtn.style.background = this.settings_.color_style; tryonBtn.style.padding = '3px 12px'; tryonBtn.style.borderRadius = '200px'; tryonBtn.style.color = 'white'; tryonBtn.style.zIndex = 1; tryonBtn.style.cursor = 'pointer'; const tryonImg = new Image(); tryonImg.src = 'https://static.staticdj.com/oss/operation/a15007c50c67bd3ec7cd3474bd7e397c.png'; tryonImg.width = 12; tryonImg.height = 9; tryonImg.style.marginRight = '8px'; tryonImg.alt = ''; tryonBtn.append(tryonImg); tryonBtn.append('Try on'); container.appendChild(tryonBtn); btnContainer = document.getElementById('tryon_product_image_btn'); btnContainer && btnContainer.addEventListener('click', function(e) { const renderEl = document.getElementById('tryon_modal_render'); SPZ.whenApiDefined(renderEl).then((api) => { api.render({ settings: that.settings_, variant_id: that.variant_id, product_id: '' }, true).then((data) => { const modalEl = document.getElementById('tryon_modal'); SPZ.whenApiDefined(modalEl).then((modal) => { modal.open(); }); const pdValueEl = document.getElementById('tryon_pd_input'); pdValueEl && pdValueEl.addEventListener('blur',function(e) { that.handlePdValidate(e.target); }) }); }); const videoFailRenderEl = document.getElementById('tryon_video_failed_modal_render'); SPZ.whenApiDefined(videoFailRenderEl).then((api) => { api.render({ settings: that.settings_ }, true); }); }); } if(btnContainer) { btnContainer.style.display = visible ? 'block' : 'none'; } } handlePdValidate(data) { const inputEl = document.getElementById('tryon_pd_input'); const valideValue = data.value.replace(/^(\d+)\.(\d\d).*$/,'$1.$2'); inputEl.value = valideValue; inputEl.setAttribute('value', valideValue); if (data.valueAsNumber === 0 && data.value !== '') { inputEl.setAttribute('error', undefined); } else { inputEl.removeAttribute('error'); const frame = document.querySelector('#tryon-frame-actions'); SPZ.whenApiDefined(frame).then((api) => { api.scaleGlasses((62 / (data.valueAsNumber || 62)).toFixed(2)); }); } } setAction_() { this.registerAction('modalOpen', (detail) => { const inputEl = document.getElementById('tryon_pd_input'); if (inputEl) { inputEl.addEventListener("keypress", function (evt) { if (!(evt.which == 46 || (evt.which >= 48 && evt.which <= 57))) { evt.preventDefault(); } }); } }); this.registerAction('modalClose', (detail) => { }); this.registerAction('pd_validate', (detail) => { const data = detail.args.data; this.handlePdValidate(data); }); this.registerAction('pd_resetColor', (detail) => { const data = detail.args.data; const inputEl = document.getElementById('tryon_pd_input'); if (data.valueAsNumber === 0 && data.value !== '') { inputEl.setAttribute('error', undefined); } else { inputEl.removeAttribute('error'); } }); this.registerAction('goToMessure', () => { window.open("https://static.staticdj.com/oss/operation/ab32fadcab123fe3eb6229f9fb76e9da.pdf", "_blank"); }); } } SPZ.defineElement('spz-custom-tryon', SpzTryonComponent);

class SpzCustomCollectionSettings extends SPZ.BaseElement { constructor(element) { super(element); this.settings_ = null; } 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_(); } mountCallback = () => { this.getSettings(); } isLayoutSupported(layout) { return layout == SPZCore.Layout.CONTAINER;; } getSettings () { return this.xhr_.fetchJson('/api/whiteant/setting') .then((data) => { this.settings_ = data; document.documentElement.style.setProperty('--tryon-custom-color', data.color_style); var r = parseInt(data.color_style.substring(1, 3), 16); var g = parseInt(data.color_style.substring(3, 5), 16); var b = parseInt(data.color_style.substring(5, 7), 16); document.documentElement.style.setProperty('--tryon-custom-bg-color', `rgba(${r}, ${g}, ${b}, .1)`); this.trigger_('getSettingCallback', data); return data; }) .catch((err) => { console.log(err); }) } setupAction_ = () => { } trigger_(name, data) { console.log('trigger', `spz-custom-collection-settings.${name}`); const event = SPZUtils.Event.create(this.win, `spz-custom-collection-settings.${name}`, { data, }); this.action_.trigger(this.element, name, event); } } SPZ.defineElement('spz-custom-collection-settings', SpzCustomCollectionSettings)

class SpzCustomCollectionLogic extends SPZ.BaseElement { constructor(element) { super(element); this.has_tryon_list = {}; this.updateList = {}; this.settings_ = null; this.isTryon = false; this.model_img_ = ''; } 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_(); } mountCallback = () => { } observe_ = async(e) => { console.log(e.args.data.data); const that = this; const setting = await SPZ.whenApiDefined(document.getElementById('cattle_collection_settings')); this.settings_ = setting.settings_; console.log(this.settings_); if(!this.settings_.collection_page_tryon_enable) return; SPZCore.Dom.waitForChild(document.body, ()=>!!document.getElementById('collection-list'), () => { SPZUtils.Event.listen(document.getElementById('collection-list'),'spz-list.dom-update',(e)=>{ const list = document.getElementById('collection-list'); const observer = new MutationObserver(function () { if(!!list.querySelector('shoplazza-product-snippet div,.shoplazza-product-snippet div')){ that.renderBtn(e.detail.data); observer.disconnect(); } }) observer.observe(list, { subtree: true, childList: true }); }); that.renderBtn(); }) } renderBtn = async(data) => { const list = document.getElementById('collection-list'); const productDom = list.querySelectorAll('shoplazza-product-snippet,.shoplazza-product-snippet'); let ids = []; if(data) { ids = data.map(p => p.id); } else { ids = Array.from(productDom).map(p => p.getAttribute('product-id')); } this.xhr_.fetchJson('/api/whiteant/tryon_products', { method: 'post', body: { product_ids: ids } }).then(async res => { const products = res.products; if(!products) return; const that_ = this; products.forEach(p => { that_.has_tryon_list[p.product_id] = p.variant_id; }) Array.from(productDom).forEach(p => { if(that_.has_tryon_list[p.getAttribute('product-id')]) { const btn = document.createElement('button'); btn.classList.add('cattle-collection-tryon-btn'); btn.innerHTML = `<svg style="margin-right: 2px" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8.09829 2.15625L8.11845 2.15638C8.78305 2.16488 9.37066 2.59308 9.58143 3.22491L10.5791 6.2156C10.8672 6.58219 11.0391 7.04447 11.0391 7.54688C11.0391 8.73773 10.0736 9.70312 8.88257 9.70312C7.69155 9.70312 6.72606 8.73773 6.72606 7.54688C6.72606 7.32213 6.76044 7.10543 6.82425 6.90171L5.20181 6.91015C5.26392 7.11139 5.29738 7.32523 5.29738 7.54688C5.29738 8.73773 4.33187 9.70312 3.14087 9.70312C1.94988 9.70312 0.984375 8.73773 0.984375 7.54688C0.984375 7.09268 1.12482 6.67128 1.36465 6.32374C1.3671 6.31105 1.37023 6.29836 1.37411 6.28574L1.37671 6.27763L2.39441 3.22673C2.60517 2.59491 3.19279 2.16671 3.85738 2.15822L3.87755 2.15808H4.79161C4.98514 2.15808 5.14205 2.31496 5.14205 2.50847C5.14205 2.69923 4.9896 2.85437 4.79988 2.85877L4.79161 2.85886H3.87755C3.51022 2.85886 3.18367 3.09137 3.06305 3.43738L3.05926 3.44846L2.36321 5.53508C2.60447 5.44179 2.8667 5.39062 3.14087 5.39062C3.82741 5.39062 4.43902 5.7114 4.83396 6.21123L7.15554 6.19922C7.16949 6.19915 7.18344 6.1999 7.1973 6.20147C7.59243 5.70722 8.20052 5.39062 8.88257 5.39062C9.13657 5.39062 9.38031 5.43454 9.60662 5.51517L8.91657 3.44664L8.91279 3.43555C8.79217 3.08954 8.4656 2.85703 8.09829 2.85703H7.18423L7.17595 2.85694C6.98623 2.85254 6.83379 2.69739 6.83379 2.50664C6.83379 2.31313 6.99068 2.15625 7.18423 2.15625H8.09829Z" fill="currentColor"/> </svg> Try on`; btn.onclick = async () => { const renderEl = document.getElementById('tryon_modal_render'); SPZ.whenApiDefined(renderEl).then((api) => { console.log(that_.settings_); api.render({ settings: that_.settings_, variant_id: that_.has_tryon_list[p.getAttribute('product-id')], product_id: p.getAttribute('product-id')}, true).then((data) => { const modalEl = document.getElementById('tryon_modal'); SPZ.whenApiDefined(modalEl).then((modal) => { modal.open(); }); const frame = document.querySelector('#tryon_custom'); SPZ.whenApiDefined(frame).then((api) => { const pdValueEl = document.getElementById('tryon_pd_input'); pdValueEl && pdValueEl.addEventListener('blur',function(e) { api.handlePdValidate(e.target); }) }); }); }); const videoFailRenderEl = document.getElementById('tryon_video_failed_modal_render'); SPZ.whenApiDefined(videoFailRenderEl).then((api) => { api.render({ settings: that_.settings_ }, true); }); } p.appendChild(btn); p.setAttribute('first-tryon-id', that_.has_tryon_list[p.getAttribute('product-id')]); this.tryon_(); } }) }) } isLayoutSupported(layout) { return layout == SPZCore.Layout.CONTAINER;; } tryon_ = (e) => { const renderEl = document.getElementById('spz_custom_cattle_model_list'); SPZ.whenApiDefined(renderEl).then((api) => { api.renderFrame_(); }); } setupAction_ = () => { this.registerAction('listUpdate', (e) => { this.listUpdate(e.args.data.data); }) this.registerAction('observe_', (e) => { this.observe_(e); }) this.registerAction('tryon_', (e) => { this.tryon_(e); }) } } SPZ.defineElement('spz-custom-collection-logic', SpzCustomCollectionLogic)

class SpzCustomCollectionBtn extends SPZ.BaseElement { constructor(element) { super(element); this.settings_ = null; } buildCallback = () => { this.action_ = SPZServices.actionServiceForDoc(this.element); this.templates_ = SPZServices.templatesForDoc(this.element); this.xhr_ = SPZServices.xhrFor(this.win); this.setupAction_(); } mountCallback = () => { } render = (data) => { if(!data.data.collection_page_tryon_enable) return; return this.templates_ .findAndRenderTemplate(this.element, data.data) .then((el) => { const modelRender = document.getElementById('spz_custom_cattle_model_list'); el.onclick = () => { const modelList = document.querySelector('.cattle_model_list_wrap'); el.setAttribute('hidden', ''); if(modelList) { modelList.removeAttribute('hidden'); SPZ.whenApiDefined(modelRender).then((api) => { api.local_list = localStorage.getItem('tryon_local_list') ? JSON.parse(localStorage.getItem('tryon_local_list')) : []; api.trying_ = true; api.dorender_(); }); } else { SPZ.whenApiDefined(modelRender).then((api) => { api.trying_ = true; api.render(); }); } } const children = this.element.querySelector('*:not(template)'); children && SPZCore.Dom.removeElement(children); const filter = document.querySelector('.collection_filter_container') || document.querySelector('.collection_title'); const list = document.getElementById('collection-list'); el.classList.add('md\:hidden'); filter && (filter.appendChild(el)); const element = el.cloneNode(true); element.classList.remove('md\:hidden'); element.onclick = () => { const modelList = document.querySelector('.cattle_model_list_wrap'); element.setAttribute('hidden', ''); if(modelList) { modelList.removeAttribute('hidden'); SPZ.whenApiDefined(modelRender).then((api) => { api.trying_ = true; api.renderFrame_(); }); } else { SPZ.whenApiDefined(modelRender).then((api) => { api.trying_ = true; api.render(); }); } } element.classList.add('lg\:hidden'); list && (list.closest('.page-container').insertBefore(element, list)); }); } isLayoutSupported(layout) { return layout == SPZCore.Layout.CONTAINER;; } setupAction_ = () => { this.registerAction('render', (e) => { this.render(e.args.data); }) } } SPZ.defineElement('spz-custom-collection-tryon-btn', SpzCustomCollectionBtn)

class SpzCustomCattleModelList extends SPZ.BaseElement { constructor(element) { super(element); this.model_list = []; this.settings_ = {}; this.modelImg_ = ''; this.trying_ = false; } buildCallback = () => { this.action_ = SPZServices.actionServiceForDoc(this.element); this.templates_ = SPZServices.templatesForDoc(this.element); this.xhr_ = SPZServices.xhrFor(this.win); this.setupAction_(); } mountCallback = () => { } render = async () => { const viewport_ = this.getViewport(); const settings = document.querySelector('#cattle_collection_settings'); const settingsApi = await SPZ.whenApiDefined(settings); this.settings_ = settingsApi.settings_; this.local_list = localStorage.getItem('tryon_local_list') ? JSON.parse(localStorage.getItem('tryon_local_list')) : [] this.model_list = this.local_list; if(this.settings_.model_image_enable) { this.model_list = [...this.model_list, ...this.settings_.applyed_face_model_images.map(i=>({src: i}))]; } this.modelImg_ = this.model_list.length ? this.model_list[0].src : 'https://img.staticdj.com/oss/operation/8974641d948641d15aa5dad8abcb9647.png'; return this.templates_ .findAndRenderTemplate(this.element, {imgList: this.model_list, width: viewport_.getWidth(), setting: this.settings_}) .then((el) => { const children = this.element.querySelector('*:not(template)'); children && SPZCore.Dom.removeElement(children); let number = 6; if(viewport_.getWidth() >= 960) { const collection = document.querySelector('.collection_title'); collection.closest('.page-container').insertBefore(el, collection); } else { number = 5; const list = document.getElementById('collection-list'); list.closest('.page-container').insertBefore(el, list); } const btn = document.querySelector('.cattle_model_close_btn'); const next = document.querySelector('.next-btn'); const prev = document.querySelector('.prev-btn'); const scrollDom = document.querySelector('.cattle_model_list_img'); if(this.model_list.length <= number) { next.setAttribute('disabled', ''); prev.setAttribute('disabled', ''); } if(!this.model_list.length) { next.setAttribute('hidden', ''); prev.setAttribute('hidden', ''); } next.onclick = () => { const left = scrollDom.scrollLeft; const offset = number === 6 ? 92 : 62.5; scrollDom.scrollLeft = left + offset; } prev.onclick = () => { const left = scrollDom.scrollLeft; const offset = number === 6 ? 92 : 62.5; scrollDom.scrollLeft = left - offset; } btn.onclick = () => { document.querySelector('.cattle_model_list_wrap').setAttribute('hidden',''); document.querySelectorAll('.cattle_tryon_btn_wrap').forEach(d => d.removeAttribute('hidden')) document.querySelectorAll('.cattle_tryon_link').forEach(f => SPZCore.Dom.removeElement(f)); document.querySelectorAll('.product-snippet__img-wrapper').forEach(f => f.removeAttribute('style')); this.trying_ = false; document.querySelector(`[for=tryon_model_key_${0}]`).click(); } scrollDom.onscroll = () => { if(scrollDom.scrollLeft === 0) { prev.setAttribute('disabled', ''); } else { prev.removeAttribute('disabled'); } const offset = number === 6 ? 92 : 62.5; if(scrollDom.scrollLeft >= (this.model_list.length - number) * offset -12) { next.setAttribute('disabled', ''); } else { next.removeAttribute('disabled'); } } this.trying_ = true; this.renderFrame_(); }) } dorender_ = async (current=0) => { console.log('dorender'); this.local_list = localStorage.getItem('tryon_local_list') ? JSON.parse(localStorage.getItem('tryon_local_list')) : []; const viewport_ = this.getViewport(); this.model_list = this.local_list; let number = 6; if(this.settings_.model_image_enable) { this.model_list = [...this.model_list, ...this.settings_.applyed_face_model_images.map(i=>({src: i}))]; } const imgList = this.model_list; return this.templates_ .findAndRenderTemplate(this.element, {imgList, width: viewport_.getWidth(), setting: this.settings_}) .then((el) => { const children = this.element.querySelector('*:not(template)'); children && SPZCore.Dom.removeElement(children); const list = document.querySelector('.cattle_model_list_wrap'); if(list.hasAttribute('hidden')) { el.setAttribute('hidden'); } list.closest('.page-container').replaceChild(el, list); if(viewport_.getWidth() < 960) { number = 5; } const btn = document.querySelector('.cattle_model_close_btn'); const next = document.querySelector('.next-btn'); const prev = document.querySelector('.prev-btn'); const scrollDom = document.querySelector('.cattle_model_list_img'); if(this.model_list.length <= number) { next.setAttribute('disabled', ''); prev.setAttribute('disabled', ''); } if(!this.model_list.length) { next.setAttribute('hidden', ''); prev.setAttribute('hidden', ''); } next.onclick = () => { const left = scrollDom.scrollLeft; const offset = number === 6 ? 92 : 62.5; scrollDom.scrollLeft = left + offset; } prev.onclick = () => { const left = scrollDom.scrollLeft; const offset = number === 6 ? 92 : 62.5; scrollDom.scrollLeft = left - offset; } btn.onclick = () => { document.querySelector('.cattle_model_list_wrap').setAttribute('hidden',''); document.querySelectorAll('.cattle_tryon_btn_wrap').forEach(d => d.removeAttribute('hidden')) document.querySelectorAll('.cattle_tryon_link').forEach(f => SPZCore.Dom.removeElement(f)); document.querySelectorAll('.product-snippet__img-wrapper').forEach(f => f.removeAttribute('style')); this.trying_ = false; document.querySelector(`[for=tryon_model_key_${0}]`).click(); } scrollDom.onscroll = () => { if(scrollDom.scrollLeft === 0) { prev.setAttribute('disabled', ''); } else { prev.removeAttribute('disabled'); } const offset = number === 6 ? 92 : 62.5; if(scrollDom.scrollLeft >= (this.model_list.length - number) * offset -12) { next.setAttribute('disabled', ''); } else { next.removeAttribute('disabled'); } } if(this.model_list.length) { document.querySelector(`[for=tryon_model_key_${current}]`).click(); } else { this.changeModel_({args: {data: 'https://img.staticdj.com/oss/operation/8974641d948641d15aa5dad8abcb9647.png'}}); } }).catch(err=>console.log(err)); } renderFrame_ = async () => { if(!this.trying_) return; const that_ = this; const list = document.getElementById('collection-list'); const productDom = list.querySelectorAll('shoplazza-product-snippet,.shoplazza-product-snippet'); const filterList = Array.from(productDom).filter(p => !!p.getAttribute('first-tryon-id')); if(!filterList.length) return; this.compressorImage(this.modelImg_); } compressorImage(url) { const name = url.split('/').pop(); const fileType = 'image/jpeg'; fetch(url) .then((res) => res.blob()) .then((blob) => { let file = new File([blob], name, { type: fileType }); this.compressorImageFile(url, file); }) .catch(err => { this.compressorImageFile(url, null); }); } compressorImageFile(url, file) { const fileThis = file; const that = this; if (fileThis) { let quality = 0.2; new Compressor(fileThis, { quality: quality, maxWidth: 300, maxHeight: 300, success: (result) => { const reader = new FileReader(); reader.readAsDataURL(result); reader.onloadend = function() { const base64data = reader.result; that.tryG2d(null, base64data); } }, error(err) { that.tryG2d(url, null); } }); } else { that.tryG2d(url, null); } } tryG2d = async(url, base64) => { const that_ = this; const list = document.getElementById('collection-list'); const productDom = list.querySelectorAll('shoplazza-product-snippet,.shoplazza-product-snippet'); const filterList = Array.from(productDom).filter(p => !!p.getAttribute('first-tryon-id')); if(!filterList.length) return; const body = { variant_ids: filterList.map(product => product.getAttribute('first-tryon-id')), } if(url) { body.image_url = url; } if(base64) { body.image_base64 = base64; } const tryon = await SPZServices.xhrFor(this.win).fetchJson('/api/whiteant/tryon', { method: 'POST', body }) if(!this.trying_) { document.querySelectorAll('.cattle_tryon_link').forEach(f => SPZCore.Dom.removeElement(f)); document.querySelectorAll('.product-snippet__img-wrapper').forEach(f => f.removeAttribute('style')); return; }; filterList.forEach(p => { p.querySelector('.cattle_tryon_link') && SPZCore.Dom.removeElement(p.querySelector('.cattle_tryon_link')); const width = p.querySelector('.product-snippet__img_main').offsetWidth; const scale = width / tryon.image_width; const modelHeight = scale * tryon.image_height; const modelImg = document.createElement('img'); modelImg.src = that_.modelImg_; modelImg.classList.add('modelImg'); modelImg.style.width = width; modelImg.style.height = modelHeight + 'px'; p.querySelector('.product-snippet__img-wrapper').style.height = modelHeight + 'px'; p.querySelector('.product-snippet__img-wrapper').style.overflow = 'hidden'; const link = p.querySelector('.product-snippet__img-link').href; const a = document.createElement('a'); a.classList.add('cattle_tryon_link'); a.href = link; a.appendChild(modelImg); p.appendChild(a); if(tryon.faces) { const frame = document.createElement('img'); frame.classList.add('frame_img'); const frameData = tryon.glasses.find(f =>f.variant_id === p.getAttribute('first-tryon-id')); frame.src = frameData.frame_img; frame.style.width = scale * frameData.frame_tryon[0].scale.width + 'px'; frame.style.height = scale * frameData.frame_tryon[0].scale.height + 'px'; frame.style.transform = 'rotateZ(' + (+frameData.frame_tryon[0].rotation.z) +'deg)'; frame.style.top = scale * frameData.frame_tryon[0].position.y - (parseFloat(frame.style.height) / 2) + 'px'; frame.style.left = scale * frameData.frame_tryon[0].position.x - (parseFloat(frame.style.width) / 2) + 'px'; frame.style.zIndex = 10; p.querySelector('.cattle_tryon_link').appendChild(frame); } p.setAttribute('tryon-ing', true); } ) } changeModel_ = (event) => { console.log(this.modelImg_,'this.modelImg_'); this.modelImg_ = event.args.data; this.renderFrame_(); } isLayoutSupported(layout) { return layout == SPZCore.Layout.CONTAINER;; } uploadCallback = (data) => { this.local_list && this.local_list.unshift(data); if(this.local_list && this.local_list.length > 5) { this.local_list.length = 5; } localStorage.setItem('tryon_local_list', JSON.stringify(this.local_list)); const modalList = document.querySelector('#cattle_batch_upload_modal'); modalList && SPZ.whenApiDefined(modalList).then(async api => { api.close(); }) const list = document.querySelector('.cattle_model_list_wrap'); if(list && !list.getAttribute('hidden')) { this.dorender_(0); } } removeModel = () => { this.local_list = localStorage.getItem('tryon_local_list') ? JSON.parse(localStorage.getItem('tryon_local_list')) : []; const target = this.deleteSrc; this.local_list = this.local_list.filter(item => item.src !== target); localStorage.setItem('tryon_local_list', JSON.stringify(this.local_list)); let current = 0; this.model_list = [...this.local_list, ...this.settings_.applyed_face_model_images.map(i=>({src: i}))]; const imgList = this.model_list; imgList.forEach((v, i) => { if(v.src === this.modelImg_) { current = i; } }) const viewport_ = this.getViewport(); this.dorender_(current); } setupAction_ = () => { this.registerAction('render', (e) => { this.render(e); }) this.registerAction('changeModel_', (e) => { console.log('registerAction'); this.changeModel_(e); }) this.registerAction('resetModel', (e) => { document.querySelector(`[for=tryon_model_key_${0}]`).click(); }) this.registerAction('slideChange', (e) => { const index = e.args.data.index; const list = e.args.list.split(','); document.querySelector(`[for=tryon_model_key_${index}]`).click(); }) this.registerAction('remove', (e) => { this.deleteSrc = e.args.data; const modalEl = document.getElementById('tryon_collection_delete_model_modal'); SPZ.whenApiDefined(modalEl).then((modal) => { modal.open(); }); }) this.registerAction('removeModel', (e) => { this.removeModel(e); }) } } SPZ.defineElement('spz-custom-cattle-model-list', SpzCustomCattleModelList)

class SpzCustomCollectionModal extends SPZ.BaseElement { constructor(element) { super(element); } buildCallback = () => { this.action_ = SPZServices.actionServiceForDoc(this.element); this.templates_ = SPZServices.templatesForDoc(this.element); this.xhr_ = SPZServices.xhrFor(this.win); this.setupAction_(); } isLayoutSupported(layout) { return layout == SPZCore.Layout.CONTAINER;; } setupAction_ = () => { this.registerAction('getSettings', (e) => { const list = document.querySelector('#cattle_collection_settings'); list && (SPZ.whenApiDefined(list).then(api => { console.log( api.settings_); const photo = document.querySelector('.cattle-collection-modal-left .photo'); const file = document.querySelectorAll('.file'); if(api.settings_.local_image_upload_enable) { file.forEach(f =>f.removeAttribute('hidden')); } if(api.settings_.photo_image_uploade_enable) { photo.removeAttribute('hidden'); } })); }) } } SPZ.defineElement('spz-custom-cattle-collection-modal', SpzCustomCollectionModal)

${data.title}

Tommy Hilfiger - TH 1689

Rag & Bone - RNB 7013

Nine Accord - Union Oris

Carrera - CA 4480

Tommy Hilfiger - TH 1686

Genstar - TR 4112

Nine Accord - D. Elpin

JC 220/F

Genstar - TR 4805

Rag & Bone - RNB 3007

Tommy Hilfiger - TH 1495

Genstar - TR 4075

Recently Viewed