update
This commit is contained in:
226
template/javascript/product-detail.html
Normal file
226
template/javascript/product-detail.html
Normal file
@@ -0,0 +1,226 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user