klaro-org / klaro-js

Klaro Privacy Manager. An open-source, privacy-friendly & compliant consent manager for your website.
https://klaro.org
Other
1.17k stars 248 forks source link

Magento2 Version 2.3.2 using Klaro #128

Open chequille opened 4 years ago

chequille commented 4 years ago

Hi, did somebody got this working? Magento2 Version 2.3.2 and Klaro? Getting errors in the require-js stuff of magento. Seems to be some incompatibiity between klaro.js and the other stuff used by magento.

Maybe somebody is using this and got it working. WOuld be great if there wil be some feedback on this.

Best regards, Jürgen

jaller94 commented 4 years ago

Hi Jürgen,

are you able to provide a minimal repo, a list of errors you've been seeing and how you expected it to behave? I only heard of Magento2 recently but have no experience using it myself.

Hope me or someone else reading this can help you. If you've found a solution by yourself, it would be awesome if you can share how you got there.

Best regards, Christian

chequille commented 4 years ago

Hi Christian,

in firefox console, I am getting this error:

Error: Mismatched anonymous define() module: function(){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=176)}([function(e,t){var n=e.exports={version:"2.6.5"};"number"==typeof e&&(__e=n)},function(e,t,n){var o=n(5),r=n(0),i=n(10),a=n(8),c=n(12),s=function(e,t,n){var l,u,p,f=e&s.F,d=e&s.G,m=e&s.S,v=e&s.P,h=e&s.B,y=e&s.W,b=d?r:r[t]||(r[t]={}),g=b.prototype,k=d?o:m?o[t]:(o[t]||{}).prototype;d&&(n=t);for(l in n)(u=!f&&k&&void 0!==k[l])&&c(b,l)||(p=u?k[l]:n[l],b[l]=d&&"function"!=typeof k[l]?n[l]:h&&u?i(p,o):y&&k[l]==p?function(e){var t=function(t,n,…

This is what happens. I am not really familiar with JS and therefore, no idea why this happens. I can imagine, that it must have to do with the fact, that Magento is using requireJS and the error is coming because of some functions in your js not doing it as requireJS needs.

But this is only a guess, no knowledge :-)

Maybe somebody will read it using Magento.

Best regards Jürgen

jrson83 commented 3 years ago

I have setup a custom module for klaro with magento 2.3.5 using config.js and klaro.js with this tutorial.

I wrapped the klaro.js code with (not the config.js):

require(['jquery'], function($){
    // Klaro Code here...
});

To fix the Mismatched anonymous define() module error, this link has a fix.

At the start of the script I changed the following:

typeof define&&define.amd?define([],t) CHANGED TO typeof __define&&__define.amd?__define([],t)

Now Klaro is running fine.

dbachmann commented 3 years ago

@jrson83 How did you manage to embed the amazon payment script for example which is loaded when you open the shop? And what about the default statistics und marketing cookies?

fritzmg commented 1 year ago

What I ended up doing is create a simple init.js in our module that integrates Klaro:

require(['klaro'], (klaro) => {
    klaro.setup();
});

So the app/code/Vendor/Module/view/frontend/layout/default_head_blocks.xml of our module would look like this for example:

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <head>
    <css src="Vendor_Module::klaro.min.css" />
    <script src="Vendor_Module::config.js" />
    <script src="Vendor_Module::klaro.js" />
    <script src="Vendor_Module::init.js" />
  </head>
</page>

Of course you also need require() in any JavaScript where you want to interact with Klaro, e.g.:

require(['klaro'], (klaro) => {
    const manager = klaro.getManager();

    if (manager.getConsent('myservice')) {
        // …
    }
});

I am not 100% certain that this is the best way to ensure that klaro.setup() is called on page load (it also does not take advantage of defer or async, but that is probably a whole different can of worms when it comes to Magento 2's requireJS setup).