@teddy-dev/frontend 1.0.1

package/wishlist/teddy-wishlist-item.js

@@ -0,0 +1,46 @@
+await loadComponent('./components/mc-element.js', false);
+await loadComponent('./wishlist/teddy-wishlist.js', false);
+
+class TeddyWIshlistItem extends McElement {
+
+  connectedCallback() {
+    if (!this.dataset.handle) {
+      console.error('TeddyWIshlistItem: missing data-handle');
+      return;
+    }
+    this.observe();
+  }
+
+  observe = () => {
+    const observer = new IntersectionObserver((entries, observer) => {
+      entries.forEach(entry => {
+        if (!entry.isIntersecting) return; // Only proceed if the item is in the viewport
+        this.render();
+        observer.disconnect(); // Stop observing after the item is rendered
+      });
+    }, {
+      root: null, // viewport
+      rootMargin: '0px',
+      threshold: 0.1
+    });
+    observer.observe(this);
+  }
+
+  render = () => {
+    McShopify.section({
+      path: `${Shopify.routes.root}products/${this.dataset.handle}`,
+      section_id: 'helper-wishlist-card',
+      onSuccess: (data) => {
+        this.innerHTML = data;
+      },
+      onError: (error) => {
+        console.error('TeddyWIshlistItem: error fetching item', error);
+      }
+    });
+  }
+
+}
+if (!window.customElements.get('teddy-wishlist-item')) {
+  window.customElements.define('teddy-wishlist-item', TeddyWIshlistItem);
+}
+window.TeddyWIshlistItem = TeddyWIshlistItem;

package/wishlist/teddy-wishlist-page.js

@@ -0,0 +1,59 @@
+await loadComponent('./components/mc-element.js', false);
+await loadComponent('./wishlist/teddy-wishlist.js', false);
+
+class TeddyWishlistPage extends McElement {
+  emptyTemplate; listTemplate; itemTemplate;
+
+  connectedCallback() {
+    this.emptyTemplate = this.querySelector('#empty-template');
+    this.listTemplate = this.querySelector('#list-template');
+    this.itemTemplate = this.querySelector('#item-template');
+
+    if (!this.emptyTemplate || !this.listTemplate || !this.itemTemplate) { console.error('TeddyWishlistPage: missing templates'); return; }
+
+    this.render();
+  }
+
+  render = () => {
+    if (TeddyWishlist.isEmpty()) {
+      this.renderEmpty();
+    } else {
+      this.renderList();
+    }
+  }
+
+  renderEmpty = () => {
+    this.innerHTML = '';
+    this.appendChild(this.emptyTemplate.content.cloneNode(true));
+  }
+
+  renderItem = (item) => {
+    const itemElement = this.itemTemplate.content.cloneNode(true);
+    const itemContainer = itemElement.querySelector('teddy-wishlist-item');
+    if (!itemContainer) { console.error('TeddyWishlistPage: missing item container'); return; }
+
+    itemContainer.dataset.variant = item.variant;
+    itemContainer.dataset.handle = item.handle;
+
+    return itemElement;
+  }
+
+  renderList = () => {
+    this.innerHTML = '';
+    const listElement = this.listTemplate.content.cloneNode(true);
+    const itemsContainer = listElement.querySelector('[data-list]');
+    if (!itemsContainer) { console.error('TeddyWishlistPage: missing items container'); return; }
+
+    TeddyWishlist.getItems().forEach(item => {
+      itemsContainer.appendChild(this.renderItem(item));
+    });
+
+    this.appendChild(listElement);
+    this.innerHTML = this.innerHTML.replace('${count}', TeddyWishlist.getItemCount());
+  }
+
+}
+if (!window.customElements.get('teddy-wishlist-page')) {
+  window.customElements.define('teddy-wishlist-page', TeddyWishlistPage);
+}
+window.TeddyWishlistPage = TeddyWishlistPage;

package/wishlist/teddy-wishlist.js

