Lista de deseos

Inicio Lista de deseos if (typeof breadcrumbComponentDeclare == 'undefined') { class BreadcrumbComponent extends HTMLElement { constructor() { super(); this.firstPostCollection(); this.getCollection(); } connectedCallback() { this.firstLink = this.querySelector('.link.home-link') this.lastLink = this.querySelector('.observe-element') this.classList.add('initialized'); this.initObservers(); } static createHandler(position = 'first', breadcrumb = null) { const handler = (entries, observer) => { entries.forEach(entry => { if (breadcrumb == null) return observer.disconnect(); if (entry.isIntersecting ) { breadcrumb.classList.add(`disable-${position}`); } else { breadcrumb.classList.remove(`disable-${position}`); } }) } return handler; } initObservers() { const scrollToFirstHandler = BreadcrumbComponent.createHandler('first', this); const scrollToLastHandler = BreadcrumbComponent.createHandler('last', this); this.scrollToFirstObserver = new IntersectionObserver(scrollToFirstHandler, { threshold: 1 }); this.scrollToLastObserver = new IntersectionObserver(scrollToLastHandler, { threshold: 0.6 }); this.scrollToFirstObserver.observe(this.firstLink); this.scrollToLastObserver.observe(this.lastLink); } firstPostCollection() { if (!document.body.matches('.template-collection')) return; this.postCollection(true); this.checkCollection(); } postCollection(showCollection) { const title = this.dataset.collectionTitle ? this.dataset.collectionTitle : "Products"; let collection = {name: title, url: window.location.pathname, show: showCollection}; localStorage.setItem('_breadcrumb_collection', JSON.stringify(collection)); } checkCollection() { document.addEventListener("click", (event) => { const target = event.target; if (!target.matches('.card-link')) return; target.closest('.shopify-section[id*="product-grid"]') == null ? this.postCollection(false) : this.postCollection(true); }); } getCollection() { if (!document.body.matches('.template-product')) return; const collection = JSON.parse(localStorage.getItem('_breadcrumb_collection')); let checkCollection = document.referrer.indexOf('/collections/') !== -1 && (new URL(document.referrer)).pathname == collection.url && collection && collection.show ? true : false; const breadcrumb = `${checkCollection ? collection.name : "Products"}`; this.querySelectorAll('.separate')[0]?.insertAdjacentHTML("afterend", breadcrumb); } } window.addEventListener('load', () => { customElements.define('breadcrumb-component', BreadcrumbComponent); }) var breadcrumbComponentDeclare = BreadcrumbComponent; } Lista de deseos Ver como Compartir mi lista de deseos por correo electrónico class WishlistView extends HTMLElement { constructor() { super(); } connectedCallback() { this.gridViewContainer = this.querySelector('[data-wishlist-items-grid-display]'); this.listPaginationButtons = document.getElementById('wishlist-paginate'); this.viewCols = [...this.querySelectorAll('[data-col]')]; this.wlpaggingContainer = document.getElementById('wishlist-paginate'); this.wishlistContainer = this.closest('[data-wishlist-container]'); this.wishlistFooter = document.querySelector('[data-wishlist-footer]'); this.viewCols.forEach(viewCol => { viewCol.addEventListener('click', this.onViewColClick.bind(this)); }) window.addEventListener('resize', this.onResize.bind(this)); this.initWishlistPage(); } getMaxColOnSize() { const availableViewCols = this.viewCols.filter(view => { return getComputedStyle(view, null).getPropertyValue('display') === 'inline-block'; }).map(view => Number(view.dataset.col)) return availableViewCols[availableViewCols.length - 1] } onResize() { const selectedCol = Number(this.querySelector('[data-col].active').dataset.col); const maxColNum = this.getMaxColOnSize(); if (selectedCol > maxColNum) { this.viewCols.find(viewCol => Number(viewCol.dataset.col) === maxColNum).click(); } } onViewColClick(e) { const viewCol = e.target; const col = Number(viewCol.dataset.col); this.switchViewListGrid(col === 1) this.setPaginationAndHeadingView(col === 1); this.paginationForList(col === 1) this.setGridColumns(col) this.setActiveViewCol(viewCol) } switchViewListGrid(isList) { if (isList) { this.gridViewContainer.classList.add('productList'); return } this.gridViewContainer.classList.remove('productList'); } setGridColumns(col) { this.gridViewContainer.style.setProperty('--grid-columns', col); } setActiveViewCol(colElement) { this.viewCols.forEach(col => col.classList.remove('active')); colElement.classList.add('active'); } setPaginationAndHeadingView(isList) { if (isList) { this.listPaginationButtons.style.display = 'flex'; return; } this.listPaginationButtons.style.display = 'none'; } paginationForList(isList) { const items = this.gridViewContainer.querySelectorAll('.product'); const currentPage = Number(this.listPaginationButtons.dataset.currentPage); if (isList && currentPage) { items.forEach((item, index) => { if (index >= (currentPage -1 ) * 3 && index < currentPage * 3) { $(item).show(); } else { $(item).hide(); } }) } else { items.forEach((item, index) => { $(item).show(); }) } } // For building wishlist page async initWishlistPage (){ if (typeof(Storage) !== 'undefined') { const wishlistList = localStorage.getItem('wishlistItem') ? JSON.parse(localStorage.getItem('wishlistItem')) : []; if (wishlistList.length > 0) { try { await Promise.all(wishlistList.map((handle, index) => this.setProductForWishlistPage(handle, index, wishlistList.length))); this.updateShareWishlistViaMail(); window.sharedFunctions?.calculateTranslateYHeight(); this.calculateCard06Padding(); this.gridViewContainer.classList.add('is-loaded'); this.wishlistPagination(); this.removeAndAddPaginationButtonEvents(); this.setDefaultLayout(); document.addEventListener('updatepagination', this.wishlistPagination.bind(this)); document.addEventListener('updatewishlistmail', this.updateShareWishlistViaMail.bind(this)); document.addEventListener('addwishlistitem', async (e) => { const handle = e.detail.handle; await this.setProductForWishlistPage(handle); this.wishlistPagination(); }); } catch(err) { console.error(err); showWarning(err.message); } } else { if (this.wishlistContainer) { this.wishlistContainer.classList.add('is-empty'); this.wishlistContainer.innerHTML = ` ${window.wishlist.empty} ${window.wishlist.continue_shopping} ` ; } if (this.wishlistFooter) this.wishlistFooter.style.display = 'none'; } } else { alert('Sorry! No web storage support..'); } } setDefaultLayout() { const defaultDesktopCol = parseInt(this.dataset.defaultDesktopCol); const maxCol = this.getMaxColOnSize(); const defaultCol = defaultDesktopCol parseInt(viewCol.dataset.col) === defaultCol ).click(); } async setProductForWishlistPage(handle, index, wishlistListLength) { try { const res = await fetch(`${window.routes.root}/products/${handle}?view=ajax_wishlist_card`) const data = await res.text(); const productHTML = new DOMParser().parseFromString(data, 'text/html').getElementsByClassName('product')[0]; this.gridViewContainer.appendChild(productHTML); productHTML.dataset.productHandle = handle; const item = this.wishlistContainer.querySelector(`[data-wishlist][data-wishlist-handle="${handle}"]`); if (item != null) { item.classList.add('wishlist-added'); item.querySelector('.text').textContent = window.wishlist.added; item.classList.add('is-in-grid'); productHTML.dataset.wishlistAdded = `wishlist-${item.dataset.productId}`; item.addEventListener('click', e => { e.target.closest('.product').remove(); }) if (index >= 3) { item.closest('.product').display = 'none'; } } } catch (err) { console.error(err); showWarning(err.message); } } static getPaginationButton(totalPages) { let paggingTpl; if (window.pagination.style === 1) { paggingTpl = '

'+ window.pagination.prev +'

' + window.pagination.next +'