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
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
new EditorArgumentsBuilder(): EditorArgumentsBuilder;Returns
EditorArgumentsBuilder
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
Example
window.tronDesigner.addCustomProperties({ cartId: 'c-42', campaign: 'summer' });See
Implementation of
IEditorArgumentsBuilder.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
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
Implementation of
IEditorArgumentsBuilder.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
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
Implementation of
IEditorArgumentsBuilder.addEditorButton
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
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
Implementation of
IEditorArgumentsBuilder.addExactPrinting
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
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
Implementation of
IEditorArgumentsBuilder.addExactPrintings
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
Implementation of
IEditorArgumentsBuilder.addOwnPrinting
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
Implementation of
IEditorArgumentsBuilder.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' });Implementation of
IEditorArgumentsBuilder.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
Implementation of
IEditorArgumentsBuilder.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' });Implementation of
IEditorArgumentsBuilder.addProductVariantToPrintJob
build()
build(): EditorArguments;Returns the editor arguments collected so far.
Returns
The EditorArguments object. It's the builder's own object, not a copy, so later builder calls change it too.
open()
open(options: DesignerOptions): void;Not implemented in the standalone builder.
Parameters
| Parameter | Type | Description |
|---|---|---|
options | DesignerOptions | Ignored. |
Returns
void
Throws
Error ("Method not implemented.") always. Use build and openDesigner, or the builder methods of window.tronDesigner.
Implementation of
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
Implementation of
IEditorArgumentsBuilder.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
Implementation of
IEditorArgumentsBuilder.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
Implementation of
IEditorArgumentsBuilder.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
Implementation of
IEditorArgumentsBuilder.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
Implementation of
IEditorArgumentsBuilder.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
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
Implementation of
IEditorArgumentsBuilder.setDefaultPrintJobLogo
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
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
Implementation of
IEditorArgumentsBuilder.setEditorButtons
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' });Implementation of
IEditorArgumentsBuilder.setEditorOptions
setExactProduct()
setExactProduct(
supplierCode?: string,
supplierGuid?: string,
buildProduct?: (builder: 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? | (builder: IEditorArgumentsExactProductBuilder) => void | Called immediately with an IEditorArgumentsExactProductBuilder; add the variants there. |
Returns
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
Implementation of
IEditorArgumentsBuilder.setExactProduct
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
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
Implementation of
IEditorArgumentsBuilder.setLastAddedPrintingLogo
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
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
Implementation of
IEditorArgumentsBuilder.setOpenMode
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
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
Implementation of
IEditorArgumentsBuilder.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
Implementation of
IEditorArgumentsBuilder.setOwnEmptyProduct
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
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
Implementation of
IEditorArgumentsBuilder.setOwnProductSingleDimension
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
Implementation of
IEditorArgumentsBuilder.setOwnProductSingleVariant
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
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
Implementation of
IEditorArgumentsBuilder.setOwnProductTwoDimensions
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
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
Implementation of
IEditorArgumentsBuilder.setPartialProduct
setPrintJob()
setPrintJob(printJobGuid: string, mode?: "Edit" | "View"): IEditorArgumentsBuilder;Opens an existing print job for editing (open mode Edit).
Parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
printJobGuid | string | — | GUID of the print job, e.g. from a printJob / created event. |
mode | "Edit" | "View" | 'View' | 'Edit'. |
Returns
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
Implementation of
IEditorArgumentsBuilder.setPrintJob
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
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
Implementation of
IEditorArgumentsBuilder.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
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()
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
Implementation of
IEditorArgumentsBuilder.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
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()
setResultActionCloseEditor(redirectUrl?: string): EditorArgumentsBuilder;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
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
window.tronDesigner
.setExactProduct('PFC', undefined, (b) => b.addVariant('10086021'))
.addExactPrinting('front', 'PAD03')
.setResultActionCloseEditor()
.open({ mode: 'dialog', onClose: (reason) => console.log('Editor closed:', reason) });See
Implementation of
IEditorArgumentsBuilder.setResultActionCloseEditor
setResultActionNone()
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
Implementation of
IEditorArgumentsBuilder.setResultActionNone
setResultActionShowDialog()
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
| 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
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
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' });