@@ -0,0 +1,131 @@
+import '../res/mc-events.js';
+
+class TeddyWishlist {
+
+  static addItem(item) {
+    // aggiunge l'item alla wishlist
+    // se c'è il customer salva nel metafield
+    if(item == undefined || item == null) { console.error('TeddyWishlist: addItem - item is undefined or null'); return; }
+    if(TeddyWishlist.isInWishlist(item)) { console.error('TeddyWishlist: addItem - item is already in wishlist'); return; }
+
+    const wishlist = this.getItems();
+    wishlist.push(item);
+    localStorage.setItem('wishlist', JSON.stringify(wishlist));
+    window.dispatchEvent(new CustomEvent(MCEVENTS.WISHLIST_ADDED, { detail: item }));
+    window.dispatchEvent(new CustomEvent(MCEVENTS.WISHLIST_CHANGED, { detail: TeddyWishlist.getItems() }));
+    TeddyWishlist.save();
+  }
+
+  static removeItem(item) {
+    // rimuove l'item dalla wishlist
+    // se c'è il customer salva nel metafield
+    if(item == undefined || item == null) { console.error('TeddyWishlist: removeItem - item is undefined or null'); return; }
+    if(!TeddyWishlist.isInWishlist(item)) { console.error('TeddyWishlist: removeItem - item is not in wishlist'); return; }
+
+    const wishlist = TeddyWishlist.getItems();
+    const index = wishlist.findIndex(i => i.variant == item.variant && i.handle == item.handle);
+    wishlist.splice(index, 1);
+    localStorage.setItem('wishlist', JSON.stringify(wishlist));
+    window.dispatchEvent(new CustomEvent(MCEVENTS.WISHLIST_REMOVED, { detail: item }));
+    window.dispatchEvent(new CustomEvent(MCEVENTS.WISHLIST_CHANGED, { detail: TeddyWishlist.getItems() }));
+    TeddyWishlist.save();
+  }
+
+  static getItems() {
+    // ritorna gli item della wishlist
+    return localStorage.getItem('wishlist') ? JSON.parse(localStorage.getItem('wishlist')) : [];
+  }
+
+  static clearWishlist() {
+    // svuota la wishlist
+    // se c'è il customer salva nel metafield
+    localStorage.removeItem('wishlist');
+    window.dispatchEvent(new CustomEvent(MCEVENTS.WISHLIST_CLEARED));
+    window.dispatchEvent(new CustomEvent(MCEVENTS.WISHLIST_CHANGED, { detail: TeddyWishlist.getItems() }));
+    TeddyWishlist.save();
+  }
+
+  static getItemCount() {
+    // ritorna il numero di item nella wishlist
+    return TeddyWishlist.getItems().length;
+  }
+
+  static isEmpty() {
+    // ritorna true se la wishlist è vuota
+    return TeddyWishlist.getItems().length == 0;
+  }
+
+  static isInWishlist(item) {
+    // ritorna true se l'item è nella wishlist
+    const found = TeddyWishlist.getItems().find(i => i.variant == item.variant && i.handle == item.handle);
+    return found !== undefined;
+  }
+
+  static merge(list){
+    // unisce la wishlist con un'altra wishlist
+    if(!Array.isArray(list)) { console.error('TeddyWishlist: merge - list is not an array'); return; }
+
+    const wishlist = [];
+    TeddyWishlist.getItems().forEach(item => {
+      if(wishlist.find(i => i.variant == item.variant && i.handle == item.handle) == undefined) {
+        wishlist.push(item);
+      }
+    });
+    list.forEach(item => {
+      if(wishlist.find(i => i.variant == item.variant && i.handle == item.handle) == undefined) {
+        wishlist.push(item);
+      }
+    });
+    localStorage.setItem('wishlist', JSON.stringify(wishlist));
+    window.dispatchEvent(new CustomEvent(MCEVENTS.WISHLIST_CHANGED, { detail: TeddyWishlist.getItems() }));
+    TeddyWishlist.save();
+  }
+
+  static save() {
+    // salva la wishlist chiamando simone+
+    if(window.theme.wishlist == undefined) { return; }
+
+    axios({
+      method: 'post',
+      url: theme.apis.wishlist.save,
+      data: TeddyWishlist.getItems().map(item => item.variant.toString()),
+    }).then(response => {
+      if(response.data.success) {
+        window.dispatchEvent(new CustomEvent(MCEVENTS.WISHLIST_SAVED, { detail: TeddyWishlist.getItems() }));
+      } else {
+        window.dispatchEvent(new CustomEvent(MCEVENTS.WISHLIST_ERROR, { detail: TeddyWishlist.getItems() }));
+        console.error('TeddyWishlist: save - error saving wishlist', response.data);
+      }
+    }).catch(error => {
+      window.dispatchEvent(new CustomEvent(MCEVENTS.WISHLIST_ERROR, { detail: TeddyWishlist.getItems() }));
+      console.error('TeddyWishlist: save - error saving wishlist', error);
+    });
+  }
+
+  static isSameWishlist = (list) => {
+    const items = TeddyWishlist.getItems();
+    if (list.length !== items.length) return false;
+
+    const serialize = obj => `${obj.handle}-${obj.variant}`;
+
+    const sorted1 = list.map(serialize).sort();
+    const sorted2 = items.map(serialize).sort();
+
+    const isEquals = sorted1.every((val, i) => val == sorted2[i]);
+    return isEquals;
+  }
+
+  static checkCustomer = () => {
+    // controlla se bisogna fare il merge della wishlist con quella del metafield
+    if(window.theme.wishlist == undefined) { return; }
+
+    // controlla se gli elementi in TeddyWishlist.getItems() sono già presenti in window.theme.wishlist
+    if(!TeddyWishlist.isSameWishlist(window.theme.wishlist)) {
+      TeddyWishlist.merge(window.theme.wishlist);
+    }
+  }
+
+
+}
+window.TeddyWishlist = TeddyWishlist;
+export default TeddyWishlist;