QRCode Generation (Solved)

Ask the community
,
1

Hi @givemeawhisky , @yisrael-wix

I hope you are well,

I have been working on trying to show a QRCode in the client side, I provide the code below:

Client Side code:

import { generateQRCode } from ‘backend/functions.jsw’;

export function button89_click(event) {
generateQRCode()
.then((string) => {
let item = string;
$w(“#image”).src = item;
})
}

Backend Code:

import QRCode from ‘qrcode’

function createQRcode() {
wixData.get(“MyCustomers”, wixUsers.currentUser.id)
.then((results) => {
var item = results;
var text = item.VerificationUrl;
var opts = {
errorCorrectionLevel: ‘H’,
type: ‘svg’,
rendererOpts: {
quality: 0.3
}
}
QRCode.toString(text, function (err, string) {
if (err) throw err
console.log(string)
return string;
})
})
}

I have managed to get the QRCode to log into the Client Side console with the above code but for some reason I am unable to get the QRCode to show as an image or box if i use the return value string?

any help on resolving this would help myself and many others,

I look forward to your responses,

Si

2

Dear All,

QRCode Generation has been one of those things that I have been trying to achieve for a while, I have not received many responses to my requests for support but have finally managed to solve how to generate and show a QRCode generated by your website not utilising an external provider.

I provide steps and the code below that has proven to work:

Step 1:

create a backend JSW module and name it what you wish to, I have named mine functions.jsw.

Step 2:

remove all information currently within the created module and import the following at the top line:

import wixData from ‘wix-data’;
import wixUsers from ‘wix-users-backend’;
import QRCode from ‘qrcode’;

Step 3:

insert the below backend code making adjustments for your data collection and item data.

Backend Module Code placed below import QRCode:

export function generateQRcode () {
return createQRCode();
}

async function createQRcode() {
return wixData.get(“Your Data Collection”, wixUsers.currentUser.id)
.then((results) => {
let item = results;
let text = “Choose the item.string to make a QRCode”;
let opts = {
errorCorrectionLevel: ‘H’,
type: ‘svg’, // I have chosen svg as it provides a string
rendererOpts: {
quality: 0.3
}
}
QRCode.toString(text, opts, function (err, string) {
if (err) throw err;
item.QRCode = string; // This is the item you wish to update with the QRCode String
wixData.update(“Your Data Collection”, item);
})
})
}

Step 4:

on the client side place a vector image on your site these are svg graphics and can use the .src of the graphic with the QRCode string.

call the backend code from the client side, I have chose to use a button to call the function and then display the result:

client side code:

import {getQRCode} from ‘backend.functions.jsw’;

export function button90_click(event) {
getQRCode()
.then(result => {
// Check if we did not get any results frist!
if (result === “NORESULTS”) {
console.log(“BAD DATA OR NO DATA BACK!”);
} else {
let svg = result;
$w(“#vectorImage1”).src = svg;
$w(“#vectorImage1”).show();
console.log(result);
}
})
}

Step 5:

on the click of the button you should have the generated svg string saved in your data collection and the visual representation of this on your screen.

I do not say that this is the final code or the best way to achieve the result needed but the issue has been solved for me, if you can edit and update the code and make the process simpler for others please do add comments.

Best wishes,

Si

The word “QR Code” is registered trademark of:
DENSO WAVE INCORPORATED

3

Awesome! You should top comment your post for visibility.

4

Code works great! Thanks!!! If I wanted to change the dark and light colors of the qr code, where would I insert that in the above code?