demo-audio-2
This commit is contained in:
170
demo-audio-2/test.html
Normal file
170
demo-audio-2/test.html
Normal file
@@ -0,0 +1,170 @@
|
||||
<script>
|
||||
// DEAL TIME DOWN
|
||||
function dealTimeDown() {
|
||||
// SET TIMER
|
||||
let timeDealLeft = parseInt($(".box-deal .p-item").first().attr("data-time"));
|
||||
const timer = setInterval(timeDown, 1000);
|
||||
|
||||
function timeDown() {
|
||||
// GET TIME LEFT PER SECOND
|
||||
let timeLeft = timeDealLeft;
|
||||
timeDealLeft = timeLeft - 1;
|
||||
|
||||
if ($(".global-time-deal").length) $(".global-time-deal").html(renderTimeLeft(timeLeft));
|
||||
if (timeLeft === 0) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// RENDER HOMEPAGE TIME LEFT
|
||||
function renderTimeLeft(timeLeft) {
|
||||
const sec = String(timeLeft % 60).padStart(2, 0);
|
||||
const min = String(Math.trunc((timeLeft / 60) % 60)).padStart(2, 0);
|
||||
const hour = String(Math.trunc(timeLeft / 3600) % 24).padStart(2, 0);
|
||||
const day = String(Math.trunc(timeLeft / 86400) % 3600).padStart(2, 0);
|
||||
|
||||
const firstLetterSec = Math.floor(sec / 10);
|
||||
const secondLetterSec = sec % 10;
|
||||
const firstLetterMin = Math.floor(min / 10);
|
||||
const secondLetterMin = min % 10;
|
||||
const firstLetterHour = Math.floor(hour / 10);
|
||||
const secondLetterHour = hour % 10;
|
||||
const firstLetterDay = Math.floor(day / 10);
|
||||
const secondLetterDay = day % 10;
|
||||
|
||||
return `
|
||||
<p>${firstLetterDay}</p>
|
||||
<p>${secondLetterDay}</p>
|
||||
<span>:</span>
|
||||
<p>${firstLetterHour}</p>
|
||||
<p>${secondLetterHour}</p>
|
||||
<span>:</span>
|
||||
<p>${firstLetterMin}</p>
|
||||
<p>${secondLetterMin}</p>
|
||||
<span>:</span>
|
||||
<p>${firstLetterSec}</p>
|
||||
<p>${secondLetterSec}</p>
|
||||
`;
|
||||
}
|
||||
|
||||
// GET HOT-DEAL PRODUCT
|
||||
function getDealProduct() {
|
||||
let params = {
|
||||
action_type: "list",
|
||||
type: "active",
|
||||
show: 10,
|
||||
}
|
||||
|
||||
let target = "#js-deal-box";
|
||||
|
||||
Hura.Ajax.get("deal", params).then(function (data) {
|
||||
console.log(data.list);
|
||||
let html = Hura.Template.parse(productDealTpl, data.list);
|
||||
Hura.Template.render(target, html);
|
||||
|
||||
saleTimeDown();
|
||||
dealLineWidth();
|
||||
});
|
||||
}
|
||||
|
||||
// RESET IMAGE IN PAGE DEAL
|
||||
function resetImagePageDeal() {
|
||||
if ($(".page-deal").length > 0) {
|
||||
$(".p-item .p-img").each(function () {
|
||||
let firstChild = $(this).children(":first");
|
||||
let lastChild = $(this).find(".swiper-lazy-preloader");
|
||||
let imageDataSrc = firstChild.attr("data-src");
|
||||
firstChild.attr("src", imageDataSrc);
|
||||
lastChild.css("display", "none");
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// CUSTOM BOTTOM LINE PRODUCT DEAL
|
||||
function dealLineWidth() {
|
||||
$(".js-line-deal-left").each(function () {
|
||||
let quantityDealLeft = parseInt($(this).parent().attr("data-quantity-left"));
|
||||
let quantityDealTotal = parseInt($(this).parent().attr("data-quantity-sale-total"));
|
||||
|
||||
if (quantityDealLeft >= 0) {
|
||||
let lineDealWidth = quantityDealLeft / quantityDealTotal * 100 + "%";
|
||||
$(this).css("width", lineDealWidth);
|
||||
} else {
|
||||
$(this).css("width", 0);
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
const product_deal_featured_tpl = `
|
||||
<div class="p-info text-right">
|
||||
<a href="{%= item.product_info.productUrl %}">
|
||||
<h3 class="p-name text-24 font-weight-600 mb-4">{%= item.product_info.productName %}</h3>
|
||||
</a>
|
||||
<p class="p-price-sale text-32 font-weight-700 color-primary mb-1">{%= formatCurrency(item.product_info.sale_rules.price) %}₫</p>
|
||||
<p class="p-price-stock text-24 font-weight-500 color-gray-2 text-line-through">
|
||||
{% if (item.product_info.marketPrice > 0) { %}
|
||||
{%= formatCurrency(item.product_info.marketPrice) %}₫
|
||||
{% } else { %}
|
||||
{%= formatCurrency(item.product_info.sale_rules.normal_price) %}₫
|
||||
{% } %}
|
||||
</p>
|
||||
<p class="p-summary font-weight-300 my-4">
|
||||
<span>{%= item.product_info.productSummary %}</span>
|
||||
</p>
|
||||
<div class="wrapper-deal p-relative mb-4" data-deal-left="{%= item.quantity - item.sale_quantity %}" data-deal-total="{%= item.quantity %}">
|
||||
<div class="deal-line total"></div>
|
||||
<div class="deal-line remaining"></div>
|
||||
<i class="static-icons static-icons-static-icon-fire"></i>
|
||||
<p class="sold text-12 color-white">Đã bán {%= item.sale_quantity %}</p>
|
||||
</div>
|
||||
<a href="javascript:addCart({%= item.product_info.productId %});" class="p-cart d-flex align-items-center justify-content-center gap-8">
|
||||
<i class="static-icons static-icons-static-icon-header-cart-pro-big"></i>
|
||||
<span class="text-20 font-weight-500 color-primary text-uppercase">Cho vào giỏ hàng</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="p-image">
|
||||
<a href="{%= item.product_info.productUrl %}">
|
||||
<img src="{%= item.product_info.productImage.large %}" alt="{%= item.product_info.productName %}" class="d-flex w-100">
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const product_deal_list_tpl = `
|
||||
<div class="p-item d-flex gap-16">
|
||||
<a href="{%= item.product_info.productUrl %}" class="p-image">
|
||||
<img src="{%= item.product_info.productImage.large %}" alt="{%= item.product_info.productName %}" class="p-img d-flex w-100">
|
||||
</a>
|
||||
<div class="p-info">
|
||||
<a href="{%= item.product_info.productUrl %}">
|
||||
<h3 class="p-name mt-1">{%= item.product_info.productName %}</h3>
|
||||
</a>
|
||||
<p class="p-price">
|
||||
<span class="p-price-sale">{%= formatCurrency(item.product_info.sale_rules.price) %}₫</span>
|
||||
<span class="p-price-stock">
|
||||
{% if (item.product_info.marketPrice > 0) { %}
|
||||
{%= formatCurrency(item.product_info.marketPrice) %}₫
|
||||
{% } else { %}
|
||||
{%= formatCurrency(item.product_info.sale_rules.normal_price) %}₫
|
||||
{% } %}
|
||||
</span>
|
||||
</p>
|
||||
<div class="wrapper d-flex align-items-end gap-32 mt-2">
|
||||
<div class="wrapper-deal p-relative flex-1 mb-2" data-deal-left="{%= item.quantity - item.sale_quantity %}" data-deal-total="{%= item.quantity %}">
|
||||
<div class="deal-line total"></div>
|
||||
<div class="deal-line remaining js-line-deal-left"></div>
|
||||
<i class="static-icons static-icons-static-icon-fire"></i>
|
||||
<p class="sold text-12 color-white">Đã bán {%= item.sale_quantity %}</p>
|
||||
</div>
|
||||
|
||||
<a href="javascript:addCart({%= item.product_info.productId %});" class="p-cart">
|
||||
<i class="static-icons static-icons-static-icon-header-cart-pro"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
</script>
|
||||
Reference in New Issue
Block a user