wishlist-power-fine-tune-language

en.json

  "apps": {
    "wishlist": {
      "empty": {
        "title": "Empty wishlist",
        "description": "You have no products in your wishlist",
        "link": "Start shopping"
      },
      "share": {
        "title_without_name": "Shared wishlist",
        "title_with_name": "Shared wishlist of [NAME]",
        "button_title": "Share your wishlist"
      },
      "login_to_use_pop_up": {
        "title": "Share your wishlist",
        "description": "You must log in to share your wishlist"
      }
    }
  }

wishlist-power-fine-tune-language.js

<script>
  document.addEventListener('DOMContentLoaded', () => {
    function decodeHTMLEntities(str) {
      const textarea = document.createElement("textarea");
      textarea.innerHTML = str;
      return textarea.value;
    }

    function getSharedWishlistTitle() {
      let title = decodeHTMLEntities("{{ 'apps.wishlist.share.title_with_name' | t }}");
      if (window.Maestrooo.wishlist?.sharedCustomerInfo?.customer_name) {
        title = title.replace("[NAME]", window.Maestrooo.wishlist?.sharedCustomerInfo?.customer_name);
      } else {
        let title = decodeHTMLEntities("{{ 'apps.wishlist.share.title_without_name' | t }}");
      }
      return title;
    }

    const contentTargetNode = document.querySelector('ooo-wl-content');
    const config = { attributes: true, childList: true };
    const callback = () => {
      const emptyWishlistTitle = document.querySelector('.ooo-wl-empty__title');
      if (emptyWishlistTitle){
        emptyWishlistTitle.innerText = decodeHTMLEntities("{{ 'apps.wishlist.empty.title' | t }}");
      }
  
      const emptyWishlistDescription = document.querySelector('.ooo-wl-empty__description');
      if (emptyWishlistDescription) {
        emptyWishlistDescription.innerText = decodeHTMLEntities("{{ 'apps.wishlist.empty.description' | t }}");
      }
  
      const emptyWishlistLink = document.querySelector('.ooo-wl-link');
      if (emptyWishlistLink){
        emptyWishlistLink.innerText = decodeHTMLEntities("{{ 'apps.wishlist.empty.link' | t }}");
      }
    }
    
    const observer = new MutationObserver(callback);
    observer.observe(contentTargetNode, config);

    const shareTargetNode = document.querySelector('ooo-wl-share-content');
    if (shareTargetNode.querySelector('button')){
      shareTargetNode.querySelector('button').style.color = '#365072';
    }

    const shareCallback = () => {
      const shareWishlist = document.querySelector('.ooo-wl-share-button__title');
      if (shareWishlist){
        shareWishlist.innerText = decodeHTMLEntities("{{ 'apps.wishlist.share.button_title' | t }}");
      }

      const shareWishlistTitle = document.querySelector('.ooo-wl-share-button__customer-name');
      if (shareWishlistTitle){
        shareWishlistTitle.innerText = getSharedWishlistTitle();
      }
    }

    const shareObserver = new MutationObserver(shareCallback);
    shareObserver.observe(shareTargetNode, config);

    const loginToSharePopUpTargetNode = document.querySelector('ooo-wl-login-popup');
    const loginToSharePopUpCallback = () => {
      const loginToSharePopUpTitle = document.querySelector('.ooo-wl-popup__title');
      if (loginToSharePopUpTitle) {
        loginToSharePopUpTitle.innerText = "{{ 'apps.wishlist.login_to_use_pop_up.title' | t }}"
      }

      const loginToSharePopUpDescription = document.querySelector('.ooo-wl-popup__description');
      if (loginToSharePopUpDescription){
        loginToSharePopUpDescription.innerText = "{{ 'apps.wishlist.login_to_use_pop_up.description' | t }}"
      }
    };


    if (loginToSharePopUpTargetNode){
      const loginToSharePopUpObserver = new MutationObserver(loginToSharePopUpCallback);
      loginToSharePopUpObserver.observe(loginToSharePopUpTargetNode, config);
    }

    const shareWishlistTargetNode = document.querySelector('.ooo-wl-content__container');
    const shareWishlistCallback = () => {
      const shareWishlistTitle = document.querySelector('.ooo-wl-share-button__customer-name');
      if (shareWishlistTitle) {
        shareWishlistTitle.innerText = getSharedWishlistTitle();
      }
    };

    if (shareWishlistTargetNode){
      const shareWishlistObserver = new MutationObserver(shareWishlistCallback);
      shareWishlistObserver.observe(shareWishlistTargetNode, config);
    }
    shareWishlistCallback();

  });
</script>