Interface: IEditorArgumentsBuilder

Fluent builder for the EditorArguments that open the editor. You use it through window.tronDesigner, which implements this interface (see IWebsiteIntegration).

Remarks

Call a product setter (or setPrintJob), add printings, optionally configure the print job and the editor behaviour, and finish with open. Every method returns the builder, so you can chain the calls; in JavaScript you can also call them one by one on window.tronDesigner.

Things to know:

• The state is shared and persistent. The arguments collect on window.tronDesigner until open() is called, which uses them and resets the builder. Methods you call without a following open() stay pending and are applied to the next open() — including the one triggered by clicking an element configured with basic data-td-* attributes, which uses the same builder. openDesigner neither uses nor resets the builder.
• Order matters. Product and printing setters set the open mode to Create; setPrintJob sets Edit or View and clears products and printings added before.
• The data mode is set by the product setters (setExactProduct, setPartialProduct, setOwn…; the last one wins). The printing methods set it only if it isn't set yet, so the order of the product and printing calls doesn't matter. setDataMode overrides it, e.g. for an Edit session, which gets no data mode from setPrintJob.
• Defaults: open mode View, no product, editorOptions.showSelectedPrintOptions and editorOptions.showSelectedVariants set to 'None'. If no data mode is set, the editor uses Partial.
• The TypeScript return types narrow which methods make sense next (e.g. after setPrintJob(guid) only open).

Example

