Giao dien hoan chinh 19/05/2023

README.md

@@ -1,2 +1,118 @@
+<h1>Hướng dẫn các bước làm dự án mẫu</h1>
+
 <h2>Mô tả</h2>
 <p>Là nơi tổng hợp các giao diện mẫu (HTML, CSS, JS) để tham khảo, sử dụng cho các dự án.</p>
+
+
+<h2>Hướng dẫn tạo dự án mẫu</h2>
+<p>
+    Quy trình:
+    <ol>
+        <li>Kéo tất cả file giao diện từ Repo về máy</li>
+        <li>Tạo 1 folder dự án mẫu</li>
+        <li>Upload code lên Repo (<a href="#huong-dan-su-dung-git">Hướng dẫn up code sử dụng git</a>)</li>
+        <li>Cắt giao diện</li>
+        <li>Cuối mỗi ngày sẽ upload code đã cắt trong ngày hôm đó</li>
+    </ol>
+</p>
+<p>Khi cắt 1 giao diện mẫu mới sẽ có cấu trúc các file theo thư mục "<a href="https://repo.hurasoft.com/ducdt/giao_dien_web_mau/src/branch/master/demo-ten_mau-stt_mau" target="_blank">demo-ten_mau-stt_mau</a>" đã tạo ở trên (Download folder mẫu về, chỉnh sửa các thông tin theo quy định và cắt ghép).</p>
+
+
+<h2>Hướng dẫn đặt tên</h2>
+<p>Mỗi thư mục sẽ đặt tên theo quy định: <strong>demo-tên_mẫu-số_thứ_tự_mẫu</strong>. Mô tả của thư mục sẽ là URL dẫn đến giao diện đã được cắt ghép hoàn chỉnh </p>
+<p>VD: Giao diện mẹ và bé, mẫu 2 </p> 
+<ul>
+    <li>Tên folder: <strong>demo-mevabe-2</strong></li>
+    <li>Mô tả: <a href="https://mevabe8.hurasoft.com/?show_template=mau_2">https://mevabe8.hurasoft.com/?show_template=mau_2</a></li>
+</ul>
+
+
+<h2>Quy định cấu trúc</h2>
+<p>Cấu trúc 1 dự án mẫu sẽ bao gồm các thư mục con:</p>
+
+<ul>
+    <li>
+        <a href="https://repo.hurasoft.com/ducdt/giao_dien_web_mau/src/branch/master/demo-ten_mau-stt_mau/images" style="font-weight: bold;" target="_blank">images</a> : 
+        <ul>
+            <li>Chứa tất cả ảnh sử dụng cho dự án. Quy định về ảnh: Tất cả các ảnh icons (icon search, icon menu,...)</li>
+            <li>Kích thước mỗi ảnh icon khi export từ figma sẽ lấy kích thước <strong>x2</strong> (Để khi sử dụng ở mobile không bị vỡ nét)</li>
+            <li>Sau đó sẽ gộp chung các ảnh icon thành 1 ảnh lớn</li>
+            <li>
+                <p>Trong file CSS sẽ tạo 1 class chứa ảnh ở trên, background-size sẽ giảm 50% để hiển thị chính xác kích thước của icon. Khi sử dụng sẽ bắt theo tọa độ ảnh: </p>
+                <p>VD: ảnh có kích thước 500x500, vị trí hiển thị icon là: x = -200px, y = 0<br/>
+                    <strong>.icons {background: url(../images/sprite.png) no-repeat;background-size: 250px 250px;}</strong><br/>
+                    <strong>.icons.icon-search{background-position: -200px 0;}</strong>
+                </p>
+            </li>
+        </ul>
+    </li>
+
+   <li>
+        <a href="https://repo.hurasoft.com/ducdt/giao_dien_web_mau/src/branch/master/demo-ten_mau-stt_mau/js" style="font-weight: bold;" target="_blank">js</a>: 
+        <ul>
+            <li>Chứa các file JS sử dụng cho dự án.</li>
+            <li>Các plugin hiệu ứng, code js có thể sử dụng chung cho PC, Mobile mà không cần chỉnh sửa riêng ở từng phiên bản, dự án (vd: tắt/bật xem thêm nội dung, tìm kiếm,....) sẽ gộp chung vào 1 file, đặt tên là <strong>library.js</strong> </li>
+        </ul>
+    </li>
+
+   <li>
+        <a href="https://repo.hurasoft.com/ducdt/giao_dien_web_mau/src/branch/master/demo-ten_mau-stt_mau/scss" style="font-weight: bold;" target="_blank">scss</a> :
+        <ul>
+            <li>Chứa các file CSS sử dụng cho dự án.</li>
+            <li>Sử dụng SASS để viết CSS</li>
+            <li>Các style có thể sử dụng chung cho PC, Mobile mà không cần chỉnh sửa riêng ở từng phiên bản, dự án sẽ gộp chung vào 1 file, đặt tên là <strong>library.css</strong></li>
+        </ul>
+    </li>
+
+   <li>
+        <a href="https://repo.hurasoft.com/ducdt/giao_dien_web_mau/src/branch/master/demo-ten_mau-stt_mau/index.html" style="font-weight: bold;" target="_blank">index.html</a>: 
+        <ul>
+            <li>Là file HTML</li>
+            <li>Có thể chia nhỏ thành nhiều file sử dụng cho từng giao diện (VD: homepage.html, category.html,...) hoặc gộp chung tất cả code HTML vào 1 file</li>            
+        </ul>
+    </li>
+</ul>
+
+<h2>Hướng dẫn đặt tên class</h2>
+<p>Ở mỗi trang sẽ bọc 1 thẻ chứa class là tên gọi của trang đó. Style css sẽ bắt theo class bọc ngoài cùng để tránh lỗi giao diện ở các trang khác. Độ sâu tối đa của style từ 2 -> 3 cấp </p>
+<p>VD: Style menu ở header css sẽ viết theo => .global-header .menu {....} </p>
+<ul>
+    <li>Header: <strong>class="global-header"</strong></li>
+    <li>Footer: <strong>class="global-footer"</strong></li>
+    <li>Trang chủ : <strong>class="homepage"</strong> </li>
+    <li>Danh sách sản phẩm : <strong>class="product-page"</strong> </li>
+    <li>Chi tiết sản phẩm : <strong>class="product-detail-page"</strong> </li>
+    <li>Giỏ hàng : <strong>class="cart-page"</strong> </li>
+    <li>Tin tức : <strong>class="article-page"</strong> </li>
+    <li>Chi tiết tin tức : <strong>class="article-page article-detail-page"</strong> </li>
+</ul>
+
+<h2 id="huong-dan-su-dung-git">Hướng dẫn up code sử dụng git</h2>
+<p> Các bước up code:
+    <ol>
+        <li>Lấy tất cả code từ git url về máy</li>
+        <li>Kiểm tra trạng thái</li>
+        <li>Nếu có sự thay đổi, sẽ thêm file có sự thay đổi (Sẽ được thông báo ở bước 2)</li>
+        <li>Tạo ghi chú (Không viết tiếng việt có dấu)</li>
+        <li>Upload code</li>
+    </ol>
+</p>
+
+<p></p>
+
+<ol>
+    <li><strong>git pull (git URL) master:</strong> Lấy code về máy</li>
+    <li><strong>git status:</strong> Kiểm tra file nào có sự thay đổi</li>
+    <li><strong>git add 'tên file có sự thay đổi':</strong> Là file được báo đỏ ở git status</li>
+    <li><strong>git commit -m 'nội dung mô tả' :</strong> Comment nội dung </li>
+    <li><strong>git push origin master :</strong> Upload code</li>    
+</ol>
+
+<p>VD: Upload code từ url 'https://repo.hurasoft.com/ducdt/giao_dien_web_mau.git', Thêm/Sửa file README.md</p>
+<ol>
+    <li>git pull https://repo.hurasoft.com/ducdt/giao_dien_web_mau.git master</li>
+    <li>git status</li>
+    <li>git add 'README.md'</li>
+    <li>git commit -m 'Huong dan, quy dinh'</li>
+    <li>git push origin master</li>    
+</ol>

demo-audio-01/js/cart.js

