https://bigearsfestival.org/wp-content/plugins/shopify-plugin/assets/js/shopify-pdp.js?ver=1.0.0

1/**
2 * Shopify PDP (Product Detail Page) JavaScript
3 *
4 * Handles product detail page functionality including quantity controls, accordion, and slider
5 */
6
7document.addEventListener('DOMContentLoaded', function() {
8    initializePDPFunctionality();
9});
10
11function initializePDPFunctionality() {
12    console.log('Initializing Shopify PDP functionality');
13
14    // Initialize quantity controls
15    initializeQuantityControls();
16
17    // Initialize accordion functionality
18    initializeProductAccordion();
19
20    // Initialize product slider
21    initializeProductSlider();
22
23    // Initialize variant selector visibility using Shopify's update event
24    initializeVariantSelectorVisibility();
25}
26
27/** Quantity increment/decrement functions **/
28let cartQuantity = 1;
29
30function initializeQuantityControls() {
31    // Bind click events to quantity buttons
32    const decreaseButton = document.querySelector('.decrease');
33    const increaseButton = document.querySelector('.increase');
34    
35    if (decreaseButton) {
36        decreaseButton.addEventListener('click', decreaseValue);
37    }
38    
39    if (increaseButton) {
40        increaseButton.addEventListener('click', increaseValue);
41    }
42}
43
44function decreaseValue() {
45    const countDisplay = document.getElementById('single-product__count');
46    if (cartQuantity > 1) {
47        countDisplay.textContent = --cartQuantity;
48    }
49}
50
51function increaseValue() {
52    const countDisplay = document.getElementById('single-product__count');
53    countDisplay.textContent = ++cartQuantity;
54}
55
56/** Product Card Accordion **/
57function initializeProductAccordion() {
58    const accordionHeaders = document.querySelectorAll('.single-product__accordion__header');
59    
60    accordionHeaders.forEach(header => {
61        header.addEventListener('click', shopifyToggleAccordion);
62    });
63}
64
65function shopifyToggleAccordion(event) {
66    const block = document.querySelector(event.currentTarget.dataset.toggle);
67    if (!block) return;
68    
69    event.currentTarget.classList.toggle('active');
70    block.style.maxHeight = event.currentTarget.classList.contains('active') ? `${block.scrollHeight}px` : '';
71}
72
73/** Product Slider (You may also like section) **/
74function initializeProductSlider() {
75    const prevButton = document.querySelector('.collection__slider-button.prev');
76    const nextButton = document.querySelector('.collection__slider-button.next');
77    
78    if (prevButton) {
79        prevButton.addEventListener('click', () => moveSlider(-1));
80    }
81    
82    if (nextButton) {
83        nextButton.addEventListener('click', () => moveSlider(1));
84    }
85}
86
87function moveSlider(direction) {
88    const slider = document.getElementById('collection__product-slider');
89    if (!slider) return;
90
91    const scrollAmount = 300;
92    const currentScroll = slider.scrollLeft;
93    const newScroll = currentScroll + (direction * scrollAmount);
94
95    // Smooth scroll to the new position
96    slider.scrollTo({
97        left: newScroll,
98        behavior: 'smooth'
99    });
100}
101
102/** Variant Selector Visibility **/
103function initializeVariantSelectorVisibility() {
104    document.body.addEventListener('shopify-update-data', (event) => {
105        const selector = document.querySelector('shopify-variant-selector');
106        if (!selector) return;
107
108        const product = event.detail?.product;
109        const hasVariants = product?.options?.length > 0 || false;
110
111        selector.classList.toggle('has-variants', hasVariants);
112    }, true);
113}
114
115// Make functions available globally for PHP onclick handlers
116window.decreaseValue = decreaseValue;
117window.increaseValue = increaseValue;
118window.shopifyToggleAccordion = shopifyToggleAccordion;
119window.moveSlider = moveSlider;