window.tronDesigner
  .setExactProduct('PFC', undefined, (b) => b.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .setOrderInfo('Summer campaign', 'ORD-1001', 'ORD-1001-1')
  .addCustomProperty('cartId', 'c-42')
  .setResultActionShowDialog([], 'https://shop.example.com/cart')
  .open({ mode: 'dialog' });

See

• JavaScript builder API
• Data modes
• Open modes

Extends

• IEditorArgumentsOpenPrintJobBuilder

Extended by

• IWebsiteIntegration

Methods

addCustomProperties()

addCustomProperties(customProperties: Record<string, string>): IEditorArgumentsBuilder;

Adds several custom properties to the print job (printJob.customProperties).

Parameters

Parameter	Type	Description
customProperties	Record<string, string>	Key/value pairs; they are merged into the properties added before, overwriting properties with the same name.

Returns

IEditorArgumentsBuilder

Example

window.tronDesigner.addCustomProperties({ cartId: 'c-42', campaign: 'summer' });

See

Customers and orders

Overrides

IEditorArgumentsOpenPrintJobBuilder.addCustomProperties

---

addCustomProperty()

addCustomProperty(key: string, value: string): IEditorArgumentsBuilder;

Adds a custom property (a key/value pair of your own) to the print job (printJob.customProperties).

Parameters

Parameter	Type	Description
key	string	Property name. An existing property with the same name is overwritten.
value	string	Property value.

Returns

IEditorArgumentsBuilder

Remarks

Custom properties are stored with the print job and returned in the customProperties of IPrintJobDto, e.g. to keep your cart or session ID with the print job.

Example

window.tronDesigner.addCustomProperty('cartId', 'c-42');

See

Customers and orders

Overrides

IEditorArgumentsOpenPrintJobBuilder.addCustomProperty

---

addEditorButton()

addEditorButton(button: EditorButton): IEditorArgumentsBuilder;

Adds one button to the editor footer; call it once per button.

Parameters

Parameter	Type	Description
button	EditorButton	The button: style ('Primary' or 'Secondary'), function (see EditorButtonFunction) and labels per language ({ language: 'en', text: '…' }, ISO 639-1 codes).

Returns

IEditorArgumentsBuilder

Throws

Error if 5 buttons were already added, the button isn't an object, its style or function isn't one of the allowed values, or it has no labels (or a label without language or text).

Example

window.tronDesigner
  .setExactProduct('PFC', undefined, (b) => b.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .addEditorButton({
    style: 'Secondary',
    function: 'DownloadPreviewImage',
    labels: [{ language: 'en', text: 'Download preview' }, { language: 'de', text: 'Vorschau herunterladen' }],
  })
  .addEditorButton({
    style: 'Primary',
    function: 'FinalConfirm',
    labels: [{ language: 'en', text: 'Confirm design' }],
  })
  .open({ mode: 'dialog' });

See

Custom editor buttons

---

addExactPrinting()

addExactPrinting(
   printPositionCode: string, 
   printTechnologyCode: string, 
   positionCodeOverride?: string, 
   positionNameOverride?: string, 
   technologyCodeOverride?: string, 
   technologyNameOverride?: string, 
   options?: Partial<Pick<EditorOptions, "showSelectedPrintOptions" | "alwaysShowImageSelect">>, 
   maxColorsOverride?: number, 
   maxWidthOverride?: number, 
   maxHeightOverride?: number, 
   maxDiameterOverride?: number, 
   maxAreaOverride?: number
): IEditorArgumentsBuilder;

Adds a printing — a print position and print technology from the catalog product's print data.

Parameters

Parameter	Type	Description
printPositionCode	string	Print position code, e.g. 'front'.
printTechnologyCode	string	Print technology code, e.g. 'PAD03'.
positionCodeOverride?	string	Print position code to show instead of the catalog one.
positionNameOverride?	string	Print position name to show instead of the catalog one.
technologyCodeOverride?	string	Print technology code to show instead of the catalog one.
technologyNameOverride?	string	Print technology name to show instead of the catalog one.
options?	Partial<Pick<EditorOptions, "showSelectedPrintOptions" | "alwaysShowImageSelect">>	Printing-related editor options (see AddPrintingOptions).
maxColorsOverride?	number	Maximum number of colors, instead of the catalog value.
maxWidthOverride?	number	Maximum print width in mm, instead of the catalog value.
maxHeightOverride?	number	Maximum print height in mm, instead of the catalog value.
maxDiameterOverride?	number	Maximum print diameter in mm, instead of the catalog value.
maxAreaOverride?	number	Maximum print area, instead of the catalog value.

Returns

IEditorArgumentsBuilder

Remarks

Call it once per printing. Sets the open mode to Create and, if no data mode is set yet, the data mode to Exact (a product setter called before or after it decides the data mode). Pass undefined for the optional parameters you skip. To add a printing to an existing print job, use addPrintingToPrintJob.

Example

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

See

• Data modes
• JavaScript builder API

---

addExactPrintings()

addExactPrintings(options?: Partial<Pick<EditorOptions, "showSelectedPrintOptions" | "alwaysShowImageSelect">>, ...printings: ArgAddPrinting[]): IEditorArgumentsBuilder;

Adds several catalog printings at once. Note the order of the parameters: options first, then the printings.

Parameters

Parameter	Type	Description
options?	Partial<Pick<EditorOptions, "showSelectedPrintOptions" | "alwaysShowImageSelect">>	Printing-related editor options (see AddPrintingOptions); pass undefined if you don't need any.
...printings?	ArgAddPrinting[]	The printings to add, each with at least printPositionCode and printTechnologyCode (see ArgAddPrinting).

Returns

IEditorArgumentsBuilder

Remarks

Works like calling addExactPrinting for each printing: sets the open mode to Create and, if no data mode is set yet, the data mode to Exact.

Example

window.tronDesigner
  .setExactProduct('PFC', undefined, (b) => b.addVariant('10086021'))
  .addExactPrintings(
    { showSelectedPrintOptions: 'All' },
    { printPositionCode: 'front', printTechnologyCode: 'PAD03' },
    { printPositionCode: 'back', printTechnologyCode: 'PAD03' }
  )
  .open({ mode: 'dialog' });

See

JavaScript builder API

---

addOwnPrinting()

addOwnPrinting(
   positionCode: string, 
   positionName: string, 
   technologyCode: string, 
   technologyName: string, 
   colorMode: ColorMode, 
   maxColors?: number, 
   maxWidth?: number, 
   maxHeight?: number, 
   maxDiameter?: number, 
   maxArea?: number, 
   backgroundUrls?: string[], 
   options?: Partial<Pick<EditorOptions, "showSelectedPrintOptions" | "alwaysShowImageSelect">>
): Pick<IEditorArgumentsBuilder, "open" | "addOwnPrinting">;

Adds an own printing — a print position and technology you define yourself, typically for an own product.

Parameters

Parameter	Type	Description
positionCode	string	Your print position code (also shown in the editor).
positionName	string	Print position name shown in the editor.
technologyCode	string	Your print technology code (also shown in the editor).
technologyName	string	Print technology name shown in the editor.
colorMode	ColorMode	How the motive is colored: 'Pantone', 'CMYK', 'SingleColor' or 'Colorless' (e.g. engraving).
maxColors?	number	Maximum number of colors.
maxWidth?	number	Maximum print width in mm.
maxHeight?	number	Maximum print height in mm.
maxDiameter?	number	Maximum print diameter in mm, for round print areas.
maxArea?	number	Maximum print area.
backgroundUrls?	string[]	URLs of product images to use as the background of the print area. With one URL (and without alwaysShowImageSelect), it's used directly; otherwise the customer picks one in the editor.
options?	Partial<Pick<EditorOptions, "showSelectedPrintOptions" | "alwaysShowImageSelect">>	Printing-related editor options (see AddPrintingOptions).

Returns

Pick<IEditorArgumentsBuilder, "open" | "addOwnPrinting">

Remarks

Call it once per printing. Sets the open mode to Create and, if no data mode is set yet, the data mode to Own. Pass undefined for the optional parameters you skip.

Example

window.tronDesigner
  .setOwnProductSingleVariant('MUG-01', 'Custom Ceramic Mug')
  .addOwnPrinting('front', 'Front', 'PAD03', 'Pad print', 'Pantone', 3, 50, 50, undefined, undefined, [
    'https://shop.example.com/images/mug-front.jpg',
  ])
  .open({ mode: 'dialog' });

See

Data modes

---

addPrintingsToPrintJob()

addPrintingsToPrintJob(...printings: ArgAddPrinting[]): IEditorArgumentsOpenPrintJobBuilder;

Adds several printings to the existing print job. Printings the print job already has are ignored.

Parameters

Parameter	Type	Description
...printings	ArgAddPrinting[]	The printings, each with at least printPositionCode and printTechnologyCode (see ArgAddPrinting).

Returns

IEditorArgumentsOpenPrintJobBuilder

Inherited from

IEditorArgumentsOpenPrintJobBuilder.addPrintingsToPrintJob

---

addPrintingToPrintJob()

addPrintingToPrintJob(
   printPositionCode: string, 
   printTechnologyCode: string, 
   positionCodeOverride?: string, 
   positionNameOverride?: string, 
   technologyCodeOverride?: string, 
   technologyNameOverride?: string, 
   options?: Partial<Pick<EditorOptions, "showSelectedPrintOptions" | "alwaysShowImageSelect">>, 
   maxColorsOverride?: number, 
   maxWidthOverride?: number, 
   maxHeightOverride?: number, 
   maxDiameterOverride?: number, 
   maxAreaOverride?: number
): IEditorArgumentsOpenPrintJobBuilder;

Adds a printing to the existing print job. If the print job already has it, it is ignored.

Parameters

Parameter	Type	Description
printPositionCode	string	Print position code, e.g. 'back'.
printTechnologyCode	string	Print technology code, e.g. 'GPE01'.
positionCodeOverride?	string	Print position code to show instead of the catalog one.
positionNameOverride?	string	Print position name to show instead of the catalog one.
technologyCodeOverride?	string	Print technology code to show instead of the catalog one.
technologyNameOverride?	string	Print technology name to show instead of the catalog one.
options?	Partial<Pick<EditorOptions, "showSelectedPrintOptions" | "alwaysShowImageSelect">>	Printing-related editor options (see AddPrintingOptions).
maxColorsOverride?	number	Maximum number of colors, instead of the catalog value.
maxWidthOverride?	number	Maximum print width in mm, instead of the catalog value.
maxHeightOverride?	number	Maximum print height in mm, instead of the catalog value.
maxDiameterOverride?	number	Maximum print diameter in mm, instead of the catalog value.
maxAreaOverride?	number	Maximum print area, instead of the catalog value.

Returns

IEditorArgumentsOpenPrintJobBuilder

Example

window.tronDesigner
  .setPrintJob(printJobGuid, 'Edit')
  .addPrintingToPrintJob('back', 'GPE01')
  .open({ mode: 'dialog' });

Inherited from

IEditorArgumentsOpenPrintJobBuilder.addPrintingToPrintJob

---

addProductVariantsToPrintJob()

addProductVariantsToPrintJob(...variants: ArgAddProductVariant[]): IEditorArgumentsOpenPrintJobBuilder;

Adds several product variants to the existing print job. Variants the print job already has get their quantity and display overrides updated.

Parameters

Parameter	Type	Description
...variants	ArgAddProductVariant[]	The variants, each with at least productCode (see ArgAddProductVariant).

Returns

IEditorArgumentsOpenPrintJobBuilder

Inherited from

IEditorArgumentsOpenPrintJobBuilder.addProductVariantsToPrintJob

---

addProductVariantToPrintJob()

addProductVariantToPrintJob(
   productCode: string, 
   quantity?: number, 
   codeOverride?: string, 
   nameOverride?: string
): IEditorArgumentsOpenPrintJobBuilder;

Adds a product variant to the existing print job. If the print job already has the variant, its quantity and display overrides are updated.

Parameters

Parameter	Type	Description
productCode	string	Supplier code of the product variant.
quantity?	number	Quantity of the variant.
codeOverride?	string	Variant code to show instead of the catalog one.
nameOverride?	string	Variant name to show instead of the catalog one.

Returns

IEditorArgumentsOpenPrintJobBuilder

Example

window.tronDesigner
  .setPrintJob(printJobGuid, 'Edit')
  .addProductVariantToPrintJob('10601301', 50)
  .open({ mode: 'dialog' });

Inherited from

IEditorArgumentsOpenPrintJobBuilder.addProductVariantToPrintJob

---

open()

open(options: DesignerOptions): void;

Opens the editor with the arguments collected so far and resets the builder.

Parameters

Parameter	Type	Description
options	DesignerOptions	Where to show the editor ({ mode: 'dialog' } or { mode: 'container', container }), optional own styles and an onClose callback. See DesignerOptions.

Returns

void

Remarks

Builds the EditorArguments and passes them to openDesigner, so the same requirements and rules apply (initialized script — otherwise the call is logged as an error and nothing opens —, valid container, one dialog at a time). The builder is reset before the editor opens, even if opening fails.

Example

window.tronDesigner
  .setExactProduct('PFC', undefined, (b) => b.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .open({ mode: 'container', container: document.getElementById('editor-container') });

See

Dialog and inline display

Overrides

IEditorArgumentsOpenPrintJobBuilder.open

---

removePrintingFromPrintJob()

removePrintingFromPrintJob(printPositionCode: string, printTechnologyCode: string): IEditorArgumentsOpenPrintJobBuilder;

Removes a printing from the existing print job.

Parameters

Parameter	Type	Description
printPositionCode	string	Print position code of the printing.
printTechnologyCode	string	Print technology code of the printing.

Returns

IEditorArgumentsOpenPrintJobBuilder

Inherited from

IEditorArgumentsOpenPrintJobBuilder.removePrintingFromPrintJob

---

removePrintingsFromPrintJob()

removePrintingsFromPrintJob(removedPrintings: object[]): IEditorArgumentsOpenPrintJobBuilder;

Removes several printings from the existing print job.

Parameters

Parameter	Type	Description
removedPrintings	object[]	The print position and technology code pairs of the printings to remove.

Returns

IEditorArgumentsOpenPrintJobBuilder

Inherited from

IEditorArgumentsOpenPrintJobBuilder.removePrintingsFromPrintJob

---

removeProductVariantFromPrintJob()

removeProductVariantFromPrintJob(productCode: string): IEditorArgumentsOpenPrintJobBuilder;

Removes a product variant from the existing print job.

Parameters

Parameter	Type	Description
productCode	string	Supplier code of the product variant.

Returns

IEditorArgumentsOpenPrintJobBuilder

Inherited from

IEditorArgumentsOpenPrintJobBuilder.removeProductVariantFromPrintJob

---

removeProductVariantsFromPrintJob()

removeProductVariantsFromPrintJob(productCodes: string[]): IEditorArgumentsOpenPrintJobBuilder;

Removes several product variants from the existing print job.

Parameters

Parameter	Type	Description
productCodes	string[]	Supplier codes of the product variants.

Returns

IEditorArgumentsOpenPrintJobBuilder

Inherited from

IEditorArgumentsOpenPrintJobBuilder.removeProductVariantsFromPrintJob

---

setDataMode()

setDataMode(dataMode: DataMode): this;

Sets the data mode of the editor arguments: what the customer may change in the editor.

Parameters

Parameter	Type	Description
dataMode	DataMode	'Exact', 'Partial' or 'Own' (see DataMode).

Returns

this

Remarks

Mostly useful for Edit sessions: setPrintJob(guid, 'Edit') sets no data mode, so the editor runs them as Partial (the customer can add and remove printings). Call setDataMode('Exact') to lock the structure of the print job. In Create sessions the product methods set the data mode themselves (the last one wins); call setDataMode after them to override it.

Example

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

See

Data modes

Inherited from

IEditorArgumentsOpenPrintJobBuilder.setDataMode

---

setDefaultPrintJobLogo()

setDefaultPrintJobLogo(logo: ArgPrintingLogo): IEditorArgumentsBuilder;

Sets the logo placed on every printing that doesn't have its own logo (printJob.logo).

Parameters

Parameter	Type	Description
logo	ArgPrintingLogo	Either { guid } of an existing logo of the customer, or { url } of an image that the editor downloads and uploads as a new logo.

Returns

IEditorArgumentsBuilder

Remarks

Takes precedence over the customer's selected logo, which openDesigner otherwise uses. A logo with neither guid nor url makes the editor show an error.

Example

window.tronDesigner
  .setExactProduct('PFC', undefined, (b) => b.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .setDefaultPrintJobLogo({ url: 'https://shop.example.com/logos/acme.png' })
  .open({ mode: 'dialog' });

See

Logos

---

setEditorButtons()

setEditorButtons(buttons: EditorButton[]): IEditorArgumentsBuilder;

Replaces the buttons in the editor footer with your own set.

Parameters

Parameter	Type	Description
buttons	EditorButton[]	Up to 5 buttons. Each has a style ('Primary' or 'Secondary'), a function (e.g. 'FinalConfirm', 'Save', 'DownloadPreviewImage'; see EditorButtonFunction) and labels per language ({ language: 'en', text: '…' }, ISO 639-1 codes).

Returns

IEditorArgumentsBuilder

Throws

Error if there are more than 5 buttons, a button isn't an object, its style or function isn't one of the allowed values, or it has no labels (or a label without language or text).

Example

window.tronDesigner.setEditorButtons([
  { style: 'Secondary', function: 'Save', labels: [{ language: 'en', text: 'Save progress' }] },
  { style: 'Primary', function: 'FinalConfirm', labels: [{ language: 'en', text: 'Confirm design' }] },
]);

See

Custom editor buttons

---

setEditorOptions()

setEditorOptions(options: Partial<EditorOptions>): this;

Merges options into editorOptions of the editor arguments.

Parameters

Parameter	Type	Description
options	Partial<EditorOptions>	Any subset of EditorOptions; the values you pass overwrite those set before.

Returns

this

Remarks

The product and printing methods accept the options that belong to them (AddProductOptions, AddPrintingOptions) and call this method; use it for anything else, e.g. showSelectedVariants in Exact mode.

Example

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

Inherited from

IEditorArgumentsOpenPrintJobBuilder.setEditorOptions

---

setExactProduct()

setExactProduct(
   supplierCode?: string, 
   supplierGuid?: string, 
   buildProduct?: (productBuilder: IEditorArgumentsExactProductBuilder) => void
): IEditorArgumentsBuilder;

Sets a catalog product with exactly specified variants (data mode Exact).

Parameters

Parameter	Type	Description
supplierCode?	string	Supplier code, e.g. 'PFC'. Pass either this or supplierGuid, and undefined for the other one.
supplierGuid?	string	Supplier GUID, as an alternative to supplierCode.
buildProduct?	(productBuilder: IEditorArgumentsExactProductBuilder) => void	Called immediately with an IEditorArgumentsExactProductBuilder; add the variants there.

Returns

IEditorArgumentsBuilder

Remarks

Sets the open mode to Create and the data mode to Exact, also when a data mode was set before. Replaces any product set before. Add the printings with addExactPrinting.

Example

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

See

• Data modes
• JavaScript builder API

---

setLastAddedPrintingLogo()

setLastAddedPrintingLogo(logo: ArgPrintingLogo): IEditorArgumentsBuilder;

Sets the logo of the printing added last (by addExactPrinting, addExactPrintings, addOwnPrinting or addPrintingToPrintJob).

Parameters

Parameter	Type	Description
logo	ArgPrintingLogo	Either { guid } of an existing logo of the customer, or { url } of an image to upload.

Returns

IEditorArgumentsBuilder

Remarks

Does nothing if no printing has been added yet. Use it right after the printing it belongs to. In TypeScript it can only be chained after addExactPrinting / addExactPrintings: the return types of addOwnPrinting and addPrintingToPrintJob don't include it (call it on window.tronDesigner instead).

Example

window.tronDesigner
  .setExactProduct('PFC', undefined, (b) => b.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .setLastAddedPrintingLogo({ guid: '610c6f2d-bd71-419c-a335-b305c3af7e5f' })
  .addExactPrinting('back', 'PAD03')
  .setLastAddedPrintingLogo({ url: 'https://shop.example.com/logos/slogan.png' })
  .open({ mode: 'dialog' });

See

Logos

---

setOpenMode()

setOpenMode(mode: OpenMode): IEditorArgumentsBuilder;

Sets the open mode of the editor directly.

Parameters

Parameter	Type	Description
mode	OpenMode	'Create', 'Edit', 'View', 'OpenGallery' (logo gallery) or 'OpenUpload' (logo upload).

Returns

IEditorArgumentsBuilder

Remarks

The product, printing and print job setters set the open mode themselves, and each of them overwrites a value set here — so call setOpenMode last. You mostly need it for the logo dialogs (OpenGallery, OpenUpload); see also openLogoGallery.

Example

window.tronDesigner.setOpenMode('OpenGallery').open({ mode: 'dialog' });

See

Open modes

---

setOrderInfo()

setOrderInfo(
   orderTitle?: string, 
   orderCode?: string, 
   orderItemCode?: string
): IEditorArgumentsBuilder;

Links the print job to an order in your system (orderTitle, orderCode and orderItemCode of printJob.customer).

Parameters

Parameter	Type	Description
orderTitle?	string	Human-readable title of the order.
orderCode?	string	Your order number.
orderItemCode?	string	Your order line / cart item number.

Returns

IEditorArgumentsBuilder

Remarks

All three values are overwritten on every call. The customer details set by setPrintJobCustomer are kept. The values are returned with the print job (IPrintJobDto.customer).

Example

window.tronDesigner.setOrderInfo('Summer campaign', 'ORD-1001', 'ORD-1001-1');

See

Customers and orders

Overrides

IEditorArgumentsOpenPrintJobBuilder.setOrderInfo

---

setOwnEmptyProduct()

setOwnEmptyProduct(): Pick<IEditorArgumentsBuilder, "open" | "addOwnPrinting">;

Uses an own product (not from the catalog) without any product data: the customer enters the product in the editor (data mode Own).

Returns

Pick<IEditorArgumentsBuilder, "open" | "addOwnPrinting">

Remarks

Sets the open mode to Create and the data mode to Own, and removes a product set before. Continue with addOwnPrinting or open. The HTML equivalent is data-td-action with `data-td-own-product="true"`.

Example

window.tronDesigner.setOwnEmptyProduct().open({ mode: 'dialog' });

See

Data modes

---

setOwnProductSingleDimension()

setOwnProductSingleDimension(
   modelCode: string, 
   modelName: string, 
   isDimension1Color: boolean, 
   description?: string, 
   buildProduct?: (productBuilder: IEditorArgumentsOwnSingleDimensionProductBuilder) => void, 
   options?: Partial<Pick<EditorOptions, "showSelectedVariants" | "showQuantityInputs">>
): IEditorArgumentsBuilder;

Sets an own product (not from the catalog) whose variants differ in one dimension, e.g. color or size (data mode Own).

Parameters

Parameter	Type	Description
modelCode	string	Your product (model) code.
modelName	string	Product name shown in the editor.
isDimension1Color	boolean	true if the dimension is a color (the variants then carry color codes).
description?	string	Optional product description.
buildProduct?	(productBuilder: IEditorArgumentsOwnSingleDimensionProductBuilder) => void	Called immediately with an IEditorArgumentsOwnSingleDimensionProductBuilder; add the variants there.
options?	Partial<Pick<EditorOptions, "showSelectedVariants" | "showQuantityInputs">>	Whether to show the variants and quantity inputs (see AddProductOptions).

Returns

IEditorArgumentsBuilder

Remarks

Sets the open mode to Create and the data mode to Own, and replaces any product set before. Add the printings with addOwnPrinting.

Example

window.tronDesigner
  .setOwnProductSingleDimension('MUG-01', 'Custom Ceramic Mug', true, 'A customized 11oz ceramic mug', (p) => {
    p.addVariant('MUG-01-RED', 'Red', ['#FF0000'], 'Ceramic Mug - Red');
    p.addVariant('MUG-01-WHITE', 'White', ['#FFFFFF'], 'Ceramic Mug - White');
  })
  .addOwnPrinting('front', 'Front', 'PAD03', 'Pad print', 'Pantone', 3, 50, 50)
  .open({ mode: 'dialog' });

See

Data modes

---

setOwnProductSingleVariant()

setOwnProductSingleVariant(
   modelCode: string, 
   modelName: string, 
   description?: string, 
   quantity?: number, 
   options?: Pick<Partial<Pick<EditorOptions, "showSelectedVariants" | "showQuantityInputs">>, "showQuantityInputs">
): Pick<IEditorArgumentsBuilder, "open" | "addOwnPrinting">;

Sets an own product (not from the catalog) with exactly one variant, e.g. a product without colors or sizes (data mode Own).

Parameters

Parameter	Type	Description
modelCode	string	Your product code; also used as the code of the single variant.
modelName	string	Product name shown in the editor.
description?	string	Optional product description.
quantity?	number	Optional quantity of the variant.
options?	Pick<Partial<Pick<EditorOptions, "showSelectedVariants" | "showQuantityInputs">>, "showQuantityInputs">	Optional showQuantityInputs editor option (AddProductOptions).

Returns

Pick<IEditorArgumentsBuilder, "open" | "addOwnPrinting">

Remarks

Sets the open mode to Create and the data mode to Own, and replaces any product set before. Continue with addOwnPrinting.

Example

window.tronDesigner
  .setOwnProductSingleVariant('PEN-01', 'Metal pen', 'Ballpoint pen with metal body', 250)
  .addOwnPrinting('barrel', 'Barrel', 'LASER', 'Laser engraving', 'Colorless', undefined, 40, 8)
  .open({ mode: 'dialog' });

See

Data modes

---

setOwnProductTwoDimensions()

setOwnProductTwoDimensions(
   modelCode: string, 
   modelName: string, 
   isDimension1Color: boolean, 
   description?: string, 
   buildProduct?: (productBuilder: IEditorArgumentsOwnTwoDimensionsProductBuilder) => void, 
   options?: Partial<Pick<EditorOptions, "showSelectedVariants" | "showQuantityInputs">>
): IEditorArgumentsBuilder;

Sets an own product (not from the catalog) whose variants differ in two dimensions, e.g. color and size (data mode Own).

Parameters

Parameter	Type	Description
modelCode	string	Your product (model) code.
modelName	string	Product name shown in the editor.
isDimension1Color	boolean	true if the first dimension is a color.
description?	string	Optional product description.
buildProduct?	(productBuilder: IEditorArgumentsOwnTwoDimensionsProductBuilder) => void	Called immediately with an IEditorArgumentsOwnTwoDimensionsProductBuilder; add the variants there.
options?	Partial<Pick<EditorOptions, "showSelectedVariants" | "showQuantityInputs">>	Optional product-related editor options (AddProductOptions).

Returns

IEditorArgumentsBuilder

Remarks

Sets the open mode to Create and the data mode to Own, and replaces any product set before. Add the printings with addOwnPrinting.

Example

window.tronDesigner
  .setOwnProductTwoDimensions('TEE-01', 'Organic T-shirt', true, undefined, (p) => {
    p.addVariant('TEE-01-RED-M', 'Red', 'M', ['#FF0000']);
    p.addVariant('TEE-01-RED-L', 'Red', 'L', ['#FF0000']);
  })
  .addOwnPrinting('front', 'Front', 'SCREEN', 'Screen print', 'Pantone', 4, 300, 400)
  .open({ mode: 'dialog' });

See

Data modes

---

setPartialProduct()

setPartialProduct(
   supplierCode?: string, 
   supplierGuid?: string, 
   buildProduct?: (productBuilder: IEditorArgumentsPartialProductBuilder) => void, 
   options?: Partial<Pick<EditorOptions, "showSelectedVariants" | "showQuantityInputs">>
): IEditorArgumentsBuilder;

Sets a catalog product by its model, so the customer chooses the variants (and print options) in the editor (data mode Partial).

Parameters

Parameter	Type	Description
supplierCode?	string	Supplier code, e.g. 'PFC'. Pass either this or supplierGuid, and undefined for the other one.
supplierGuid?	string	Supplier GUID, as an alternative to supplierCode.
buildProduct?	(productBuilder: IEditorArgumentsPartialProductBuilder) => void	Called immediately with an IEditorArgumentsPartialProductBuilder; set the model there and optionally preselect variants.
options?	Partial<Pick<EditorOptions, "showSelectedVariants" | "showQuantityInputs">>	Whether to show the preselected variants and quantity inputs (see AddProductOptions).

Returns

IEditorArgumentsBuilder

Remarks

Sets the open mode to Create and the data mode to Partial, also when a data mode was set before (e.g. Exact by an earlier addExactPrinting). Replaces any product set before. Printings are optional: without them the customer picks the print options in the editor.

Example

window.tronDesigner
  .setPartialProduct('PFC', undefined, (b) => b.setProductModel('100860'))
  .open({ mode: 'dialog' });

See

• Data modes
• JavaScript builder API

---

setPrintJob()

Call Signature

setPrintJob(printJobGuid: string, mode: "Edit"): IEditorArgumentsOpenPrintJobBuilder;

Opens an existing print job for editing (open mode Edit).

Parameters

Parameter	Type	Description
printJobGuid	string	GUID of the print job, e.g. from a printJob / created event.
mode	"Edit"	'Edit'.

Returns

IEditorArgumentsOpenPrintJobBuilder

A builder with the methods that change the loaded print job (add or remove variants and printings, set order info, …) and open.

Remarks

Sets printJob.printJobGuid and the open mode, and clears the products and printings added before. Don't call setExactProduct, addExactPrinting or other product/printing setters afterwards — they switch the open mode back to Create; use the …ToPrintJob methods of IEditorArgumentsOpenPrintJobBuilder instead.

Example

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

See

Open modes

Call Signature

setPrintJob(printJobGuid: string, mode?: "View"): Pick<IEditorArgumentsBuilder, "open">;

Opens an existing print job read-only (open mode View).

Parameters

Parameter	Type	Description
printJobGuid	string	GUID of the print job, e.g. from a printJob / created event.
mode?	"View"	'View'. This is the default, so you can omit it.

Returns

Pick<IEditorArgumentsBuilder, "open">

A builder with only open.

Remarks

Sets printJob.printJobGuid and the open mode, and clears the products and printings added before.

Example

window.tronDesigner.setPrintJob(printJobGuid).open({ mode: 'dialog' });

See

Open modes

---

setPrintJobCustomer()

setPrintJobCustomer(
   customerIdentity?: string, 
   customerPerson?: string, 
   customerCompany?: string, 
   customerEmail?: string
): IEditorArgumentsBuilder;

Sets the customer details stored with the print job (printJob.customer), e.g. the shop account that owns it.

Parameters

Parameter	Type	Description
customerIdentity?	string	Your own ID of the customer.
customerPerson?	string	Name of the contact person.
customerCompany?	string	Company name.
customerEmail?	string	E-mail address.

Returns

IEditorArgumentsBuilder

Remarks

All four values are overwritten on every call; pass undefined for values you don't have. The order information set by setOrderInfo is kept. This affects only the print job being built — to change the session customer, use setCustomer.

Example

window.tronDesigner.setPrintJobCustomer('shop-user-4711', 'Jane Doe', 'ACME Ltd.', 'jane@example.com');

See

Customers and orders

Overrides

IEditorArgumentsOpenPrintJobBuilder.setPrintJobCustomer

---

setPrintJobLanguage()

setPrintJobLanguage(languageCode: string): IEditorArgumentsBuilder;

Sets the language in which the product and print data (names, descriptions) are loaded for the print job (printJob.languageCode).

Parameters

Parameter	Type	Description
languageCode	string	ISO 639-1 language code, e.g. 'de'.

Returns

IEditorArgumentsBuilder

Remarks

This doesn't change the language of the editor UI; use the data-td-language script attribute for that.

---

setPrintJobTitle()

setPrintJobTitle(title: undefined | string): IEditorArgumentsBuilder;

Sets the title of the print job (printJob.title).

Parameters

Parameter	Type	Description
title	undefined | string	The title, or undefined to remove a title set before.

Returns

IEditorArgumentsBuilder

Overrides

IEditorArgumentsOpenPrintJobBuilder.setPrintJobTitle

---

setProofreadingTemplateTag()

setProofreadingTemplateTag(tag: string): IEditorArgumentsBuilder;

Selects the proofreading template, by its tag, that the editor uses when it generates proofreading PDFs (editor.proofreadingArgs.templateTag).

Parameters

Parameter	Type	Description
tag	string	Tag of the proofreading template.

Returns

IEditorArgumentsBuilder

Remarks

To pick a template when you download a proofreading yourself, pass the tag to getProofreading.

See

Retrieving print jobs and files

---

setResultActionCloseEditor()

setResultActionCloseEditor(redirectUrl?: string): IEditorArgumentsBuilder;

After the customer confirms the final verification, the print job is saved and the editor closes.

Parameters

Parameter	Type	Description
redirectUrl?	string	URL to navigate to after the editor closes.

Returns

IEditorArgumentsBuilder

Remarks

Replaces a result action set before. The editor closes with the reason 'Confirmed'; the redirect URL is also passed to your onClose callback, and the script then navigates the browser there. If the customer closes the editor with its close button instead, the reason is 'Cancelled' and no redirect happens.

Example

window.tronDesigner
  .setExactProduct('PFC', undefined, (b) => b.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .setResultActionCloseEditor()
  .open({ mode: 'dialog', onClose: (reason) => console.log('Editor closed:', reason) });

See

Result actions

---

setResultActionNone()

setResultActionNone(): IEditorArgumentsBuilder;

After the customer confirms the final verification, the print job is saved and the editor stays open.

Returns

IEditorArgumentsBuilder

Remarks

Replaces a result action set before. Without any result action in the editor arguments, the editor uses the one configured in the Admin Portal (Settings → Print editor).

See

Result actions

---

setResultActionShowDialog()

setResultActionShowDialog(dialogLocalizations: EditorResultDialog[], redirectUrl?: string): IEditorArgumentsBuilder;

After the customer confirms the final verification, the print job is saved and a "print job saved" dialog is shown. Closing the dialog closes the editor and, if redirectUrl is set, the browser navigates there.

Parameters

Parameter	Type	Description
dialogLocalizations	EditorResultDialog[]	Title, message and button text of the dialog per language (see EditorResultDialog). The editor uses the entry for the current UI language, then en, then the first entry; pass [] for the default texts.
redirectUrl?	string	URL to navigate to after the dialog is closed.

Returns

IEditorArgumentsBuilder

Remarks

Replaces a result action set before. The editor closes with the reason 'Confirmed' and the redirect URL is also passed to your onClose callback.

Example

window.tronDesigner
  .setExactProduct('PFC', undefined, (b) => b.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .setResultActionShowDialog(
    [{ language: 'en', title: 'Thank you', message: 'Your design was saved.', buttonText: 'Back to cart' }],
    'https://shop.example.com/cart'
  )
  .open({ mode: 'dialog' });

See

Result actions