🔥🔥 HOT! 🔥🔥 Template siêu VIP #500K

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

Zalo 0971539681 Tư vấn & Hỗ trợ

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.

Hiển thị thông báo khi có sản phẩm 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>

Hàm đếm trong vòng 1 tuần: nếu 1 ngày nhanh quá thì bạn đổi hàm isWithin24Hours qua hàm isWithinOneWeek 1 tuần bên dưới

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;
  }


Nếu không dùng thư viện axios.min.js bạn xóa đi cũng được nhé, không ảnh hưởng gì

<script src='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js'/>


Thư viện axios.min.js là một thư viện JavaScript được sử dụng để thực hiện các yêu cầu HTTP từ trình duyệt hoặc Node.js. Axios được thiết kế để làm cho việc làm việc với HTTP trở nên dễ dàng và linh hoạt.

Các chức năng chính của Axios bao gồm:

Thực hiện Yêu cầu HTTP: Axios cho phép bạn thực hiện các loại yêu cầu HTTP như GET, POST, PUT, DELETE, và nhiều loại yêu cầu khác.

Xử lý Yêu cầu và Phản hồi dưới dạng Promise: Axios sử dụng Promise để xử lý yêu cầu và phản hồi, giúp làm cho mã nguồn của bạn trở nên dễ đọc và hiểu hơn, đặc biệt là trong các trường hợp sử dụng bất đồng bộ.

Hỗ trợ Gửi JSON dễ dàng: Axios giúp bạn dễ dàng gửi và nhận dữ liệu dưới dạng JSON thông qua yêu cầu HTTP.

Xử lý Lỗi một cách Dễ dàng: Axios có cơ chế xử lý lỗi thông minh và linh hoạt, giúp bạn dễ dàng xử lý lỗi trong quá trình thực hiện yêu cầu.

Chức năng Interceptors: Axios hỗ trợ interceptors, cho phép bạn can thiệp vào quá trình gửi yêu cầu hoặc nhận phản hồi để thực hiện các thao tác xử lý trước hoặc sau mỗi yêu cầu.

Hỗ trợ Các Môi trường khác nhau: Axios có thể được sử dụng trong nhiều môi trường khác nhau như trình duyệt và Node.js, giúp tạo ra mã nguồn có thể chia sẻ giữa frontend và backend.

Sử dụng Axios là một cách tiện lợi để thực hiện các yêu cầu HTTP trong ứng dụng web của bạn, và nó đã trở thành một trong những thư viện phổ biến nhất cho mục đích này.

Bài liên quan ngẫu nhiên

Nhận xét

Đăng nhận xét

2 nhận xét
Hiển thị
Contact Me on Zalo