Skip to content

Class: EditorArgumentsBuilder ​

Standalone implementation of IEditorArgumentsBuilder that produces an EditorArguments object.

Remarks ​

window.tronDesigner uses an internal instance of this class for its builder methods, so in the browser you normally call the builder methods on window.tronDesigner. The integration script doesn't expose the class itself; it's included in the @promotron/website-integration-types package, e.g. to build editor arguments in your own code.

Unlike window.tronDesigner, this class can't open the editor: its open throws. Call build and pass the result to openDesigner or put it, serialized, into data-td-options.

Example ​

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

const builder = new EditorArgumentsBuilder();
builder
  .setExactProduct('PFC', undefined, (b) => b.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03');
window.tronDesigner.openDesigner(builder.build(), { mode: 'dialog' });

See ​

Implements ​

Constructors ​

Constructor ​

ts
new EditorArgumentsBuilder(): EditorArgumentsBuilder;

Returns ​

EditorArgumentsBuilder

Methods ​

addCustomProperties() ​

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

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

Parameters ​

ParameterTypeDescription
customPropertiesRecord<string, string>Key/value pairs; they are merged into the properties added before, overwriting properties with the same name.

Returns ​

IEditorArgumentsBuilder

Example ​

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

See ​

Customers and orders

Implementation of ​

IEditorArgumentsBuilder.addCustomProperties


addCustomProperty() ​

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

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

Parameters ​

ParameterTypeDescription
keystringProperty name. An existing property with the same name is overwritten.
valuestringProperty 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 ​

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

See ​

Customers and orders

Implementation of ​

IEditorArgumentsBuilder.addCustomProperty


addEditorButton() ​

ts
addEditorButton(button: EditorButton): IEditorArgumentsBuilder;

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

Parameters ​

ParameterTypeDescription
buttonEditorButtonThe 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 ​

js
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

Implementation of ​

IEditorArgumentsBuilder.addEditorButton


addExactPrinting() ​

ts
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 ​

ParameterTypeDescription
printPositionCodestringPrint position code, e.g. 'front'.
printTechnologyCodestringPrint technology code, e.g. 'PAD03'.
positionCodeOverride?stringPrint position code to show instead of the catalog one.
positionNameOverride?stringPrint position name to show instead of the catalog one.
technologyCodeOverride?stringPrint technology code to show instead of the catalog one.
technologyNameOverride?stringPrint technology name to show instead of the catalog one.
options?Partial<Pick<EditorOptions, "showSelectedPrintOptions" | "alwaysShowImageSelect">>Printing-related editor options (see AddPrintingOptions).
maxColorsOverride?numberMaximum number of colors, instead of the catalog value.
maxWidthOverride?numberMaximum print width in mm, instead of the catalog value.
maxHeightOverride?numberMaximum print height in mm, instead of the catalog value.
maxDiameterOverride?numberMaximum print diameter in mm, instead of the catalog value.
maxAreaOverride?numberMaximum 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 ​

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

See ​

Implementation of ​

IEditorArgumentsBuilder.addExactPrinting


addExactPrintings() ​

ts
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 ​

ParameterTypeDescription
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 ​

js
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

Implementation of ​

IEditorArgumentsBuilder.addExactPrintings


addOwnPrinting() ​

ts
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 ​

ParameterTypeDescription
positionCodestringYour print position code (also shown in the editor).
positionNamestringPrint position name shown in the editor.
technologyCodestringYour print technology code (also shown in the editor).
technologyNamestringPrint technology name shown in the editor.
colorModeColorModeHow the motive is colored: 'Pantone', 'CMYK', 'SingleColor' or 'Colorless' (e.g. engraving).
maxColors?numberMaximum number of colors.
maxWidth?numberMaximum print width in mm.
maxHeight?numberMaximum print height in mm.
maxDiameter?numberMaximum print diameter in mm, for round print areas.
maxArea?numberMaximum 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 ​

js
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

Implementation of ​

IEditorArgumentsBuilder.addOwnPrinting


addPrintingsToPrintJob() ​

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

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

Parameters ​

ParameterTypeDescription
...printingsArgAddPrinting[]The printings, each with at least printPositionCode and printTechnologyCode (see ArgAddPrinting).

Returns ​

IEditorArgumentsOpenPrintJobBuilder

Implementation of ​

IEditorArgumentsBuilder.addPrintingsToPrintJob


addPrintingToPrintJob() ​

ts
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 ​

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

Returns ​

IEditorArgumentsOpenPrintJobBuilder

Example ​

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

Implementation of ​

IEditorArgumentsBuilder.addPrintingToPrintJob


addProductVariantsToPrintJob() ​

ts
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 ​

ParameterTypeDescription
...variantsArgAddProductVariant[]The variants, each with at least productCode (see ArgAddProductVariant).

Returns ​

IEditorArgumentsOpenPrintJobBuilder

Implementation of ​

IEditorArgumentsBuilder.addProductVariantsToPrintJob


addProductVariantToPrintJob() ​

ts
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 ​

ParameterTypeDescription
productCodestringSupplier code of the product variant.
quantity?numberQuantity of the variant.
codeOverride?stringVariant code to show instead of the catalog one.
nameOverride?stringVariant name to show instead of the catalog one.

Returns ​

IEditorArgumentsOpenPrintJobBuilder

Example ​

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

Implementation of ​

IEditorArgumentsBuilder.addProductVariantToPrintJob


build() ​

ts
build(): EditorArguments;

Returns the editor arguments collected so far.

Returns ​

EditorArguments

The EditorArguments object. It's the builder's own object, not a copy, so later builder calls change it too.


open() ​

ts
open(options: DesignerOptions): void;

Not implemented in the standalone builder.

Parameters ​

ParameterTypeDescription
optionsDesignerOptionsIgnored.

Returns ​

void

Throws ​

Error ("Method not implemented.") always. Use build and openDesigner, or the builder methods of window.tronDesigner.

Implementation of ​

IEditorArgumentsBuilder.open


removePrintingFromPrintJob() ​

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

Removes a printing from the existing print job.

Parameters ​

ParameterTypeDescription
printPositionCodestringPrint position code of the printing.
printTechnologyCodestringPrint technology code of the printing.

Returns ​

IEditorArgumentsOpenPrintJobBuilder

Implementation of ​

IEditorArgumentsBuilder.removePrintingFromPrintJob


removePrintingsFromPrintJob() ​

ts
removePrintingsFromPrintJob(removedPrintings: object[]): IEditorArgumentsOpenPrintJobBuilder;

Removes several printings from the existing print job.

Parameters ​

ParameterTypeDescription
removedPrintingsobject[]The print position and technology code pairs of the printings to remove.

Returns ​

IEditorArgumentsOpenPrintJobBuilder

Implementation of ​

IEditorArgumentsBuilder.removePrintingsFromPrintJob


removeProductVariantFromPrintJob() ​

ts
removeProductVariantFromPrintJob(productCode: string): IEditorArgumentsOpenPrintJobBuilder;

Removes a product variant from the existing print job.

Parameters ​

ParameterTypeDescription
productCodestringSupplier code of the product variant.

Returns ​

IEditorArgumentsOpenPrintJobBuilder

Implementation of ​

IEditorArgumentsBuilder.removeProductVariantFromPrintJob


removeProductVariantsFromPrintJob() ​

ts
removeProductVariantsFromPrintJob(productCodes: string[]): IEditorArgumentsOpenPrintJobBuilder;

Removes several product variants from the existing print job.

Parameters ​

ParameterTypeDescription
productCodesstring[]Supplier codes of the product variants.

Returns ​

IEditorArgumentsOpenPrintJobBuilder

Implementation of ​

IEditorArgumentsBuilder.removeProductVariantsFromPrintJob


setDataMode() ​

ts
setDataMode(dataMode: DataMode): this;

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

Parameters ​

ParameterTypeDescription
dataModeDataMode'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 ​

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

See ​

Data modes

Implementation of ​

IEditorArgumentsBuilder.setDataMode


ts
setDefaultPrintJobLogo(logo: ArgPrintingLogo): IEditorArgumentsBuilder;

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

Parameters ​

ParameterTypeDescription
logoArgPrintingLogoEither { 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 ​

js
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

Implementation of ​

IEditorArgumentsBuilder.setDefaultPrintJobLogo


setEditorButtons() ​

ts
setEditorButtons(buttons: EditorButton[]): IEditorArgumentsBuilder;

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

Parameters ​

ParameterTypeDescription
buttonsEditorButton[]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 ​

js
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

Implementation of ​

IEditorArgumentsBuilder.setEditorButtons


setEditorOptions() ​

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

Merges options into editorOptions of the editor arguments.

Parameters ​

ParameterTypeDescription
optionsPartial<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 ​

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

Implementation of ​

IEditorArgumentsBuilder.setEditorOptions


setExactProduct() ​

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

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

Parameters ​

ParameterTypeDescription
supplierCode?stringSupplier code, e.g. 'PFC'. Pass either this or supplierGuid, and undefined for the other one.
supplierGuid?stringSupplier GUID, as an alternative to supplierCode.
buildProduct?(builder: IEditorArgumentsExactProductBuilder) => voidCalled 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 ​

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

See ​

Implementation of ​

IEditorArgumentsBuilder.setExactProduct


ts
setLastAddedPrintingLogo(logo: ArgPrintingLogo): IEditorArgumentsBuilder;

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

Parameters ​

ParameterTypeDescription
logoArgPrintingLogoEither { 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 ​

js
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

Implementation of ​

IEditorArgumentsBuilder.setLastAddedPrintingLogo


setOpenMode() ​

ts
setOpenMode(mode: OpenMode): IEditorArgumentsBuilder;

Sets the open mode of the editor directly.

Parameters ​

ParameterTypeDescription
modeOpenMode'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 ​

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

See ​

Open modes

Implementation of ​

IEditorArgumentsBuilder.setOpenMode


setOrderInfo() ​

ts
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 ​

ParameterTypeDescription
orderTitle?stringHuman-readable title of the order.
orderCode?stringYour order number.
orderItemCode?stringYour 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 ​

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

See ​

Customers and orders

Implementation of ​

IEditorArgumentsBuilder.setOrderInfo


setOwnEmptyProduct() ​

ts
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 ​

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

See ​

Data modes

Implementation of ​

IEditorArgumentsBuilder.setOwnEmptyProduct


setOwnProductSingleDimension() ​

ts
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 ​

ParameterTypeDescription
modelCodestringYour product (model) code.
modelNamestringProduct name shown in the editor.
isDimension1Colorbooleantrue if the dimension is a color (the variants then carry color codes).
description?stringOptional product description.
buildProduct?(productBuilder: IEditorArgumentsOwnSingleDimensionProductBuilder) => voidCalled 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 ​

js
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

Implementation of ​

IEditorArgumentsBuilder.setOwnProductSingleDimension


setOwnProductSingleVariant() ​

ts
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 ​

ParameterTypeDescription
modelCodestringYour product code; also used as the code of the single variant.
modelNamestringProduct name shown in the editor.
description?stringOptional product description.
quantity?numberOptional 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 ​

js
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

Implementation of ​

IEditorArgumentsBuilder.setOwnProductSingleVariant


setOwnProductTwoDimensions() ​

ts
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 ​

ParameterTypeDescription
modelCodestringYour product (model) code.
modelNamestringProduct name shown in the editor.
isDimension1Colorbooleantrue if the first dimension is a color.
description?stringOptional product description.
buildProduct?(productBuilder: IEditorArgumentsOwnTwoDimensionsProductBuilder) => voidCalled 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 ​

js
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

Implementation of ​

IEditorArgumentsBuilder.setOwnProductTwoDimensions


setPartialProduct() ​

ts
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 ​

ParameterTypeDescription
supplierCode?stringSupplier code, e.g. 'PFC'. Pass either this or supplierGuid, and undefined for the other one.
supplierGuid?stringSupplier GUID, as an alternative to supplierCode.
buildProduct?(productBuilder: IEditorArgumentsPartialProductBuilder) => voidCalled 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 ​

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

See ​

Implementation of ​

IEditorArgumentsBuilder.setPartialProduct


setPrintJob() ​

ts
setPrintJob(printJobGuid: string, mode?: "Edit" | "View"): IEditorArgumentsBuilder;

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

Parameters ​

ParameterTypeDefault valueDescription
printJobGuidstring—GUID of the print job, e.g. from a printJob / created event.
mode"Edit" | "View"'View''Edit'.

Returns ​

IEditorArgumentsBuilder

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 ​

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

See ​

Open modes

Implementation of ​

IEditorArgumentsBuilder.setPrintJob


setPrintJobCustomer() ​

ts
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 ​

ParameterTypeDescription
customerIdentity?stringYour own ID of the customer.
customerPerson?stringName of the contact person.
customerCompany?stringCompany name.
customerEmail?stringE-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 ​

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

See ​

Customers and orders

Implementation of ​

IEditorArgumentsBuilder.setPrintJobCustomer


setPrintJobLanguage() ​

ts
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 ​

ParameterTypeDescription
languageCodestringISO 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.

Implementation of ​

IEditorArgumentsBuilder.setPrintJobLanguage


setPrintJobTitle() ​

ts
setPrintJobTitle(title: undefined | string): IEditorArgumentsBuilder;

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

Parameters ​

ParameterTypeDescription
titleundefined | stringThe title, or undefined to remove a title set before.

Returns ​

IEditorArgumentsBuilder

Implementation of ​

IEditorArgumentsBuilder.setPrintJobTitle


setProofreadingTemplateTag() ​

ts
setProofreadingTemplateTag(tag: string): IEditorArgumentsBuilder;

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

Parameters ​

ParameterTypeDescription
tagstringTag 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

Implementation of ​

IEditorArgumentsBuilder.setProofreadingTemplateTag


setResultActionCloseEditor() ​

ts
setResultActionCloseEditor(redirectUrl?: string): EditorArgumentsBuilder;

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

Parameters ​

ParameterTypeDescription
redirectUrl?stringURL to navigate to after the editor closes.

Returns ​

EditorArgumentsBuilder

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 ​

js
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

Implementation of ​

IEditorArgumentsBuilder.setResultActionCloseEditor


setResultActionNone() ​

ts
setResultActionNone(): EditorArgumentsBuilder;

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

Returns ​

EditorArgumentsBuilder

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

Implementation of ​

IEditorArgumentsBuilder.setResultActionNone


setResultActionShowDialog() ​

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

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 ​

ParameterTypeDescription
dialogLocalizationsEditorResultDialog[]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?stringURL to navigate to after the dialog is closed.

Returns ​

EditorArgumentsBuilder

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 ​

js
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

Implementation of ​

IEditorArgumentsBuilder.setResultActionShowDialog

Czech Republic – The Country for the FutureFunded by the European Union – NextGenerationEUThe project was implemented within the The Country for the Future programme of the Ministry of Industry and Trade and co-financed by the European Union under NextGenerationEU.Support · Examples

Czech Republic – The Country for the FutureFunded by the European Union – NextGenerationEUThe project was implemented within the The Country for the Future programme of the Ministry of Industry and Trade and co-financed by the European Union under NextGenerationEU.Support · Examples