giao_dien_web_mau/demo-audio-2/test.html

<script>
  // DEAL TIME DOWN
  function dealTimeDown() {
    // SET TIMER
    let timeDealLeft = parseInt($(".box-deal .p-item").first().attr("data-time"));
    const timer = setInterval(timeDown, 1000);

    function timeDown() {
      // GET TIME LEFT PER SECOND
      let timeLeft = timeDealLeft;
      timeDealLeft = timeLeft - 1;

      if ($(".global-time-deal").length) $(".global-time-deal").html(renderTimeLeft(timeLeft));
      if (timeLeft === 0) {
        clearInterval(timer);
      }
    }
  }

  // RENDER HOMEPAGE TIME LEFT
  function renderTimeLeft(timeLeft) {
    const sec = String(timeLeft % 60).padStart(2, 0);
    const min = String(Math.trunc((timeLeft / 60) % 60)).padStart(2, 0);
    const hour = String(Math.trunc(timeLeft / 3600) % 24).padStart(2, 0);
    const day = String(Math.trunc(timeLeft / 86400) % 3600).padStart(2, 0);

    const firstLetterSec = Math.floor(sec / 10);
    const secondLetterSec = sec % 10;
    const firstLetterMin = Math.floor(min / 10);
    const secondLetterMin = min % 10;
    const firstLetterHour = Math.floor(hour / 10);
    const secondLetterHour = hour % 10;
    const firstLetterDay = Math.floor(day / 10);
    const secondLetterDay = day % 10;

    return `
      <p>${firstLetterDay}</p>
      <p>${secondLetterDay}</p>
      <span>:</span>
      <p>${firstLetterHour}</p>
      <p>${secondLetterHour}</p>
      <span>:</span>
      <p>${firstLetterMin}</p>
      <p>${secondLetterMin}</p>
      <span>:</span>
      <p>${firstLetterSec}</p>
      <p>${secondLetterSec}</p>
    `;
  }

  // GET HOT-DEAL PRODUCT
  function getDealProduct() {
    let params = {
      action_type: "list",
      type: "active",
      show: 10,
    }

    let target = "#js-deal-box";

    Hura.Ajax.get("deal", params).then(function (data) {
      console.log(data.list);
      let html = Hura.Template.parse(productDealTpl, data.list);
      Hura.Template.render(target, html);

      saleTimeDown();
      dealLineWidth();
    });
  }

  // RESET IMAGE IN PAGE DEAL
  function resetImagePageDeal() {
    if ($(".page-deal").length > 0) {
      $(".p-item .p-img").each(function () {
        let firstChild = $(this).children(":first");
        let lastChild = $(this).find(".swiper-lazy-preloader");
        let imageDataSrc = firstChild.attr("data-src");
        firstChild.attr("src", imageDataSrc);
        lastChild.css("display", "none");
      })
    }
  }

  // CUSTOM BOTTOM LINE PRODUCT DEAL
  function dealLineWidth() {
    $(".js-line-deal-left").each(function () {
      let quantityDealLeft = parseInt($(this).parent().attr("data-quantity-left"));
      let quantityDealTotal = parseInt($(this).parent().attr("data-quantity-sale-total"));

      if (quantityDealLeft >= 0) {
        let lineDealWidth = quantityDealLeft / quantityDealTotal * 100 + "%";
        $(this).css("width", lineDealWidth);
      } else {
        $(this).css("width", 0);
      }
    })
  }
</script>

<script>
  const product_deal_featured_tpl = `
    <div class="p-info text-right">
      <a href="{%= item.product_info.productUrl %}">
        <h3 class="p-name text-24 font-weight-600 mb-4">{%= item.product_info.productName %}</h3>
      </a>
      <p class="p-price-sale text-32 font-weight-700 color-primary mb-1">{%= formatCurrency(item.product_info.sale_rules.price) %}₫</p>
      <p class="p-price-stock text-24 font-weight-500 color-gray-2 text-line-through">
        {% if (item.product_info.marketPrice > 0) { %}
        {%= formatCurrency(item.product_info.marketPrice) %}₫
        {% } else { %}
        {%= formatCurrency(item.product_info.sale_rules.normal_price) %}₫
        {% } %}
      </p>
      <p class="p-summary font-weight-300 my-4">
        <span>{%= item.product_info.productSummary %}</span>
      </p>
      <div class="wrapper-deal p-relative mb-4" data-deal-left="{%= item.quantity - item.sale_quantity %}" data-deal-total="{%= item.quantity %}">
        <div class="deal-line total"></div>
        <div class="deal-line remaining"></div>
        <i class="static-icons static-icons-static-icon-fire"></i>
        <p class="sold text-12 color-white">Đã bán {%= item.sale_quantity %}</p>
      </div>
      <a href="javascript:addCart({%= item.product_info.productId %});" class="p-cart d-flex align-items-center justify-content-center gap-8">
        <i class="static-icons static-icons-static-icon-header-cart-pro-big"></i>
        <span class="text-20 font-weight-500 color-primary text-uppercase">Cho vào giỏ hàng</span>
      </a>
    </div>

    <div class="p-image">
      <a href="{%= item.product_info.productUrl %}">
        <img src="{%= item.product_info.productImage.large %}" alt="{%= item.product_info.productName %}" class="d-flex w-100">
      </a>
    </div>
  `;

  const product_deal_list_tpl = `
    <div class="p-item d-flex gap-16">
      <a href="{%= item.product_info.productUrl %}" class="p-image">
        <img src="{%= item.product_info.productImage.large %}" alt="{%= item.product_info.productName %}" class="p-img d-flex w-100">
      </a>
      <div class="p-info">
        <a href="{%= item.product_info.productUrl %}">
          <h3 class="p-name mt-1">{%= item.product_info.productName %}</h3>
        </a>
        <p class="p-price">
          <span class="p-price-sale">{%= formatCurrency(item.product_info.sale_rules.price) %}₫</span>
          <span class="p-price-stock">
            {% if (item.product_info.marketPrice > 0) { %}
            {%= formatCurrency(item.product_info.marketPrice) %}₫
            {% } else { %}
            {%= formatCurrency(item.product_info.sale_rules.normal_price) %}₫
            {% } %}
          </span>
        </p>
        <div class="wrapper d-flex align-items-end gap-32 mt-2">
          <div class="wrapper-deal p-relative flex-1 mb-2" data-deal-left="{%= item.quantity - item.sale_quantity %}" data-deal-total="{%= item.quantity %}">
            <div class="deal-line total"></div>
            <div class="deal-line remaining js-line-deal-left"></div>
            <i class="static-icons static-icons-static-icon-fire"></i>
            <p class="sold text-12 color-white">Đã bán {%= item.sale_quantity %}</p>
          </div>

          <a href="javascript:addCart({%= item.product_info.productId %});" class="p-cart">
            <i class="static-icons static-icons-static-icon-header-cart-pro"></i>
          </a>
        </div>
      </div>
    </div>
  `;
</script>