Preview the user's artwork
When a user finishes their design, they click the Publish button to begin the proofing process. This lets the user verify that their design will be printed as expected.
When a user finishes proofing their design, the integration is responsible for defining the next step and sending them there. Typically though, users want to:
    Look at a preview of their finished artwork.
    Add the printed version of the artwork to a shopping cart.
This part of the tutorial explains how to access a preview of the user's artwork and set up a (very basic) shopping cart.

Step 1: Detect when a user has finished proofing their design

After the initialize method, create an onArtworkCreate function:
1
const onArtworkCreate = (opts) => {
2
// code goes here
3
};
Copied!
This function receives an opts objects that contains information about the user's artwork, including its ID, title, and a URL for previewing the artwork.
Then pass this function into the createDesign method:
1
const onProductSelect = (opts) => {
2
api.createDesign({
3
...opts,
4
onBackClick,
5
onArtworkCreate,
6
});
7
};
Copied!

Step 2: Create a shopping cart

When a user has finished proofing their design, partners typically:
    Add the design to a shopping cart.
    Show the user a preview of their design.
Then, if the users purchases the design, the partner sends it off for printing.
To create a (very basic) shopping cart, create a cart.ejs file in the src/views directory:
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<meta
6
name="viewport"
7
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
8
/>
9
<title>Shopping cart</title>
10
</head>
11
<body>
12
<h1>Shopping cart</h1>
13
<table>
14
<thead>
15
<tr>
16
<td>Artwork ID</td>
17
<td>Artwork title</td>
18
<td>Preview</td>
19
</tr>
20
</thead>
21
<tbody>
22
<tr>
23
<td><%= artworkId %></td>
24
<td><%= artworkTitle %></td>
25
<td><a href="<%= previewImageSrc %>">Click here</a></td>
26
</tr>
27
</tbody>
28
</table>
29
</body>
30
</html>
Copied!
Then, in the server.js file, set up a route that renders this view:
1
app.get("/cart", async (request, response) => {
2
response.render("cart");
3
});
Copied!
But while the page renders, it doesn't have the data it needs—the artworkId, artworkTitle, or previewImageSrc—to render correctly.

Step 3: Redirect users to the shopping cart

From the onArtworkCreate function, redirect users to the shopping cart and append the properties from the opts object to the URL as a query string:
1
const onArtworkCreate = (opts) => {
2
// Create a query string
3
const params = new URLSearchParams();
4
5
// Add opts (artworkId, etc) to query string
6
Object.keys(opts).forEach((key) => {
7
params.append(key, opts[key]);
8
});
9
10
// Redirect the user to shopping cart
11
window.location.href = `/cart?${params.toString()}`;
12
};
Copied!
Based on this change, you can pass the data from the opts object into the "cart" view:
1
app.get("/cart", async (request, response) => {
2
response.render("cart", {
3
artworkId: request.query.artworkId,
4
artworkTitle: request.query.artworkTitle,
5
previewImageSrc: request.query.previewImageSrc,
6
});
7
});
Copied!
If you navigate through the proofing process, you're taken to the shopping cart page and shown a link to preview the artwork.

Example

src/views/cart.ejs

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<meta
6
name="viewport"
7
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
8
/>
9
<title>Shopping cart</title>
10
</head>
11
<body>
12
<h1>Shopping cart</h1>
13
<table>
14
<thead>
15
<tr>
16
<td>Artwork ID</td>
17
<td>Artwork title</td>
18
<td>Preview</td>
19
</tr>
20
</thead>
21
<tbody>
22
<tr>
23
<td><%= artworkId %></td>
24
<td><%= artworkTitle %></td>
25
<td><a href="<%= previewImageSrc %>">Click here</a></td>
26
</tr>
27
</tbody>
28
</table>
29
</body>
30
</html>
Copied!

src/views/index.ejs

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<meta
6
name="viewport"
7
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
8
/>
9
<title>Print Partnership Example</title>
10
<script src="https://sdk.canva.com/partnership.js"></script>
11
<style type="text/css">
12
body,
13
html {
14
margin: 0;
15
}
16
17
#container {
18
height: 100vh;
19
}
20
</style>
21
</head>
22
<body>
23
<div id="container"></div>
24
<script type="text/javascript">
25
(async () => {
26
const api = await Canva.Partnership.initialize({
27
apiKey: "<%= partnerApiKey %>",
28
container: document.getElementById("container"),
29
autoAuthToken: "<%= autoAuthToken %>",
30
});
31
32
const onBackClick = () => {
33
console.log(
34
"You clicked the 'Back' button in the Canva editor's header."
35
);
36
};
37
38
const onArtworkCreate = (opts) => {
39
// Create a query string
40
const params = new URLSearchParams();
41
42
// Add opts (artworkId, etc) to query string
43
Object.keys(opts).forEach((key) => {
44
params.append(key, opts[key]);
45
});
46
47
// Redirect the user to shopping cart
48
window.location.href = `/cart?${params.toString()}`;
49
};
50
51
const onProductSelect = (opts) => {
52
api.createDesign({
53
...opts,
54
onBackClick,
55
onArtworkCreate,
56
});
57
};
58
59
api.showCatalog({
60
onProductSelect,
61
});
62
})();
63
</script>
64
</body>
65
</html>
Copied!

src/server.js

1
require("dotenv").config();
2
const express = require("express");
3
const jwt = require("jwt-simple");
4
5
const app = express();
6
7
app.set("views", "./src/views");
8
app.set("view engine", "ejs");
9
10
app.use(express.json());
11
app.use(express.urlencoded({ extended: true }));
12
13
app.get("/", async (request, response) => {
14
// Get the current time
15
const now = Math.floor(new Date().getTime() / 1000);
16
17
// Create a payload
18
const payload = {
19
iss: process.env.PARTNER_API_KEY,
20
sub: "12345",
21
iat: now,
22
exp: now + 60 * 30,
23
};
24
25
// Calculate the autoAuthToken
26
const autoAuthToken = jwt.encode(payload, process.env.PARTNER_API_SECRET);
27
28
response.render("index", {
29
autoAuthToken,
30
partnerApiKey: process.env.PARTNER_API_KEY,
31
});
32
});
33
34
app.get("/cart", async (request, response) => {
35
response.render("cart", {
36
artworkId: request.query.artworkId,
37
artworkTitle: request.query.artworkTitle,
38
previewImageSrc: request.query.previewImageSrc,
39
});
40
});
41
42
app.listen(process.env.PORT || 3000);
Copied!
Last modified 3mo ago