elements.create()

Method@tryyoursize/sdk

Creates an element for one product. Mount it with mount().

create(type: ElementType, options: ElementOptions): TysElement;

Parameters

type"fit" | "button" | "sizeGuide"Required

"sizeGuide": a link-sized "Size guide" with the TryYourSize mark, for the spot next to your size picker. "button": a compact "Find my size" button. "fit": the inline element, with sign-in and "your body is ready" in your page.

optionsElementOptionsRequired

Properties

productstringRequired

Your product ID or SKU, as synced to TryYourSize.

variant"link" | "button"Optional

"sizeGuide" only: a text link (default, like most stores' "Size guide") or an outlined button.

labelstringOptional

"sizeGuide" only: your own words for "Size guide" (otherwise localized from locale).

demoDemoOptionsOptional

"fit" only, test keys only: demo mode. The element shows the garment on a named sample body (synthetic size-chart tape values, never a real person's), with no sign-in: size chips, objective numbers in cm and kPa, a turning body and a sample-body picker. For landing pages and sales demos.

Properties

bodystringRequired

A sample body id: sample-female-158, sample-female-165, sample-female-172, sample-male-172, sample-male-178 or sample-male-186.

heightnumberOptional

Height of the element in px (default 640).

Returns

TysElement: The element. Several of the same type are allowed (for example a product grid).

Errors

TryYourSizeError with code invalid_option (missing product, bad variant, label or demo) or unknown_element_type.

Examples

Size guide next to the size picker

const guide = tys.elements().create("sizeGuide", {
  product: "SKU-123",
  variant: "link",          // or "button"
  label: "Find your size",   // optional; otherwise localized
});
guide.mount("#size-guide");

<SizeGuide product="SKU-123" variant="link" label="Find your size" />

<tys-size-guide publishable-key="pk_test_…" product="SKU-123" variant="link" label="Find your size"></tys-size-guide>

Demo mode (test keys only)

const demo = tys.elements().create("fit", {
  product: "CREW-TSHIRT",
  demo: { body: "sample-female-165", height: 640 },
});
demo.mount("#demo");

<FitElement product="CREW-TSHIRT" demo={{ body: "sample-female-165", height: 640 }} />

<tys-fit publishable-key="pk_test_…" product="CREW-TSHIRT" demo-body="sample-female-165"></tys-fit>