Integrating Slots

Available slot names

A comprehensive list of all slot names where content can be added.

slot_dynamic_area_guest
slot_dynamic_area_register
slot_option_sign_in
slot_option_register
slot_option_guest
slot_option_selected_sign_in
slot_option_selected_register
slot_option_selected_guest

Styling

The content injected into the slot should come with its own styles as these are not inherited from the parent.

Since slots 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.

Methods

Within the window.scayleCheckoutFunctions.mutations object, we expose native checkout methods to be used within the storefront within slots implementation that requires logic such as immediately returning the current state.

The full types are listed below within the types section

Types

CheckoutState

AddressSuggestion

GiftCard

ConfirmOrderResponse

BasketItem

{
  id: string;
  brand: {
    id: number;
    name: string;
  };
  colors?: Array<{
    id: number;
    name: string;
  }>;
  displayData: {
    attributes?: Array<{
      label: Label;
      value: string;
    }>;
    identifier: Identifier;
    meta: Meta;
    name: Name;
  };
  discount: {
    sale: number;
    saleWithoutTax: number;
    promotion: number;
    campaign: number;
    campaignWithoutTax: number;
    voucher: number;
    voucherWithoutTax: number;
    total: number;
  };
  imageUrl: string;
  name: string;
  merchant: {
    id: number;
    variantId: string;
  };
  pdpUrl: string;
  productId: number;
  quantity: number;
  size: Size;
  styleKey: string;
  unit: {
    costWithTaxWithoutVoucher: number;
    costWithoutTaxWithoutVoucher: number;
    taxWithoutVoucher: number;
    taxRate: number;
  }
  variantId: number;
  voucherId: string;
  total: {
    costWithTaxWithoutDiscount: number;
    costWithTaxWithDiscount: number;
    costWithoutTaxWithDiscount: number;
    costWithoutTaxWithoutDiscount: number;
    itemGroups?: Record<string, ItemGroupTotal>;
  };
  additionalData?: {
    variantId: number;
    productId: number;
    sortingChannel: string;
    categoryName: string;
    categoryId: number;
    otherSource: boolean;
    virtualCategoryId: number;
    outfitId?: any;
    brandId?: any;
    storyId?: any;
    storyVirtualCategoryId?: any;
    storyEditorialId?: any;
    linkedContentType: string;
    linkedContentId: number;
    wt_sdk?: WtSdk;
    originDevice: string;
  };
  categories?: Array<{
    id: number;
    name: string;
  }>;
  categoryName?: any;
  deliveryForecast?: { deliverable?: string; subsequentDelivery?: string };
  isQuantityChangeDisabled?: boolean;
  itemGroup?: { id: string; isMainItem: boolean; isRequired: boolean };
  lowestPriorPrice?: { withTax: number };
  promotionId?: string;
  promotion?: Array<{
    id: string;
    code?: string;
    name?: string;
    discount: number;
    version: string;
  }>;
  warehouseId?: any;
  reference?: {
    costWithTax: number;
    dimension: string;
    unit: number;
  };
  maximumBuyableQuantityPerOrder?: number;
}

SignInPayload

RegisterPayload

SetPasswordForCustomerNumberPayload

SetBasketItemQuantityPayload

SetBasketItemQuantityContext

RemoveBasketItemPayload

RemoveBasketItemContext

SetCarrierAndShippingOptionPayload

SetCollectionPointPayload

AddressForSubmissionPayload

SetDynamicFieldsPayload

SetPaymentOptionPayload

UpdatePaymentOptionPayload

RemoveGiftCardPayload

AddGiftCardPayload

AddDiscountPayload

RemoveDiscountPayload

RemoveRecurringPaymentMethodPayload

LoyaltyProgramPayload

{ 
  membershipAccountNumber: string; 
  membershipTypeKey: string;
}

LoyaltyPromotionPayload

RedeemLoyaltyProgramPointsPayload

ConfirmOrderPayload

Examples

Show all available slot names on the page

Injecting static HTML into the top of the basket

Injected a web component within a slot element

Please contact your SCAYLE Account Manager for access to internally developed add-ons such as Ingrid.

Mutating the state

Native checkout functions are exposed via the window object and can be interacted with from the storefront. Above you find the entire list of exposed checkout mutations.

The above snippet of code will execute the addVoucher method with a code of "TEST123"

Listening for a change in the order state

Sorting Payment Options

window.scayleCheckoutFunctions.sortPaymentOptions = (paymentOptions => {
        return {
          ...paymentOptions,
          generic: paymentOptions.generic.sort((a, b) => b.paymentOptionProvider.localeCompare(a.paymentOptionProvider)),
        };
      });

Filtering Payment Options

The above filtering and sorting works after the next /state update call. When the checkout mounts, we automatically make this call which would filter the payment options and apply the filters on every subsequent /state update.

If it is needed to manually get the latest state immediately, this can be done by calling window.scayleCheckoutFunctions.mutations.getState()