The repo for Purrform's main BigCommerce store.
fix: multiple pages add to cart issue (#32)
authored by
Rogerio Romao
and committed by
GitHub
b0bf5856
1f3d5687
+60
-136
+59
-135
assets/js/theme/global.js
+59
-135
assets/js/theme/global.js
···
1
+
/* eslint-disable function-paren-newline */
1
2
import 'focus-within-polyfill';
2
3
3
-
import './global/jquery-migrate';
4
+
import carousel from './common/carousel';
4
5
import './common/select-option-plugin';
5
-
import PageManager from './page-manager';
6
-
import quickSearch from './global/quick-search';
6
+
import calculatorDropdown from './custom/calculatorDropdown';
7
+
import descriptionTabs from './custom/descriptionTabs';
8
+
import cartPreview from './global/cart-preview';
9
+
import privacyCookieNotification from './global/cookieNotification';
7
10
import currencySelector from './global/currency-selector';
11
+
import foundation from './global/foundation';
12
+
import './global/jquery-migrate';
13
+
import menu from './global/menu';
8
14
import mobileMenuToggle from './global/mobile-menu-toggle';
9
-
import menu from './global/menu';
10
-
import foundation from './global/foundation';
15
+
import quickSearch from './global/quick-search';
11
16
import quickView from './global/quick-view';
12
-
import cartPreview from './global/cart-preview';
13
-
import privacyCookieNotification from './global/cookieNotification';
14
-
import carousel from './common/carousel';
15
17
import svgInjector from './global/svg-injector';
16
-
import calculatorDropdown from './custom/calculatorDropdown';
17
-
import descriptionTabs from './custom/descriptionTabs';
18
-
import common from './custom/common';
18
+
import PageManager from './page-manager';
19
19
20
20
export default class Global extends PageManager {
21
21
onReady() {
···
32
32
svgInjector();
33
33
descriptionTabs();
34
34
calculatorDropdown();
35
-
36
35
37
-
$(document).ready(function() {
36
+
$(() => {
38
37
function handleImageVisibility() {
39
-
var windowWidth = $(window).width();
40
-
var $contentImage = $('#contentImage');
41
-
42
-
if (windowWidth >= 768) {
43
-
var desktopSrc = $contentImage.data('desktop-src');
44
-
$contentImage.attr('src', desktopSrc);
45
-
} else {
46
-
var mobileSrc = $contentImage.data('mobile-src');
47
-
$contentImage.attr('src', mobileSrc);
48
-
}
38
+
const windowWidth = $(window).width();
39
+
const $contentImage = $('#contentImage');
40
+
41
+
if (windowWidth >= 768) {
42
+
const desktopSrc = $contentImage.data('desktop-src');
43
+
$contentImage.attr('src', desktopSrc);
44
+
} else {
45
+
const mobileSrc = $contentImage.data('mobile-src');
46
+
$contentImage.attr('src', mobileSrc);
47
+
}
49
48
}
50
-
49
+
51
50
// Initial visibility check
52
51
handleImageVisibility();
53
-
52
+
54
53
// Handle visibility on window resize
55
-
$(window).resize(function() {
56
-
handleImageVisibility();
54
+
$(window).on('resize', () => {
55
+
handleImageVisibility();
57
56
});
58
-
});
59
-
common();
60
-
// Function to hide all ".quick-add-to-cart" elements except for the specified card
61
-
function hideOtherAddToCartElements(currentCard) {
62
-
var allCards = document.querySelectorAll(".card");
63
-
64
-
allCards.forEach(function (card) {
65
-
if (card !== currentCard) {
66
-
var addToCartWrapper = card.querySelector(".quick-add-to-cart");
67
-
68
-
// Check if addToCartWrapper is not null before accessing its style property
69
-
if (addToCartWrapper) {
70
-
addToCartWrapper.style.display = "none";
71
-
}
72
-
}
73
-
});
74
-
}
75
-
// Function to hide all ".quick-add-to-cart" elements except for the specified card
76
-
function hideOtherAddToCartElements(currentCard) {
77
-
var allCards = document.querySelectorAll(".card");
78
-
79
-
allCards.forEach(function (card) {
80
-
if (card !== currentCard) {
81
-
var addToCartWrapper = card.querySelector(".quick-add-to-cart");
82
-
83
-
// Check if addToCartWrapper is not null and does not contain the clicked element
84
-
if (addToCartWrapper && !addToCartWrapper.contains(event.target)) {
85
-
addToCartWrapper.style.display = "none";
86
-
}
87
-
}
88
-
});
89
-
}
90
-
91
-
// Get all elements with class "quick-cart"
92
-
var quickCartElements = document.querySelectorAll(".quick-cart");
93
-
94
-
// Loop through each "quick-cart" element
95
-
quickCartElements.forEach(function (quickCart) {
96
-
// Add click event listener to each "quick-cart"
97
-
quickCart.addEventListener("click", function (event) {
98
-
// Find the parent ".card" element
99
-
var card = quickCart.closest(".card");
100
-
101
-
// Find the ".quick-add-to-cart" within the same card
102
-
var addToCartWrapper = card.querySelector(".quick-add-to-cart");
57
+
});
103
58
104
-
// Check if addToCartWrapper is not null before accessing its style property
105
-
if (addToCartWrapper) {
106
-
// Toggle the visibility of ".quick-add-to-cart"
107
-
addToCartWrapper.style.display = addToCartWrapper.style.display === "none" ? "block" : "none";
59
+
$(document).on('click', '.quick-cart', (event) => {
60
+
event.stopPropagation();
61
+
const addToCartWrapper = $(event.currentTarget)
62
+
.closest('.card')
63
+
.find('.quick-add-to-cart');
64
+
addToCartWrapper.toggle();
65
+
});
108
66
109
-
// Hide ".quick-add-to-cart" elements of other cards
110
-
hideOtherAddToCartElements(card);
111
-
}
67
+
// Add click event listener to the document body to hide ".quick-add-to-cart" when clicking outside
68
+
document.body.addEventListener('click', (event) => {
69
+
const allCards = document.querySelectorAll('.card');
112
70
113
-
// Prevent the click event from propagating to the document body
114
-
event.stopPropagation();
115
-
});
116
-
});
71
+
allCards.forEach((card) => {
72
+
const addToCartWrapper =
73
+
card.querySelector('.quick-add-to-cart');
117
74
118
-
// Add click event listener to the document body to hide ".quick-add-to-cart" when clicking outside
119
-
document.body.addEventListener("click", function (event) {
120
-
var allCards = document.querySelectorAll(".card");
121
-
122
-
allCards.forEach(function (card) {
123
-
var addToCartWrapper = card.querySelector(".quick-add-to-cart");
75
+
// Check if addToCartWrapper is not null and does not contain the clicked element
76
+
if (
77
+
addToCartWrapper &&
78
+
!addToCartWrapper.contains(event.target)
79
+
) {
80
+
addToCartWrapper.style.display = 'none';
81
+
}
82
+
});
83
+
});
124
84
125
-
// Check if addToCartWrapper is not null and does not contain the clicked element
126
-
if (addToCartWrapper && !addToCartWrapper.contains(event.target)) {
127
-
addToCartWrapper.style.display = "none";
128
-
}
129
-
});
130
-
});
131
-
132
-
// Function to handle the click event on add-quantity buttons
133
-
function handleAddQuantityButtonClick() {
134
-
// Get all elements with class "add-quantity"
135
-
var addQuantityButtons = document.querySelectorAll(".add-quantity span");
136
-
137
-
// Loop through each "add-quantity" button
138
-
addQuantityButtons.forEach(function (button) {
139
-
// Add click event listener to each button
140
-
button.addEventListener("click", function () {
85
+
$(document).on('click', '.add-quantity span', (event) => {
86
+
event.stopImmediatePropagation();
141
87
// Remove the "active" class from all spans
142
-
addQuantityButtons.forEach(function (span) {
143
-
span.classList.remove("active");
144
-
});
88
+
$('.add-quantity span').removeClass('active');
145
89
146
90
// Add the "active" class to the clicked span
147
-
button.classList.add("active");
91
+
$(event.currentTarget).addClass('active');
148
92
149
93
// Find the parent ".card" element
150
-
var card = button.closest(".card");
94
+
const card = $(event.currentTarget).closest('.card');
151
95
152
96
// Find the related input with class "form-input--incrementTotal"
153
-
var incrementTotalInput = card.querySelector(".form-input--incrementTotal");
97
+
const incrementTotalInput = card.find(
98
+
// eslint-disable-next-line comma-dangle
99
+
'.form-input--incrementTotal'
100
+
);
154
101
155
102
// Update the value of the input with the HTML content of the span
156
-
incrementTotalInput.value = button.innerHTML;
103
+
incrementTotalInput.val($(event.currentTarget).html());
157
104
});
158
-
});
159
-
}
160
-
161
-
// Function to reload the script
162
-
function reloadScriptIfPageChanged() {
163
-
// Reload the script if the page URL contains "?page="
164
-
if (window.location.href.indexOf('?page=') > -1) {
165
-
handleAddQuantityButtonClick();
166
-
}
167
-
}
168
-
169
-
// Call the function on document ready
170
-
jQuery(document).ready(function ($) {
171
-
handleAddQuantityButtonClick();
172
-
173
-
// Check for page changes using the popstate event
174
-
window.addEventListener('popstate', reloadScriptIfPageChanged);
175
-
176
-
// Optionally, you can also check for changes on initial load
177
-
reloadScriptIfPageChanged();
178
-
});
179
-
180
-
181
105
}
182
106
}