Skip to content

Commit 711affc

Browse files
committed
fix: Product selector click is not working fully
1 parent 1ca737f commit 711affc

File tree

2 files changed

+13
-11
lines changed

2 files changed

+13
-11
lines changed

assets/js/product-selector.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,12 @@ document.addEventListener('DOMContentLoaded', () => {
44
'product-selector-button'
55
);
66

7-
if (productSelectorButton === null || productSelectorButton == null) {
7+
if (productSelectorButton === null || productSelectorContent == null) {
88
return;
99
}
1010

1111
productSelectorButton.addEventListener('click', () => {
12+
/* Logic for hiding/showing ONLY when the button is clicked */
1213
if (productSelectorContent.style.display === 'block') {
1314
productSelectorContent.style.display = 'none';
1415
productSelectorButton.classList.remove('remove-bottom-radius');
@@ -19,12 +20,13 @@ document.addEventListener('DOMContentLoaded', () => {
1920
});
2021

2122
window.addEventListener('click', (event) => {
23+
/* Greedy Logic to hide the product selector when something other than the button is clicked. Assumes everything has a classname containing "product-selector" */
2224
if (
23-
!event.target.matches('#product-selector-button') &&
24-
!event.target.matches('#product-selector-button-icon')
25+
event.target.classList.length === 0 ||
26+
!event.target.classList[0].includes('product-selector')
2527
) {
2628
productSelectorContent.style.display = 'none';
29+
productSelectorButton.classList.remove('remove-bottom-radius');
2730
}
28-
productSelectorButton.classList.remove('remove-bottom-radius');
2931
});
3032
});

layouts/partials/sidebar-v2.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@
2222

2323
<button class="product-selector-button" id="product-selector-button">
2424
{{/* product name and selector */}}
25-
<div class="product-name">{{ $productName }}</div>
25+
<div class="product-selector-name">{{ $productName }}</div>
2626
<div class="product-selector-button-icon">
27-
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
28-
<path d="M1 13L7 7L0.999999 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
27+
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="product-selector-expand-icon">
28+
<path d="M1 13L7 7L0.999999 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="product-selector-expand-icon"/>
2929
</svg>
3030
</div>
3131
</button>
@@ -41,11 +41,11 @@
4141
{{ $type := . }}
4242
{{ $products := index $groupedProducts $type }}
4343
<div class="product-selector-content" id="product-selector-content">
44-
<p>{{ $type | humanize | title | upper }}</p>
45-
<ul>
44+
<p class="product-selector-content-product-group-name">{{ $type | humanize | title | upper }}</p>
45+
<ul class="product-selector-content-product-container">
4646
{{ range $products }}
47-
<li>
48-
<a href="{{ .url }}">{{ .title }}</a>
47+
<li class="product-selector-content-product-name">
48+
<a class="product-selector-content-product-link" href="{{ .url }}">{{ .title }}</a>
4949
</li>
5050
{{ end }}
5151
</ul>

0 commit comments

Comments
 (0)