JavaScript builder API

window.tronDesigner is also a fluent builder for the editor arguments: you call setters for the product, the printings and the print job details, then finish with .open(options). Use it when you open the editor from your own JavaScript and don't want to write the JSON by hand.

TIP

Examples: Quick start (source) · Multiple printings (source) · Edit mode – add and remove variants and printings (source)

window.tronDesigner
  .setExactProduct('PFC', undefined, (p) => p.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .open({ mode: 'dialog' });

How the builder works

• Every setter writes into one arguments object held by window.tronDesigner and returns the builder, so calls can be chained or written as separate statements.
• open(options) takes the collected arguments, resets the builder and passes the arguments to openDesigner. The next open() starts from scratch.
• A fresh builder has open mode View, no products, no printings and both editor options showSelectedVariants / showSelectedPrintOptions set to 'None'. The product and printing setters switch the open mode to Create.
• The builder only collects data. The editor validates it when it opens (see Debugging and error handling).
• Call the builder only after the script has initialized (see Loading the integration script).

WARNING

Nothing is reset until you call open(). If you call setters and then open the editor with openDesigner() instead, or your code returns before open(), the collected values stay in the builder and end up in the next open(). Setting a product again replaces it, but printings and buttons are appended again.

Builder, openDesigner or EditorArgumentsBuilder

All three produce the same EditorArguments object.

Approach	Use it when
window.tronDesigner.set…().open(options)	You open the editor from JavaScript on your page. This is the usual way.
window.tronDesigner.openDesigner(args, options)	You already have the JSON (from your server, a data-td-options attribute or a saved configuration), or you prefer to build the JSON yourself. See Editor arguments.
new EditorArgumentsBuilder() … .build()	You build your front end with TypeScript and the @promotron/website-integration-types package and want the arguments object itself, e.g. to log it, store it or send it as URL-encoded JSON (Integration via URL).

EditorArgumentsBuilder has the same setters. build() returns the collected object; its own open() is not implemented and throws, so pass the result to window.tronDesigner.openDesigner(). The script tag doesn't expose the class as a global — on a plain HTML page use window.tronDesigner.

import { EditorArgumentsBuilder } from '@promotron/website-integration-types';

const args = new EditorArgumentsBuilder()
  .setExactProduct('PFC', undefined, (p) => p.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .build();

window.tronDesigner.openDesigner(args, { mode: 'dialog' });

NOTE

Older integrations sometimes read window.tronDesigner.argsBuilder.build(). argsBuilder is an internal field, not part of the API, and openDesigner() doesn't reset it. Use open() instead.

Set the product

setExactProduct and setPartialProduct take the supplier as the first argument (supplier code) or the second (supplier GUID) — see Data modes. The product setters take a callback that receives a product sub-builder for the variants.

Exact

// Exact: these variants, nothing else
window.tronDesigner.setExactProduct('PFC', undefined, (p) => {
  p.addVariant('10601321');                               // productCode
  p.addVariant('10601301', 50, 'NB-WHITE', 'Notebook white'); // + quantity, code and name shown instead
});

Partial

// Partial: a model; the customer picks the variants
window.tronDesigner.setPartialProduct(
  'PFC',
  undefined,
  (p) => p.setProductModel('100860').selectVariant('10086021'), // preselected variant (optional)
  { showSelectedVariants: 'All', showQuantityInputs: true }    // editor options (optional)
);

Own

// Own: your own product with one color dimension
window.tronDesigner.setOwnProductSingleDimension('MUG-01', 'Ceramic mug', true, 'An 11 oz mug', (p) => {
  p.addVariant('MUG-01-RED', 'Red', ['#FF0000'], 'Ceramic mug red');
  p.addVariant('MUG-01-BLUE', 'Blue', ['#0000FF'], 'Ceramic mug blue');
});

Setter	Sub-builder methods	Sets
setExactProduct(supplierCode?, supplierGuid?, build?)	addVariant(productCode, quantity?, codeOverride?, nameOverride?), addVariants(...variants)	open mode Create, data mode Exact
setPartialProduct(supplierCode?, supplierGuid?, build?, options?)	setProductModel(modelCode), selectVariant(productCode, quantity?, codeOverride?, nameOverride?), selectVariants(...variants)	open mode Create, data mode Partial
setOwnEmptyProduct()	— (the customer enters the product in the editor; removes a product set before)	open mode Create, data mode Own
setOwnProductSingleVariant(modelCode, modelName, description?, quantity?, options?)	— (one variant with the model code)	open mode Create, data mode Own
setOwnProductSingleDimension(modelCode, modelName, isDimension1Color, description?, build?, options?)	addVariant(productCode, dimension1Title, dimension1Colors?, productName?, quantity?, ownPreviewUrl?)	open mode Create, data mode Own
setOwnProductTwoDimensions(modelCode, modelName, isDimension1Color, description?, build?, options?)	addVariant(productCode, dimension1Title, dimension2Title, dimension1Colors?, dimension2Colors?, productName?, quantity?)	open mode Create, data mode Own

options (AddProductOptions) sets showSelectedVariants and showQuantityInputs in editorOptions (setOwnProductSingleVariant() takes only showQuantityInputs) — see Editor arguments.

The product setter decides the data mode, and the last one you call wins. addExactPrinting(s) and addOwnPrinting set the data mode only if it isn't set yet, so the order of the product and printing calls doesn't matter: addExactPrinting() followed by setPartialProduct() gives Partial. To set the data mode yourself, call setDataMode() after the product setter (see Set the data mode and editor options).

setOwnEmptyProduct(), setOwnProductSingleVariant() and addOwnPrinting() are typed to return only open and addOwnPrinting. In TypeScript, call the other setters before them or as separate statements.

Add printings

A printing is a print position plus a print technology (e.g. front / PAD03).

const td = window.tronDesigner;
td.setExactProduct('PFC', undefined, (p) => p.addVariants({ productCode: 'R2200D94' }, { productCode: 'R2200E13' }));
td.addExactPrinting('Left chest', 'MR07');
td.addExactPrinting('Right chest', 'MR07', 'RC', 'Right chest pocket'); // + displayed position code and name
td.open({ mode: 'dialog' });

Method	Use it for
addExactPrinting(printPositionCode, printTechnologyCode, positionCodeOverride?, positionNameOverride?, technologyCodeOverride?, technologyNameOverride?, options?, maxColors?, maxWidth?, maxHeight?, maxDiameter?, maxArea?)	One TronCloud printing, with optional display codes and names and optional stricter limits.
addExactPrintings(options, ...printings)	Several TronCloud printings as ArgAddPrinting objects. options comes first — pass undefined if you have none.
addOwnPrinting(positionCode, positionName, technologyCode, technologyName, colorMode, maxColors?, maxWidth?, maxHeight?, maxDiameter?, maxArea?, backgroundUrls?, options?)	A printing you define yourself (Own mode). colorMode is 'Pantone', 'CMYK', 'SingleColor' or 'Colorless'; backgroundUrls are your product images.

Sizes are in millimeters, maxArea in square millimeters. The meaning of every field is in Editor arguments.

options (AddPrintingOptions) sets showSelectedPrintOptions and alwaysShowImageSelect. They are merged into editorOptions, so they apply to the whole editor session, not to one printing; the last value you pass wins.

Add print job details

Method	Sets
setPrintJobTitle(title)	printJob.title
setPrintJobLanguage(languageCode)	printJob.languageCode — ISO 639-1 code ('en', 'de', …) of the product and print data
setPrintJobCustomer(customerIdentity?, customerPerson?, customerCompany?, customerEmail?)	printJob.customer — customer details stored with this print job
setOrderInfo(orderTitle?, orderCode?, orderItemCode?)	printJob.customer — your order and order line
addCustomProperty(key, value), addCustomProperties(object)	printJob.customProperties — string key/value pairs, merged

setPrintJobCustomer() always writes all four fields; the ones you leave out fall back to the session customer when a new print job is created. How these values travel with the print job is described in Customers and orders.

window.tronDesigner
  .setExactProduct('PFC', undefined, (p) => p.addVariant('10086021', 100))
  .addExactPrinting('front', 'PAD03')
  .setPrintJobTitle('Oregon bottle – summer campaign')
  .setOrderInfo('Summer campaign', 'ORDER-1001', 'ORDER-1001-1')
  .addCustomProperty('cartItemId', '8f3c2a')
  .open({ mode: 'dialog' });

Open an existing print job

setPrintJob(printJobGuid, mode) opens a saved print job in 'Edit' or 'View' mode ('View' if you omit mode). It clears products and printings you set on the builder before. In Edit mode you can then send changes with the IEditorArgumentsOpenPrintJobBuilder methods:

Method	Effect in the editor
addProductVariantToPrintJob(productCode, quantity?, codeOverride?, nameOverride?), addProductVariantsToPrintJob(...variants)	Adds variants. For a variant already in the print job it replaces the quantity and the displayed code (omitted values are cleared).
removeProductVariantFromPrintJob(productCode), removeProductVariantsFromPrintJob(productCodes)	Removes variants.
addPrintingToPrintJob(printPositionCode, printTechnologyCode, …overrides, options?, maxColors?, maxWidth?, maxHeight?, maxDiameter?, maxArea?), addPrintingsToPrintJob(...printings)	Adds printings; a printing already in the print job is skipped.
removePrintingFromPrintJob(printPositionCode, printTechnologyCode), removePrintingsFromPrintJob(printings)	Removes printings.
setPrintJobTitle, setOrderInfo, setPrintJobCustomer, addCustomProperty, addCustomProperties	Update the print job details; custom properties are merged with the stored ones.

const td = window.tronDesigner;
td.setPrintJob(printJobGuid, 'Edit')
  .addProductVariantsToPrintJob({ productCode: '10601301' }, { productCode: '10601331' })
  .addPrintingToPrintJob('back', 'GPE01')
  .open({ mode: 'dialog' });

td.setPrintJob(printJobGuid, 'View').open({ mode: 'dialog' });

Use the …ToPrintJob methods here: the product setters and addExactPrinting() switch the open mode back to Create, and the editor then rejects the print job GUID. View mode doesn't accept changes. What each mode allows is described in Open modes.

setPrintJob() sets no data mode, so an Edit session runs as Partial: the customer can add and remove printings. To lock the structure of the print job, add setDataMode('Exact'):

window.tronDesigner.setPrintJob(printJobGuid, 'Edit').setDataMode('Exact').open({ mode: 'dialog' });

Set the data mode and editor options

Two methods set these values directly. Both are available on window.tronDesigner and also after setPrintJob(guid, 'Edit'):

Method	Sets
setDataMode(dataMode)	dataMode — 'Exact', 'Partial' or 'Own'. Overrides the data mode set by the product setters, so call it after them.
setEditorOptions(options)	editorOptions — any subset of EditorOptions, merged into the values set before. Use it for options the product and printing setters don't take, e.g. showSelectedVariants in Exact mode.

window.tronDesigner
  .setExactProduct('PFC', undefined, (p) => p.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .setEditorOptions({ showSelectedVariants: 'All' })
  .open({ mode: 'dialog' });

Configure the editor behavior

Method	See
setResultActionNone(), setResultActionCloseEditor(redirectUrl?), setResultActionShowDialog(dialogs, redirectUrl?)	Result actions
setEditorButtons(buttons), addEditorButton(button)	Custom editor buttons — at most 5 buttons; an invalid button or a sixth one throws an Error immediately.
setDefaultPrintJobLogo(logo), setLastAddedPrintingLogo(logo)	Logos — { guid } or { url }; the second one applies to the printing added last.
setProofreadingTemplateTag(tag)	Selects the proofreading PDF template by its tag instead of the one configured in the Admin Portal.
setOpenMode(mode)	Sets the open mode directly, e.g. 'OpenGallery' or 'OpenUpload' (Logos).

Open the editor

open(options) takes the same DesignerOptions as openDesigner:

window.tronDesigner
  .setPartialProduct('PFC', undefined, (p) => p.setProductModel('100860'))
  .open({
    mode: 'container',                                  // or 'dialog'
    container: document.getElementById('td-editor'),
    onClose: (reason, redirectUrl) => console.log('Editor closed:', reason), // 'Confirmed' | 'Cancelled' | 'Error'
  });

Dialog and container display are described in Dialog and inline display. For a single printing on catalog variants there is also the shortcut openSinglePrintTaskDesigner(supplierCode, productVariantCodes, printPositionCode, printTechnologyCode, options?) (options defaults to { mode: 'dialog' }).

See also

• IEditorArgumentsBuilder — all builder methods in the API reference
• Editor arguments — the JSON the builder produces
• Data modes · Open modes
• HTML data attributes — the same without JavaScript