Activity & Equipment Components

These components render activity and equipment data from the initialization response. They require no additional API calls — the data is already available after api.registerComponents().

Activity Card

Renders a single activity with image, name, tagline, description, duration/equipment badges, price, and availability.

<resytech-activity-card activity-id="activity-uuid"></resytech-activity-card>

Attributes

Attribute	Type	Default	Description
`activity-id`	`string`	—	Activity UUID from the initialization response
`show-tagline`	`boolean`	`true`	Show the activity tagline
`show-description`	`boolean`	`true`	Show the description (clamped to 3 lines)
`show-price`	`boolean`	`true`	Show starting price
`show-durations`	`boolean`	`true`	Show duration range badge
`show-equipment`	`boolean`	`true`	Show equipment count badge
`show-availability`	`boolean`	`true`	Show next available date

Events

Event	Detail
`activity-select`	`{ activity: InitializationActivity }`

Programmatic Data

You can also set the activity data directly via JavaScript:

const card = document.querySelector('resytech-activity-card');
card.activity = myActivityObject;
card.theme = myThemeOverride; // optional

CSS Parts

Style from outside Shadow DOM using ::part():

resytech-activity-card::part(card) { border: 2px solid #e2e8f0; }
resytech-activity-card::part(title) { font-size: 22px; }
resytech-activity-card::part(body) { padding: 24px; }

Activity List

Renders a responsive grid of activity cards. Each card fires activity-select which bubbles up.

<resytech-activity-list></resytech-activity-list>

With an optional title:

<resytech-activity-list show-title="true" title-text="Our Experiences"></resytech-activity-list>

Attributes

Attribute	Type	Default	Description
`show-title`	`boolean`	`false`	Show a heading above the grid
`title-text`	`string`	`Activities`	Heading text
`empty-text`	`string`	`No activities available.`	Message when no activities exist

CSS Custom Properties

Property	Description	Default
`--resytech-card-min-width`	Minimum card width in the grid	`320px`
`--resytech-grid-gap`	Gap between cards	`24px`

Equipment Card

Renders a single equipment option with image, name, description, capacity badge, and selection state.

Equipment cards are typically created by the Equipment List, but you can also use them standalone:

const card = document.createElement('resytech-equipment-card');
card.equipment = activity.equipment[0];
card.selected = true;
document.body.appendChild(card);

Attributes

Attribute	Type	Default	Description
`selected`	`boolean`	`false`	Show as selected (blue border + checkmark)

Events

Event	Detail
`equipment-select`	`{ equipment: Equipment }`

Equipment List

Renders a grid of equipment cards for a given activity. Set the activity via activity-id attribute or the activity property.

<resytech-equipment-list activity-id="activity-uuid" show-title="true"></resytech-equipment-list>

Attributes

Attribute	Type	Default	Description
`activity-id`	`string`	—	Activity UUID to load equipment from
`selected`	`string`	—	Equipment UUID to show as selected
`show-title`	`boolean`	`false`	Show heading
`title-text`	`string`	`Choose Your Equipment`	Heading text

Programmatic Data

const list = document.querySelector('resytech-equipment-list');
list.activity = selectedActivity;      // set activity data directly
list.selectedUuid = 'equipment-uuid';  // highlight a selection

Wiring Activity → Equipment Selection

A typical pattern is to listen for activity selection and update the equipment list:

document.addEventListener('activity-select', (e) => {
  const equipmentList = document.querySelector('resytech-equipment-list');
  equipmentList.activity = e.detail.activity;
});

document.addEventListener('equipment-select', (e) => {
  const equipmentList = document.querySelector('resytech-equipment-list');
  equipmentList.selectedUuid = e.detail.equipment.uuid;

  // Continue to duration selection...
});

Activity & Equipment Components

On this page