TronDesigner – Integration Examples
Docs: Developer documentation  |  JavaScript builder API  |  Editor arguments

Implementation Examples

1. Using JS Builder API

window.tronDesigner
    .setExactProduct('PFC', undefined, (b) => {
        b.addVariant('R2200D94');
        b.addVariant('R2200E13');
    })
    // Add multiple print positions
    .addExactPrinting('LEFTCHEST', 'MR07')
    .addExactPrinting('RIGHTCHEST', 'MR07')
    .open({mode: "dialog"});

2. Using JSON Configuration

window.tronDesigner.openDesigner({
    "openMode": "Create",
    "dataMode": "Partial",
    "printJob": {
        "addPrintings": [
            {
                "printPositionCode": "LEFTCHEST",
                "printTechnologyCode": "MR07"
            },
            {
                "printPositionCode": "RIGHTCHEST",
                "printTechnologyCode": "MR07"
            }
        ],
        "addProducts": {
            "supplierCode": "PFC",
            "model": {"modelCode": "R2200"}
        }
    }
}, {mode: "dialog"});

3. Dynamic from Array

const td = window.tronDesigner;
const positions = [
    {position: 'LEFTCHEST', technology: 'MR07'},
    {position: 'RIGHTCHEST', technology: 'MR07'},
];

td.setExactProduct('PFC', undefined, (b) => b.addVariant('R2200D94'));
positions.forEach(p => td.addExactPrinting(p.position, p.technology));

// open() uses everything collected on the builder and then resets it
td.open({mode: "dialog"});

Note: print position and technology codes must match the codes of the product's print options in TronCloud (for this t-shirt LEFTCHEST, RIGHTCHEST, LEFTBICEP, RIGHTBICEP). If a print option has no mockup image, the editor first asks the customer to choose one.

Benefits of Multiple Printings

• Single Session: Design all positions without reopening the editor
• Consistent Design: Easier to maintain design consistency across positions
• Better UX: Users don't lose context switching between positions
• Unified Pricing: Calculate total cost for all positions at once
• Batch Processing: Generate all print files in one operation