HTML Slots
General Information
HTML Slots serve as dynamic placeholders within the Webcomponent. They act as small portals through which the parent website can inject customized content into the checkout Webcomponent, offering a flexible way to change the appearance.
Since the slot content represents a new tree in the DOM, there are some DOM boundary limitations. The content injected into the slot should come with its own styles and behavior.
How it works
The key to make Webcomponent slots work lies in the name
attribute. By assigning an unique name
to each slot, a clear connection can be established between the Webcomponent and the content to be injected.
Multiple slots are now available in different areas of the checkout application. Each of them have a unique name.
<slot name="slot_name" />
The parent website can add content into the slot by matching the name
value in the slot
attribute.
<div slot="slot_name">Content</div>
Name formats
Slots receive the correct content by matching the name attribute. They can be identified by their prefix. "slot_prefix_"
+ "name"
- Dynamic Area slots
"slot_dynamic_area_<area_name>"
- Option slots
slot_option_<option_key>
slot_option_selected_<option_key>
is only visible when the option is selected
Available Slots
These are the names of all available slots:
Dynamic area slots
- Authentication step
slot_dynamic_area_guest
slot_dynamic_area_register
- Shipping step
slot_dynamic_area_collection_point
slot_dynamic_area_shipping_address
- Payment step
slot_dynamic_area_billing_address
slot_dynamic_area_payment_options
slot_dynamic_area_payment
slot_dynamic_area_payment_below_mobile_basket
These are the names of all available slots:
Option slots
- Authentication step
slot_option_sign_in
slot_option_register
slot_option_guest
- Shipping step
- Delivery options
slot_option_home_delivery
slot_option_collection_point
- Carrier options
slot_option_dhl
slot_option_hermes
...
- Shipping options
slot_option_express_delivery_dhl
slot_option_standard_delivery_hermes
...
- Delivery options
- Payment step
slot_suggest_collection_point
- Billing options
slot_option_same_address
slot_option_different_address
- Payment options
slot_option_standard_invoice
slot_option_adyen_klarna_paylater
slot_option_adyen_paypal
...
Selected option slot
These types of Slots are only visible when the option is selected
- Authentication step
slot_option_selected_sign_in
slot_option_selected_register
slot_option_selected_guest
- Shipping step
- Delivery options
slot_option_selected_home_delivery
slot_option_selected_collection_point
- Carrier options
slot_option_selected_dhl
slot_option_selected_hermes
...
- Shipping options
slot_option_selected_express_delivery_dhl
slot_option_selected_standard_delivery_hermes
...
- Delivery options
- Payment step
slot_suggest_collection_point
- Billing options
slot_option_selected_same_address
slot_option_selected_different_address
- Payment options
slot_option_selected_standard_invoice
slot_option_selected_adyen_klarna_paylater
slot_option_selected_adyen_paypal
...
Implementation
The following are examples of two different use cases for slots:
Dynamic Area Slot
Adding content into the dynamic area shipping address slot slot_dynamic_area_shipping_address
- Create new content element
- Add slot attribute and make it match with the slot's name
- Provide the needed styles
- Append it besides/above the
<scayle-checkout/>
Webcomponent
const slotContent = document.createElement('div');
const slotStyles = 'background: #f681076e; border-radius: 3px; padding: 16px; margin: 8px; border: 1px dashed; text-align: center;';
slotContent.setAttribute('slot', 'slot_dynamic_area_shipping_address');
slotContent.innerHTML = `<div style={slotStyles}>slot for shippingAddress Dynamic Area</div>`;
elementAboveCheckout.appendChild(slotContent);
Option Slot
Adding content into a clickable slot, slot_option_collection_point
- Create a new content element
- Add the slot attribute and ensure that it matches the target slot name
- Provide the necessary style attributes
- Append it beside/above the
<scayle-checkout/>
Webcomponent
The Option slot can be clickable. If content is injected into one of the non-selected Option slots, the slotContent will require an onclick attribute to dispatch an event that propagates the option click/switch on the checkout side. Make sure the event name matches with the slot name.
Since the content will be added into a clickable slot, make sure to dispatch a custom event so it can be propagated from checkout side.
element.onclick = () => element.dispatchEvent(new CustomEvent(<slot_name>, {
bubbles: true,
composed: true
}));
This is how the implementation looks for a clickable slot such as "slot_option_collection_point"
const slotContent = document.createElement('div');
const slotStyles = 'background: #f681076e; border-radius: 3px; padding: 16px; margin: 8px; border: 1px dashed; text-align: center;';
slotContent.setAttribute('slot', 'slot_option_collection_point');
slotContent.innerHTML = <div style={slotStyles}>Slot for shippingAddress Dynamic Area</div>; slotContent.onclick = () => slotContent.dispatchEvent(new CustomEvent("slot_option_collection_point", {
bubbles: true,
composed: true }));
elementAboveCheckout.appendChild(slotContent);
Visual Examples
Dynamic area slots
The following screen recordings show all of the places where the checkout is rendering dynamic area slots:
Option slots - (always visible)
The following screen recordings show all of the places where the checkout is rendering dynamic area slots. Note that the slots are rendered even if the option is not selected.
Auth step | Shipping step | Payment step |
---|---|---|
Selected Option slots - (only visible when option is selected)
The following screen recordings show all of the places where the checkout is rendering dynamic area slots. Note that the slots are rendered, only when the option is selected.
Auth step | Shipping step | Payment step |
---|---|---|
Dynamic Area slots and Selected Option slots
The following screen recordings by step show a combination of all dynamic area slots and selected option slots, but only when the option is selected.
Auth step | Shipping step | Payment step |
---|---|---|