I want to get my QR code to work

Ask the community
,
1

Please, how do I get this QR code to work on wix
QrCreator.render({ text: $w(‘#text334’).text,
radius: 0.5, // 0.0 to 0.5
ecLevel: ‘H’, // L, M, Q, H
fill: ‘#536DFE’, // foreground color
background: null, // color or null for transparent
size: 128 // in pixels
}, document.querySelector(‘#vectorImagee4493’)); // the text i want to be converted is “$w(‘#text334’).text” and I want the QR code to be displayed in the element - vectorImagee4493

2

This is never going to work. You are trying to mix wix-code with html. Your best solution is to put the html (without the wix $w-stuff) inside an html-component and then postMessage() the variables to th html-component and substitute them there.
Other possibility: create an http-function (_use) which, on the Wix side, creates the whole html (but you cannot use frontend elements in http-functions) and return it. In html-component, set URL to this http-function.

If last option makes no sense, forget it, go for the first. It’s sufficiently documented.

3

Thanks for the answer, but how would that work, the npm module for the qr code is installed in wix and imported into wix code. The output design of the QR code is not designed in the html code but in wix.

4

Yes, but the moment you do “document.QuerySelector…” you are accessing the DOM. Wix Velo will not allow you to, unless you do that from: A) html-component b)wix-element.
Look at the docs from the NPM:

Call the QrCreator API with a configuration object and a DOM element or canvas to render the QR code into:

I bet you have some red underlining in your code (inside the editor). So, as far as I can tell, you still need to go through the html-component if you want to stick with this NPM.
I used QR’s also, but I used a simpler one which can be called by a URL, like https://api.qrserver.com/v1/create-qr-code/?

5

Thanks for the response, I am not good on this area of html and js, I used this code but it did not work, please can you point out what the issue could be?

//for the iframe code —>

window.onmessage = (event) => { if (event.data) { document.getElementById("text1770").innerHTML = event.data; 
}

};

 </script>

for the wix code —>

$w . onReady ( function () {
$w ( “#html1” ). postMessage ( $w ( “#text1770” ). text );

});

6

You are making it extremely difficult for yourself. The whole point of being able to set a URL is that you can set that to a wix-image URL. So do this:

  1. draw an image onto your page
    2)pre-load it with a blank image
  2. set its src to qrserver with data, like so:
$w('#image1').src = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://www.wix.com";

Here we request a qr 150x150 pixels with www.wix.com encoded into the qr.

So no need for html-component, postMessage, etc. Just an ordinary Wix image in your page.
PS The above code goes into the $w.onReady(function ()

7

Thanks alot, it works