WIX QR Code Generation - Clarification

Ask the community
, ,
1

Thank you WIX for providing a QR code generator using Velo and the npm package! I tried out the code and was getting a WIX SDK error for the wrong src assignment (had to be a string). After trying multiple things, this is what worked for me: The src string has to be within double quote marks. So, the WIX example code should be updated as below:

Original Code:

import { generateQRcode } from 'backend/qrCode.jsw';
$w.onReady(() => {
	$w('#generateButton').onClick(async () => {
		const toGenerate = $w('#qrInput').value;
		const qr = await generateQRcode(toGenerate);
		$w('#qrVector').src = qr;
	});
});

Modified Code:

import { generateQRcode } from 'backend/qrCode.jsw';
$w.onReady(function () {
	$w('#generateButton').onClick(async () => {
		const toGenerate = "\"+$w('#qrInput').value+"\";
		const qr = await generateQRcode(toGenerate);
		$w('#qrVector').src = qr;
	});
});

PS: Whenever I type the backslash character, it is ignored in the final post, so replacing it with verbal description… please replace with the backslash… :stuck_out_tongue:

1 Like
2

If your $w('#qrInput').value has to be a string then$w('#qrInput').value.toString() might work as well.

3

@anthony, good point! I also found that as generateQRcode is a method with promise, ideally, I need to make sure that the promise value is returned before assigning it to the src parameter.

I am using this feature to create QR codes as verification codes specific to a transaction/record and here is what worked for me finally.

                wixData.insert("CREDENTIALS",CertInsert).then((qrgen)=>{
                    $w("#textBox243").value = "\""+"https://www.mysite.com/verification/"+qrgen._id+"\"";
                    const toGenerate=$w("#textBox243").value
                    generateQRcode(toGenerate).then((GenQR)=>{const qr=GenQR.toString();$w("#vectorImage82").src=qr})
                })
1 Like
4

Alright, folks! The above code solution works fine on standard pages, but it doesn’t work on dynamic pages. What might I be missing?

5

^^bump^^

So has anybody an idea of what is the difference between static page and dynamic page when it comes to generating QR codes?

6

Counter-question.

What is the exact difference, between → ordinary-pages ← and → dynamic pages ← ???

7

@CODE-NINJA Dynamic pages are linked to a collection, while ordinary pages are not.