@@ -0,0 +1,766 @@
+
+   $(".click-voucher").click(function(){
+  	$(".cart-voucher-group").toggleClass("hide");
+  });
+
+
+
+
+//Kiểm tra cú pháp Email
+function validateEmail(Email) {
+  var regaxEmail =
+    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  if (regaxEmail.test(Email)) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+function check_field() {
+  //Kiếm tra cú pháp Số điện thoại
+  var number_regex1 = /^[0]\d{9}$/i;
+  var number_regex2 = /^[0]\d{10}$/i;
+  var error = "";
+
+  //Kiểm tra Họ tên
+  var check_name = document.getElementById("buyer_name").value;
+  if (check_name.length < 4) error += "- Tên quá ngắn\n";
+
+  //Kiểm tra Email
+  var check_email = document.getElementById("buyer_email").value;
+  if (check_email.length < 4) {
+    error += "- Bạn chưa nhập email\n";
+  }
+  if (check_email.length > 4) {
+    if (validateEmail(check_email) == false) error += "- Email không hợp lệ\n";
+  }
+
+  //Kiểm tra Số điện thoại
+  var check_tel = document.getElementById("buyer_tel").value;
+  if (check_tel.length < 4) error += "- Bạn chưa nhập SĐT\n";
+  else {
+    if (
+      number_regex1.test(check_tel) == false &&
+      number_regex2.test(check_tel) == false
+    )
+      error += "- Số điện thoại chưa chính xác\n";
+  }
+
+  //Kiểm tra Tỉnh-thành phố
+  var check_province = document.getElementById("id-province").value;
+  if (check_province == 0) error += "- Bạn chưa chọn thành phố\n";
+
+  //Kiểm tra Quận- huyện
+  var check_distric = document.getElementById("id-distric").value;
+  if (check_distric == 0) error += "- Bạn chưa chọn quận/huyện \n";
+
+  //Kiểm tra Phường-xã
+  var check_ward = document.getElementById("js-ward-tragop").value;
+  if (check_ward == 0) error += "- Bạn chưa chọn phường/xã \n";
+
+  if (error != "") {
+    alert(error);
+    return false;
+  }
+
+  if ($("#js-distric-tragop").val() != 0 || $("#js-ward-tragop").val() != 0) {
+    $("#buyer_address").val(
+      $("#buyer_address").val() +
+        " , " +
+        $("#js-ward-tragop").val() +
+        " , " +
+        $("#js-distric-tragop").val() +
+        " , " +
+        $("#js-province-tragop").val()
+    );
+  }
+
+  $(".js-send-cart").addClass("submited");
+  $(".js-send-cart").html("Đang xử lý...");
+  return true;
+}
+
+// check input validation section
+function check_valid_input(pattern, target) {
+  // check valid value for input in cart page
+  $(target).on("input", function () {
+    var stringValue = $(target).val();
+    var status = pattern.test(stringValue);
+    if (status == false) {
+      $(this).css("outline-color", "rgb(194 29 29)"); //red
+      var targetName = $(this).prev().html().replace("*", "");
+      this.setCustomValidity(targetName + " quá ngắn/chưa đúng");
+      this.reportValidity();
+    } else {
+      this.setCustomValidity("");
+      this.reportValidity();
+      $(this).css("outline-color", "rgb(45 182 99)"); //green
+    }
+  });
+  return;
+}
+//for mail
+function check_valid_input_executer() {
+  // add check func for each input here and call this func to check all input
+  //for mail
+  check_valid_input(
+    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+    "#buyer_email"
+  );
+  //for name
+  check_valid_input(/^[a-zA-Z ]{4,20}$/, "#buyer_name");
+  //for phone number
+  check_valid_input(/(84|0[3|5|7|8|9])+([0-9]{8})\b/, "#buyer_tel");
+  //for address
+  check_valid_input(/.{10}/, "#buyer_address");
+}
+
+// end check input validation section
+
+//Get province selection ( lay quan huyen )
+function getProvince(province_id) {
+  var params = {
+    action_type: "district-list",
+    province: province_id,
+  };
+  var target = "#js-district-holder";
+
+  Hura.Ajax.get("province", params).then(function (data) {
+    //console.log(data);
+    // productTpl is in template: javascript/tpl
+    var html = Hura.Template.parse(provinceTpl, data);
+    Hura.Template.render(
+      target,
+      '<select name="user_info[district]" id="ship_to_district"><option value="0">Quận/Huyện</option>' +
+        html +
+        "</select>"
+    );
+  });
+}
+  
+
+
+
+  //on page ready
+$(document).ready(function () {
+  calculateCartTotalPrice();
+  listenDeleteCartItem();
+  listenQuantityChange();
+
+  //ap dung coupon/voucher
+  listenVoucherCode("#js_voucher_input");
+
+  getVoucherList("#js-pop-voucher-holder");
+  
+  
+  $(".js-bank-money").click(function(){
+   $("#show-info-bank").addClass("hide");
+  });
+
+  $(".js-bank-online").click(function(){
+   $("#show-info-bank").removeClass("hide");
+  });
+  
+});
+
+var TOTAL_CART_VALUE_NODE = ".js-total-cart-price";
+
+function formatCurrency(a) {
+  var b = parseFloat(a)
+    .toFixed(2)
+    .replace(/(\d)(?=(\d{3})+\.)/g, "$1.")
+    .toString();
+  var len = b.length;
+  b = b.substring(0, len - 3);
+  return b;
+}
+
+function strToNumber(str) {
+  str += "";
+  while (str.indexOf(".") > 0) {
+    str = str.replace(".", "");
+  }
+  var result = parseFloat(str);
+  return isNaN(result) ? 0 : result;
+}
+
+function tinhSoLuongSanPham() {
+  var total_item = 0;
+
+  $(".js-buy-quantity").each(function () {
+    total_item += parseInt($(this).val());
+  });
+  $("#js-total-quantity").html(total_item + " sản phẩm");
+}
+
+function checkTotalShippingFee(){
+    var province = $("#id-province").val();
+    var district = $("#id-distric").val();
+   
+    var cart_total_before_fee_discount = $("#js-total-before-fee-discount").val();
+    
+  
+    if(province==0 || district == 0){
+      return;
+    }
+  
+    var params = {
+        action : "shipping",
+        action_type: "get-shipping-and-cod",
+        order_value : cart_total_before_fee_discount,
+        province : province,
+        district : district
+    }
+  
+    Hura.Ajax.post('shipping',params).then(function(data){
+        console.log(data)
+        $('#js_price_ship').val(data.ship)
+        calculateCartTotalPrice()
+    })
+  
+}  
+  
+  
+//tinh tong gia don hang
+function calculateCartTotalPrice() {
+  var dom_target = ".js-total-cart-price";
+  var total_cart_price = 0;
+
+  $(".item-cart-price").each(function () {
+    total_cart_price += Hura.Util.strToNumber($(this).html());
+  });
+
+  //log for other reference
+  $("#js-total-before-fee-discount").val(total_cart_price);
+
+  //giam gia khac: voucher, membership, loyalty point conversion
+  var total_discount = 0;
+  total_discount += Number($("#js-discount-voucher").val());
+  total_discount += parseInt($("#js-discount-membership").val());
+
+  var voucher_value = parseInt($("#js-discount-voucher").val());
+
+  //phi khac: shipping, COD...
+  var total_other_fee = 0;
+  total_other_fee += parseInt($("#js-fee-shipping").val());
+  total_other_fee += parseInt($("#js-fee-cod").val());
+  //console.log(total_discount);
+  
+  var priceFreeship = parseInt($('#js_price_freeship').val());
+  
+   if($('#js_price_ship').val() == "nomal"){
+            $("#js-inner-ship").html(`
+                <div class="cart-customer-total d-flex align-items-center justify-content-between">
+                  <div>
+                    <span class="text">Phí vận chuyển: </span>
+                  </div>
+                  <p class="cart-customer-total-price">Chưa tính</p>
+                </div>
+            `);
+  
+              $(dom_target).html(formatCurrency(total_cart_price)+' đ');
+              $(TOTAL_CART_VALUE_NODE).html(formatCurrency(total_cart_price - total_discount )+' đ');
+          
+        }else{
+          var priceShip = parseInt($('#js_price_ship').val());
+          if(total_cart_price >= priceFreeship || priceShip == 0){
+                 console.log(total_cart_price);
+  					console.log(priceFreeship)
+              $("#js-inner-ship").html(`
+                     <div class="cart-customer-total d-flex align-items-center justify-content-between">
+                       <div>
+                         <span class="text">Phí vận chuyển: </span>
+                       </div>
+                        <p class="cart-customer-total-price">Freeship</p>
+                    </div>
+              `);
+
+              $(dom_target).html(formatCurrency(total_cart_price)+' đ');
+              $(TOTAL_CART_VALUE_NODE).html(formatCurrency(total_cart_price - total_discount )+' đ');
+
+          }else{
+              var minusPriceShip = priceFreeship - total_cart_price;
+  console.log(total_cart_price);
+  					console.log(priceFreeship)
+              $("#js-inner-ship").html(`
+                   <div class="cart-customer-total d-flex align-items-center justify-content-between">
+                       <div>
+                         <span class="text">Phí vận chuyển: </span>
+                       </div>
+                        <p class="cart-customer-total-price">${formatCurrency(priceShip) + ' đ'}</p>
+                    </div>
+                    <div class="text-ship d-flex justify-content-between">
+                        <div class="text-ship-left">
+                            Mua thêm <span class="text-red-b" style="color:yellow;font-size:14px;">${formatCurrency(minusPriceShip)} đ</span> để được <span class="text-red-b" style="color:yellow;font-size:14px;"> Freeship</span>
+                        </div>
+                        <div class="text-ship-right">
+                            <a href="/">Mua thêm</a>
+                        </div>
+                    </div>
+              `);
+				console.log(total_discount)
+  
+  
+              $(dom_target).html(formatCurrency(total_cart_price)+' đ');
+              $(TOTAL_CART_VALUE_NODE).html(formatCurrency(total_cart_price - total_discount + priceShip )+' đ');
+  
+          }
+      }
+  
+ 
+}
+
+//thay doi tong gia cua 1 san pham
+function changeItemTotalPrice() {
+  var $row = $(this).closest(".js-item-row");
+  var item_type = $row.data("item_type");
+   var price   = $row.find(".js-buy-price").attr("data-price");
+  var quantity = parseInt($row.find(".js-buy-quantity").val());
+  var total_price = price * quantity;
+
+  //loai bo so luong vo ly
+  if (quantity < 1) {
+    $row.find(".js-buy-quantity").val(0);
+    total_price = 0;
+  }
+
+  $row.find(".item-cart-price").html(formatCurrency(total_price)+' đ');
+
+  calculateCartTotalPrice();
+
+  //console.log("updating cart = " + item_type);
+
+  //save to cart
+  switch (item_type) {
+    case "product":
+      Hura.Cart.Product.update($row.data("item_id"), $row.data("variant_id"), {quantity: quantity,});
+      break;
+
+    case "deal":
+      Hura.Cart.Deal.update($row.data("item_id"), { quantity: quantity });
+      break;
+
+    case "combo":
+      Hura.Cart.Combo.update($row.data("item_id"), { quantity: quantity });
+      break;
+  }
+
+  //
+}
+
+//nghe thay doi so luong sp
+function listenQuantityChange() {
+  var $track_change = $(".js-quantity-change");
+
+  //thay doi so luong sp mua, neu nhap so luong
+  $track_change.on("change", function (e) {
+    var quantity_stock = $(this).attr("data-stock");
+    var $row = $(this).closest(".js-item-row");
+    var current_quantity = $(this).val();
+               
+    if($(this).val() < 1) $(this).val(1); 
+ 
+    if(current_quantity  > quantity_stock) {
+      alert("Bạn được mua tối đa "+ quantity_stock + " sản phẩm này");
+      $row.find(".js-buy-quantity").val(quantity_stock);
+      changeItemTotalPrice.call(this);
+      tinhSoLuongSanPham.call(this);
+
+      return ;
+    }
+
+
+    changeItemTotalPrice.call(this);
+    tinhSoLuongSanPham.call(this);
+  });
+
+  //thay doi so luong sp theo - hoac +
+  $track_change.on("click", function (e) {
+    if (e.target.nodeName === "INPUT") return;
+
+    var quantity_change = parseInt(this.getAttribute("data-value"));
+    var $row = $(this).closest(".cart-item-info");
+    var current_quantity = parseInt($row.find(".js-buy-quantity").val());
+    var quantity_stock = parseInt($row.find(".js-buy-quantity").attr("data-stock"));
+                   
+    //loai bo so luong vo ly
+    if (current_quantity + quantity_change < 1) {
+      $row.find(".js-buy-quantity").val(1);
+      return;
+    }
+
+    if(current_quantity + quantity_change > quantity_stock) {
+      alert("Bạn được mua tối đa "+ quantity_stock + " sản phẩm này");
+      $row.find(".js-buy-quantity").val(quantity_stock);
+      changeItemTotalPrice.call(this);
+      tinhSoLuongSanPham.call(this);
+      return ;
+    }
+
+    $row.find(".js-buy-quantity").val(current_quantity + quantity_change);
+
+    //then update
+    changeItemTotalPrice.call(this);
+    tinhSoLuongSanPham.call(this);
+  });
+}
+  
+function downloadCartImage() {
+  var seconds = new Date().getTime() / 1000;
+  var print_url = "{{ global.domain }}/print/user.php?view=cart&f="+parseInt(seconds)+"&uid="+Hura.User.getUserId(); 
+
+  window.location = "https://screenshot.hurasoft.com/screenshot.php?url=" + encodeURIComponent(print_url);
+}
+
+
+//nghe xoa san pham
+function listenDeleteCartItem() {
+  $(".item-cart-icon").on("click", function () {
+    var $row = $(this).closest(".cart-item-info");
+    var item_type = $row.data("item_type");
+    var item_id = $row.data("item_id");
+    calculateCartTotalPrice();
+
+    //console.log("deleting item from cart = " + item_type);
+
+    var deleteStatus;
+    //save to cart
+    switch (item_type) {
+      case "product":
+        deleteStatus = Hura.Cart.Product.remove(
+          item_id,
+          $row.data("variant_id")
+        );
+        location.reload();
+        break;
+      case "deal":
+        deleteStatus = Hura.Cart.Deal.remove(item_id);
+        location.reload();
+        break;
+      case "combo":
+        deleteStatus = Hura.Cart.Combo.remove(item_id);
+        location.reload();
+        break;
+    }
+
+    if (deleteStatus) {
+      deleteStatus.then(function () {
+        $row.remove();
+        tinhSoLuongSanPham();
+      });
+    }
+  });
+}
+
+
+  
+  
+
+  // Voucher
+    function debounce(func, wait, immediate) {
+        var timeout;
+        return function() {
+            var context = this, args = arguments;
+            var later = function() {
+                timeout = null;
+                if (!immediate) func.apply(context, args);
+            };
+            var callNow = immediate && !timeout;
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+            if (callNow) func.apply(context, args);
+        };
+    };
+
+    function voucher_input_change() {
+        $('#js_voucher_input').change();
+    }
+
+    function listenVoucherCode(dom_node) {
+        var cart_total_before_fee_discount = $("#js-total-before-fee-discount").val();
+        var $message_holder = $("#js-voucher-message");
+  
+        var check_deal = 0
+        $(".js-item-row").each(function(){
+            var check = $(this).attr("data-check-deal")
+            if (check == 1) {
+                check_deal = 1;
+            }
+        })
+        
+        $(dom_node).change(debounce(function(){
+            if (check_deal == 1) {
+                $message_holder.html('<span class="red">Mã voucher không được áp dụng. Vui lòng xóa sản phẩm DEAL trong giỏ hàng</span>');
+            } else{
+                var voucher_code = this.value.trim();
+
+                //update field to send when submit
+                $("#js_coupon_code").val(voucher_code);
+                $("#js-discount-voucher").val(0);
+                $("#price-discount").html('');
+                $message_holder.html('');
+
+                //xu ly hien thi
+                if(voucher_code.length > 2) {
+                    var params = {
+                        action_type: 'check', 
+                        code : voucher_code , 
+                        order_value : cart_total_before_fee_discount, 
+                        product_ids : ''
+                    }
+
+                    Hura.Ajax.post('coupon', params).then(function (data) {
+                        //console.log(data);
+                        var voucher_info = data;
+
+                        if(voucher_info.status == 'error') {
+                            //bao loi
+                            $message_holder.html(voucher_info.message);
+                            return ;
+                        }
+
+                        $message_holder.html("Bạn đang sử dụng mã coupon/voucher: <b style='color: #f00;font-size: 16px'>" + voucher_info.coupon_info.code + "</b>");
+                        $message_holder.show();
+              
+                        //xu ly khac
+                        switch (voucher_info.coupon_info.type) {
+                            case "cash": //giam tru tien
+                                $("#js-discount-voucher").val(Hura.Util.strToNumber(voucher_info.coupon_info.cash_discount));
+                                $("#price-discount").html(formatCurrency(voucher_info.coupon_info.cash_discount));
+                                break;
+
+                            case "priceoff"://giam gia %
+                                //var total_price_in_cart = $('#js-total-before-fee-discount').val();
+                                var total_price_in_cart = {% if global.module.name == 'combo_set' %}0{% else %}{{ page.cart_summary.total_value }}{% endif%};
+                                var after_discount = Math.ceil( total_price_in_cart * voucher_info.coupon_info.content / 100);
+                                $("#js-discount-voucher").val(Hura.Util.strToNumber(after_discount));
+                                $("#price-discount").html(formatCurrency(voucher_info.total_cash_discount));
+                                break;
+
+                            case "pro":
+                                //todo:
+
+                                break;
+
+                            case "other":
+                                //todo:
+
+                                break;
+                        }
+
+                        calculateCartTotalPrice();
+                    })
+                }else{
+                    $("#js-discount-voucher").val(0);
+                    $message_holder.html('');
+                    //recalculate total
+                    calculateCartTotalPrice();
+                }
+            }
+        },100));
+        
+    }
+    
+    function getVoucherList(holder) {
+        var params = {
+            action_type: 'get-active-list', 
+            limit: 50
+        }
+
+        Hura.Ajax.post('coupon', params).then(function (response) {
+             //console.log(response);
+            
+            buildListVoucher(response, holder);
+
+            $(".js-voucher-active").click(function(){
+                $(".js-voucher-active").removeClass('current-voucher');
+                $(this).addClass('current-voucher');
+            });
+        })
+    }
+
+    function buildListVoucher(response, holder) {
+        var html = '';
+        var current_time = (new Date()).getTime()/1000;
+
+        if (response.total > 0) {
+            Object.keys(response).forEach(function(key, keyIndex) {
+                var data = response[key];
+                Object.keys(data).forEach(function(item, itemIndex) {
+                    var status          = data[item].can_use_with_cart.status;
+                    var code            = data[item].code
+                    var title           = data[item].title;
+                    var id_coupon       = data[item].id;
+                    var to_time         = data[item].to_time;
+                    var time_left       = to_time - current_time;
+                    var check_product   = data[item].can_use_with_cart.status;
+                    
+                    if (time_left > 0 && check_product == 'yes') {
+                        html+=`<div class="voucher-item active-voucher js-voucher-active" onclick="voucherSelected('`+code+`')">`;
+                    } else{
+                        html+='<div class="voucher-item">';
+                    }
+                    html+= '<div class="code"> Nhập <b class="d-block text-18">'+code+'</b> </div>';
+                    html+= '<div class="text"> <p>'+ title +'</p><i class="circle"></i></div> </div>';
+                })
+            })
+        } else{
+            html+= `
+                <div class="no-voucher text-center">
+                    <i class="no-voucher-img lazy" style="background-image:url(/static/assets/default/images/cart-ticket.png)"></i>
+
+                    <p class="text-20 font-600 m-0"> Chưa có mã voucher nào ! </p>
+                </div>
+            `;
+        }
+
+        $(holder).html(html);
+    }
+
+
+  
+  
+
+   function convertToSlug(Text) {
+    // var newText = Text.split('.').join(" ");
+    if (Text.lastIndexOf(".") > 0) {
+      var newText = Text.substr(Text.lastIndexOf(".") + 2);
+      // console.log(newText);
+    } else newText = Text;
+    return newText
+      .toLowerCase()
+      .replace(/à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ/g, "a")
+      .replace(/è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ/g, "e")
+      .replace(/ì|í|ị|ỉ|ĩ/g, "i")
+      .replace(/ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ/g, "o")
+      .replace(/ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ/g, "u")
+      .replace(/ỳ|ý|ỵ|ỷ|ỹ/g, "y")
+      .replace(/đ/g, "d")
+      .replace(/\u0300|\u0301|\u0303|\u0309|\u0323/g, "")
+      .replace(/\u02C6|\u0306|\u031B/g, "")
+      .replace(/[^\w ]+/g, '')
+      .replace(/ +/g, '-');
+  }
+
+  function getDistrict(province_id) {
+    var params = {
+      action_type: "district-list",
+      province: province_id,
+    };
+
+    Hura.Ajax.get("province", params).then(function (data) {
+      var html = '';
+      $.each(data, function (key, item) {
+        html += `<li onclick="selectebDistricTg(this);" data-key="` + item.id + `">` + item.name + `</li>`;
+      });
+
+      $('#js-list-district-list').html(html);
+    })
+  }
+ 
+  function getWardListNew(district_id) {
+        var params = {
+            action_type: 'ward-list',
+            district: district_id
+        };
+
+        Hura.Ajax.get("province", params).then(function (data) {
+            var html = '';
+            $.each(data, function (key, item) {
+              html += `<li onclick="selectebWardTg(this);" data-key="` + item.id + `">` + item.name + `</li>`;
+            });
+
+            $('#js-list-ward-list').html(html);
+         })
+    }
+ 
+  function searchProvinceTg(elm, holder) {
+    let value = convertToSlug($(elm).val());
+    var value_comvert = value.toUpperCase();
+    $(holder + " li").filter(function () {
+      var text = $(this).text();
+      var text_rpl = text.replace(/\./g, ' ');
+      var text_cv = convertToSlug(text_rpl)
+      var text_comvert = text_cv.toUpperCase();
+      $(this).toggle(text_comvert.indexOf(value_comvert) > -1)
+    })
+  }
+
+  function provinceFocus() {
+    $("#js-province-tragop").focus(function () {
+      $("#js-list-province").show();
+    });
+
+    $("#js-province-tragop-ale").focus(function () {
+      $("#js-list-province-ale").show();
+    });
+  }
+  provinceFocus();
+  
+     // CLICK OUTSIDE CLOSE SEARCH
+  function closeProvince() {
+  	$(document).on("click", function (e) { 
+  	  if(e.target != document.querySelector("#js-province-tragop") && e.target != document.querySelector("#js-search-province")) {
+  	  	$("#js-list-province").css("display","none");
+        $(".customer-province").removeClass('active');
+  	  }
+       if(e.target != document.querySelector("#js-distric-tragop") && e.target != document.querySelector("#js-search-distric")) {
+  	  	$("#js-list-district").css("display","none");
+ 		 $(".customer-distric").removeClass('active1');
+  	  }
+  
+       if(e.target != document.querySelector("#js-ward-tragop") && e.target != document.querySelector("#js-search-ward")) {
+  	  	$("#js-list-ward").css("display","none");
+        $(".customer-ward").removeClass('active2');
+  	  }
+      
+  	});
+  }
+ closeProvince();
+
+  function selectebProvinCeTg(elm) {
+    let province_name = $(elm).text();
+    let key = $(elm).attr("data-key");
+    $("#id-province").attr("value", key);  
+    $("#js-province-tragop").val(province_name);
+     $("#id-province").attr("value", key);
+    getDistrict(key);
+    $("#js-list-province").hide();
+  }
+  
+  
+  
+  function districFocus() {
+    $("#js-distric-tragop").focus(function () {
+      $("#js-list-district").show();
+    });
+  }
+  districFocus();
+
+  function selectebDistricTg(elm) {
+    let distric_name = $(elm).text();
+    let key = $(elm).attr("data-key");
+    $("#js-distric-tragop").val(distric_name);
+    $("#id-distric").attr("value", key);
+    getWardListNew(key);
+    $("#js-list-district").hide();
+  	checkTotalShippingFee();
+  }
+
+  
+  
+  function wardFocus() {
+    $("#js-ward-tragop").focus(function () {
+      $("#js-list-ward").show();
+    });
+  }
+  wardFocus();
+  
+  function selectebWardTg(elm) {
+    let ward_name = $(elm).text();
+    let key = $(elm).attr("data-key");
+    $("#js-ward-tragop").val(ward_name);
+    $("#js-list-ward").hide();
+  } 
+

demo-audio-01/js/global.js

@@ -0,0 +1,367 @@
+
+   // LAZY LOADING BLOCK ELEMENT
+  var lazy_load_group = [];
+  
+  var lazyLoadInstance = new LazyLoad({
+   elements_selector: ".lazy"
+  });
+  
+  
+   lazy_load_group.push(
+          {
+              id: 'js-deal-box',
+              target: '#js-deal-box',
+              loadFn: function () {
+               getDealProduct();
+              },
+          },
+
+ 	
+    )
+  
+
+
+
+
+  //Kiểm tra cú pháp Email
+function validateEmail(Email) {
+  var regaxEmail =
+    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  if (regaxEmail.test(Email)) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+//Kiếm tra cú pháp Số điện thoại
+var number_regex1 = /^[0]\d{9}$/i;
+var number_regex2 = /^[0]\d{10}$/i;
+var error = "";
+  
+  
+//Kiểm tra tên chứa ký tự đặc biệt
+var nameRegex =  /[^a-z0-9A-Z_ÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂưăạảấầẩẫậắằẳẵặẹẻẽềềểỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễếệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵỷỹ]/u;
+  
+
+
+
+
+
+    // ADD ITEM TO CART SUCCESS FORM
+  var successForm = document.querySelector(".success-form");
+  function cartButton(idCart) {
+    Hura.Cart.Product.add(idCart, 0, { quantity: 1 }).then(function (
+      add_status
+    ) {
+      if (add_status.status === "error") {
+        alert("Đã tồn tại sản phẩm trong giỏ hàng");
+      } else {
+        modalSuccess();
+        change_cart_amount();
+      }
+    });
+  }
+
+  // CALL MODAL SUCCESS
+  function modalSuccess() {
+    successForm.classList.toggle("hide");
+    setTimeout(function () {
+      successForm.classList.toggle("hide");
+    }, 1200);
+  }
+
+  // CHANGE AMOUNT CART HEADER
+  function change_cart_amount() {
+    Hura.Cart.getSummary().then(function (data) {
+      if (data.total_item != 0) {
+        $(".header-features-cart-amount").show().html(data.total_item);
+  		$(".name-amount-sp").show();
+  		$(".amount-sp-in-cart").show().html(""+ data.total_item +"");
+      } else {
+        $(".header-features-cart-amount").hide();
+        $(".name-amount-sp").hide();
+      }
+    });
+  }
+ 
+  
+
+
+
+
+  function debounce(func, wait, immediate) {
+    var timeout;
+    return function() {
+        var context = this, args = arguments;
+        var later = function() {
+            timeout = null;
+            if (!immediate) func.apply(context, args);
+        };
+        var callNow = immediate && !timeout;
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+        if (callNow) func.apply(context, args);
+    };
+};  
+  
+  
+  
+   // GET SEARCH PRODUCT
+  function searchProduct(value) {
+    var params = {
+      action: "search",
+      action_type: "search",
+      content: "product",
+      q: value,
+    };
+
+    Hura.Ajax.get("search", params).then(function (data) {
+      //console.log(data.list);
+
+      if (data.list.length > 0) {
+        $(".search-results").css("display", "block");
+        var html = Hura.Template.parse(searchResultsTpl, data.list);
+        Hura.Template.render(".search-results-list", html);
+      } else {
+        $(".search-results").css("display", "none");
+      }
+    });
+  }
+
+
+  
+   function getSearchValue() {
+  $('#js-search-box').keyup(debounce(function(e){
+      let value = e.target.value;
+      if (value) {
+        searchProduct(value);
+      } else {
+        $(".search-results").css("display", "none");
+      }
+    },200));
+  }
+  
+  
+  // CART HEADER POPUP
+  function cartHeaderPopup() {
+    $(".cart-header").on("mouseenter", function () {
+      var target = ".cart-ttip-item-container";
+      Hura.Cart.getCart().then(function (data) {
+        if (data == 0) {
+          $(target).html("<h5>Có 0 sản phẩm trong giỏ hàng</h5>");
+          $(target).find("h5").attr("class", "header-null-cart");
+        } else {
+          var html = Hura.Template.parse(headerCartTpl, data);
+          $(target).html(html);
+        }
+      });
+    });
+  }
+  
+  function totalCartPopup(){
+       Hura.Cart.getSummary().then(function (summary_data) {
+        $("#js-header-cart-quantity").html(
+          "<i>(Số lượng: " + summary_data.total_quantity + " sản phẩm)</i>"
+        );
+        $("#js-header-cart-total-price").html(
+          summary_data.total_value.toLocaleString() + "₫"
+        );
+        if (summary_data.total_quantity == 0) {
+              $("#btn-cart-ttip").addClass( "hide" );
+        }
+
+  
+      });
+  }
+
+  
+  
+  // FIXED HEADER
+  function fixed_header() {
+    $(window).scroll(function () {
+      var distanceFromTop = $(document).scrollTop();
+      
+      if (distanceFromTop > 350) {
+        $(".header-mid").addClass("fixed-nav");
+           
+      } else {
+        $(".header-mid").removeClass("fixed-nav");
+  		
+      }
+    });
+  }
+  
+
+
+
+
+  
+// FORMAT PRICE
+function formatCurrency(a) {
+  var b = parseFloat(a)
+    .toFixed(2)
+    .replace(/(\d)(?=(\d{3})+\.)/g, "$1.")
+    .toString();
+  var len = b.length;
+  b = b.substring(0, len - 3);
+  return b;
+}
+
+// CONVERT STRING TO NUMBER
+function strToNumber(str) {
+  str += "";
+  while (str.indexOf(".") > 0) {
+    str = str.replace(".", "");
+  }
+  var result = parseFloat(str);
+  return isNaN(result) ? 0 : result;
+}
+
+ function checkSummary(productSummary) {
+    var summary = [];
+    if (productSummary) {
+      var splitSummary = productSummary.split("\r\n");
+      splitSummary.forEach(function (value, item) {
+        if (item < 10 && 1 < 2) {
+          summary.push(splitSummary[item]);
+        }
+      })
+    }
+    return summary.join("\r\n");
+  }
+  
+  // REWORK SPECIAL OFFER PRODUCT
+  function checkKhuyenMai(specialOffer) {
+    var offer = [];
+    if (specialOffer) {
+      var splitOffer = specialOffer.split("\n");
+      splitOffer.forEach(function (value, item) {
+        if (item < 10 && 1 < 2) {
+          offer.push(`<div class="item">` + splitOffer[item] + `</div>`);
+        }
+      })
+    }
+    return offer.join('');
+  }
+
+
+
+
+
+   // DEAL TIME DOWN
+  function saleTimeDown() {
+    // SET TIMER
+    let timeDealLeft = parseInt($(".box-deal-home .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>${day}</p>
+           <span>:</span>
+           <p>${hour}</p>
+           <span>:</span>
+           <p>${min}</p>
+           <span>:</span>
+           <p>${sec}</p>    
+         `;
+  }
+  
+  
+  
+  // GET HOT-DEAL PRODUCT
+  function getDealProduct() {
+    let params = {
+      action_type: "list",
+      type: "active",
+      show: 20,
+    }
+
+    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();
+  
+  	  resetImagePageDeal();
+    });
+  } 
+  
+  
+  // 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 quantitySaleLeft = parseInt($(this).parent().attr("data-quantity-left"));
+      let quantitySaleTotal = parseInt($(this).parent().attr("data-quantity-sale-total"));
+
+      if (quantitySaleLeft >= 0) {
+        let lineDealWidth = quantitySaleLeft / quantitySaleTotal * 100 + "%";
+        $(this).css("width", lineDealWidth);
+      } else {
+        $(this).css("width", 0);
+      }
+    })
+  }
+  
+  
+
+
+  
+
+
+    // SORT SELECT BOX
+  function sortSelect() {
+    var href = window.location.href;
+
+    $(".js-select-sort-item").each(function () {
+      if ($(this).val() === href) {
+        $(this).attr("selected", "selected");
+      }
+    });
+  }
+  sortSelect();

demo-audio-01/js/homepage.js

@@ -0,0 +1,238 @@
+
+   lazy_load_group.push(
+          {
+              id: 'js-hottpye-bestsale',
+              target: '#js-hottpye-bestsale',
+              loadFn: function () {
+               getProductBestsale();
+              },
+          },
+
+ 	
+    )
+  
+    function lazyCategoryBox(){
+      for (let i = 0; i <= category_to_fetch.length - 1 && 1<2; i++) {
+           let idCat = category_to_fetch[i]
+              lazy_load_group.push(
+             {
+             id: "js-product-" + idCat,
+             target: "#js-product-" + idCat,
+             loadFn: function () {
+                getCategoryProduct(idCat)    
+                },
+             },  
+          );                                      
+      }
+  }
+</script>
+
+
+
+
+<script>
+  var swiper = new Swiper(".banner_homepage", {
+    pagination: {
+        el: ".swiper-pagination",
+        type: "fraction",
+    },
+    navigation: {
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev",
+    },
+});
+
+
+var swiper = new Swiper(".list-feedback", {
+    slidesPerView: 3,
+    spaceBetween: 10,
+    navigation: {
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev",
+    },
+    breakpoints: {
+            1610: {
+            slidesPerView: 4,
+            },
+            1210: {
+              slidesPerView: 3,
+            },
+  		}
+});
+</script>
+
+<script>
+ // SWIPER HOMEPAGE CATEGORY
+  function swiperDealBox() {
+    new Swiper(".swiper-deal-box", {
+      slidesPerView: 4,
+      spaceBetween: 12,
+      rewind: true,
+  	  speed: 1000,
+  	  preloadImages: false,
+  	  lazy: true,
+
+      navigation: {
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev",
+      },
+      breakpoints: {
+        1200: {
+          slidesPerView: 4,
+        },
+  		1600: {
+          slidesPerView: 5,
+        },
+      },
+    });
+  }
+  
+  swiperDealBox();
+</script>
+
+<script>
+    // AJAX CATEGORY BOX - NEW PRODUCT
+  function getProductBestsale() {
+    var params = {
+      action_type: "product-list",
+      hotType: "bestsale",
+      sort: "order",
+      page: 1,
+  	  show: 12,
+    };
+    var target = "#js-hottpye-bestsale";
+    Hura.Ajax.get("product", params).then(function (data) {
+      //console.log(data.list);
+      if (data.total == 0) {
+        $(target).html(
+          `<h3 class="box-empty d-flex align-items-center justify-content-center">Sản phẩm đang được cập nhật...!</h3>`
+        );
+      } else {
+        var html = Hura.Template.parse(productBestSale, data.list.splice(0, 4));
+        Hura.Template.render(target, html);
+        let total = data.total;
+        $("#total").html(`${total}`);
+      }
+    });
+  }
+ 
+</script>
+
+
+<script>                                                                                      
+   // AJAX CATEGORY BOX - HOT PRODUCT
+  function getCategoryProduct(id) {
+    var params = {
+      action_type: "product-list",
+      category: id,
+   
+    };
+    var target = "#js-product-hot-" + id;
+    var targetSmall = "#js-product-" + id;
+    
+    Hura.Ajax.get("product", params).then(function (data) {
+      //console.log(data.list);
+      if (data.total == 0) {
+        $(target).html(
+          `<h3 class="box-empty d-flex align-items-center justify-content-center">Sản phẩm đang được cập nhật...!</h3>`
+        );
+  
+        $(targetSmall).html(
+           `<h3 class="box-empty d-flex align-items-center justify-content-center">Sản phẩm đang được cập nhật...!</h3>`
+        );
+  
+      } else {
+  
+        var html = Hura.Template.parse(listHotCategoryHome, data.list.splice(0,1));
+        Hura.Template.render(target, html);
+  		let quantity_change_btns = $(`#js-product-hot-${id}`).find(".js-quantity-change");
+  		quantity_change_btns.each(function(){
+  			$(this).addClass(`js-quantity-change-${id}`);
+            $('.js-buy-quantity').addClass(`js-quantity-change-${id}`);
+  		})
+		listenQuantityBuy(id);	
+  
+  
+        var htmlSmall = Hura.Template.parse(listCategoryHome, data.list.splice(0,6));
+        Hura.Template.render(targetSmall, htmlSmall);
+      }
+    });
+  }               
+</script>
+
+<script>
+  // ADD PRODUCT TO CART - PRODUCT DETAILS
+  function addProductToCart(product_id, variant_id_fake, props) {
+    let props_quantity = parseInt($(`.js-buy-quantity-temp-${product_id}`).attr("value"));
+  	let stockQuantity = parseInt($(".bk-check-out-of-stock").attr("value"));
+    console.log(props_quantity);
+  	
+  	var variant_id  = 0;
+  	var data = $('.js-variant-option-container input[type="hidden"]').val();
+      if (data) {
+        var newData = JSON.parse(data)
+        variant_id  = newData.variant_id;
+    }
+  	
+  	if (stockQuantity) {
+      var product_props = {
+        quantity: props_quantity,
+        buyer_note: "",
+      };
+
+      Hura.Cart.Product.add(product_id, variant_id, product_props).then(function (
+        response
+      ) {
+        // Error response
+        if (response.status === "error") {
+          if (response.error_type == "item-in-cart") {
+            alert("Sản phẩm đã trong giỏ hàng");
+          } else if (response.error_type == "invalid-item-id")
+            alert("ID sản phẩm không đúng");
+          else alert(response.message);
+        }
+        // Success response
+        else {
+         modalSuccess();
+         change_cart_amount();
+        }
+      });
+  	} else {
+  		alert("Sản phẩm không có sẵn. Vui lòng liên hệ. Xin cảm ơn!")
+  	}
+  }
+  
+  // LANG NGHE THAY DOI SO LUONG SP
+  function listenQuantityBuy(id) {
+
+    let $track_change = $(`.js-quantity-change-${id}`);
+
+    //thay doi so luong sp mua, neu nhap so luong
+    $track_change.on("change", function (e) {
+  	  let $row1 = $(this).closest(".cart-quantity-select");
+      if($(this).val() < 1 && 1<2) $(this).val(1);
+      $row1.find(".js-buy-quantity-temp").attr("value", e.target.value);
+    });
+
+    //thay doi so luong sp theo - hoac +
+    $track_change.on("click", function (e) {
+      
+      if (e.target.nodeName === "INPUT") return;
+
+      let quantity_change = parseInt(this.getAttribute("data-value"));
+      let $row = $(this).closest(".cart-quantity-select");
+      let current_quantity = parseInt($row.find(".js-buy-quantity").val());
+
+  
+      //loai bo so luong vo ly
+      if(current_quantity + quantity_change < 1 && 1 < 2) {
+        $(".js-buy-quantity").val(1);
+        return ;
+      } 
+
+      let totalQuantity = current_quantity + quantity_change;
+
+      $row.find(".js-buy-quantity").val(totalQuantity);
+      $row.find(".js-buy-quantity-temp").attr("value", totalQuantity);
+    });
+  }

demo-audio-01/js/product_detail.js

@@ -0,0 +1,753 @@
+
+   lazy_load_group.push(
+          {
+              id: 'js-bottom-product-box',
+              target: '#js-bottom-product-box',
+              loadFn: function () {
+                  getRelativeProduct();
+              },
+          },
+      
+           {
+              id: 'js-review-holder',
+              target: '#js-review-holder',
+              loadFn: function () {
+                 getRatingComment();
+              },
+          },
+    )
+  
+
+ 
+
+
+  // GET PRODUCT RELATIVE
+  function getRelativeProduct() {
+    var categoryID = parseInt($('.section-details').attr('data-item_category-id'));
+    var params = {
+      action_type: "product-list",
+      category: categoryID,
+    };
+
+    var target = "#js-bottom-product-box";
+
+    Hura.Ajax.get("product", params).then(function (data) {
+      //console.log(data.list)
+      var currentProductID = parseInt($('.section-details').attr('data-item_id'));
+      var newDataList = data.list.filter(item => item.id !== currentProductID);
+
+      if (data.list.length > 0) {
+        var html = Hura.Template.parse(listRelativeProduct, newDataList);
+        Hura.Template.render(target, html);
+      } else {
+        $("#js-bottom-product-box").html(`<p class="alert-mess">Sản phẩm đang cập nhập</p>`)
+      }
+    });
+  }
+ 
+  
+   // SWIPER BOTTOM PRODUCT BOX
+  function productBottomBoxSwiper() {
+    new Swiper(".bottom-product-box-swiper", {
+      slidesPerView: 4,
+      spaceBetween: 12,
+      rewind: true,
+      navigation: {
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev",
+      },
+      breakpoints: {
+        // when window width is >= 1600px
+        1600: {
+          slidesPerView: 5,
+        },
+      },
+    });
+  }
+ 
+
+
+
+   const galleryTop = new Swiper(".gallery-top", {
+      spaceBetween: 16,
+      slidesPerView: 1,
+      thumbs: {
+            swiper: galleryThumbs,
+       },
+      // AUTO SILDED AT FISRT AND END
+      on: {
+        slideChange: function () {
+          let activeIndex = this.activeIndex + 1;
+
+          let activeSlide = document.querySelector(
+            `.gallery-thumbs .swiper-slide:nth-child(${activeIndex})`
+          );
+          let nextSlide = document.querySelector(
+            `.gallery-thumbs .swiper-slide:nth-child(${activeIndex + 1})`
+          );
+          let prevSlide = document.querySelector(
+            `.gallery-thumbs .swiper-slide:nth-child(${activeIndex - 1})`
+          );
+
+          if (
+            nextSlide &&
+            !nextSlide.classList.contains("swiper-slide-visible")
+          ) {
+            this.thumbs.swiper.slideNext();
+          } else if (
+            prevSlide &&
+            !prevSlide.classList.contains("swiper-slide-visible")
+          ) {
+            this.thumbs.swiper.slidePrev();
+          }
+        },
+      },
+    });
+  
+  // FANCY-BOX
+  function fancyBox() {
+    Fancybox.bind('[data-fancybox="gallery"]', {
+      Toolbar: {
+        display: [
+          {
+            id: "counter",
+            position: "center",
+          },
+          "zoom",
+          "slideshow",
+          "fullscreen",
+          "thumbs",
+          "close",
+        ],
+      },
+      //click: "unset",
+      on: {
+        initLayout: (fancybox) => {
+          // Create left column
+          const $leftCol = document.createElement("div");
+          $leftCol.classList.add("fancybox__leftCol");
+
+          while (fancybox.$container.firstChild) {
+            $leftCol.appendChild(fancybox.$container.firstChild);
+          }
+
+          // Add elements to DOM
+          fancybox.$container.appendChild(fancybox.$backdrop);
+          fancybox.$container.appendChild($leftCol);
+          fancybox.$leftCol = $leftCol;
+        },
+        "Carousel.ready Carousel.change": (fancybox, carousel, slideIndex) => {
+          // Get index of the current gallery item
+          slideIndex =
+            slideIndex === undefined
+              ? carousel.options.initialPage
+              : slideIndex;
+
+          // console.log(slideIndex);
+          // Get link related to current item
+          const $trigger = fancybox.items[slideIndex].$trigger;
+
+          // Get data from `data-info` attribute
+          const data = $trigger.dataset.info || "";
+        },
+      },
+    });
+  }
+  fancyBox();
+
+
+
+
+
+   // ADD PRODUCT TO CART - PRODUCT DETAILS
+  function addProductToCart(product_id, variant_id_fake, props) {
+    const props_quantity = parseInt($(".js-buy-quantity-temp").attr("value"));
+  	const stockQuantity = parseInt($(".bk-check-out-of-stock").attr("value"));
+    //console.log(stockQuantity);
+  	
+  	var variant_id  = 0;
+  	var data = $('.js-variant-option-container input[type="hidden"]').val();
+      if (data) {
+        var newData = JSON.parse(data)
+        variant_id  = newData.variant_id;
+    }
+  	
+  	if (stockQuantity) {
+      var product_props = {
+        quantity: props_quantity,
+        buyer_note: "",
+      };
+
+      Hura.Cart.Product.add(product_id, variant_id, product_props).then(function (
+        response
+      ) {
+        // Error response
+        if (response.status === "error") {
+          if (response.error_type == "item-in-cart") {
+            alert("Sản phẩm đã trong giỏ hàng");
+          } else if (response.error_type == "invalid-item-id")
+            alert("ID sản phẩm không đúng");
+          else alert(response.message);
+        }
+        // Success response
+        else {
+         modalSuccess();
+         change_cart_amount();
+        }
+      });
+  	} else {
+  		alert("Sản phẩm không có sẵn. Vui lòng chọn sản phẩm khác hoặc liên hệ. Xin cảm ơn!")
+  	}
+  }
+  
+  
+   // BUY NOW
+  function buyNow(product_id, variant_id_fake, props) {
+    addProductToCart(product_id, variant_id_fake, props);
+  	const stockQuantityCheck = parseInt($(".bk-check-out-of-stock").attr("value"));
+  	if (stockQuantityCheck) {
+      setTimeout(function () {
+        window.location.href = "./cart";
+      }, 1500);
+  	}
+  }
+  
+  // LANG NGHE THAY DOI SO LUONG SP
+  function listenQuantityBuy() {
+    const $track_change = $(".js-quantity-change");
+
+    //thay doi so luong sp mua, neu nhap so luong
+    $track_change.on("change", function (e) {
+      if($(this).val() < 1 && 1<2) $(this).val(1);
+      $(".js-buy-quantity-temp").attr("value", e.target.value);
+    });
+
+    //thay doi so luong sp theo - hoac +
+    $track_change.on("click", function (e) {
+      if (e.target.nodeName === "INPUT") return;
+
+      let quantity_change = parseInt(this.getAttribute("data-value"));
+      let $row = $(this).closest(".cart-quantity-select");
+      let current_quantity = parseInt($row.find(".js-buy-quantity").val());
+
+     //loai bo so luong vo ly
+      if(current_quantity + quantity_change < 1 && 1 < 2) {
+                $(".js-buy-quantity").val(1);
+                return ;
+      } 
+
+      let totalQuantity = current_quantity + quantity_change;
+
+      $row.find(".js-buy-quantity").val(totalQuantity);
+      $(".js-buy-quantity-temp").attr("value", totalQuantity);
+    });
+  }
+
+
+
+
+  function renReplyReview(new_replies){
+  var html = '';
+
+  new_replies.forEach(function(value,item){
+  var check_user = `<span class="avatar">
+  <b class="avatar-user">`+value.user_name+`</b>
+  </span>
+  <b class="name">`+value.user_name+`</b>`;
+  if (value.is_user_admin == 1) {
+  check_user = `<i class="cmt-logo"></i>
+  <b class="name">`+value.user_name+`</b>
+  <i class="qtv">QTV</i>`
+  }
+
+  if(value.is_user_admin == 1 || value.approved == 1){
+  html += `
+  <div class="item_reply">
+    <div class="comment_right">
+      <div class="comment-name">
+        `+check_user+`
+      </div>
+
+      <div class="reply-content">`+value.content+`</div>
+    </div>
+  </div>
+  `;
+  }
+  })
+
+  return html;
+  }
+  
+  
+ // COMMENT KHÁCH HÀNG
+  
+const is_admin_login = "no";
+const customer_info = 0;
+  
+$(document).ready(function () {
+  
+ 
+  
+  $(".comment-form textarea").focus(function(){
+  	$(this).parent().find(".form-input").show();
+  });
+  
+  layComment({{ page.product_info.productId }}, "product", "", "", "new");
+  $("#js-show-comment").click(function(){
+  	$("#js-box-review").toggle();
+  });
+  
+  $("#comment_keyword").keydown(function(e){
+    if(e.keyCode==13){
+    var search_field = $(".search-comment select").val();
+    var keyword = $("#comment_keyword").val();
+    //console.log(search_field +"---"+keyword);
+    layComment({{ page.product_info.productId }},keyword,search_field,'new');
+    }
+  });
+  
+  $(".comment-action-list .sort a").click(function(){
+    $(".comment-action-list .sort a").removeClass("current");
+    $(this).addClass("current");
+  });
+  
+});
+
+
+
+function checkReply(is_admin_login, customer_info, replyTo) {
+  var formReply = "";
+  if (is_admin_login == "yes") {
+    formReply =`
+  <div class="input-text" style="margin-bottom: 20px;align-items: center;display: flex;">
+    <p style="margin: 0 10px 0 0;color: #f15a22;">Bạn đang đăng nhập là Admin</p>
+    <input type=hidden id="name`+replyTo+`" value='Admin'/>
+    <input type=hidden id="email`+replyTo+`" value='admin@gmail.com'/>
+
+    <a href="javascript:;" class="send_form" onclick="postComment(`+replyTo+`,'reply')"> Gửi bình luận </a>
+  </div>
+  `;
+  } else if (is_admin_login == "no" && customer_info.length > 0) {
+    formReply =
+      `
+            <div class="input-text">
+                <input type=hidden id="name`+replyTo+`" value=''/>
+                <input type=hidden id="email`+replyTo+`" value=''/>
+
+                <a href="javascript:;" class="send_form" onclick="postComment(`+replyTo+`,'reply')"> Gửi bình luận </a> 
+            </div>
+            `;
+  } else
+    formReply =
+      `
+                <div class="comment-form-input" id="comment-form-input-0" style="display: block;">
+                    <div class="form-group input-text">
+                        <input type="text" id="name`+replyTo+`" placeholder="Họ và tên" name='user_post[user_name]' class="inputText" value=""/>
+
+                        <input type="text" id="email`+replyTo+`" placeholder="Email" name='user_post[user_email]' class="inputText" value=""/>
+
+                        <a href="javascript:;" class="btn-send-comment send_form" onclick="postComment(`+replyTo+`,'reply')"> Gửi bình luận </a>
+                    </div>
+                    
+                </div>`;
+
+  return formReply;
+}
+  
+function checkReplyReview(is_admin_login, customer_info , replyTo) {
+  var formReply = '';
+  if( is_admin_login == 'yes') {
+  formReply = `
+  <p class="note">Bạn đang đăng nhập là Admin</p>
+  <input type=hidden id="review-name`+replyTo+`" value='Admin'/>
+  <input type=hidden id="review-email`+replyTo+`" value='admin@gmail.com'/>
+  <input type="button" onclick="postReview(`+replyTo+`,'reply')" value="Gửi" class="btn-send-comment" />
+  `;
+  } else if ( is_admin_login == 'no' && customer_info.length > 0 ) {
+  formReply = `
+  <input type=hidden id="review-name`+replyTo+`" value=''/>
+  <input type=hidden id="review-email`+replyTo+`" value=''/>
+  <input type="button" onclick="postReview(`+replyTo+`,'reply')" value="Gửi" class="btn-send-comment" />
+  `;
+  } else 
+  formReply = `
+  <div class="comment-form-input" id="comment-form-input-0" style="display: block;">                  
+    <div class="form-group clearfix">
+      <input type="text" id="review-name`+replyTo+`" name='user_post[user_name]' class="inputText" placeholder="Họ tên*" value=""/>
+      <input type="text" id="review-email`+replyTo+`" name='user_post[user_email]' class="inputText" placeholder="Email*" value=""/>
+      <input type="button" onclick="postReview(`+replyTo+`,'reply')" value="Gửi" class="btn-send-comment" />
+    </div>
+  </div>`;
+
+  return formReply ;
+}
+
+function layComment(productId, item_type, searchText, searchField, sort) {
+  var params = {
+    action_type: "get",
+    item_type: "product",
+    item_id: productId,
+    search: searchText,
+    search_field: searchField,
+    order_by: "new",
+  };
+
+  Hura.Ajax.get("comment", params).then(function (data) {
+    //console.log("comment - ", data);
+    var html = Hura.Template.parse(commentTpl, data);
+    Hura.Template.render("#comment-list", html);
+      
+    $(".js-avatar-user").each(function () {
+      var name = $(this).html().substring(0, 1);
+      $(this).html(name);
+    });
+  });
+}
+
+function getReply(commentId) {
+  var replyParams = {
+    action_type: "get-reply",
+    item_id: commentId,
+  };
+
+  var target = "#reply_list_" + commentId;
+  Hura.Ajax.get("comment", replyParams).then(function (data) {
+    // console.log("getReply - ", data);
+    var html = Hura.Template.parse(replyTpl, data);
+    Hura.Template.render(target, html);
+    $(".js-avatar-user").each(function () {
+      var name = $(this).html().substring(0, 1);
+      $(this).html(name);
+    });
+  });
+}
+
+function send_vote(){
+  var error = "";
+  var number_regex1 = /^[0]\d{9}$/i;
+  var number_regex2 = /^[0]\d{10}$/i;
+  var idUpload = $('#js-file-upload-id').val();
+  
+  var check_message = document.getElementById('rating-content').value;
+  if(check_message.length < 4) error += "- Bạn chưa nhập nội dung\n";
+    else if(check_message.indexOf('<script') > -1) { 
+  error += "- Nội dung chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại\n";
+  } 
+  
+  var check_name = document.getElementById('rating-name').value;
+  if(check_name.length < 4) error += "- Tên quá ngắn\n";
+    else if(check_name.indexOf('<script') > -1) { 
+  error += "- Họ tên chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại\n";
+  } 
+ 
+  var check_email = document.getElementById('rating-email').value;
+    if(check_email.length < 4) {
+      error += "- Bạn chưa nhập email\n";
+     }   
+     if(check_email.length > 4){
+       if(validateEmail(check_email)==false) error += "- Email không hợp lệ\n";
+     }
+
+  if(error!=''){
+  alert(error);
+  return false;
+  }
+
+  var reviewParams = {
+  action_type: "review",
+  info : {
+  item_type   : 'product',
+  item_id     : {{ page.product_info.productId }},
+  item_title  : `{{ page.product_info.productName }}`,
+  user_name   : $("#rating-name").val(),
+  user_email  : $("#rating-email").val(),
+  user_avatar : '',
+  user_note   : '',
+  rate        : $("#select-rate-pro input:checked").val(),
+  title       : `Đánh giá sản phẩm {{ page.product_info.productName }}`,
+  content     : $("#rating-content").val(),
+  files       : idUpload
+  }
+  }
+
+  Hura.Ajax.post('customer', reviewParams).then(function (data) {
+  //console.log("data",data);
+  alert('Bạn đã gửi thành công!'); location.reload();
+  })
+}
+  
+function getRatingComment() {
+  var params = {
+  action_type: "list",
+  item_id    :{{ page.product_info.productId }},
+  search : '',
+  search_field :'',
+  order_by :'new',
+  numPerPage :20,
+  item_type   : 'product'
+  };
+
+
+  Hura.Ajax.get("review", params).then(function (data) {
+  //console.log(data);
+  var html = Hura.Template.parse(rating_tpl, data);
+  Hura.Template.render("#js-review-holder", html);
+    $(".js-avatar-user").each(function(){
+      var name = $(this).html().substring(0, 1);
+      $(this).html(name);
+    });
+  })
+}  
+
+function postComment(id, reply) {
+  if (check_field(id) == false) return false;
+  if (reply == "") {
+    var item_type = $(".form-post [name='user_post[item_type]']").val();
+    var item_id = $(".form-post [name='user_post[item_id]']").val();
+    var item_title = $(".form-post [name='user_post[item_title]']").val();
+    var title = $(".form-post [name='user_post[title]']").val();
+    var avatar = $(".form-post [name='user_post[user_avatar]']").val();
+    var user_name = $("#name" + id).val();
+    var user_email = $("#email" + id).val();
+    var content = $("#content" + id).val();
+    var rate = $("#rating-review0 input:checked").val();
+    var idUpload = $('#js-file-upload-id').val(); 
+
+    var params = {
+      action_type: "comment",
+      type    :"ajax",
+      info: {
+          item_type   : 'product',
+          item_id     : '{{ page.product_info.productId }}',
+          item_title  : `{{ page.product_info.productName }}`,
+          reply_to    : reply_to,
+          user_email  : user_email,
+          user_name   : user_name,
+          user_avatar : '',
+          user_note   : '',
+          rate        : 5,
+          title       : `{{ page.product_info.productName }}`,
+          content     : content,
+          files       : ''
+      },
+    };
+
+    // console.log(params);
+
+    Hura.Ajax.post("customer", params).then(function (data) {
+      alert("Bạn đã gửi thành công");
+      location.reload();
+    });
+  } else {
+    var reply_to = id;
+    var item_type = $(".form-reply" + id + "[name='user_post[item_type]']").val();
+    var item_id = $(".form-reply" + id + "[name='user_post[item_id]']").val();
+    var item_title = $(".form-reply" + id + "[name='user_post[item_title]']").val();
+    var title = $(".form-reply" + id + "[name='user_post[title]']").val();
+    var avatar = $(".form-reply" + id + "[name='user_post[user_avatar]']").val();
+    var user_name = $("#name" + id).val();
+    var user_email = $("#email" + id).val();
+    var content = $("#content" + id).val();
+
+    var params = {
+      action_type: "comment-reply",
+      info: {
+        item_type: item_type,
+        item_id: item_id,
+        item_title: item_title,
+        reply_to: reply_to,
+        user_email: user_email,
+        user_name: user_name,
+        user_avatar: "",
+        user_note: "",
+        rate: 5,
+        title: title,
+        content: content,
+        files: "",
+      },
+    };
+
+    Hura.Ajax.post("customer", params).then(function (data) {
+      alert("Bạn đã gửi thành công");
+      location.reload();
+    });
+  }
+}
+
+
+
+function check_field(id) {
+  var error = "";
+  var name = document.getElementById("name"+id).value;
+  var email = document.getElementById("email"+id).value;
+  var content = document.getElementById("content"+id).value;
+
+  if(email.length < 4) {
+      error += "- Bạn chưa nhập email\n";
+  }   
+  if(email.length > 4){
+       if(validateEmail(email)==false) error += "- Email không hợp lệ\n";
+  }
+  
+   if(name.length < 4) error += "- Tên quá ngắn\n";
+      else if(name.indexOf('<script') > -1) { 
+      error += "- Họ tên chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại\n";
+   }
+  
+  
+   if(content.length < 4) error += "- Nội dung quá ngắn\n";
+      else if(content.indexOf('<script') > -1) { 
+      error += "- Nội dung chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại\n";
+   } 
+  
+  
+
+  if(error==''){
+  return true;
+  }
+  else {
+  alert(error);
+  return false;
+  }
+};
+
+function check_field_review(id) {
+  var error = "";
+  var name = document.getElementById("review-name"+id).value;
+  var email = document.getElementById("review-email"+id).value;
+  var content = document.getElementById("review-content"+id).value;
+
+  if(name.length < 4) error += "- Tên quá ngắn\n";
+    else if(name.indexOf('<script') > -1) { 
+     error += "- Họ tên chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại\n";
+  }
+      
+  if(content.length < 4) error += "- Bạn chưa nhập nội dung\n";
+      else if(content.indexOf('<script') > -1) { 
+         error += "- Nội dung chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại\n";
+   }
+  
+  
+   if(email.length < 4) {
+      error += "- Bạn chưa nhập email\n";
+   }   
+   if(email.length > 4){
+       if(validateEmail(email)==false) error += "- Email không hợp lệ\n";
+   }
+
+  if(error==''){
+  return true;
+  }
+  else {
+  alert(error);
+  return false;
+  }
+};                                 
+                                 
+function postReview(id,reply) {
+        if(check_field_review(id)==false) return false;
+        var reply_to = id;
+        var user_name = $("#review-name"+id).val();
+        var user_email = $("#review-email"+id).val();
+        var content = $("#review-content"+id).val(); 
+
+        var params = {
+            action_type: "review-reply",
+            type    :"ajax",
+            info : {
+                item_type   : 'product',
+                item_id     : '{{ page.product_info.productId }}',
+                item_title  : `{{ page.product_info.productName }}`,
+                reply_to    : reply_to,
+                user_email  : user_email,
+                user_name   : user_name,
+                user_avatar : '',
+                user_note   : '',
+                rate        : 5,
+                title       : `{{ page.product_info.productName }}`,
+                content     : content,
+                files       : ''
+            }
+        } 
+
+        Hura.Ajax.post('customer', params).then(function (data) {
+            alert("Bạn đã gửi thành công");
+            location.reload();
+        })
+};
+                                 
+function formatDate(a) {
+  var a = new Date(parseInt(a) * 1000);
+
+  var year = a.getFullYear();
+  var month = a.getMonth() + 1;
+  var date = a.getDate();
+  var hour = a.getHours();
+  var min = a.getMinutes();
+  var sec = a.getSeconds();
+  // var time = date + '/' + month + '/' + year + ' ' + hour + ':' + min + ':' + sec ;
+  var time = date + "/" + month + "/" + year;
+  return time;
+}
+
+function closeFormCommentInput() {
+  $(".form-input").hide();
+}
+
+function showFormReply(a) {
+  $("#" + a).show();
+}  
+  
+  function showReplyForm(id){
+    var element = $("#reply-comment-"+id);
+    $("#reply-comment-"+id).toggle();
+  }
+
+  function closeCommentFormInput(a){
+    $(a).hide();  
+  }
+  
+  
+  
+  
+
+   // GET TIME NOW
+  function getTimeDealLeftProduct() {
+    const timeDealEndProduct = parseInt($('.section-details').attr("data-item_time-deal-end"));
+    const timeNow = (new Date().getTime()) / 1000;
+    const timeDealLeftProduct = timeDealEndProduct - timeNow;
+
+    $(".bk-data-product-hidden .p-item").attr("data-time", timeDealLeftProduct);
+  }
+  
+  
+  // GET HOT-DEAL PRODUCT
+  function getDetailDealInfo(id) {
+    let params = {
+      action_type: "info",
+      type: "active",
+      id: id,
+    }
+
+    let target = "#deal-line-detail";
+
+    Hura.Ajax.get("deal", params).then(function (data) {     
+     if (data.quantity > data.sale_quantity) {
+  		let html = Hura.Template.parse(dealLineDetail, data);
+         Hura.Template.render(target, html);
+      } else {
+        $('.box-add-number-sp').remove();
+        $('.product-buy').remove();
+      }
+  
+    
+      saleTimeDown();
+      dealLineWidth();
+  
+  	  resetImagePageDeal();
+    });
+  }
+
+  {% if page.product_info.sale_rules.type == 'deal' %}
+  getDetailDealInfo({{ page.product_info.sale_rules.type_id }});
+  {% endif %}

demo-audio-1/Demoaudio Mẫu 1/js/cart.js

@@ -0,0 +1,766 @@
+
+   $(".click-voucher").click(function(){
+  	$(".cart-voucher-group").toggleClass("hide");
+  });
+
+
+
+
+//Kiểm tra cú pháp Email
+function validateEmail(Email) {
+  var regaxEmail =
+    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  if (regaxEmail.test(Email)) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+function check_field() {
+  //Kiếm tra cú pháp Số điện thoại
+  var number_regex1 = /^[0]\d{9}$/i;
+  var number_regex2 = /^[0]\d{10}$/i;
+  var error = "";
+
+  //Kiểm tra Họ tên
+  var check_name = document.getElementById("buyer_name").value;
+  if (check_name.length < 4) error += "- Tên quá ngắn\n";
+
+  //Kiểm tra Email
+  var check_email = document.getElementById("buyer_email").value;
+  if (check_email.length < 4) {
+    error += "- Bạn chưa nhập email\n";
+  }
+  if (check_email.length > 4) {
+    if (validateEmail(check_email) == false) error += "- Email không hợp lệ\n";
+  }
+
+  //Kiểm tra Số điện thoại
+  var check_tel = document.getElementById("buyer_tel").value;
+  if (check_tel.length < 4) error += "- Bạn chưa nhập SĐT\n";
+  else {
+    if (
+      number_regex1.test(check_tel) == false &&
+      number_regex2.test(check_tel) == false
+    )
+      error += "- Số điện thoại chưa chính xác\n";
+  }
+
+  //Kiểm tra Tỉnh-thành phố
+  var check_province = document.getElementById("id-province").value;
+  if (check_province == 0) error += "- Bạn chưa chọn thành phố\n";
+
+  //Kiểm tra Quận- huyện
+  var check_distric = document.getElementById("id-distric").value;
+  if (check_distric == 0) error += "- Bạn chưa chọn quận/huyện \n";
+
+  //Kiểm tra Phường-xã
+  var check_ward = document.getElementById("js-ward-tragop").value;
+  if (check_ward == 0) error += "- Bạn chưa chọn phường/xã \n";
+
+  if (error != "") {
+    alert(error);
+    return false;
+  }
+
+  if ($("#js-distric-tragop").val() != 0 || $("#js-ward-tragop").val() != 0) {
+    $("#buyer_address").val(
+      $("#buyer_address").val() +
+        " , " +
+        $("#js-ward-tragop").val() +
+        " , " +
+        $("#js-distric-tragop").val() +
+        " , " +
+        $("#js-province-tragop").val()
+    );
+  }
+
+  $(".js-send-cart").addClass("submited");
+  $(".js-send-cart").html("Đang xử lý...");
+  return true;
+}
+
+// check input validation section
+function check_valid_input(pattern, target) {
+  // check valid value for input in cart page
+  $(target).on("input", function () {
+    var stringValue = $(target).val();
+    var status = pattern.test(stringValue);
+    if (status == false) {
+      $(this).css("outline-color", "rgb(194 29 29)"); //red
+      var targetName = $(this).prev().html().replace("*", "");
+      this.setCustomValidity(targetName + " quá ngắn/chưa đúng");
+      this.reportValidity();
+    } else {
+      this.setCustomValidity("");
+      this.reportValidity();
+      $(this).css("outline-color", "rgb(45 182 99)"); //green
+    }
+  });
+  return;
+}
+//for mail
+function check_valid_input_executer() {
+  // add check func for each input here and call this func to check all input
+  //for mail
+  check_valid_input(
+    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+    "#buyer_email"
+  );
+  //for name
+  check_valid_input(/^[a-zA-Z ]{4,20}$/, "#buyer_name");
+  //for phone number
+  check_valid_input(/(84|0[3|5|7|8|9])+([0-9]{8})\b/, "#buyer_tel");
+  //for address
+  check_valid_input(/.{10}/, "#buyer_address");
+}
+
+// end check input validation section
+
+//Get province selection ( lay quan huyen )
+function getProvince(province_id) {
+  var params = {
+    action_type: "district-list",
+    province: province_id,
+  };
+  var target = "#js-district-holder";
+
+  Hura.Ajax.get("province", params).then(function (data) {
+    //console.log(data);
+    // productTpl is in template: javascript/tpl
+    var html = Hura.Template.parse(provinceTpl, data);
+    Hura.Template.render(
+      target,
+      '<select name="user_info[district]" id="ship_to_district"><option value="0">Quận/Huyện</option>' +
+        html +
+        "</select>"
+    );
+  });
+}
+  
+
+
+
+  //on page ready
+$(document).ready(function () {
+  calculateCartTotalPrice();
+  listenDeleteCartItem();
+  listenQuantityChange();
+
+  //ap dung coupon/voucher
+  listenVoucherCode("#js_voucher_input");
+
+  getVoucherList("#js-pop-voucher-holder");
+  
+  
+  $(".js-bank-money").click(function(){
+   $("#show-info-bank").addClass("hide");
+  });
+
+  $(".js-bank-online").click(function(){
+   $("#show-info-bank").removeClass("hide");
+  });
+  
+});
+
+var TOTAL_CART_VALUE_NODE = ".js-total-cart-price";
+
+function formatCurrency(a) {
+  var b = parseFloat(a)
+    .toFixed(2)
+    .replace(/(\d)(?=(\d{3})+\.)/g, "$1.")
+    .toString();
+  var len = b.length;
+  b = b.substring(0, len - 3);
+  return b;
+}
+
+function strToNumber(str) {
+  str += "";
+  while (str.indexOf(".") > 0) {
+    str = str.replace(".", "");
+  }
+  var result = parseFloat(str);
+  return isNaN(result) ? 0 : result;
+}
+
+function tinhSoLuongSanPham() {
+  var total_item = 0;
+
+  $(".js-buy-quantity").each(function () {
+    total_item += parseInt($(this).val());
+  });
+  $("#js-total-quantity").html(total_item + " sản phẩm");
+}
+
+function checkTotalShippingFee(){
+    var province = $("#id-province").val();
+    var district = $("#id-distric").val();
+   
+    var cart_total_before_fee_discount = $("#js-total-before-fee-discount").val();
+    
+  
+    if(province==0 || district == 0){
+      return;
+    }
+  
+    var params = {
+        action : "shipping",
+        action_type: "get-shipping-and-cod",
+        order_value : cart_total_before_fee_discount,
+        province : province,
+        district : district
+    }
+  
+    Hura.Ajax.post('shipping',params).then(function(data){
+        console.log(data)
+        $('#js_price_ship').val(data.ship)
+        calculateCartTotalPrice()
+    })
+  
+}  
+  
+  
+//tinh tong gia don hang
+function calculateCartTotalPrice() {
+  var dom_target = ".js-total-cart-price";
+  var total_cart_price = 0;
+
+  $(".item-cart-price").each(function () {
+    total_cart_price += Hura.Util.strToNumber($(this).html());
+  });
+
+  //log for other reference
+  $("#js-total-before-fee-discount").val(total_cart_price);
+
+  //giam gia khac: voucher, membership, loyalty point conversion
+  var total_discount = 0;
+  total_discount += Number($("#js-discount-voucher").val());
+  total_discount += parseInt($("#js-discount-membership").val());
+
+  var voucher_value = parseInt($("#js-discount-voucher").val());
+
+  //phi khac: shipping, COD...
+  var total_other_fee = 0;
+  total_other_fee += parseInt($("#js-fee-shipping").val());
+  total_other_fee += parseInt($("#js-fee-cod").val());
+  //console.log(total_discount);
+  
+  var priceFreeship = parseInt($('#js_price_freeship').val());
+  
+   if($('#js_price_ship').val() == "nomal"){
+            $("#js-inner-ship").html(`
+                <div class="cart-customer-total d-flex align-items-center justify-content-between">
+                  <div>
+                    <span class="text">Phí vận chuyển: </span>
+                  </div>
+                  <p class="cart-customer-total-price">Chưa tính</p>
+                </div>
+            `);
+  
+              $(dom_target).html(formatCurrency(total_cart_price)+' đ');
+              $(TOTAL_CART_VALUE_NODE).html(formatCurrency(total_cart_price - total_discount )+' đ');
+          
+        }else{
+          var priceShip = parseInt($('#js_price_ship').val());
+          if(total_cart_price >= priceFreeship || priceShip == 0){
+                 console.log(total_cart_price);
+  					console.log(priceFreeship)
+              $("#js-inner-ship").html(`
+                     <div class="cart-customer-total d-flex align-items-center justify-content-between">
+                       <div>
+                         <span class="text">Phí vận chuyển: </span>
+                       </div>
+                        <p class="cart-customer-total-price">Freeship</p>
+                    </div>
+              `);
+
+              $(dom_target).html(formatCurrency(total_cart_price)+' đ');
+              $(TOTAL_CART_VALUE_NODE).html(formatCurrency(total_cart_price - total_discount )+' đ');
+
+          }else{
+              var minusPriceShip = priceFreeship - total_cart_price;
+  console.log(total_cart_price);
+  					console.log(priceFreeship)
+              $("#js-inner-ship").html(`
+                   <div class="cart-customer-total d-flex align-items-center justify-content-between">
+                       <div>
+                         <span class="text">Phí vận chuyển: </span>
+                       </div>
+                        <p class="cart-customer-total-price">${formatCurrency(priceShip) + ' đ'}</p>
+                    </div>
+                    <div class="text-ship d-flex justify-content-between">
+                        <div class="text-ship-left">
+                            Mua thêm <span class="text-red-b" style="color:yellow;font-size:14px;">${formatCurrency(minusPriceShip)} đ</span> để được <span class="text-red-b" style="color:yellow;font-size:14px;"> Freeship</span>
+                        </div>
+                        <div class="text-ship-right">
+                            <a href="/">Mua thêm</a>
+                        </div>
+                    </div>
+              `);
+				console.log(total_discount)
+  
+  
+              $(dom_target).html(formatCurrency(total_cart_price)+' đ');
+              $(TOTAL_CART_VALUE_NODE).html(formatCurrency(total_cart_price - total_discount + priceShip )+' đ');
+  
+          }
+      }
+  
+ 
+}
+
+//thay doi tong gia cua 1 san pham
+function changeItemTotalPrice() {
+  var $row = $(this).closest(".js-item-row");
+  var item_type = $row.data("item_type");
+   var price   = $row.find(".js-buy-price").attr("data-price");
+  var quantity = parseInt($row.find(".js-buy-quantity").val());
+  var total_price = price * quantity;
+
+  //loai bo so luong vo ly
+  if (quantity < 1) {
+    $row.find(".js-buy-quantity").val(0);
+    total_price = 0;
+  }
+
+  $row.find(".item-cart-price").html(formatCurrency(total_price)+' đ');
+
+  calculateCartTotalPrice();
+
+  //console.log("updating cart = " + item_type);
+
+  //save to cart
+  switch (item_type) {
+    case "product":
+      Hura.Cart.Product.update($row.data("item_id"), $row.data("variant_id"), {quantity: quantity,});
+      break;
+
+    case "deal":
+      Hura.Cart.Deal.update($row.data("item_id"), { quantity: quantity });
+      break;
+
+    case "combo":
+      Hura.Cart.Combo.update($row.data("item_id"), { quantity: quantity });
+      break;
+  }
+
+  //
+}
+
+//nghe thay doi so luong sp
+function listenQuantityChange() {
+  var $track_change = $(".js-quantity-change");
+
+  //thay doi so luong sp mua, neu nhap so luong
+  $track_change.on("change", function (e) {
+    var quantity_stock = $(this).attr("data-stock");
+    var $row = $(this).closest(".js-item-row");
+    var current_quantity = $(this).val();
+               
+    if($(this).val() < 1) $(this).val(1); 
+ 
+    if(current_quantity  > quantity_stock) {
+      alert("Bạn được mua tối đa "+ quantity_stock + " sản phẩm này");
+      $row.find(".js-buy-quantity").val(quantity_stock);
+      changeItemTotalPrice.call(this);
+      tinhSoLuongSanPham.call(this);
+
+      return ;
+    }
+
+
+    changeItemTotalPrice.call(this);
+    tinhSoLuongSanPham.call(this);
+  });
+
+  //thay doi so luong sp theo - hoac +
+  $track_change.on("click", function (e) {
+    if (e.target.nodeName === "INPUT") return;
+
+    var quantity_change = parseInt(this.getAttribute("data-value"));
+    var $row = $(this).closest(".cart-item-info");
+    var current_quantity = parseInt($row.find(".js-buy-quantity").val());
+    var quantity_stock = parseInt($row.find(".js-buy-quantity").attr("data-stock"));
+                   
+    //loai bo so luong vo ly
+    if (current_quantity + quantity_change < 1) {
+      $row.find(".js-buy-quantity").val(1);
+      return;
+    }
+
+    if(current_quantity + quantity_change > quantity_stock) {
+      alert("Bạn được mua tối đa "+ quantity_stock + " sản phẩm này");
+      $row.find(".js-buy-quantity").val(quantity_stock);
+      changeItemTotalPrice.call(this);
+      tinhSoLuongSanPham.call(this);
+      return ;
+    }
+
+    $row.find(".js-buy-quantity").val(current_quantity + quantity_change);
+
+    //then update
+    changeItemTotalPrice.call(this);
+    tinhSoLuongSanPham.call(this);
+  });
+}
+  
+function downloadCartImage() {
+  var seconds = new Date().getTime() / 1000;
+  var print_url = "{{ global.domain }}/print/user.php?view=cart&f="+parseInt(seconds)+"&uid="+Hura.User.getUserId(); 
+
+  window.location = "https://screenshot.hurasoft.com/screenshot.php?url=" + encodeURIComponent(print_url);
+}
+
+
+//nghe xoa san pham
+function listenDeleteCartItem() {
+  $(".item-cart-icon").on("click", function () {
+    var $row = $(this).closest(".cart-item-info");
+    var item_type = $row.data("item_type");
+    var item_id = $row.data("item_id");
+    calculateCartTotalPrice();
+
+    //console.log("deleting item from cart = " + item_type);
+
+    var deleteStatus;
+    //save to cart
+    switch (item_type) {
+      case "product":
+        deleteStatus = Hura.Cart.Product.remove(
+          item_id,
+          $row.data("variant_id")
+        );
+        location.reload();
+        break;
+      case "deal":
+        deleteStatus = Hura.Cart.Deal.remove(item_id);
+        location.reload();
+        break;
+      case "combo":
+        deleteStatus = Hura.Cart.Combo.remove(item_id);
+        location.reload();
+        break;
+    }
+
+    if (deleteStatus) {
+      deleteStatus.then(function () {
+        $row.remove();
+        tinhSoLuongSanPham();
+      });
+    }
+  });
+}
+
+
+  
+  
+
+  // Voucher
+    function debounce(func, wait, immediate) {
+        var timeout;
+        return function() {
+            var context = this, args = arguments;
+            var later = function() {
+                timeout = null;
+                if (!immediate) func.apply(context, args);
+            };
+            var callNow = immediate && !timeout;
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+            if (callNow) func.apply(context, args);
+        };
+    };
+
+    function voucher_input_change() {
+        $('#js_voucher_input').change();
+    }
+
+    function listenVoucherCode(dom_node) {
+        var cart_total_before_fee_discount = $("#js-total-before-fee-discount").val();
+        var $message_holder = $("#js-voucher-message");
+  
+        var check_deal = 0
+        $(".js-item-row").each(function(){
+            var check = $(this).attr("data-check-deal")
+            if (check == 1) {
+                check_deal = 1;
+            }
+        })
+        
+        $(dom_node).change(debounce(function(){
+            if (check_deal == 1) {
+                $message_holder.html('<span class="red">Mã voucher không được áp dụng. Vui lòng xóa sản phẩm DEAL trong giỏ hàng</span>');
+            } else{
+                var voucher_code = this.value.trim();
+
+                //update field to send when submit
+                $("#js_coupon_code").val(voucher_code);
+                $("#js-discount-voucher").val(0);
+                $("#price-discount").html('');
+                $message_holder.html('');
+
+                //xu ly hien thi
+                if(voucher_code.length > 2) {
+                    var params = {
+                        action_type: 'check', 
+                        code : voucher_code , 
+                        order_value : cart_total_before_fee_discount, 
+                        product_ids : ''
+                    }
+
+                    Hura.Ajax.post('coupon', params).then(function (data) {
+                        //console.log(data);
+                        var voucher_info = data;
+
+                        if(voucher_info.status == 'error') {
+                            //bao loi
+                            $message_holder.html(voucher_info.message);
+                            return ;
+                        }
+
+                        $message_holder.html("Bạn đang sử dụng mã coupon/voucher: <b style='color: #f00;font-size: 16px'>" + voucher_info.coupon_info.code + "</b>");
+                        $message_holder.show();
+              
+                        //xu ly khac
+                        switch (voucher_info.coupon_info.type) {
+                            case "cash": //giam tru tien
+                                $("#js-discount-voucher").val(Hura.Util.strToNumber(voucher_info.coupon_info.cash_discount));
+                                $("#price-discount").html(formatCurrency(voucher_info.coupon_info.cash_discount));
+                                break;
+
+                            case "priceoff"://giam gia %
+                                //var total_price_in_cart = $('#js-total-before-fee-discount').val();
+                                var total_price_in_cart = {% if global.module.name == 'combo_set' %}0{% else %}{{ page.cart_summary.total_value }}{% endif%};
+                                var after_discount = Math.ceil( total_price_in_cart * voucher_info.coupon_info.content / 100);
+                                $("#js-discount-voucher").val(Hura.Util.strToNumber(after_discount));
+                                $("#price-discount").html(formatCurrency(voucher_info.total_cash_discount));
+                                break;
+
+                            case "pro":
+                                //todo:
+
+                                break;
+
+                            case "other":
+                                //todo:
+
+                                break;
+                        }
+
+                        calculateCartTotalPrice();
+                    })
+                }else{
+                    $("#js-discount-voucher").val(0);
+                    $message_holder.html('');
+                    //recalculate total
+                    calculateCartTotalPrice();
+                }
+            }
+        },100));
+        
+    }
+    
+    function getVoucherList(holder) {
+        var params = {
+            action_type: 'get-active-list', 
+            limit: 50
+        }
+
+        Hura.Ajax.post('coupon', params).then(function (response) {
+             //console.log(response);
+            
+            buildListVoucher(response, holder);
+
+            $(".js-voucher-active").click(function(){
+                $(".js-voucher-active").removeClass('current-voucher');
+                $(this).addClass('current-voucher');
+            });
+        })
+    }
+
+    function buildListVoucher(response, holder) {
+        var html = '';
+        var current_time = (new Date()).getTime()/1000;
+
+        if (response.total > 0) {
+            Object.keys(response).forEach(function(key, keyIndex) {
+                var data = response[key];
+                Object.keys(data).forEach(function(item, itemIndex) {
+                    var status          = data[item].can_use_with_cart.status;
+                    var code            = data[item].code
+                    var title           = data[item].title;
+                    var id_coupon       = data[item].id;
+                    var to_time         = data[item].to_time;
+                    var time_left       = to_time - current_time;
+                    var check_product   = data[item].can_use_with_cart.status;
+                    
+                    if (time_left > 0 && check_product == 'yes') {
+                        html+=`<div class="voucher-item active-voucher js-voucher-active" onclick="voucherSelected('`+code+`')">`;
+                    } else{
+                        html+='<div class="voucher-item">';
+                    }
+                    html+= '<div class="code"> Nhập <b class="d-block text-18">'+code+'</b> </div>';
+                    html+= '<div class="text"> <p>'+ title +'</p><i class="circle"></i></div> </div>';
+                })
+            })
+        } else{
+            html+= `
+                <div class="no-voucher text-center">
+                    <i class="no-voucher-img lazy" style="background-image:url(/static/assets/default/images/cart-ticket.png)"></i>
+
+                    <p class="text-20 font-600 m-0"> Chưa có mã voucher nào ! </p>
+                </div>
+            `;
+        }
+
+        $(holder).html(html);
+    }
+
+
+  
+  
+
+   function convertToSlug(Text) {
+    // var newText = Text.split('.').join(" ");
+    if (Text.lastIndexOf(".") > 0) {
+      var newText = Text.substr(Text.lastIndexOf(".") + 2);
+      // console.log(newText);
+    } else newText = Text;
+    return newText
+      .toLowerCase()
+      .replace(/à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ/g, "a")
+      .replace(/è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ/g, "e")
+      .replace(/ì|í|ị|ỉ|ĩ/g, "i")
+      .replace(/ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ/g, "o")
+      .replace(/ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ/g, "u")
+      .replace(/ỳ|ý|ỵ|ỷ|ỹ/g, "y")
+      .replace(/đ/g, "d")
+      .replace(/\u0300|\u0301|\u0303|\u0309|\u0323/g, "")
+      .replace(/\u02C6|\u0306|\u031B/g, "")
+      .replace(/[^\w ]+/g, '')
+      .replace(/ +/g, '-');
+  }
+
+  function getDistrict(province_id) {
+    var params = {
+      action_type: "district-list",
+      province: province_id,
+    };
+
+    Hura.Ajax.get("province", params).then(function (data) {
+      var html = '';
+      $.each(data, function (key, item) {
+        html += `<li onclick="selectebDistricTg(this);" data-key="` + item.id + `">` + item.name + `</li>`;
+      });
+
+      $('#js-list-district-list').html(html);
+    })
+  }
+ 
+  function getWardListNew(district_id) {
+        var params = {
+            action_type: 'ward-list',
+            district: district_id
+        };
+
+        Hura.Ajax.get("province", params).then(function (data) {
+            var html = '';
+            $.each(data, function (key, item) {
+              html += `<li onclick="selectebWardTg(this);" data-key="` + item.id + `">` + item.name + `</li>`;
+            });
+
+            $('#js-list-ward-list').html(html);
+         })
+    }
+ 
+  function searchProvinceTg(elm, holder) {
+    let value = convertToSlug($(elm).val());
+    var value_comvert = value.toUpperCase();
+    $(holder + " li").filter(function () {
+      var text = $(this).text();
+      var text_rpl = text.replace(/\./g, ' ');
+      var text_cv = convertToSlug(text_rpl)
+      var text_comvert = text_cv.toUpperCase();
+      $(this).toggle(text_comvert.indexOf(value_comvert) > -1)
+    })
+  }
+
+  function provinceFocus() {
+    $("#js-province-tragop").focus(function () {
+      $("#js-list-province").show();
+    });
+
+    $("#js-province-tragop-ale").focus(function () {
+      $("#js-list-province-ale").show();
+    });
+  }
+  provinceFocus();
+  
+     // CLICK OUTSIDE CLOSE SEARCH
+  function closeProvince() {
+  	$(document).on("click", function (e) { 
+  	  if(e.target != document.querySelector("#js-province-tragop") && e.target != document.querySelector("#js-search-province")) {
+  	  	$("#js-list-province").css("display","none");
+        $(".customer-province").removeClass('active');
+  	  }
+       if(e.target != document.querySelector("#js-distric-tragop") && e.target != document.querySelector("#js-search-distric")) {
+  	  	$("#js-list-district").css("display","none");
+ 		 $(".customer-distric").removeClass('active1');
+  	  }
+  
+       if(e.target != document.querySelector("#js-ward-tragop") && e.target != document.querySelector("#js-search-ward")) {
+  	  	$("#js-list-ward").css("display","none");
+        $(".customer-ward").removeClass('active2');
+  	  }
+      
+  	});
+  }
+ closeProvince();
+
+  function selectebProvinCeTg(elm) {
+    let province_name = $(elm).text();
+    let key = $(elm).attr("data-key");
+    $("#id-province").attr("value", key);  
+    $("#js-province-tragop").val(province_name);
+     $("#id-province").attr("value", key);
+    getDistrict(key);
+    $("#js-list-province").hide();
+  }
+  
+  
+  
+  function districFocus() {
+    $("#js-distric-tragop").focus(function () {
+      $("#js-list-district").show();
+    });
+  }
+  districFocus();
+
+  function selectebDistricTg(elm) {
+    let distric_name = $(elm).text();
+    let key = $(elm).attr("data-key");
+    $("#js-distric-tragop").val(distric_name);
+    $("#id-distric").attr("value", key);
+    getWardListNew(key);
+    $("#js-list-district").hide();
+  	checkTotalShippingFee();
+  }
+
+  
+  
+  function wardFocus() {
+    $("#js-ward-tragop").focus(function () {
+      $("#js-list-ward").show();
+    });
+  }
+  wardFocus();
+  
+  function selectebWardTg(elm) {
+    let ward_name = $(elm).text();
+    let key = $(elm).attr("data-key");
+    $("#js-ward-tragop").val(ward_name);
+    $("#js-list-ward").hide();
+  } 
+

demo-audio-1/Demoaudio Mẫu 1/js/global.js

@@ -0,0 +1,367 @@
+
+   // LAZY LOADING BLOCK ELEMENT
+  var lazy_load_group = [];
+  
+  var lazyLoadInstance = new LazyLoad({
+   elements_selector: ".lazy"
+  });
+  
+  
+   lazy_load_group.push(
+          {
+              id: 'js-deal-box',
+              target: '#js-deal-box',
+              loadFn: function () {
+               getDealProduct();
+              },
+          },
+
+ 	
+    )
+  
+
+
+
+
+  //Kiểm tra cú pháp Email
+function validateEmail(Email) {
+  var regaxEmail =
+    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  if (regaxEmail.test(Email)) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+//Kiếm tra cú pháp Số điện thoại
+var number_regex1 = /^[0]\d{9}$/i;
+var number_regex2 = /^[0]\d{10}$/i;
+var error = "";
+  
+  
+//Kiểm tra tên chứa ký tự đặc biệt
+var nameRegex =  /[^a-z0-9A-Z_ÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂưăạảấầẩẫậắằẳẵặẹẻẽềềểỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễếệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵỷỹ]/u;
+  
+
+
+
+
+
+    // ADD ITEM TO CART SUCCESS FORM
+  var successForm = document.querySelector(".success-form");
+  function cartButton(idCart) {
+    Hura.Cart.Product.add(idCart, 0, { quantity: 1 }).then(function (
+      add_status
+    ) {
+      if (add_status.status === "error") {
+        alert("Đã tồn tại sản phẩm trong giỏ hàng");
+      } else {
+        modalSuccess();
+        change_cart_amount();
+      }
+    });
+  }
+
+  // CALL MODAL SUCCESS
+  function modalSuccess() {
+    successForm.classList.toggle("hide");
+    setTimeout(function () {
+      successForm.classList.toggle("hide");
+    }, 1200);
+  }
+
+  // CHANGE AMOUNT CART HEADER
+  function change_cart_amount() {
+    Hura.Cart.getSummary().then(function (data) {
+      if (data.total_item != 0) {
+        $(".header-features-cart-amount").show().html(data.total_item);
+  		$(".name-amount-sp").show();
+  		$(".amount-sp-in-cart").show().html(""+ data.total_item +"");
+      } else {
+        $(".header-features-cart-amount").hide();
+        $(".name-amount-sp").hide();
+      }
+    });
+  }
+ 
+  
+
+
+
+
+  function debounce(func, wait, immediate) {
+    var timeout;
+    return function() {
+        var context = this, args = arguments;
+        var later = function() {
+            timeout = null;
+            if (!immediate) func.apply(context, args);
+        };
+        var callNow = immediate && !timeout;
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+        if (callNow) func.apply(context, args);
+    };
+};  
+  
+  
+  
+   // GET SEARCH PRODUCT
+  function searchProduct(value) {
+    var params = {
+      action: "search",
+      action_type: "search",
+      content: "product",
+      q: value,
+    };
+
+    Hura.Ajax.get("search", params).then(function (data) {
+      //console.log(data.list);
+
+      if (data.list.length > 0) {
+        $(".search-results").css("display", "block");
+        var html = Hura.Template.parse(searchResultsTpl, data.list);
+        Hura.Template.render(".search-results-list", html);
+      } else {
+        $(".search-results").css("display", "none");
+      }
+    });
+  }
+
+
+  
+   function getSearchValue() {
+  $('#js-search-box').keyup(debounce(function(e){
+      let value = e.target.value;
+      if (value) {
+        searchProduct(value);
+      } else {
+        $(".search-results").css("display", "none");
+      }
+    },200));
+  }
+  
+  
+  // CART HEADER POPUP
+  function cartHeaderPopup() {
+    $(".cart-header").on("mouseenter", function () {
+      var target = ".cart-ttip-item-container";
+      Hura.Cart.getCart().then(function (data) {
+        if (data == 0) {
+          $(target).html("<h5>Có 0 sản phẩm trong giỏ hàng</h5>");
+          $(target).find("h5").attr("class", "header-null-cart");
+        } else {
+          var html = Hura.Template.parse(headerCartTpl, data);
+          $(target).html(html);
+        }
+      });
+    });
+  }
+  
+  function totalCartPopup(){
+       Hura.Cart.getSummary().then(function (summary_data) {
+        $("#js-header-cart-quantity").html(
+          "<i>(Số lượng: " + summary_data.total_quantity + " sản phẩm)</i>"
+        );
+        $("#js-header-cart-total-price").html(
+          summary_data.total_value.toLocaleString() + "₫"
+        );
+        if (summary_data.total_quantity == 0) {
+              $("#btn-cart-ttip").addClass( "hide" );
+        }
+
+  
+      });
+  }
+
+  
+  
+  // FIXED HEADER
+  function fixed_header() {
+    $(window).scroll(function () {
+      var distanceFromTop = $(document).scrollTop();
+      
+      if (distanceFromTop > 350) {
+        $(".header-mid").addClass("fixed-nav");
+           
+      } else {
+        $(".header-mid").removeClass("fixed-nav");
+  		
+      }
+    });
+  }
+  
+
+
+
+
+  
+// FORMAT PRICE
+function formatCurrency(a) {
+  var b = parseFloat(a)
+    .toFixed(2)
+    .replace(/(\d)(?=(\d{3})+\.)/g, "$1.")
+    .toString();
+  var len = b.length;
+  b = b.substring(0, len - 3);
+  return b;
+}
+
+// CONVERT STRING TO NUMBER
+function strToNumber(str) {
+  str += "";
+  while (str.indexOf(".") > 0) {
+    str = str.replace(".", "");
+  }
+  var result = parseFloat(str);
+  return isNaN(result) ? 0 : result;
+}
+
+ function checkSummary(productSummary) {
+    var summary = [];
+    if (productSummary) {
+      var splitSummary = productSummary.split("\r\n");
+      splitSummary.forEach(function (value, item) {
+        if (item < 10 && 1 < 2) {
+          summary.push(splitSummary[item]);
+        }
+      })
+    }
+    return summary.join("\r\n");
+  }
+  
+  // REWORK SPECIAL OFFER PRODUCT
+  function checkKhuyenMai(specialOffer) {
+    var offer = [];
+    if (specialOffer) {
+      var splitOffer = specialOffer.split("\n");
+      splitOffer.forEach(function (value, item) {
+        if (item < 10 && 1 < 2) {
+          offer.push(`<div class="item">` + splitOffer[item] + `</div>`);
+        }
+      })
+    }
+    return offer.join('');
+  }
+
+
+
+
+
+   // DEAL TIME DOWN
+  function saleTimeDown() {
+    // SET TIMER
+    let timeDealLeft = parseInt($(".box-deal-home .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>${day}</p>
+           <span>:</span>
+           <p>${hour}</p>
+           <span>:</span>
+           <p>${min}</p>
+           <span>:</span>
+           <p>${sec}</p>    
+         `;
+  }
+  
+  
+  
+  // GET HOT-DEAL PRODUCT
+  function getDealProduct() {
+    let params = {
+      action_type: "list",
+      type: "active",
+      show: 20,
+    }
+
+    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();
+  
+  	  resetImagePageDeal();
+    });
+  } 
+  
+  
+  // 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 quantitySaleLeft = parseInt($(this).parent().attr("data-quantity-left"));
+      let quantitySaleTotal = parseInt($(this).parent().attr("data-quantity-sale-total"));
+
+      if (quantitySaleLeft >= 0) {
+        let lineDealWidth = quantitySaleLeft / quantitySaleTotal * 100 + "%";
+        $(this).css("width", lineDealWidth);
+      } else {
+        $(this).css("width", 0);
+      }
+    })
+  }
+  
+  
+
+
+  
+
+
+    // SORT SELECT BOX
+  function sortSelect() {
+    var href = window.location.href;
+
+    $(".js-select-sort-item").each(function () {
+      if ($(this).val() === href) {
+        $(this).attr("selected", "selected");
+      }
+    });
+  }
+  sortSelect();