Files
giao_dien_web_mau/demo-audio-1/js/product_detail.js

754 lines
22 KiB
JavaScript

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