"recommendation" event

Event@tryyoursize/sdk

The shopper’s recommended size for this product, in your size labels: on mount when the shopper is already connected, and on every change. Sizes only, never measurements.

The size guide element always listens; for other elements, adding a handler starts it. Preselect your picker, but never override a size the shopper picked themselves.

recommendation: Recommendation;

Payload

productstringRequired

statusRecommendationStatusRequired

ready, computing, none, signed_out or unavailable. See tys.recommendation().

sizestring | nullRequired

The recommended size in the store's own label (its size map), or null.

studioSizestring | nullRequired

The same size as entered in TryYourSize Studio, or null.

wearableSizesstring[]Optional

Sizes that can be worn on this body, in the store's labels (when simulated).

Example

JavaScriptReactHTML

let touched = false;
sizePicker.addEventListener("change", () => (touched = true));
guide.on("recommendation", (r) => {
  if (r.status === "ready" && !touched) sizePicker.value = r.size;
});

<SizeGuide
  product="SKU-123"
  onRecommendation={(r) => {
    if (r.status === "ready" && !touched) setSize(r.size);
  }}
/>

el.addEventListener("tys:recommendation", (e) => {
  if (e.detail.status === "ready" && !touched) sizePicker.value = e.detail.size;
});

See also

• Preselect the recommended size