227 lines
9.5 KiB
HTML
227 lines
9.5 KiB
HTML
|
<script>
|
||
|
|
document.addEventListener("DOMContentLoaded", function () {
|
||
|
|
// Swiper Thumbs Gallery
|
||
|
|
if (typeof Swiper !== "undefined") {
|
||
|
|
var thumbsSwiper = new Swiper(".product-thumbs-swiper", {
|
||
|
|
spaceBetween: 8,
|
||
|
|
slidesPerView: "auto",
|
||
|
|
freeMode: true,
|
||
|
|
watchSlidesProgress: true,
|
||
|
|
})
|
||
|
|
new Swiper(".product-main-swiper", {
|
||
|
|
spaceBetween: 0,
|
||
|
|
thumbs: { swiper: thumbsSwiper },
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fancybox
|
||
|
|
if (typeof Fancybox !== "undefined") {
|
||
|
|
Fancybox.bind("[data-fancybox='product-gallery']")
|
||
|
|
}
|
||
|
|
|
||
|
|
// Tab switching
|
||
|
|
var tabBtnSpec = document.getElementById("tab-btn-spec")
|
||
|
|
var tabBtnInfo = document.getElementById("tab-btn-info")
|
||
|
|
var tabContentSpec = document.getElementById("tab-content-spec")
|
||
|
|
var tabContentInfo = document.getElementById("tab-content-info")
|
||
|
|
var descriptionContent = document.getElementById("product-description-content")
|
||
|
|
var descriptionFade = document.getElementById("product-description-fade")
|
||
|
|
var toggleDescriptionBtn = document.getElementById("btn-toggle-description")
|
||
|
|
var descriptionCollapsedHeight = 420
|
||
|
|
var isDescriptionExpanded = false
|
||
|
|
|
||
|
|
function setActiveTab(active) {
|
||
|
|
if (active === "spec") {
|
||
|
|
tabBtnSpec.className = "w-[205px] h-10 rounded-[4px] border border-[#0084ff] bg-[#edf7ff] text-[16px] text-[#0084ff] font-bold tracking-[-0.32px]"
|
||
|
|
tabBtnInfo.className = "w-[205px] h-10 rounded-[4px] border border-[#e6e6e6] bg-white text-[16px] text-black font-bold tracking-[-0.32px]"
|
||
|
|
tabContentSpec.classList.remove("hidden")
|
||
|
|
tabContentInfo.classList.add("hidden")
|
||
|
|
} else {
|
||
|
|
tabBtnInfo.className = "w-[205px] h-10 rounded-[4px] border border-[#0084ff] bg-[#edf7ff] text-[16px] text-[#0084ff] font-bold tracking-[-0.32px]"
|
||
|
|
tabBtnSpec.className = "w-[205px] h-10 rounded-[4px] border border-[#e6e6e6] bg-white text-[16px] text-black font-bold tracking-[-0.32px]"
|
||
|
|
tabContentInfo.classList.remove("hidden")
|
||
|
|
tabContentSpec.classList.add("hidden")
|
||
|
|
requestAnimationFrame(syncDescriptionToggle)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function syncDescriptionToggle() {
|
||
|
|
if (!descriptionContent || !toggleDescriptionBtn || !descriptionFade || !tabContentInfo) return
|
||
|
|
if (tabContentInfo.classList.contains("hidden")) return
|
||
|
|
|
||
|
|
var fullHeight = descriptionContent.scrollHeight
|
||
|
|
if (fullHeight <= descriptionCollapsedHeight + 8) {
|
||
|
|
descriptionContent.style.maxHeight = "none"
|
||
|
|
descriptionFade.classList.add("hidden")
|
||
|
|
toggleDescriptionBtn.classList.add("hidden")
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
toggleDescriptionBtn.classList.remove("hidden")
|
||
|
|
|
||
|
|
if (isDescriptionExpanded) {
|
||
|
|
descriptionContent.style.maxHeight = fullHeight + "px"
|
||
|
|
toggleDescriptionBtn.textContent = "Thu gọn"
|
||
|
|
descriptionFade.classList.add("hidden")
|
||
|
|
} else {
|
||
|
|
descriptionContent.style.maxHeight = descriptionCollapsedHeight + "px"
|
||
|
|
toggleDescriptionBtn.textContent = "Xem thêm"
|
||
|
|
descriptionFade.classList.remove("hidden")
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function scrollToDescription() {
|
||
|
|
if (!tabContentInfo) return
|
||
|
|
var offsetTop = tabContentInfo.getBoundingClientRect().top + window.pageYOffset - 80
|
||
|
|
window.scrollTo({
|
||
|
|
top: offsetTop > 0 ? offsetTop : 0,
|
||
|
|
behavior: "smooth",
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
if (tabBtnSpec && tabBtnInfo && tabContentSpec && tabContentInfo) {
|
||
|
|
tabBtnSpec.addEventListener("click", function () { setActiveTab("spec") })
|
||
|
|
tabBtnInfo.addEventListener("click", function () { setActiveTab("info") })
|
||
|
|
}
|
||
|
|
|
||
|
|
if (toggleDescriptionBtn) {
|
||
|
|
toggleDescriptionBtn.addEventListener("click", function () {
|
||
|
|
var wasExpanded = isDescriptionExpanded
|
||
|
|
isDescriptionExpanded = !isDescriptionExpanded
|
||
|
|
syncDescriptionToggle()
|
||
|
|
if (wasExpanded) {
|
||
|
|
setTimeout(scrollToDescription, 60)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
if (tabContentInfo && !tabContentInfo.classList.contains("hidden")) {
|
||
|
|
requestAnimationFrame(syncDescriptionToggle)
|
||
|
|
}
|
||
|
|
window.addEventListener("load", syncDescriptionToggle)
|
||
|
|
|
||
|
|
var installOptionGroup = document.getElementById("install-option-group")
|
||
|
|
var installOptions = installOptionGroup ? Array.prototype.slice.call(installOptionGroup.querySelectorAll(".js-install-option")) : []
|
||
|
|
var selectedAddonInput = document.getElementById("selected-addon-id")
|
||
|
|
|
||
|
|
function setInstallOptionActive(activeOption) {
|
||
|
|
if (!activeOption) return
|
||
|
|
|
||
|
|
installOptions.forEach(function (option) {
|
||
|
|
var isActive = option === activeOption
|
||
|
|
option.classList.toggle("is-selected", isActive)
|
||
|
|
option.classList.toggle("border-[#e4057c]", isActive)
|
||
|
|
option.classList.toggle("bg-[#fff6f6]", isActive)
|
||
|
|
option.classList.toggle("border-[#e2e2e2]", !isActive)
|
||
|
|
option.classList.toggle("bg-white", !isActive)
|
||
|
|
option.setAttribute("aria-checked", isActive ? "true" : "false")
|
||
|
|
|
||
|
|
var radio = option.querySelector(".js-install-radio")
|
||
|
|
var radioDot = option.querySelector(".js-install-radio-dot")
|
||
|
|
var selectedDot = option.querySelector(".js-install-selected-dot")
|
||
|
|
|
||
|
|
if (radio) {
|
||
|
|
radio.classList.toggle("border-[#a0045c]", isActive)
|
||
|
|
radio.classList.toggle("border-[#a9a9a9]", !isActive)
|
||
|
|
}
|
||
|
|
if (radioDot) {
|
||
|
|
radioDot.classList.toggle("hidden", !isActive)
|
||
|
|
}
|
||
|
|
if (selectedDot) {
|
||
|
|
selectedDot.classList.toggle("hidden", !isActive)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
if (selectedAddonInput) {
|
||
|
|
selectedAddonInput.value = activeOption.getAttribute("data-addon-id") || ""
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (installOptions.length > 0) {
|
||
|
|
installOptions.forEach(function (option) {
|
||
|
|
option.addEventListener("click", function () {
|
||
|
|
setInstallOptionActive(option)
|
||
|
|
})
|
||
|
|
option.addEventListener("keydown", function (event) {
|
||
|
|
if (event.key === "Enter" || event.key === " ") {
|
||
|
|
event.preventDefault()
|
||
|
|
setInstallOptionActive(option)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
var defaultOption = installOptionGroup.querySelector(".js-install-option.is-selected") || installOptions[0]
|
||
|
|
setInstallOptionActive(defaultOption)
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeCartPopup() {
|
||
|
|
var popup = document.getElementById("cart-popup")
|
||
|
|
if (!popup) return
|
||
|
|
popup.classList.add("hidden")
|
||
|
|
popup.style.display = "none"
|
||
|
|
document.body.classList.remove("overflow-hidden")
|
||
|
|
}
|
||
|
|
|
||
|
|
function showAddToCartPopup(button) {
|
||
|
|
var popup = document.getElementById("cart-popup")
|
||
|
|
|
||
|
|
if (!popup) {
|
||
|
|
// Fallback for pages without the global popup container.
|
||
|
|
var toast = document.getElementById("cart-toast")
|
||
|
|
if (toast) {
|
||
|
|
toast.classList.remove("hidden")
|
||
|
|
setTimeout(function () { toast.classList.add("hidden") }, 3000)
|
||
|
|
}
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
var productName = button.getAttribute("data-product-name") || ""
|
||
|
|
var productImage = button.getAttribute("data-product-image") || ""
|
||
|
|
var productPrice = button.getAttribute("data-product-price") || "Liên hệ"
|
||
|
|
|
||
|
|
var popupImg = document.getElementById("cart-popup-img")
|
||
|
|
var popupName = document.getElementById("cart-popup-name")
|
||
|
|
var popupPrice = document.getElementById("cart-popup-price")
|
||
|
|
|
||
|
|
if (popupImg) popupImg.src = productImage
|
||
|
|
if (popupName) popupName.textContent = productName
|
||
|
|
if (popupPrice) popupPrice.textContent = productPrice
|
||
|
|
|
||
|
|
popup.classList.remove("hidden")
|
||
|
|
popup.style.display = "flex"
|
||
|
|
document.body.classList.add("overflow-hidden")
|
||
|
|
}
|
||
|
|
|
||
|
|
window.closeCartPopup = closeCartPopup
|
||
|
|
|
||
|
|
var cartPopup = document.getElementById("cart-popup")
|
||
|
|
if (cartPopup) {
|
||
|
|
cartPopup.addEventListener("click", function (event) {
|
||
|
|
if (event.target === cartPopup) {
|
||
|
|
closeCartPopup()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener("keydown", function (event) {
|
||
|
|
if (event.key === "Escape") {
|
||
|
|
closeCartPopup()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
var addToCartBtn = document.getElementById("btn-add-to-cart")
|
||
|
|
if (addToCartBtn) {
|
||
|
|
addToCartBtn.addEventListener("click", function () {
|
||
|
|
showAddToCartPopup(addToCartBtn)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
var buyNowBtn = document.getElementById("btn-buy-now")
|
||
|
|
if (buyNowBtn) {
|
||
|
|
buyNowBtn.addEventListener("click", function () {
|
||
|
|
window.location.href = "/cart"
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|