File tree Expand file tree Collapse file tree 2 files changed +11
-9
lines changed Expand file tree Collapse file tree 2 files changed +11
-9
lines changed Original file line number Diff line number Diff line change @@ -4,11 +4,12 @@ document.addEventListener('DOMContentLoaded', () => {
4
4
'product-selector-button'
5
5
) ;
6
6
7
- if ( productSelectorButton === null || productSelectorButton == null ) {
7
+ if ( productSelectorButton === null || productSelectorContent == null ) {
8
8
return ;
9
9
}
10
10
11
11
productSelectorButton . addEventListener ( 'click' , ( ) => {
12
+ /* Logic for hiding/showing ONLY when the button is clicked */
12
13
if ( productSelectorContent . style . display === 'block' ) {
13
14
productSelectorContent . style . display = 'none' ;
14
15
productSelectorButton . classList . remove ( 'remove-bottom-radius' ) ;
@@ -19,12 +20,13 @@ document.addEventListener('DOMContentLoaded', () => {
19
20
} ) ;
20
21
21
22
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" */
22
24
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')
25
27
) {
26
28
productSelectorContent . style . display = 'none' ;
29
+ productSelectorButton . classList . remove ( 'remove-bottom-radius' ) ;
27
30
}
28
- productSelectorButton . classList . remove ( 'remove-bottom-radius' ) ;
29
31
} ) ;
30
32
} ) ;
Original file line number Diff line number Diff line change 22
22
23
23
< button class ="product-selector-button " id ="product-selector-button ">
24
24
{{/* product name and selector */}}
25
- < div class ="product-name "> {{ $productName }}</ div >
25
+ < div class ="product-selector- name "> {{ $productName }}</ div >
26
26
< div class ="product-selector-button-icon ">
27
27
< svg width ="8 " height ="14 " viewBox ="0 0 8 14 " fill ="none " xmlns ="http://www.w3.org/2000/svg ">
28
28
< path d ="M1 13L7 7L0.999999 1 " stroke ="white " stroke-width ="2 " stroke-linecap ="round " stroke-linejoin ="round "/>
41
41
{{ $type := . }}
42
42
{{ $products := index $groupedProducts $type }}
43
43
< 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 " >
46
46
{{ 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 >
49
49
</ li >
50
50
{{ end }}
51
51
</ ul >
You can’t perform that action at this time.
0 commit comments