An inline frame (<iframe>) is used to open the designer tool on the CMS page of your store so that all the customization things could be visible in one place.
Add an iframe to your CMS page.
Example:
<iframe src="https://APP_URL/installed_folder/index.html? nplyaG1tW6uemXJpaGtbpZepnnJlW6aprnJmW6ippKealJ6ZcmaInIqgjaVnqGqrba5kd3R6XX1ggpeGmomdjKKOpmipa6xur5N4W3tef3WDmIebip+No2enaapsrVZ2WnlffGKA"></iframe>
| Note: Some required parameters need to be set on the iframe src element, which is in an encrypted format for security purposes. To convert the parameters to an encrypted format please contact support. |
The above-encrypted parameters are given below, please follow the same to implement the iframe one.
Encrypted Parameters :
| Parameters | Description |
| Id (integer) | 312 The selected product id. |
| qty (integer) | 1 The quantity of the product that is selected on the product detail page. |
| vid (integer) | 215 - variation/variant id of the respective product. or 312 - If variant id is not present, send product id. |
| customer | Respective id of the customer in case of logged-in customer, otherwise this value will send as zero(0). |
| pbti (integer) | default:0 1 - in case the product is associated with a template/design(template - preset/predesigned product) |
| dpid (integer) | 23 - The designed id of a pre-decorated product (i.e predesigned products) |
| store_id (integer) | default:1 Store id |
Note: From the above-mentioned parameters in between 'pbti' and 'dpid' only one value can be set in the URL.
To go to the cart page from the iframe section, the cart page redirect URL have to be set on the internal add_to_cart function.
For showing custom-preview images:
To show the customized or designed product on the cart page of your e-commerce store, an API needs to be used. You need to call the below API on the cart page of the store theme file.
API: Get Custom preview images
| Note: Some required parameters need to be set on the iframe src element, which is encrypted for security purposes. To convert the parameters to an encrypted format please contact support. |
Encrypted Parameters:
| Parameters | Description |
| custom_design_id (integer) | 298 the design reference ID created by Imprintnext during add to cart must be associated with the line item through some meta field property as per your store support. |
| Product_id (integer) | 137 Variant id of the line item in the cart. If the variation is missing then pass the product id. |
Sample API Response :
{
"298": [{
"design_status": 1,
"customImageUrl": [
"https://APP_URL/202303281251038663.png",
"https://APP_URL/202303281251038663_1.png",",
"https://APP_URL/202303281251038663_2.png",
"https://APP_URL/202303281251038663.png_3.png"
],
"productImageUrl": "",
"printid": 5,
"nameAndNumber": 0,
"display_edit": 1,
"colorAttr": "color",
"sizeAttr": "size",
"simpleProductId": 4098,
"parentProductId": 0,
"variableDecorationSize": "10 x 30",
"variableDecorationUnit": "inch",
"refId": 7
}],
"product_id": 137,
"cart_id": "850dcdf4-58b7-4358-a475-fc14788832e5"
}
Key | Description |
| 298 (integer) | 298 reference id/custom design id. |
| design_status (integer) | 1 Success status of the customized product. |
| customImageUrl (integer) | the https://APP_URL/202303281251038663.png file path of the customized image (the number of image files depends on the number of image sides of the product). |
| productImageUrl (string) | the https://APP_URL/235615452332.png store product URL(without customization). |
| printid (integer) | 5 id of the print profile assigned to the product. |
| nameAndNumber (boolean) | by default : 0 If the team jersey option is used during product design, then this option will enable on the cart page in case of 1 value and disable in case of 0. |
| display_edit (boolean) | by default : 0 The redesign option will be visible on the cart page if the value is 1. |
| colorAttr (string) | color name of the product option. |
| sizeAttr (string) | size name of the product option. |
| simpleProductId (integer) | 4098 |
| parentProductId (integer) | 0 |
| variableDecorationSize (string) | 10 x 30 In the case of banner products, if a user selects a custom size inside the designer then a custom decoration size option will be shown on the cart page for the product. |
| variableDecorationUnit (string) | inch In the case of banner products, if a user selects a custom unit inside the designer then a custom decoration unit option will be shown on the cart page for the product. |
| refId (integer) | 298 custom design id. |
| product_id (integer) | 137 Product id of the customized/designed product. |
| cart_id (string) | default : 0 850dcdf4-58b7-4358-a475-fc14788832e5 If any product is already in your cart then that cart-item id will be set here. |
On the above response, the customized images will come in the “customImageUrl” key. All the image URLs in this key would be replaced with the original product image to preview cart items.
Generate print files on order success?
To generate print files on order success, an API has to be implemented on the store order webhook/observer event as per your store support.
API: Create order files
GET : APP_URL/api/v1/orders/create-order-files/amZubWdsaW1nZ2htZnVm
| Note: The parameter after "create-order-files " in the above endpoint is order_id which is encrypted. To get the function to implement encryption please contact support. |
Encrypted Parameter :
Parameter | Description |
| id (integer) | 23652 Order id of the placed order |
| store_id (integer) | default:1 Store id |
Note: The response of this endpoint will be used for internal use only.