Hiển thị thông báo khi có sản phẩm mới

Chia sẻ code Hiển thị thông báo khi có Sản phẩm mới cho Blogger, code hiển thị thông báo khi có sản phẩm mới trên Blogspot. Code này mình viết share cho các Blogger bán hàng rất phù hợp để hiển thị thông báo khi có sản phẩm mới hoặc khuyến mãi.

Cách hoạt động: Code sẽ hiển thị và hoạt động trong 24h gần nhất, nếu có bài viết có nhãn san-pham sẽ thông báo tổng số sản phẩm mới nhất trên Blog của các bạn, qua 24h tức là 1 ngày sẽ đếm lại. Ngược lại nếu trong ngày đó không có bài đăng nhãn san-pham nào thì thông báo tự động ẩn đi, cho đến khi có sản phẩm mới thì nó mới hiển thị.

Cách cài đặt: Copy toàn bộ code bên dưới dán trước thẻ đóng </body> và lưu lại là xong mà không cần phải setup gì thêm. Nếu cần đổi nhãn thì nhìn code bên dưới chỗ tô màu vàng.

<style>
/*<![CDATA[*/
@keyframes iconSkew{0%{transform:rotate(0deg) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0deg) scale(1) skew(1deg)}100%{transform:rotate(0deg) scale(1) skew(1deg)}}.popup-hoablogger{position:fixed;bottom:70px;left:17px;margin:0;z-index:99;top:auto!important}.popup-hoablogger .icon{display:block;position:relative;z-index:4;height:48px;width:48px;text-align:center;border-radius:50%;border:1px solid #33beb3;cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,0.15);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;animation:iconSkew 2s infinite}.popup-hoablogger .icon svg{fill:#33beb3;width:20px;height:20px;transition:opacity 0.35s ease-in-out,-webkit-transform 0.35s ease-in-out;transition:opacity 0.35s ease-in-out,transform 0.35s ease-in-out;transition:opacity 0.35s ease-in-out,transform 0.35s ease-in-out,-webkit-transform 0.35s ease-in-out;animation:iconSkew 1s infinite ease-out;min-height:-webkit-fill-available}.bubble{width:20px;height:20px;text-align:center;line-height:20px;position:absolute;top:0;right:-3px;font-size:16px;font-weight:bold;cursor:pointer;color:#fff;border-radius:50%;animation:pulse 1s infinite;background:#33beb3;z-index:999}
/*]]>*/
</style>
<!-- HTML -->
<div class='popup-hoablogger' id='newPostPopup' style='display:none'>
  <div class='bubble' id='newPostBubble'>0</div>
  <a class='icon' href='/search/label/san-pham' title='Sản phẩm mới'>
    <svg height='1em' viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'>
      <path d='M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z'/>
    </svg>
  </a>
</div>
<!-- Include Axios from CDN -->
<script src='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js'/>
<!-- JavaScript -->
<script>
  //<![CDATA[
  const postFeedUrl = '/feeds/posts/default';
  let newPostCount = 0;

  function updateNewPostCount(count) {
    newPostCount = count;
    const newPostBubble = document.getElementById('newPostBubble');
    const newPostPopup = document.getElementById('newPostPopup');

    if (newPostBubble && newPostPopup) {
      newPostBubble.innerText = newPostCount;
      newPostPopup.style.display = newPostCount > 0 ? 'block' : 'none';
    }
  }

  async function getNewPostsFromFeed() {
    try {
      const response = await fetch(postFeedUrl);
      const xmlText = await response.text();
      const parser = new DOMParser();
      const xmlDoc = parser.parseFromString(xmlText, 'application/xml');
      const entries = xmlDoc.querySelectorAll('entry');
      const currentDate = new Date();

      const newPosts = Array.from(entries).filter(entry => {
        const labels = entry.querySelectorAll('category');
        return (
          Array.from(labels).some(label => label.getAttribute('term') === 'san-pham') &&
          isWithin24Hours(entry.querySelector('updated').textContent, currentDate)
        );
      });

      if (newPosts.length > 0) {
        updateNewPostCount(newPosts.length);
      }
    } catch (error) {
      console.error('Đã xảy ra lỗi:', error);
    }
  }

  function isWithin24Hours(postDate, currentDate) {
    const postDateTime = new Date(postDate);
    const timeDifference = currentDate - postDateTime;
    const hoursDifference = timeDifference / (1000 * 60 * 60);

    return hoursDifference <= 24;
  }

  // Gọi hàm để kiểm tra và hiển thị thông báo
  getNewPostsFromFeed();
  //]]>
</script>

function isWithinOneWeek(postDate, currentDate) {
    const postDateTime = new Date(postDate);
    const timeDifference = currentDate - postDateTime;
    const hoursDifference = timeDifference / (1000 * 60 * 60);
    const daysDifference = hoursDifference / 24;

    return daysDifference <= 7;
  }