Checkbox won't check - Art Free GDPR Module

[Manisch]

Hello there,

I just realized that some of the Checkboxes in the Art Free GDPR Module won't work. You can click them as much (and as hard) as you want, the just won't check.

https://canelis.de/login#account-creation (At the bottom > "[] Ich habe die Datenschutzerklärung gelesen und stimme ihr zu. Zur Datenschutzerklärung")

I'll also ask the developer over at the PS-Forums, but you guys seem fitter to me :)

[DaoKakao]

Seems like your module does not loads appropriate js

[Manisch]

@daokakao other checkboxes on the same form work. Do they use a different js?

[DaoKakao]

After entering a email i saw the only one checkbox. And it is not a checkbox actually, so it have to be bound to some js code emultaing checkbox dynamics. But i did not found anything like this.

[Manisch]

Ah ok, the link above doesn't seem to be the best example. Does this one work? https://canelis.de/login?back=https%3A%2F%2Fcanelis.de%2Forder%3Fstep%3D1&displayguestcheckout=1 Or in other words: When you put somethin in your cart, try to check out and therefore create an accout. Then you have the option to use a different billing address (checkbox works).

[datakick]

I think that there may be some javascript that prevents default behaviour. It's hard to tell what js is causing this, because you are using CCC. If you disable CCC, I can have a look.

From top of my head: the input id contains dash freegdpr-consent. This could be the problem. Although dash is perfectly valid character, it may confuse some javascript :)

You could edit template views/templates/hook/gdprCheckbox.tpland replace all 3 occurances of this text for something different, for example gdpr. If that works... then it's a proof that you have some very buggy javascript on your site, and the same problem can appear elsewhere.

[datakick]

Ahh, I see where the problem is. Your theme has a feature to create account by clicking on person icon in upper right corner. In that case popup window will appear:

This popup window contains this GDPR checkbox as well -- that means that your page contains two html elements with the same id. When you click on the label in your account creation form, you are actually switching state of the other input on the page (inside popup window)

You gotta love html :)

[toplakd]

You can try to install customer privacy module to check if there is same error with your current template.

[DaoKakao]

@datakick said in Checkbox won't check - Art Free GDPR Module:

This popup window contains this GDPR checkbox as well – that means that your page contains two html elements with the same id.

As i saw on this page there's one div with class "checkbox", while REAL checkbox is in the hidden state (display:none), BELOW that div. So, this div must be bound to some JS which should, in turn, change the value of hidden checkbox.

UPD: just remembered - there's no errors in console, that means, needed js are prevented of loading on that page Kinda weird algo.

[datakick]

@daokakao said in Checkbox won't check - Art Free GDPR Module:

So, this div must be bound to some JS which should, in turn, change the value of hidden checkbox.

Actually, this is all pure html+css solution, no javascript is necessary. It uses this HTML markup:

```

Label 1

thefor``` attribute on label binds the label with input with id gdpr - when you click on the label it actually toggles value of .

And it works as expected. The problem is that there are two inputs with the same id: ```

Label 1

...

Label 2

``` So, when you click on Label 2, the first will be toggled. You can see this behaviour on this codepen

To fix this problem, we have to ensure that the two checkboxes have different IDs. That means edit /views/templates/hook/gdprCheckbox.tpl template, and replace hardcoded id with some variable that is passed from php hook. And ensure that hook generate unique ID

[DaoKakao]

However when i saw rendered code in the console i see, that div has the class "checkbox", and real checkbox is hidden. At the same time working checkbox has the bound javascript, thus it working

In your piece of markup div has no class at all. I thought, it could be some kind of js override, which isn't bound to the page correctly.

[datakick]

@daokakao there's no javascript, it's all pure html + css solution. The label is styled differently based on associated input :checked status. See this codepen

[Manisch]

@datakick Ah, very interesting. Thanks for figuring that out :)

So how do I actually get the hook variable? Never made something like this before... Also I probably have to change the js or css file to apply this new ID, don't I?

[datakick]

@manisch there are many ways to do this. One possibility is

1) create static variable inside artfreegdpr module that counts how many checkboxes were generated during one request 2) edit hookCreateAccountForm and hookDisplayCustomerIdentityForm hooks - when hook is called, increase counter and pass its value to template 3) use this counter in template itself:

Note that this module does not work with this checkbox in any way. Given consent is not stored anywhere, neither is verified on server side that it was actually checked... so it's not very gdpr compliant :)

[DaoKakao]

@datakick the codepen example shows slightlyvdifferent behaviour: When i click second checkbox then 'v' mark appears/disappears in the first checkbox, this is obvious behaviour. In the real case the second checkbox does not reacts at all.

[Manisch]

Sweet, thanks a lot! Seems to work :)

Do you mind posting that also over at the Prestashop forum? First of all the solution could be useful over there, as well. Second I don't want to copy and paste it - you should get the credit.

Oh and I'm still waiting for the actual TB GDPR Module. So hopefully no one will notice whether it's compliant or not until then :D

Oh 2: Thanks to you, too @DaoKakao :)

[DaoKakao]

@datakick the codepen example shows slightly different behaviour: When i click second checkbox then 'v' mark appears/disappears in the first checkbox, this is obvious behaviour. In the real case the second checkbox does not reacts at all.

I think, you're totally right about this module, i just want to understand.

[datakick]

@daokakao said in Checkbox won't check - Art Free GDPR Module:

@datakick the codepen example shows slightlyvdifferent behaviour: When i click second checkbox then 'v' mark appears/disappears in the first checkbox, this is obvious behaviour. In the real case the second checkbox does not reacts at all.

It does (well, it did). This was the original behaviour - note that clicking on label in main form changes value inside popup:

@manisch said in Checkbox won't check - Art Free GDPR Module:

Sweet, thanks a lot! Seems to work :)

Do you mind posting that also over at the Prestashop forum? First of all the solution could be useful over there, as well. Second I don't want to copy and paste it - you should get the credit.

Glad I could help. Feel free to post the solution to ps forum. I don't really need the credit :)

[datakick]

Also, it occurred to me that my previous solution might be unnecessary complicated. We could just use different html markup. Instead of

```

Label 1

we could use

Label 1

and <label> would be implicitly bounded with <input> without the need foridandfor``` attributes. The question is whether the CSS rules to display fancy checkboxes would still apply.

[Manisch]

Just gave it a quick check. On a technical level, it would work. But on a design level, I would have to change some CSS again. So I'll go with your first solution. Wasn't thaaaat complicated anyways :)