Default theme reference

This entry contains documentation for all of our default theme's components.

address-fields

Displays a form to edit an address.

Usage of address-fields

<address-fields type="<>" initialAddress="<Address>"> </address-fields>

type:
initialAddress: Address

Default Template

<div>
<overridable name="address-fields" section="top"></overridable>
<fieldset class="snipcart-form__set">
    <div class="snipcart-form__row">
      <div class="snipcart-form__field snipcart-form__cell--large">
        <template v-if="useAutocomplete">
          <snipcart-address-autocomplete label="address_form.address1"></snipcart-address-autocomplete>
          <snipcart-field-error name="address1"></snipcart-field-error>
        </template>
        <template v-else>
          <snipcart-label
            class="snipcart__font--tiny"
            for="address1"
          >{{ $localize('address_form.address1') }}</snipcart-label>
          <snipcart-input name="address1"></snipcart-input>
          <snipcart-field-error name="address1"></snipcart-field-error>
        </template>
      </div>

      <div class="snipcart-form__field snipcart-form__cell--tidy">
        <snipcart-label
          class="snipcart__font--tiny"
          for="address2"
        >{{ $localize('address_form.address2') }}</snipcart-label>
        <snipcart-input name="address2"></snipcart-input>
        <snipcart-field-error name="address2"></snipcart-field-error>
      </div>
    </div>

    <div class="snipcart-form__field">
      <snipcart-label
        class="snipcart__font--tiny"
        for="city"
      >{{ $localize('address_form.city') }}</snipcart-label>
      <snipcart-input name="city"></snipcart-input>
      <snipcart-field-error name="city"></snipcart-field-error>
    </div>

    <div class="snipcart-form__field">
      <snipcart-label
        class="snipcart__font--tiny"
        for="country"
      >{{ $localize('address_form.country') }}</snipcart-label>
      <snipcart-typeahead type="dropdown" name="country" autocomplete="country"></snipcart-typeahead>
      <snipcart-field-error name="country"></snipcart-field-error>
    </div>

    <div class="snipcart-form__row">
      <div class="snipcart-form__field snipcart-form__cell--large">
        <snipcart-label
          class="snipcart__font--tiny"
          for="province"
        >{{ $localize('address_form.province') }}</snipcart-label>
        <snipcart-typeahead type="dropdown" name="province" autocomplete="province state"></snipcart-typeahead>
        <snipcart-field-error name="province"></snipcart-field-error>
      </div>

      <div class="snipcart-form__field snipcart-form__cell--tidy">
        <snipcart-label
          class="snipcart__font--tiny"
          for="postalCode"
        >{{ $localize('address_form.postalCode') }}</snipcart-label>
        <snipcart-input name="postalCode"></snipcart-input>
        <snipcart-field-error name="postalCode"></snipcart-field-error>
      </div>
    </div>
</fieldset>
<overridable name="address-fields" section="bottom"></overridable>
  </div>

address-formatted

Usage of address-formatted

<address-formatted address="<Address>"> </address-formatted>

address: Address

Default Template

<address v-if="address" class="snipcart-addresss-formatted">
	<span>{{ address.address1 }}</span>
	<span v-if="!!address.address2">, {{ address.address2 }}</span>
	<br/>
	<span>{{ `${address.city}, ${address.province}  ${address.postalCode}` }}</span>
	<br/>
	<span>{{ address.country }}</span>
</address>

authentication-view

Usage of authentication-view

<authentication-view> </authentication-view>

Default Template

<layout class="snipcart-layout--large">
  <div class="snipcart-layout__header">
    <overridable name="signin-form" section="header">
      <cart-header :back-button-title="$localize('signin_form.close_form')"></cart-header>
    </overridable>
  </div>
  <slot></slot>
</layout>

<base-button icon="<string>" label="<string>" labelLoading="<string>" labelError="<string>" labelSuccess="<string>" type="<ButtonTypes>" state="<BaseButtonStates>" hasIconLeft="<boolean>" isFitContent="<boolean>"> </base-button>

icon: string
label: string
labelLoading: string
labelError: string
labelSuccess: string
type: ButtonTypes
state: BaseButtonStates
hasIconLeft: boolean
isFitContent: boolean

Default Template

<!-- COMPONENT: base-button -->
<overridable name="base-button">
    <button 
        :class="['snipcart-base-button', ...buttonClass]" 
        :disabled="state === 'loading' || state === 'disabled'"
        :type="type"
        @click="handleClick"
    >
        <!-- Wrapper -->
        <div class="snipcart-base-button__wrapper">
            <!-- Label -->
            <div class="snipcart-base-button__label">
                <template v-if="state === 'loading'">
                    <slot name="label-loading">
                        {{ $localize(labelLoading) }}
                    </slot>
                </template>
                <template v-else-if="state === 'success'">
                    <slot name="label-success">
                        {{ $localize(labelSuccess) }}
                    </slot>
                </template>
                <template v-else-if="state === 'error'">
                    <slot name="label-error">
                        {{ $localize(labelError) }}
                    </slot>
                </template>
                <template v-else>
                    <slot name="default">
                        {{ $localize(label) }}
                    </slot>
                </template>
            </div>
            <!-- Icon -->
            <div class="snipcart-base-button__icon">
                <transition name="slide-up" mode="out-in">
                    <template v-if="state === 'loading'">
                        <slot name="icon-loading">
                            <spinner v-if="state === 'loading'"></spinner>
                        </slot>
                    </template>
                    <template v-else-if="state === 'success'">
                        <slot name="icon-checkmark">
                            <icon name="checkmark"></icon>
                        </slot>
                    </template>
                    <template v-else-if="state === 'error'">
                        <slot name="icon-alert">
                            <icon name="alert"></icon>
                        </slot>
                    </template>
                     <template v-else-if="icon">
                        <slot name="icon">
                            <icon :name="icon"></icon>
                        </slot>
                    </template>
                </transition>
            </div>
        </div>
        
    </button>
</overridable>

base-layout-sidebar

Usage of base-layout-sidebar

<base-layout-sidebar> </base-layout-sidebar>

Default Template

<div class="snipcart-layout-sidebar">
    <div class="snipcart-layout-sidebar__container">
        <aside class="snipcart-layout-sidebar__aside">
            <slot name="sidebar"></slot>
        </aside>
        <main class="snipcart-layout-sidebar__main">
            <slot></slot>
        </main>
    </div>
</div>

billing

Component that gathers billing address and customer information

Usage of billing

<billing> </billing>

Default Template

<snipcart-form @submit="save" id="snipcart-billing-form">
    <overridable name="billing">
        <div class="snipcart__box">
            <div class="snipcart__box--header">
                <div class="snipcart__box--title">
                    <div class="snipcart__box--badge snipcart__box--badge snipcart__box--badge-highlight snipcart__font--bold snipcart__font--secondary">{{ number }}</div>
                    <h1 class="snipcart__font--subtitle">
                        {{ $localize('billing.title') }}
                    </h1>
                </div>
            </div>

            <snipcart-form-error></snipcart-form-error>

            <overridable name="billing" section="top"></overridable>

            <fieldset class="snipcart-form__set">
                <template v-if="!splitName">
                    <div class="snipcart-form__field" v-if="!splitName">
                        <snipcart-label class="snipcart__font--tiny" for="name">
                            {{ $localize('address_form.name') }}
                        </snipcart-label>

                        <!-- Full name in same field -->
                        <snipcart-input name="name"  autocomplete="name"></snipcart-input>
                        <snipcart-field-error name="name"></snipcart-field-error>
                    </div>
                </template>
                <template v-else>
                    <div class="snipcart-form__field">
                        <snipcart-label class="snipcart__font--tiny" for="firstName">
                            {{ $localize('address_form.firstName') }}
                        </snipcart-label>

                        <snipcart-input name="firstName" autocomplete="given-name"></snipcart-input>
                        <snipcart-field-error name="firstName"></snipcart-field-error>
                    </div>
                    <div class="snipcart-form__field">
                        <snipcart-label class="snipcart__font--tiny" for="name">
                            {{ $localize('address_form.lastName') }}
                        </snipcart-label>

                        <snipcart-input name="name" autocomplete="family-name"></snipcart-input>
                        <snipcart-field-error name="name"></snipcart-field-error>
                    </div>
                </template>
                    
                <div class="snipcart-form__field">
                    <snipcart-label class="snipcart__font--tiny" for="email">
                        {{ $localize('address_form.email' )}}
                    </snipcart-label>

                    <snipcart-input name="email" v-if="!emailIsReadonly"></snipcart-input>
                    <span class="snipcart-input--readonly snipcart__font--secondary snipcart__font--bold" v-else>{{ customer.email }}</span>
                    <snipcart-field-error name="email"></snipcart-field-error>
                </div>

                <div class="snipcart-form__field" v-if="includePhone">
                    <snipcart-label class="snipcart__font--tiny" for="phone">
                        {{ $localize('address_form.phone' )}}
                    </snipcart-label>

                    <snipcart-input name="phone"></snipcart-input>
                    <snipcart-field-error name="phone"></snipcart-field-error>
                </div>
            </fieldset>

            <address-fields type="billing"></address-fields>

            <hr class="snipcart-form__separator" v-if="hasShippingStep" />

            <fieldset class="snipcart-form__set snipcart-form__set--different-shipping" v-if="hasShippingStep">
                <div class="snipcart-form__field">
                    <div class="snipcart-form__field-checkbox">
                        <snipcart-checkbox name="useDifferentShippingAddress"></snipcart-checkbox>

                        <snipcart-label class="snipcart__font--tiny snipcart-form__label--checkbox" for="useDifferentShippingAddress">
                            {{ $localize('billing.use_different_shipping_address') }}
                        </snipcart-label>
                    </div>
                </div>
            </fieldset>

            <overridable name="billing" section="bottom"></overridable>

            <div class="snipcart-form__footer">
                <snipcart-submit :label="labelSubmit"></snipcart-submit>
            </div>
        </div>
    </overridable>
</snipcart-form>

billing-completed

Usage of billing-completed

<billing-completed context="<string>"> </billing-completed>

context: string – Context in which this component is rendered

Default Template

<transition name="snipcart-billing-completed__slide-transition">
    <overridable name="billing-completed" :class="cssClasses">
        <div class="snipcart__box snipcart-billing-completed">
            <div class="snipcart-billing-completed__header snipcart__box--header">
                <div class="snipcart__box--title">
                    <div class="snipcart__box--badge snipcart__font--bold snipcart__font--secondary" v-if="checkout">
                        <icon name="checkmark" class="snipcart__icon"></icon>
                    </div>
                    <h1 class="snipcart-billing-completed__title snipcart__font--subtitle">
                        <icon name="user" class="snipcart__icon--left" v-if="!checkout"></icon>
                        {{ $localize('billing.title') }}
                    </h1>
                </div>

                <button-link
                    v-if="checkout"
                    label="actions.edit"
                    @click="edit"
                ></button-link>
            </div>
            
            <div class="snipcart-checkout-step__cols snipcart__font--std">
                <div class="snipcart-checkout-step__col">
                    <div class="snipcart-checkout-step__icon snipcart-billing-completed__step-icon">
                        <icon name="user"></icon>
                    </div>
                    <div>
                        <h3 class="snipcart-billing-completed__step-title snipcart__font--secondary snipcart__font--bold">{{ $localize('customer.information') }}</h3>
                        <span class="snipcart-billing-completed__information snipcart__font--std">{{ cart.billingAddress.fullName }}<br />{{ cart.email }}</span>
                    </div>
                </div>

                <div class="snipcart-checkout-step__col">
                    <div class="snipcart-checkout-step__icon snipcart-billing-completed__step-icon">
                        <icon name="location"></icon>
                    </div>
                    <div>
                        <h3 class="snipcart-billing-completed__step-title snipcart__font--secondary snipcart__font--bold">{{ $localize('billing.address') }}</h3>
                        <span class="snipcart-billing-completed__information snipcart__font--std">{{ cart.billingAddress | fullAddress }}</span>
                    </div>
                </div>
            </div>
        </div>
    </overridable>
</transition>

button-danger

Usage of button-danger

<button-danger icon="<string>" label="<string>" labelLoading="<string>" labelError="<string>" labelSuccess="<string>" type="<ButtonTypes>" state="<BaseButtonStates>" hasIconLeft="<boolean>" isFitContent="<boolean>"> </button-danger>

icon: string
label: string
labelLoading: string
labelError: string
labelSuccess: string
type: ButtonTypes
state: BaseButtonStates
hasIconLeft: boolean
isFitContent: boolean

Default Template

<!-- COMPONENT: button-danger -->
<overridable name="button-danger">
    <base-button 
        class="snipcart-button-danger"
        v-bind="{ ...$props, ...$attrs }"
        v-on="$listeners"
    >
        <template v-for="(value, name) in $slots" v-slot:[name]>
            <slot :name="name"></slot>
        </template>
    </base-button>
</overridable>

button-icon

Usage of button-icon

<button-icon url="<string>" icon="<string>" label="<string>" styling="<BaseButtonStyles>" state="<BaseButtonStates>" isSmall="<boolean>"> </button-icon>

url: string
icon: string
label: string
styling: BaseButtonStyles
state: BaseButtonStates
isSmall: boolean

Default Template

<!-- COMPONENT: button-icon -->
<overridable name="button-icon">
    <component
        :is="buttonType"
        v-if="icon"
        :class="['snipcart-button-icon', ...buttonClass]"
        :disabled="state === 'loading' || state === 'disabled'"
        :aria-label="$localize(label)"
        :title="$localize(label)"
        :href="url"
        @click="handleClick"
    >
        <slot>
            <icon :name="icon"></icon>
        </slot>
    </component>
</overridable>

button-link

Usage of button-link

<button-link label="<string>" type="<ButtonTypes>"> </button-link>

label: string
type: ButtonTypes

Default Template

<!-- COMPONENT: button-link -->
<overridable name="button-link">
    <button
        v-if="label"
        class="snipcart-button-link"
        :type="type"
        @click="handleClick"
    >
        <slot>{{ $localize(label) }}</slot>
    </button>
</overridable>

button-primary

Usage of button-primary

<button-primary icon="<string>" label="<string>" labelLoading="<string>" labelError="<string>" labelSuccess="<string>" type="<ButtonTypes>" state="<BaseButtonStates>" hasIconLeft="<boolean>" isFitContent="<boolean>"> </button-primary>

icon: string
label: string
labelLoading: string
labelError: string
labelSuccess: string
type: ButtonTypes
state: BaseButtonStates
hasIconLeft: boolean
isFitContent: boolean

Default Template

<!-- COMPONENT: button-primary -->
<overridable name="button-primary">
    <base-button 
        class="snipcart-button-primary"
        v-bind="{ ...$props, ...$attrs }"
        v-on="$listeners"
    >
        <template v-for="(value, name) in $slots" v-slot:[name]>
            <slot :name="name"></slot>
        </template>
    </base-button>
</overridable>

button-secondary

Usage of button-secondary

<button-secondary icon="<string>" label="<string>" labelLoading="<string>" labelError="<string>" labelSuccess="<string>" type="<ButtonTypes>" state="<BaseButtonStates>" hasIconLeft="<boolean>" isFitContent="<boolean>"> </button-secondary>

icon: string
label: string
labelLoading: string
labelError: string
labelSuccess: string
type: ButtonTypes
state: BaseButtonStates
hasIconLeft: boolean
isFitContent: boolean

Default Template

<!-- COMPONENT: button-secondary -->
<overridable name="button-secondary">
    <base-button 
        class="snipcart-button-secondary"
        v-bind="{ ...$props, ...$attrs }"
        v-on="$listeners"
    >
        <template v-for="(value, name) in $slots" v-slot:[name]>
            <slot :name="name"></slot>
        </template>
    </base-button>
</overridable>

card-icon

Usage of card-icon

<card-icon> </card-icon>

card-product

Usage of card-product

<card-product itemKey="<string>" name="<string>" image="<string>" quantity="<number>" price="<number>" currency="<string>" fileGuid="<string>" url="<string>"> </card-product>

itemKey: string
name: string
image: string
quantity: number
price: number
currency: string
fileGuid: string
url: string

Default Template

<div class="snipcart-card-product">
    <div class="snipcart-card-product__container">
        <img
            v-if="image"
            :src="image"
            :alt="name"
            class="snipcart-card-product__image"
        />
        <div class="snipcart-card-product__infos">
            <div class="snipcart-card-product__name">{{ name }}</div>
            <div class="snipcart-card-product__price-ctn">
                <div class="snipcart-card-product__quantity">{{ quantity }}</div>
                <div class="snipcart-card-product__by">×</div>
                <div class="snipcart-card-product__price">{{ price | money(currency) }}</div>
            </div>
        </div>
    </div>
    <div v-if="fileGuid" class="snipcart-card-product__download">
        <button-icon
            icon="continue-arrow"
            label="digital_goods.download"
            :url="url"></button-icon>
    </div>
</div>

cart

Usage of cart

<cart isSideCart="<boolean>" editingCart="<boolean>"> </cart>

isSideCart: boolean
editingCart: boolean – Indicates if the cart is currently opened as a side-panel over the checkout screen.

Default Template

<layout v-click-outside="clickedOutside">
        <overridable
            name="cart"
            section="header"
        >
            <cart-header
                title="header.title_cart_summary"
                :show-items-count="true"
                :show-account-menu="true"
                v-if="!editingCart"
            ></cart-header>
        </overridable>
        <loading-screen
            message="cart.loading"
            class="snipcart-layout__content"
            :class="layoutContentCssClasses"
        >
            <div
                class="snipcart-cart__secondary-header"
                v-if="editingCart"
            >
                <h1 class="snipcart__font--secondary snipcart-cart__secondary-header-title snipcart__font--bold snipcart__font--xlarge">
                    {{ $localize("header.title_cart_summary") }}
                </h1>
                <close-side-cart-action :is-cart-summary="!isSideCart">
                    <icon
                        name="plus"
                        class="snipcart__icon--medium snipcart__icon--angled"
                        alt="item.remove_item"
                    ></icon>
                </close-side-cart-action>
            </div>
            <flash-message
                class="snipcart-cart__flash-message"
                type="error"
                v-if="promptItemConfigurationError"
                :title="$localize(`errors.cart_items.${itemConfigurationErrorLocale}.title`)"
                :description="$localize(`errors.cart_items.${itemConfigurationErrorLocale}.description`)"
                icon="box"
            >
                <button-link
                    label="actions.clear_cart"
                    @click="clearCart"
                ></button-link>

                <button-link
                    label="actions.dismiss"
                    @click="dismissItemConfigurationError"  
                ></button-link>
            </flash-message>
            <overridable
                name="cart"
                v-if="hasItems"
            >
                <section class="snipcart-cart__content">
                    <item-list
                        item-template="item-line"
                        class="snipcart-item-list--no-shadow"
                        :show-description="!isSideCart"
                    >
                        <template
                            v-slot:footer
                            v-if="isSideCart && hasActiveDiscountsTriggerableByCode"
                        >
                            <li class="snipcart-item-line snipcart-item-line--cart-edit">
                                <div class="snipcart-item-line__container">
                                    <discount-box class="snipcart-cart__discount-box"></discount-box>
                                </div>
                            </li>
                        </template>
                    </item-list>
                    <div class="snipcart-cart__footer">
                        <div class="snipcart-cart__footer-col cart__footer-discount-box snipcart-cart__actions">
                            <discount-box
                                v-if="!isSideCart && hasActiveDiscountsTriggerableByCode"
                                class="snipcart-cart__discount-box"
                            ></discount-box>
                        </div>

                        <div class="snipcart-cart__footer-col">
                            <summary-fees
                                class="snipcart-cart-summary-fees--reverse"
                                :summary-data="summaryFeesProvider"
                            >
                                {{ $localize('cart.shipping_taxes_calculated_at_checkout')}}
                            </summary-fees>

                            <footer v-if="!editingCart || isSideCart" class="snipcart-cart__footer-buttons">
                                <flash-message
                                    type="error"
                                    v-if="errors != null"
                                    :title="$localize('errors.order_validation.custom_fields_validation.title')"
                                >
                                    {{$localize('errors.order_validation.custom_fields_validation.description')}}
                                </flash-message>
                                <!-- BUTTON: checkout -->
                                <button-primary
                                    label="actions.checkout"
                                    icon="continue-arrow"
                                    :state="checkoutDisabled ? 'disabled' : undefined"
                                    @click="checkout"
                                ></button-primary>
                                <button-link
                                    v-if="isSideCart"
                                    label="cart.view_detailed_cart"
                                    @click="viewDetailedCart"
                                ></button-link>
                            </footer>

                            <div class="snipcart-cart__featured-payment-methods-container">
                                <featured-payment-methods v-if="!editingCart"></featured-payment-methods>
                            </div>
                        </div>
                    </div>
                </section>
            </overridable>
            <empty-cart v-else></empty-cart>
        </loading-screen>
        <transition name="snipcart-transition--slide-in">
            <router-view />
        </transition>
    </layout>

cart-header

Component that shows the number of items in the cart and a way to close the cart.

Usage of cart-header

<cart-header title="<string>" showItemsCount="<boolean>" showAccountMenu="<boolean>" showSummary="<boolean>" showAccountLink="<boolean>" backButtonTitle="<string>"> </cart-header>

title: string
showItemsCount: boolean
showAccountMenu: boolean
showSummary: boolean
showAccountLink: boolean
backButtonTitle: string

Default Template

<header class="snipcart-cart-header" v-if="!loading">
    <close-cart-action class="snipcart-cart-header__close-button snipcart-modal__close">
        <icon class="snipcart-modal__close-icon" name="back-arrow"></icon>
        <span class="snipcart-modal__close-title snipcart__font--std">
            {{ backButtonTitle || $localize('actions.continue_shopping') }}
        </span>
    </close-cart-action>

    <media name="tablet, large" v-if="title">
        <h3 class="snipcart-cart-header__title snipcart__font--black snipcart__font--secondary">
            {{ $localize(title) }}
        </h3>
    </media>

    <div class="snipcart-cart-header__options">
        <sign-in-action tag="a" href="#/dashboard" class="snipcart-cart-header__option snipcart-cart-header__sign-in" v-if="showAccountMenu || showSummary">
            <icon name="user" class="snipcart-cart-header__icon"></icon>
            {{ $localize('signin_form.signin')}}
        </sign-in-action>

        <sign-out-action class="snipcart-cart-header__option snipcart-cart-header__sign-out" v-if="showAccountMenu || showSummary">
            <icon name="sign-out" class="snipcart-cart-header__icon"></icon>
            {{ $localize('customer_dashboard.sign_out')}}
        </sign-out-action>

        <customer-account-link tag="a" href="#/dashboard" class="snipcart-cart-header__option snipcart-cart-header__customer-account" v-if="(showAccountMenu || showSummary) && showAccountLink">
            <icon name="user" class="snipcart-cart-header__icon"></icon>
            {{ $localize('customer_dashboard.my_account') }}
        </customer-account-link>

        <show-detailed-cart-action class="snipcart-cart-header__option snipcart-cart-header__count snipcart__font--secondary snipcart__font--bold" v-if="showItemsCount">
            <icon name="cart" class="snipcart-cart-header__icon"></icon>
            <template v-if="!hasSubscription">
                {{ itemsCount }}
            </template>
        </show-detailed-cart-action>

        <media name="mobile, tablet" class="snipcart-modal__header-summary" v-if="showSummary && !loading">
            <div class="snipcart-modal__header-summary-title snipcart__font--large snipcart__font--secondary snipcart__font--bold" @click.prevent="toggleSummary">
                <icon name="cart" class="snipcart-cart-header__icon"></icon>
                <span>
                    {{ cart.total | money(cart.currency) }}
                </span>
                <icon :name="summaryIcon" class="snipcart-cart-header__icon snipcart__icon--medium"></icon>
            </div>

            <cart-summary class="snipcart-cart-summary--small" v-if="summaryVisible" @close="closeSummary">
            </cart-summary>
        </media>
    </div>
</header>
<header class="snipcart-cart-header" v-else>
    <close-cart-action class="snipcart-modal__close">
        <icon class="snipcart-modal__close-icon" name="back-arrow"></icon>
        <span class="snipcart-modal__close-title snipcart__font--std">
            {{ $localize('actions.continue_shopping') }}
        </span>
    </close-cart-action>
</header>

cart-summary

Usage of cart-summary

<cart-summary isSideCart="<boolean>"> </cart-summary>

isSideCart: boolean

Default Template

<div>
    <div>
        <overridable name="cart-summary">
            <div class="snipcart-cart-summary">
                <section class="snipcart-cart-summary__content">
                    <div class="snipcart-cart-summary__actions snipcart__box--header">
                        <h1 class="snipcart-cart-summary__title snipcart__font--subtitle">{{ $localize('cart.summary') }}</h1>
                        <button-link label="actions.edit" @click="openSideCart"></button-link>
                    </div>

                    <overridable
                        name="cart-summary"
                        section="items"
                    >
                        <cart-summary-items-list class="snipcart-cart-summary__items"></cart-summary-items-list>
                    </overridable>

                    <hr class="snipcart-cart-summary__separator" />

                    <loading-overlay>
                        <div class="snipcart-cart-summary__totals">
                            <summary-fees :summary-data="summaryFeesProvider"></summary-fees>
                        </div>
                    </loading-overlay>
                </section>

                <footer class="snipcart-cart-summary__footer">
                    <featured-payment-methods class="snipcart-featured-payment-methods--no-background"></featured-payment-methods>
                </footer>
            </div>
        </overridable>
    </div>

    <transition name="snipcart-cart-summary__overlay-transition">
        <div
            class="snipcart-cart-summary__overlay"
            v-if="editing"
        ></div>
    </transition>

    <transition name="snipcart-transition--slide-in">
        <cart
            :editing-cart="true"
            class="snipcart-cart-summary--edit"
            v-if="editing || isSideCart"
            :is-side-cart="isSideCart"
        ></cart>
    </transition>
</div>

cart-summary-expanded-item

Usage of cart-summary-expanded-item

<cart-summary-expanded-item item="<CartItem>"> </cart-summary-expanded-item>

item: CartItem

Default Template

<li class="snipcart-cart-summary-expanded-item">
    <div>
        <span class="snipcart-cart-summary-expanded-item__name snipcart__font--secondary snipcart__font--regular">{{ item.name }}</span>
        <ul class="snipcart-cart-summary-expanded-item__custom-fields">
            <li
                v-for="(customField, i) in visibleCustomFields"
                :key="i"
            >{{ customField.name }}: {{ customField.value }}</li>
        </ul>
    </div>
    <div class="snipcart-cart-summary-expanded-item--secondary snipcart-cart-summary-expanded-item__quantity">
        {{ $localize('item.quantity_short') }}: {{ item.quantity }}
    </div>
    <div class="snipcart-cart-summary-expanded-item--secondary snipcart-cart-summary-expanded-item__price snipcart__font--secondary snipcart__font--bold">
        {{ item.unitPrice | money(cart.currency) }}
    </div>
</li>

cart-summary-item

Component that renders an item from `CartSummaryItemsList` component.

Usage of cart-summary-item

<cart-summary-item item="<CartItem>"> </cart-summary-item>

item: CartItem – The item associated to the component instance.

Default Template

<slot v-bind="item">
    <li class="snipcart-cart-summary-item">
        <span class="snipcart-cart-summary-item__name snipcart__font--slim">
            {{ item.name }}
        </span>

        <span class="snipcart-cart-summary-item__quantity snipcart__font--slim">
            {{ $localize('cart_summary.quantity') }}{{ item.quantity }}
        </span>

        <span class="snipcart-cart-summary-item__price snipcart__font--slim">
            {{ item.totalPrice | money(currency) }}
        </span>
    </li>
</slot>

cart-summary-items-list

This component renders the list of items in the cart for the summary visible during checkout process.

Usage of cart-summary-items-list

<cart-summary-items-list tag="<string>" itemTemplate="<string>"> </cart-summary-items-list>

tag: string – Sets the root element tag.
itemTemplate: string – Sets the template to use for each item in the cart.

change-password-form

Usage of change-password-form

<change-password-form> </change-password-form>

Default Template

<div class="snipcart-change-password__box">
    <button
        @click="$actions.goToDashboard"
        class="snipcart-modal__close snipcart-orders-link"
    >
        <icon
            class="snipcart__close-icon"
            name="back-arrow"
        />
        <span class="snipcart__font--std snipcart-modal__close-label">
            {{  $localize('actions.back_to_orders') }}
        </span>
    </button>
    <overridable name="change-password-form">

        <div class="snipcart__box">
            <div class="snipcart__box--title">
                <h1 class="snipcart-change-password__title snipcart__font--subtitle">
                    {{ $localize('change_password_form.title') }}
                </h1>
            </div>
            <snipcart-form @submit="save"
                class="snipcart-change-password__form"
            >
                <snipcart-form-error></snipcart-form-error>

                <div class="snipcart-form__field">
                    <snipcart-label for="currentPassword">{{ $localize('change_password_form.current_password')}}</snipcart-label>
                    <snipcart-password
                        name="currentPassword"
                        icon="password"
                    ></snipcart-password>
                    <snipcart-field-error name="currentPassword"></snipcart-field-error>
                </div>
                <div class="snipcart-form__field">
                    <snipcart-label for="password">{{ $localize('change_password_form.password')}}</snipcart-label>
                    <snipcart-password
                        name="password"
                        icon="password"
                    ></snipcart-password>
                    <snipcart-field-error name="password"></snipcart-field-error>
                </div>
                <div class="snipcart-form__field">
                    <snipcart-label for="confirmationPassword">{{ $localize('change_password_form.confirmation_password')}}</snipcart-label>
                    <snipcart-password
                        name="confirmationPassword"
                        icon="password"
                    ></snipcart-password>
                    <snipcart-field-error name="confirmationPassword"></snipcart-field-error>
                </div>

                <snipcart-submit
                    icon="continue-arrow"
                    label="actions.save_changes"
                ></snipcart-submit>
            </snipcart-form>
        </div>
    </overridable>
</div>

checkout

Usage of checkout

<checkout> </checkout>

Default Template

<layout class="snipcart-layout--large">
    <overridable name="checkout" section="header" :class="layoutHeaderCssClasses">
        <cart-header class="snipcart-checkout__header" :show-items-count="false" :show-summary="true" :show-account-menu="showAccountMenu" @summaryOpened="summaryOpened" @summaryClosed="summaryClosed">
        </cart-header>
    </overridable>
    <loading-screen message="cart.loading">
        <overridable name="checkout" :class="layoutCssClasses" class="snipcart-layout__content">
            <div class="snipcart-checkout__content">
                <div class="snipcart-layout__cols">
                    <div class="snipcart-layout__col snipcart-layout__col--large" v-if="stepsReady">
                        <checkout-step
                            v-for="(step, key, index) in steps"
                            :key="key"
                            :name="step.components.edit"
                            @scrollTo="scrollTo"
                            :title="`${step.components.edit}.title`"
                            :number="index+1">
                        </checkout-step>
                    </div>
                    <media name="large" class="snipcart-layout__col">
                        <cart-summary />
                    </media>
                </div>
            </div>
        </overridable>
    </loading-screen>
    <transition name="snipcart-transition--slide-in">
        <router-view />
    </transition>
</layout>

checkout-step

Usage of checkout-step

<checkout-step number="<string>" name="<string>" title="<string>"> </checkout-step>

number: string
name: string
title: string

close-cart-action

Usage of close-cart-action

<close-cart-action> </close-cart-action>

close-side-cart-action

Usage of close-side-cart-action

<close-side-cart-action> </close-side-cart-action>

customer-account-link

Usage of customer-account-link

<customer-account-link> </customer-account-link>

customer-details

Usage of customer-details

<customer-details> </customer-details>

Default Template

<div class="snipcart-customer-details snipcart__box">
    <!-- Header -->
    <div class="snipcart-customer-details__header snipcart__box--header">
        <div class="snipcart__box--title">
            <h1 class="snipcart-customer-details__title snipcart__font--subtitle">
                {{ $localize('customer_details.title') }}
            </h1>
        </div>
    </div>

    <!-- Basic infos -->
    <div class="snipcart-customer-details__infos snipcart__font--std">
        {{ customer.billingAddress.name  }}
        <br v-if="customer.billingAddress.name" />
        {{ customer.email }}
    </div>

    <!-- Billing address -->
     <customer-details-group
        v-if="customer.billingAddress.hasMinimalRequiredInfo"
        icon-name="location"
        :title="$localize('billing.address')"
        :handle-action-click="editBillingAddress"
        :action="billingAddressAction"
    >
        <address-formatted :address="customer.billingAddress"></address-formatted>
    </customer-details-group>

    <!-- Shipping address -->
     <customer-details-group
        v-if="customer.shippingAddress && customer.shippingAddress.hasMinimalRequiredInfo"
        icon-name="location"
        :title="$localize('shipping.address')"
        :handle-action-click="editShippingAddress"
        :action="shippingAddressAction"
    >
        <address-formatted :address="customer.shippingAddress"></address-formatted>
    </customer-details-group>

    <!-- Password -->
     <customer-details-group
        iconName="lock"
        :title="$localize('signin_form.password')"
        :handle-action-click="editPassword"
        action="edit"
    >
    •••••••••••••••••••
    </customer-details-group>

    <!-- Payment infos -->
    <payment-info v-if="isDisplayCustomerDetails" :customer-details="customerDetails"></payment-info>
</div>

customer-details-group

Usage of customer-details-group

<customer-details-group iconName="<string>" title="<string>" action="<CustomerDetailsAction>" handleActionClick="<any>"> </customer-details-group>

iconName: string
title: string
action: CustomerDetailsAction
handleActionClick: any

Default Template

<div class="snipcart-customer-details-group">
	<!-- Icon -->
	<div v-if="iconName" class="snipcart-customer-details-group__icon">
		<icon :name="iconName"></icon>
	</div>
	<!-- Title -->
	<h2 
		v-if="title" 
		class="snipcart-customer-details-group__title snipcart__font--subtitle-small">
		{{ title }}
	</h2>
	<!-- Action -->
	<button-link
		v-if="action !== 'none'"
		class="snipcart-customer-details-group__action"
		:label="buttonLabel"
		@click="handleActionClick"
	></button-link>
	<!-- Content -->
	<div :class="`snipcart-customer-details-group__content ${!title ? 'is-header' : ''}`">
		<slot></slot>
	</div>
</div>

customer-notification

Usage of customer-notification

<customer-notification notification="<CustomerNotificationDto>"> </customer-notification>

notification: CustomerNotificationDto

customer-notifications-list

Usage of customer-notifications-list

<customer-notifications-list notifications="<>"> </customer-notifications-list>

notifications:

dashboard

Usage of dashboard

<dashboard> </dashboard>

Default Template

<layout>
    <overridable
        name="dashboard"
        section="header">
        <cart-header
            title="customer_dashboard.my_account"
            :show-items-count="true"
            :show-account-menu="true"
            :show-account-link="false"
        ></cart-header>
    </overridable>
    <customer-notifications-list :notifications="notifications">
    </customer-notifications-list>
    <router-view></router-view>
</layout>

dashboard-home

Usage of dashboard-home

<dashboard-home> </dashboard-home>

Default Template

<base-layout-sidebar>
    <!-- Sidebar -->
    <template v-slot:sidebar>
        <overridable name="customer-details">
            <customer-details></customer-details>
        </overridable>
    </template>
     <!-- Main -->
    <overridable name="dashboard">
        <tabs>
            <tab :name="$localize('customer_dashboard.orders')">
                <orders-list></orders-list>
            </tab>
            <tab v-if="subscriptionsIsEnabled" :name="$localize('customer_dashboard.subscriptions')">
                <subscriptions-list></subscriptions-list>
            </tab>
        </tabs>
    </overridable>
</base-layout-sidebar>

disabled-checkout-step

Usage of disabled-checkout-step

<disabled-checkout-step error="<>"> </disabled-checkout-step>

error:

discount-box

Usage of discount-box

<discount-box> </discount-box>

edit-customer-address-form

Usage of edit-customer-address-form

<edit-customer-address-form addressType="<>"> </edit-customer-address-form>

addressType:

Default Template

<div class="snipcart-edit-customer-address__box">
    <button
        @click="$actions.goToDashboard"
        class="snipcart-modal__close snipcart-orders-link"
    >
        <icon
            class="snipcart__close-icon"
            name="back-arrow"
        />
        <span class="snipcart__font--std snipcart-modal__close-label">
            {{  $localize('actions.back_to_orders') }}
        </span>
    </button>

    <overridable name="edit-customer-address-form">

        <div class="snipcart__box">

                <div class="snipcart__box--title">
                    <h1 v-if="addressType === 'billing'" class="snipcart-edit-customer-address__title snipcart__font--subtitle">
                        {{ $localize('billing.address') }}
                    </h1>
                    <h1 v-if="addressType === 'shipping'" class="snipcart-edit-customer-address__title snipcart__font--subtitle">
                        {{ $localize('shipping.address') }}
                    </h1>
                </div>

            <snipcart-form @submit="save"
                class="snipcart-edit-customer-address__form"
            >

                <snipcart-form-error></snipcart-form-error>

                <fieldset class="snipcart-form__set">
                    <div class="snipcart-form__field">
                        <snipcart-label
                            class="snipcart__font--tiny"
                            for="name"
                        >
                            {{ $localize('address_form.name') }}
                        </snipcart-label>

                        <snipcart-input name="name"></snipcart-input>
                        <snipcart-field-error name="name"></snipcart-field-error>
                    </div>
                </fieldset>
                <address-fields
                    :type="addressType"
                    :initial-address="initialAddress"
                ></address-fields>

                <overridable
                    name="edit-address"
                    section="bottom"
                ></overridable>

                <snipcart-submit
                    label="actions.save_changes"
                    icon="continue-arrow"
                ></snipcart-submit>
            </snipcart-form>
        </div>
    </overridable>
</div>

edit-shipping-address-button

Usage of edit-shipping-address-button

<edit-shipping-address-button> </edit-shipping-address-button>

empty-cart

Usage of empty-cart

<empty-cart> </empty-cart>

Default Template

<section class="snipcart-empty-cart">
    <h1 class="snipcart-empty-cart__title snipcart__font--secondary snipcart__font--xlarge snipcart__font--bold">
        {{ $localize('cart.empty') }}
    </h1>
    <button-secondary
        icon="back-arrow"
        label="actions.back_to_store"
        has-icon-left
        is-fit-content
        @click="$actions.goBack"
    ></button-secondary>
</section>

error-message

Usage of error-message

<error-message title="<string>" description="<string>" technicalDetail="<string>" actionRequired="<boolean>" showTechnicalDetail="<boolean>"> </error-message>

title: string
description: string
technicalDetail: string
actionRequired: boolean
showTechnicalDetail: boolean

Default Template

<div class="snipcart-error-message">
    <!-- Error -->
    <flash-message
        type="error"
        :title="title"
        :description="description"
    >
        <!-- Action (if required) -->
        <rectify-cart-action
            v-if="actionRequired"
            class="snipcart-error-message__action"
        >
            {{ $localize('actions.apply_changes') }}
        </rectify-cart-action>
    </flash-message>
    <!-- Technical detail -->
    <flash-message
        v-if="showTechnicalDetail && technicalDetail"
        type="info"
        icon="console"
        :description="technicalDetail"
    >
        <em class="snipcart__font--tiny">
            *Notices like this one are only shown in Test mode to help you diagnose issues.
        </em>
    </flash-message>
</div>

fancy-select

Usage of fancy-select

<fancy-select searchProvider="<>" options="<>" id="<string>" name="<string>" enableAutofill="<boolean>" value="<>" styleAutofilled="<{}>" persistSearchResults="<boolean>" useSoftSuggestions="<boolean>" label="<string>" isValid="<boolean>"> </fancy-select>

searchProvider:
options:
id: string
name: string
enableAutofill: boolean
value:
styleAutofilled: {}
persistSearchResults: boolean
useSoftSuggestions: boolean
label: string
isValid: boolean

featured-payment-methods

Component that shows the list of accepted payment methods. You must override this component if you want to change this list.

Usage of featured-payment-methods

<featured-payment-methods> </featured-payment-methods>

Default Template

<div class="snipcart-featured-payment-methods">
    <h3 class="snipcart__font--secondary snipcart__font--bold  snipcart-featured-payment-methods__title">
        <a :href="securedByUrl" class="snipcart-featured-payment-methods__link" target="_blank" rel="nofollow noopener">
            <icon name="lock" class="snipcart-featured-payment-methods__title-icon"></icon>
            {{ $localize('cart.secured_by') }}
        </a>
    </h3>
    <ul class="snipcart-featured-payment-methods__list">
        <li class="snipcart-featured-payment-methods__list-item">
            <icon name="visa" alt="Visa" class="snipcart__icon--brand"></icon>
        </li>
        <li class="snipcart-featured-payment-methods__list-item">
            <icon name="mastercard" alt="Mastercard" class="snipcart__icon--brand"></icon>
        </li>
    </ul>
</div>

flash-message

Component that displays error messages

Usage of flash-message

<flash-message title="<string>" type="<string>" description="<string>" icon="<string>"> </flash-message>

title: string – Title of the error
type: string – One of 'success', 'error', 'info'
description: string – Description of the error
icon: string – Icon of the error

Default Template

<div class="snipcart-flash-message" :class="(`snipcart-flash-message--${type}`)">
<icon :name="icon" class="snipcart-flash-message__icon" v-if="icon"></icon>
<div class="snipcart-flash-message__content">
  <h2
    class="snipcart-flash-message__title snipcart__font--secondary snipcart__font--black snipcart__font--large"
    v-if="title"
  >{{ title }}</h2>
  <p
    class="snipcart-flash-message__description snipcart__font--std"
    v-if="description"
    v-html="description"
  ></p>
  <div class="snipcart-flash-message__action-container snipcart__font--std snipcart__font--black" v-if="hasAction">
    <slot></slot>
  </div>
</div>
  </div>

forgot-password-form

Usage of forgot-password-form

<forgot-password-form> </forgot-password-form>

Default Template

<authentication-view>
    <overridable name="forgot-password-form">
        <div class="snipcart__box snipcart-forgot-password snipcart-forgot-password__box">
            <template v-if="!emailSent">
                <h2 class="snipcart__font--subtitle snipcart-forgot-password__title">
                    {{ $localize('forgot_password_form.title')}}
                </h2>

                <p class="snipcart-forgot-password__instructions">
                    {{ $localize('forgot_password_form.instructions') }}
                </p>

                <snipcart-form @submit="save" class="snipcart-forgot-password__form">

                    <snipcart-form-error></snipcart-form-error>

                    <div class="snipcart-form__field">
                        <snipcart-label for="email">{{ $localize('forgot_password_form.email')}}</snipcart-label>
                        <snipcart-input name="email" type="email"></snipcart-input>
                        <snipcart-field-error name="email"></snipcart-field-error>
                    </div>
                    
                    <snipcart-submit
                        label="forgot_password_form.action"
                        icon="continue-arrow"
                    ></snipcart-submit>
                </snipcart-form>
            </template>
            <template v-else>
                <h2 class="snipcart__font--subtitle snipcart-forgot-password__title">
                    {{ $localize('forgot_password_form.title')}}
                </h2>
                <p class="snipcart-forgot-password__instructions">
                    {{ $localize('forgot_password_form.email_instructions') }}
                </p>
            </template>

        </div>
    </overridable>
</authentication-view>

guest-checkout

Usage of guest-checkout

<guest-checkout> </guest-checkout>

Default Template

<div class="snipcart-guest-checkout">
    <div class="snipcart-guest-checkout__wrapper">
        <div class="snipcart-guest-checkout__or">{{ $localize('guest_checkout.or')}}</div>
        <div class="snipcart-guest-checkout__seperator"></div>
    </div>
    <router-link
    to="/checkout"
    class="snipcart-guest-checkout__link snipcart__font--black"
    >{{ $localize('guest_checkout.continue_as_a_guest')}}</router-link>
</div>

icon

Display one of the built-in icons

Usage of icon

<icon name="<string>" custom="<boolean>" tooltip="<string>" width="<number>" height="<number>" alt="<string>"> </icon>

name: string – Name of the icon to show

Can be one of: alert, back-arrow, box, cart, checkmark, chevron-down, chevron-up, continue-arrow, green-check, location, lock, mastercard, minus, password, pin, plus, trash, user, visa, spinner, spinner-white, question-mark, front, console, sign-out, discount, cross, card-amex, card-dinersclub, card-discover, card-elo, card-hipercard, card-jcb, card-maestro, card-mastercard, card-mir, card-unionpay, card-unknown, card-visa, card-alipay, card-verve, card-paypal, card-dankort, card-uatp, method-apple_pay, method-bancontact, method-belfius, method-card, method-eps, method-giropay, method-ideal, method-ing_home_pay, method-kbc, method-klarna_pay_later, method-klarna_slice_it, method-p24, method-paypal, method-bank_transfer, method-sofort, method-paypal_express_checkout, method-bank_transfer, alert, back-arrow, box, cart, checkmark, chevron-down, chevron-up, continue-arrow, green-check, location, lock, mastercard, minus, password, pin, plus, trash, user, visa, spinner, spinner-white, question-mark, front, console, sign-out, discount, cross, card-amex, card-dinersclub, card-discover, card-elo, card-hipercard, card-jcb, card-maestro, card-mastercard, card-mir, card-unionpay, card-unknown, card-visa, card-alipay, card-verve, card-paypal, card-dankort, card-uatp, method-apple_pay, method-bancontact, method-belfius, method-card, method-eps, method-giropay, method-ideal, method-ing_home_pay, method-kbc, method-klarna_pay_later, method-klarna_slice_it, method-p24, method-paypal, method-bank_transfer, method-sofort, method-paypal_express_checkout or method-bank_transfer
custom: boolean
tooltip: string – the title
width: number – Width of the icon in number of pixels
height: number – Height of the icon in number of pixels
alt: string – Alt text to use for accessibility

item-custom-fields

Usage of item-custom-fields

<item-custom-fields> </item-custom-fields>

item-description

Usage of item-description

<item-description> </item-description>

item-image

Usage of item-image

<item-image alt="<string>"> </item-image>

alt: string

item-line

Component that shows the details of an item in the cart. Child of `item-list`.

Usage of item-line

<item-line tag="<string>" item="<CartItem>" showDescription="<boolean>"> </item-line>

tag: string – Sets the root element tag.
item: CartItem
showDescription: boolean

Default Template

<li :class="{'snipcart-item-line': true, 'snipcart-item-line--cart-edit': editingCart}">
    <flash-message
        type="info"
        icon="box"
        v-if="stockLimitReached"
        :title="$localize('errors.quantity_revised')"
    ></flash-message>
    <flash-message
        type="error"
        icon="box"
        v-if="outOfStock"
        :title="$localize('errors.quantity_out_of_stock')"
    ></flash-message>
    <div class="snipcart-item-line__container">
        <figure
            class="snipcart-item-line__media"
            v-if="showLargeImage"
        >
            <item-image class="snipcart-item-line__image"></item-image>
        </figure>
        <div class="snipcart-item-line__product">
            <div class="snipcart-item-line__header">
                <figure
                    class="snipcart-item-line__media snipcart-item-line__media--small"
                    v-if="showSmallImage"
                >
                    <item-image class="snipcart-item-line__image"></item-image>
                </figure>

                <h2 class="snipcart-item-line__title snipcart__font--xlarge snipcart__font--secondary snipcart__font--black">
                    {{ item.name }}
                </h2>

                <button-icon
                    icon="trash"
                    label="item.remove_item"
                    styling="danger"
                    @click="removeItem"
                ></button-icon>
            </div>

            <div class="snipcart-item-line__content">
                <div class="snipcart-item-line__body">
                    <div class="snipcart-item-line__info">
                        <item-description v-if="showDescription"></item-description>
                    </div>
                    <div class="snipcart-item-line__variants">
                        <div>
                            <item-plans
                                :item="item"
                                v-if="!adding && isSubscribable"
                            ></item-plans>
                            <item-custom-fields v-if="!adding"></item-custom-fields>
                        </div>
                        <item-quantity
                            class="snipcart-item-line__quantity"
                            v-if="!adding && !isSubscribable"
                            :disabled="outOfStock || isSubscribable"
                        ></item-quantity>
                        <div
                            class="snipcart-form__field snipcart-form__field--plan snipcart-form__field--plan--billed-on"
                            v-if="isSubscribable && !adding"
                        >
                            <span class="snipcart-form__label snipcart__font--tiny">
                                {{$localize('subscription.payment_amount')}}
                            </span>
                            <div class="snipcart-form__field--plan__readonly">
                                <item-price
                                    :item="item"
                                    :selected-plan="selectedPlan"
                                >
                                </item-price>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</li>

item-list

Component that shows the cart items list.

Usage of item-list

<item-list tag="<string>" itemTemplate="<string>" showDescription="<boolean>"> </item-list>

tag: string – Set the root element tag, default
itemTemplate: string – Template used to render each item line.
showDescription: boolean

item-quantity

Usage of item-quantity

<item-quantity disabled="<boolean>"> </item-quantity>

disabled: boolean

layout

Usage of layout

<layout headerTitle="<string>" contentCssClass="<any>" headerCssClass="<any>"> </layout>

headerTitle: string
contentCssClass: any
headerCssClass: any

loading-component

Component that renders a loading screen while an async operation is in progress.

Usage of loading-component

<loading-component message="<string>" isLoading="<boolean>"> </loading-component>

message: string – The loading message
isLoading: boolean

Default Template

<div>
    <slot v-if="!isLoading"></slot>
    <overridable name="loading-component" v-else>
        <div class="snipcart-loading-component">
            <div class="snipcart-loading-component__content">
                <icon name="spinner" class="snipcart-loading-component__icon"></icon>
                <span class="snipcart-loading-component__content__message">
                    {{ localizedLoadingMessage }}
                </span>
            </div>
        </div>
    </overridable>
</div>

loading-overlay

An overlay to show on top of content that is being loaded / updated.

Usage of loading-overlay

<loading-overlay icon="<string>" message="<string>" showIcon="<boolean>" opaque="<boolean>"> </loading-overlay>

icon: string – The loading icon
message: string – Loading message
showIcon: boolean
opaque: boolean

loading-screen

Component that renders a loading screen while an async operation is in progress.

Usage of loading-screen

<loading-screen message="<string>" delay="<number>" tag="<string>"> </loading-screen>

message: string – The loading message
delay: number – Delay before displaying loading
tag: string – Sets the root element tag.

Default Template

<component :is="tag">
    <slot v-if="!loading"></slot>
    <overridable name="loading-screen" v-else>
        <div class="snipcart__loading__screen">
            <div :class="[
                'snipcart__loading__screen__content',
                displaySpinner ? 'is-visible' : null,
            ]">
                <icon name="spinner" class="snipcart__loading__screen__icon"></icon>
                <span class="snipcart__loading__screen__content__message">
                    {{ localizedLoadingMessage }}
                </span>
            </div>
        </div>
    </overridable>
</component>

media

Usage of media

<media> </media>

open-side-cart-action

Usage of open-side-cart-action

<open-side-cart-action> </open-side-cart-action>

order

Usage of order

<order date="<string>" total="<number>" currency="<string>" token="<string>" items="<>" invoiceUrl="<string>" invoiceNumber="<string>" status="<string>" hasActiveSubscription="<boolean>"> </order>

date: string
total: number
currency: string
token: string
items:
invoiceUrl: string
invoiceNumber: string
status: string
hasActiveSubscription: boolean

Default Template

<layout class="snipcart-layout--large snipcart-cart__order-container">
    <overridable name="order" section="header">
        <cart-header class="snipcart-checkout__header" :show-items-count="false" :show-summary="false" :show-account-menu="false">
        </cart-header>
    </overridable>

    <overridable name="order" section="content">
        <loading-screen message="order.loading" class="snipcart-layout__content">
            <div v-if="cart">
                <div class="snipcart-order__details">
                    <overridable name="order" section="content-header">
                        <div class="snipcart__box snipcart-order__box snipcart-order__box__header">
                            <div class="snipcart__box--title">
                                <div class="snipcart__box--badge snipcart__box--badge snipcart__box--badge-highlight snipcart__font--bold snipcart__font--secondary">
                                    <icon name="checkmark" class="snipcart__icon"></icon>
                                </div>
                                <div>
                                    <h1 class="snipcart__font--subtitle">{{ $localize('confirmation.thank_you_for_your_order') }}</h1>
                                </div>
                            </div>
                            <div v-if="isConfirmationAsync" class="snipcart-order__async-confirmation-notice">
                                <flash-message type="success">
                                    {{ $localize('confirmation.async_confirmation_notice') }}
                                </flash-message>
                            </div>
                            <div v-else class="snipcart-order__invoice-number">
                                {{ $localize('cart.invoice_number') }} : <em class="snipcart-order__invoice-number--highlight snipcart__font--black snipcart__font--secondary">{{ cart.invoiceNumber }}</em>
                            </div>
                        </div>
                    </overridable>
                        
                    <overridable name="order" section="content-main">
                        <div class="snipcart-order__details__content">
                            <div class="snipcart__box snipcart-order__box">
                                <div class="snipcart-order__details-title snipcart__box--subtitle">
                                    <icon name="cart" class="snipcart__icon--left snipcart__icon--blue-dark"></icon>
                                    <h1 class="snipcart__font--subtitle">{{ $localize('header.title_cart_summary') }}</h1>
                                </div>

                                <cart-summary-items-list item-template="cart-summary-expanded-item"></cart-summary-items-list>
                            </div>

                            <billing-completed context="invoice" class="snipcart-billing-completed--titled snipcart-order__box"></billing-completed>
                            <shipping-completed context="invoice" class="snipcart-shipping-completed--titled snipcart-order__box" v-if="cart.shippingDetails.method"></shipping-completed>
                            <order-payment-details v-if="showPayment"></order-payment-details>
                            <footer class="snipcart__box snipcart-order__box snipcart-order__footer">
                                <summary-fees class="snipcart-order__fees" :summary-data="summaryFeesProvider"></summary-fees>
                            </footer>
                        </div>
                    </overridable>
                </div>
            </div>
        </loading-screen>
    </overridable>
</layout>

order-payment-details

Usage of order-payment-details

<order-payment-details> </order-payment-details>

Default Template

<div class="snipcart__box snipcart-order__box">
    <div class="snipcart-order__title snipcart__box--subtitle">
        <icon name="method-card" class="snipcart__icon--left snipcart__icon--blue-dark" width="17" height="16"></icon>
        <h1 class="snipcart__font--subtitle">{{ $localize('payment.title') }}</h1>
    </div>

    <div class="snipcart__box--content" v-if="paymentDetails.method == 'card' || paymentDetails.method == 'deferred_payment'">
        <h3 class="snipcart-order__step-title snipcart__font--secondary snipcart__font--bold">
            {{ $localize(`payment.methods.${paymentDetails.method}`) }}
        </h3>
        <div v-if="paymentDetails.method == 'card'" class="snipcart-order__card snipcart__font--std">
            <card-icon></card-icon>&nbsp;{{ cardLast4 }}
        </div>
    </div>
    <div class="snipcart__box--content" v-else-if="paymentIsPending">
        {{ $localize('payment.still_pending_notice') }}
    </div>
    <div class="snipcart__box--content" v-else>
        <div class="snipcart-order__card snipcart__font--std">
            <icon v-if="paymentMethodIconExists" :name="paymentMethodIconName" class="snipcart__icon--default"></icon>
            <div v-else-if="paymentDetails">
                <img v-if="paymentDetails.iconUrl" :src="paymentDetails.iconUrl" class="snipcart__icon--default" />
                <div class="snipcart-order__payment-method" v-else>
                    {{ paymentDetails.display }}
                </div>
                <p v-if="paymentDetails.instructions" class="snipcart-order__payment-instructions">{{ paymentDetails.instructions }}</p>
            </div>
        </div>
    </div>
</div>

orders-list

Usage of orders-list

<orders-list> </orders-list>

Default Template

<paginated-list
    :on-fetch-next-page="snipcart.api.customer.fetchOrders"
    :item-component="itemComponent"
    :props-provider="propsProvider"
    message-loading="customer_dashboard.loading"
    message-no-result="customer_dashboard.no_orders"
    label-show-more="customer_dashboard.show_more_orders"
></paginated-list>

paginated-list

Usage of paginated-list

<paginated-list onFetchNextPage="<(limit: number, offset: number) => Promise<PagedResponse<CustomerOrderResponse | CustomerSubscriptionsResponse>>>" messageLoading="<string>" messageNoResult="<string>" labelShowMore="<string>" itemComponent="<>" itemPropName="<string>" propsProvider="<Constructable>"> </paginated-list>

onFetchNextPage: (limit: number, offset: number) => Promise<PagedResponse<CustomerOrderResponse | CustomerSubscriptionsResponse>>
messageLoading: string
messageNoResult: string
labelShowMore: string
itemComponent:
itemPropName: string
propsProvider: Constructable

Default Template

<loading-screen 
    :message="messageLoading" 
    :delay="200"
    class="snipcart-paginated-list">
    <!-- List -->
    <template v-if="providedItems">
        <!-- Items -->
        <component
            class="snipcart-paginated-list__item"
            v-for="item in providedItems"
            v-bind="{...item}"
            :key="item.token"
            :is="itemComponent"
        ></component>
        <!-- Button: more -->
        <button-primary
            v-if="hasNextPage"
            :label="$localize(labelShowMore, { smart_count: numberToFetch })"
            @click="fetchNextPage"
        ></button-primary>
    </template>
    <!-- No results -->
    <div v-else class="snipcart-paginated-list__notice">
        {{ $localize(messageNoResult) }}
    </div>
</loading-screen>

payment

Usage of payment

<payment> </payment>

Default Template

<snipcart-form @submit="confirmOrder" class="snipcart-payment snipcart__box">

    <div class="snipcart__box--header">
        <div class="snipcart__box--title">
        <div class="snipcart__box--badge snipcart__box--badge snipcart__box--badge-highlight snipcart__font--bold snipcart__font--secondary">{{ number }}</div>
        <h1 class="snipcart-payment__header snipcart__font--subtitle">{{ $localize("payment.title") }}</h1>
        </div>
    </div>

    <overridable name="payment" section="top"></overridable>

    <div v-if="noPaymentsRequired">
        <p class="snipcart-payment__no-payment">{{ $localize('payment.no_payment') }}</p>
        <snipcart-submit 
            label="payment.place_order" 
            label-loading="payment.processing_payment"
            icon="continue-arrow"
        ></snipcart-submit>
    </div>
    <loading-overlay
        v-else
        class="snipcart-payment__loading"
        :message="$localize('payment.preparing_payment_session')"
        :opaque="true"
    >
        <snipcart-form-error fallback="payment_failed"></snipcart-form-error>
        <div
            v-if="authorizationFlowIsForm" 
            class="snipcart-payment__form-container"
            :class="{'snipcart-payment__form-container--loading': loading}">

            <payment-form 
                :payment-method="paymentSession.paymentMethod"
                :key="paymentSession.paymentMethod"
                :disabled="paymentMethodCurrentlyChanging"
                :payment-currently-proccessing="paymentCurrentlyProccessing">
            </payment-form>
        </div>

        <hr v-if="authorizationFlowIsForm && hasRedirectPaymentMethod" class="snipcart-form__separator" />

        <payment-methods-list  :disabled="paymentCurrentlyProccessing" ></payment-methods-list>
    </loading-overlay>

    <overridable name="payment" section="bottom"></overridable>

</snipcart-form>

payment-completed

Component that renders when the payment is completed.

Usage of payment-completed

<payment-completed> </payment-completed>

payment-details

Usage of payment-details

<payment-details paymentDetailsData="<PaymentDetailsProvider>" updatable="<boolean>"> </payment-details>

paymentDetailsData: PaymentDetailsProvider
updatable: boolean

Default Template

<div
    class="snipcart-payment-details"
    v-if="paymentDetailsData.method == 'card' || paymentDetailsData.method =='deferred_payment'"
>

    <div class="snipcart-payment-details__header">
        <h3 class="snipcart-payment-details__method snipcart__font--secondary snipcart__font--bold">
            {{ $localize(`payment.methods.${paymentDetailsData.method}`) }}
        </h3>
        <button-link
            v-if="updatable"
            label="actions.edit"
            @click="gotoPaymentMethod"
        ></button-link>
    </div>
    
    <div
        v-if="paymentDetailsData.method == 'card' && paymentDetailsData.card"
        class="snipcart-payment-details__card snipcart__font--std"
    >
        <card-icon></card-icon>&nbsp;{{ paymentDetailsData.card.last4 | cardNumber }}
    </div>
    
</div>

payment-form

Component that renders a credit card form.

Usage of payment-form

<payment-form disabled="<boolean>" paymentMethod="<PaymentMethodIds>" paymentCurrentlyProccessing="<boolean>"> </payment-form>

disabled: boolean
paymentMethod: PaymentMethodIds
paymentCurrentlyProccessing: boolean

payment-info

Usage of payment-info

<payment-info customerDetails="<>"> </payment-info>

customerDetails:

Default Template

<div 
    class="snipcart-payment-info" 
    v-if="customerDetails.length > 0"
>
    <div class="snipcart-payment-info__header snipcart__box--header">
        <div class="snipcart__box--title">
            <h1 class="snipcart__font--subtitle">
                {{ $localize('customer.payment_info') }}
            </h1>
        </div>
    </div>
    <div class="snipcart-payment-info__details-ctn">
        <payment-details
            v-for="details in customerDetails"
            :updatable="true"
            :payment-details-data="buildPaymentDetailsProvider(details)"
            :key="details.customerGatewayId"
        ></payment-details>
    </div>
</div>

payment-methods-list

Component that shows the list of available payment methods on the current payment session

Usage of payment-methods-list

<payment-methods-list disabled="<boolean>"> </payment-methods-list>

disabled: boolean

Default Template

<loading-overlay :message="$localize('payment.preparing_payment_session')" class="snipcart-payment-methods-list__container" :opaque="true">
    <ul class="snipcart-payment-methods-list snipcart__font--secondary snipcart__font--bold" v-if="paymentMethods.length > 0">
        <payment-methods-list-item
            v-for="(paymentMethod, index) in paymentMethods"
            :key="`${paymentMethod.id}:${index}`"
            :payment-method="paymentMethod">
        </payment-methods-list-item>
    </ul>

    <div class="snipcart-overlay--disabled" v-if="disabled"></div>
</loading-overlay>

payment-methods-list-item

Component that shows a clickable payment method selection element

Usage of payment-methods-list-item

<payment-methods-list-item paymentMethod="<PaymentMethod>"> </payment-methods-list-item>

paymentMethod: PaymentMethod

Default Template

<li class="snipcart-payment-methods-list-item">
<button type="button"
  class="snipcart-payment-methods-list-item__button"
  @click="onClick"
  :title="this.$localize('payment.checkout_with_method', { method: methodLabel })"
>
  <span v-if="!isDeferredPayment" class="snipcart-payment-methods-list-item__label">
    {{ `${$localize('payment.checkout_with')}`}}
    <img
      v-if="paymentMethod.iconUrl"
      :src="paymentMethod.iconUrl"
      :alt="methodLabel"
      class="snipcart-payment-methods-list-item__icon"
    />
    <icon
      v-else-if="hasIcon"
      :name="`method-${paymentMethod.id}`"
      :alt="methodLabel"
      class="snipcart-payment-methods-list-item__icon"
    ></icon>
    <template v-else>{{ methodLabel }}</template>
  </span>
  <span v-else class="snipcart-payment-methods-list-item__label">
      {{ methodLabel }}
  </span>
  <span class="snipcart-payment-methods-list-item__arrow">
    <icon name="continue-arrow"></icon>
  </span>
</button>
  </li>

rectify-cart-action

Usage of rectify-cart-action

<rectify-cart-action> </rectify-cart-action>

register-form

Usage of register-form

<register-form> </register-form>

Default Template

<authentication-view>
    <overridable name="register-form">
        <div class="snipcart__box snipcart-register__box snipcart-register">
            <h2 class="snipcart__font--subtitle snipcart-register__title">{{ $localize('register_form.register')}}</h2>
            <p class="snipcart__font snipcart-register__register">
                {{ $localize('register_form.already_have_an_account')}}
                <router-link class="snipcart__font--black snipcart-register__register-link" to="signin">
                    {{ $localize('signin_form.signin')}}
                </router-link>
            </p>

            <snipcart-form @submit="save" class="snipcart-register__form">
                <flash-message v-if="requiresConfirmation"
                    type="info"
                    :title="$localize('register_form.requires_action.title')"
                    :description="$localize('register_form.requires_action.description')">
                </flash-message>

                <snipcart-form-error></snipcart-form-error>

                <overridable name="register-form" section="top"></overridable>
                <div class="snipcart-form__field">
                    <snipcart-label for="email">{{ $localize('register_form.email')}}</snipcart-label>
                    <snipcart-input name="email" type="email" icon="user"></snipcart-input>
                    <snipcart-field-error name="email"></snipcart-field-error>
                </div>
                <div class="snipcart-form__field">
                    <snipcart-label for="password">{{ $localize('register_form.password')}}</snipcart-label>
                    <snipcart-password name="password" icon="password"></snipcart-password>
                    <snipcart-field-error name="password"></snipcart-field-error>
                </div>
                <div class="snipcart-form__field">
                    <snipcart-label for="passwordConfirmation">{{ $localize('register_form.confirm_password')}}</snipcart-label>
                    <snipcart-password name="passwordConfirmation" icon="password"></snipcart-password>
                    <snipcart-field-error name="passwordConfirmation"></snipcart-field-error>
                </div>

                <overridable name="register-form" section="bottom"></overridable>

                <snipcart-submit
                    label="register_form.register"
                    icon="continue-arrow"
                ></snipcart-submit>
            </snipcart-form>
        </div>
    </overridable>
</authentication-view>

reset-password-form

Usage of reset-password-form

<reset-password-form> </reset-password-form>

Default Template

<authentication-view>
    <overridable name="reset-password-form">
        <div class="snipcart__box snipcart-reset-password snipcart-reset-password__box">
            <h2 class="snipcart__font--subtitle snipcart-reset-password__title">
                {{ $localize('reset_password_form.title')}}
            </h2>

            <snipcart-form @submit="save" class="snipcart-reset-password__form">

               <snipcart-form-error></snipcart-form-error>

                <div class="snipcart-form__field">
                    <snipcart-label for="password">{{ $localize('reset_password_form.password')}}</snipcart-label>
                    <snipcart-password name="password"></snipcart-password>
                </div>

                <div class="snipcart-form__field">
                    <snipcart-label for="confirmationPassword">{{ $localize('reset_password_form.confirmation_password')}}</snipcart-label>
                    <snipcart-password name="confirmationPassword"></snipcart-password>
                    <snipcart-field-error name="confirmationPassword"></snipcart-field-error>
                </div>
                
                <snipcart-submit
                    label="reset_password_form.action"
                    icon="continue-arrow"
                ></snipcart-submit>
            </snipcart-form>
        </div>
    </overridable>
</authentication-view>

shipping

Component that renders the shipping box, it shows the shipping address form or shipping method picker depending on its state.

Usage of shipping

<shipping> </shipping>

shipping-address

Component that allows a customer to change / define its shipping address.

Usage of shipping-address

<shipping-address> </shipping-address>

Default Template

<snipcart-form @submit="save" id="snipcart-shipping-address-form">
    <overridable name="shipping-address">
        <div class="snipcart__box">
            <div class="snipcart__box--header">
                <div class="snipcart__box--title">
                    <div class="snipcart__box--badge snipcart__box--badge snipcart__box--badge-highlight snipcart__font--bold snipcart__font--secondary">2</div>
                    <h1 class="snipcart__font--subtitle snipcart-shipping-address__title">{{ $localize("shipping.title") }}</h1>
                </div>
            </div>
            <div class="snipcart-shipping-address--readonly">
                <div class="snipcart-shipping-address__header--readonly">
                    <h3 class="snipcart-shipping-address__subtitle snipcart__font--bold">{{ $localize("shipping.shipping_to") }}</h3>
                </div>
            </div>

            <snipcart-form-error></snipcart-form-error>

            <overridable name="shipping-address" section="top"></overridable>

            <template v-if="!splitName">
                <div class="snipcart-form__field" v-if="!splitName">
                    <snipcart-label class="snipcart__font--tiny" for="name">
                        {{ $localize('address_form.name') }}
                    </snipcart-label>

                    <!-- Full name in same field -->
                    <snipcart-input name="name"  autocomplete="name"></snipcart-input>
                    <snipcart-field-error name="name"></snipcart-field-error>
                </div>
            </template>
            <template v-else>
                <div class="snipcart-form__field">
                    <snipcart-label class="snipcart__font--tiny" for="firstName">
                        {{ $localize('address_form.firstName') }}
                    </snipcart-label>

                    <snipcart-input name="firstName" autocomplete="given-name"></snipcart-input>
                    <snipcart-field-error name="firstName"></snipcart-field-error>
                </div>
                <div class="snipcart-form__field">
                    <snipcart-label class="snipcart__font--tiny" for="name">
                        {{ $localize('address_form.lastName') }}
                    </snipcart-label>

                    <snipcart-input name="name" autocomplete="family-name"></snipcart-input>
                    <snipcart-field-error name="name"></snipcart-field-error>
                </div>
            </template>
        
            <div class="snipcart-form__field" v-if="includePhone">

                <snipcart-label class="snipcart__font--tiny" for="phone">
                    {{ $localize('address_form.phone' )}}
                </snipcart-label>

                <snipcart-input name="phone"></snipcart-input>
                <snipcart-field-error name="phone"></snipcart-field-error>
            </div>

            <address-fields type="shipping"></address-fields>

            <overridable name="shipping-address" section="bottom"></overridable>
            <div class="snipcart-form__footer">
                <snipcart-submit label="actions.use_this_address"></snipcart-submit>
            </div>
        </div>
    </overridable>
</snipcart-form>

shipping-completed

Usage of shipping-completed

<shipping-completed context="<string>"> </shipping-completed>

context: string – Context in which this component is rendered

Default Template

<div class="snipcart__box snipcart-shipping-completed">
    <div class="snipcart-shipping-completed__header snipcart__box--header">
        <div class="snipcart__box--title">
            <div class="snipcart__box--badge snipcart__font--bold snipcart__font--secondary" v-if="checkout">
                <icon name="checkmark" class="snipcart__icon"></icon>
            </div>
            <h1 class="snipcart-shipping-completed__title snipcart__font--subtitle">
                <icon name="box" class="snipcart__icon--left" v-if="!checkout"></icon>
                {{ $localize('shipping.title') }}
            </h1>
        </div>
        <button-link
            v-if="checkout" 
            label="actions.edit"
            @click="edit"
        ></button-link>
    </div>
    
    <div class="snipcart-checkout-step__cols snipcart__font--std">
        <div class="snipcart-checkout-step__col">
            <div class="snipcart-checkout-step__icon snipcart-shipping-completed__step-icon">
                <icon name="location"></icon>
            </div>
            <div class="snipcart__address__display">
                <h3 class="snipcart-checkout-step__title snipcart-shipping-completed__step-title snipcart__font--secondary snipcart__font--bold">{{ $localize('shipping.address') }}</h3>
                <span class="snipcart-shipping-completed__information snipcart__font--std">{{ cart.shippingAddress | fullAddress }}</span>
            </div>
        </div>

        <div class="snipcart-checkout-step__col">
            <div class="snipcart-checkout-step__icon snipcart-shipping-completed__step-icon">
                <icon name="box"></icon>
            </div>
            <div>
                <h3 class="snipcart-checkout-step__title snipcart-shipping-completed__step-title snipcart__font--secondary snipcart__font--bold">{{ $localize('shipping.method') }}</h3>
                <span class="snipcart-shipping-completed__information">{{ methodName }}</span>
            </div>
        </div>
    </div>
</div>

shipping-method

This component renders the shipping method picker.

Usage of shipping-method

<shipping-method> </shipping-method>

Default Template

<snipcart-form @submit="save">
    <overridable name="shipping-method">
        <div>
            <div class="snipcart__box">
                <div class="snipcart__box--header">
                    <div class="snipcart__box--title">
                        <div class="snipcart__box--badge snipcart__box--badge snipcart__box--badge-highlight snipcart__font--bold snipcart__font--secondary">{{ number }}</div>
                        <h1 class="snipcart__font--subtitle">{{ $localize("shipping.title") }}</h1>
                    </div>
                    <button-link label="actions.edit" @click="editAddress"></button-link>
                </div>

                <snipcart-form-error></snipcart-form-error>

                <div class="snipcart-shipping-address--readonly">
                    <div class="snipcart-shipping-address__header--readonly">
                        <h3 class="snipcart-shipping-address__subtitle">{{ $localize("shipping.shipping_to") }}</h3>
                    </div>

                    <div class="snipcart-shipping-address__address-field snipcart-shipping-address__content snipcart-shipping-address__content--readonly snipcart__font--std">
                        <strong class="snipcart__notice--with-icon snipcart__font--secondary snipcart__font--bold">
                            <icon
                                name="location"
                                class="snipcart__notice__icon"
                            ></icon>{{ shippingAddress | fullAddress }}
                        </strong>
                    </div>
                </div>
                <loading-component
                    message="shippingRates.loading"
                    :is-loading="ratesAreLoading"
                >
                    <overridable
                        name="shipping-method"
                        section="top"
                    ></overridable>
                    <shipping-rates-list item-template="shipping-rates-list-item"></shipping-rates-list>
                    <overridable
                        name="shipping-method"
                        section="bottom"
                    ></overridable>
                    <div class="snipcart-form__footer">
                        <snipcart-submit
                            label="payment.continue_to_payment"
                            :state="submitState"
                        ></snipcart-submit>
                    </div>
                </loading-component>
            </div>
        </div>
    </overridable>
</snipcart-form>

shipping-rates-list

Component that renders the list of available shipping methods.

Usage of shipping-rates-list

<shipping-rates-list tag="<string>"> </shipping-rates-list>

tag: string – Sets the root element tag, default is `ul`.

Default Template

<component
    class="snipcart-shipping-rates-list"
    :is="tag"
    v-if="!loading"
>
    <shipping-rates-list-item
        v-for="rate in rates"
        :key="rate.slug"
        :rate="rate"
        :class="{'snipcart-shipping-rates-list-item--highlight': selectedRate == rate.slug}"
    >
    </shipping-rates-list-item>
</component>

shipping-rates-list-item

Usage of shipping-rates-list-item

<shipping-rates-list-item rate="<ShippingRate>"> </shipping-rates-list-item>

rate: ShippingRate – The shipping rate associated to the component instance.

Default Template

<li class="snipcart-shipping-rates-list-item snipcart__font--secondary snipcart__font--bold">
    <span>
        <snipcart-radio
            name="selectedRate"
            class="snipcart-shipping-rates-list-item__label--highlight"
            :value="slug"
            :id="`selectedRate-${slug}`"
        >
            <span>
            {{ methodName }}
                <span
                    v-if="guaranteedDaysToDelivery > 0"
                    class="snipcart-shipping-rates-list-item--guaranteed_days snipcart__font--small"
                >
                    {{ $localize("shipping_rates.guaranteed_delivery_days", { guaranteedDaysToDelivery }) }}
                </span>
            </span>
        </snipcart-radio>
    </span>
    <span class="snipcart-shipping-rates-list-item--right snipcart-shipping-rates-list-item__price snipcart__font--black">
        {{ cost | money(currency) }}
    </span>
    
</li>

show-cart-action

Usage of show-cart-action

<show-cart-action> </show-cart-action>

show-detailed-cart-action

Usage of show-detailed-cart-action

<show-detailed-cart-action> </show-detailed-cart-action>

sign-in-action

Usage of sign-in-action

<sign-in-action> </sign-in-action>

sign-out-action

Usage of sign-out-action

<sign-out-action> </sign-out-action>

signin-form

Usage of signin-form

<signin-form> </signin-form>

Default Template

<authentication-view>
    <overridable name="signin-form">
        <div class="snipcart__box snipcart-signin snipcart-signin__box">
            <h2 class="snipcart__font--subtitle snipcart-signin__title">{{ $localize('signin_form.signin')}}</h2>
            <p class="snipcart__font snipcart-signin__register">
                {{ $localize('signin_form.dont_have_an_account')}}
                <router-link class="snipcart__font--black snipcart-signin__register-link" to="register">
                    {{ $localize('register_form.register')}}
                </router-link>
            </p>

            <snipcart-form @submit="save" class="snipcart-signin__form">

                <snipcart-form-error></snipcart-form-error>

                <overridable name="signin-form" section="top"></overridable>

                <div class="snipcart-form__field">
                    <snipcart-label for="email">{{ $localize('signin_form.email')}}</snipcart-label>
                    <snipcart-input name="email" type="email" icon="user"></snipcart-input>
                </div>
                
                <div class="snipcart-form__field">
                    <snipcart-label for="password">{{ $localize('signin_form.password')}}</snipcart-label>
                    <snipcart-password name="password" icon="password"></snipcart-password>
                    <router-link to="forgot-password" class="snipcart-signin__forgot-password snipcart__font--black">{{ $localize('signin_form.forgot_your_password') }}</router-link>
                </div>

                <overridable name="signin-form" section="bottom"></overridable>

                <snipcart-submit
                    label="signin_form.signin"
                    icon="continue-arrow"
                ></snipcart-submit>
            </snipcart-form>
        </div>
    </overridable>
</authentication-view>

snipcart-address-autocomplete

Dropdown with autocomplete for addresses.

Usage of snipcart-address-autocomplete

<snipcart-address-autocomplete label="<string>"> </snipcart-address-autocomplete>

label: string – Input label

snipcart-checkbox

Checkbox form element.

Usage of snipcart-checkbox

<snipcart-checkbox name="<string>"> </snipcart-checkbox>

name: string

snipcart-field-error

Displays the error message associated with the form field.

Usage of snipcart-field-error

<snipcart-field-error name="<string>"> </snipcart-field-error>

name: string

Default Template

<div :data-for="field.name" class="snipcart-field-error snipcart__font--tiny">
{{ text }}
  </div>

snipcart-form

Wrap form fields inside a form element and provide support for doing HTML5 validation even when we don't "submit" the form using a submit button.

Usage of snipcart-form

<snipcart-form> </snipcart-form>

snipcart-form-error

Usage of snipcart-form-error

<snipcart-form-error fallback="<string>"> </snipcart-form-error>

fallback: string

Default Template

<error-message
	:title="title"
	:description="description"
	:technicalDetail="technicalDetail"
	:actionRequired="actionRequired"
	:showTechnicalDetail="showTechnicalDetail"
></error-message>

snipcart-hidden-autofill

Usage of snipcart-hidden-autofill

<snipcart-hidden-autofill> </snipcart-hidden-autofill>

snipcart-input

Standard input (textbox) form element.

Usage of snipcart-input

<snipcart-input type="<string>" name="<string>" placeholder="<string>" icon="<string>"> </snipcart-input>

type: string
name: string – Used by @UseField to retrieve form field.
placeholder: string – The placeholder of the input.
icon: string

snipcart-label

Label for a form field.

Usage of snipcart-label

<snipcart-label for="<string>"> </snipcart-label>

for: string – The form field this label is linked to. Used by @UseField to retrieve form field.

snipcart-password

Usage of snipcart-password

<snipcart-password name="<string>" placeholder="<string>" icon="<string>"> </snipcart-password>

name: string – Used by @UseField to retrieve form field.
placeholder: string – The placeholder of the input.
icon: string

snipcart-radio

Radio button form element.

Usage of snipcart-radio

<snipcart-radio name="<string>" value="<string>" id="<string>"> </snipcart-radio>

name: string
value: string
id: string

snipcart-select

Usage of snipcart-select

<snipcart-select name="<string>"> </snipcart-select>

name: string

snipcart-submit

Usage of snipcart-submit

<snipcart-submit preventLoading="<boolean>" icon="<string>" label="<string>" labelLoading="<string>" labelError="<string>" labelSuccess="<string>" type="<ButtonTypes>" state="<BaseButtonStates>" hasIconLeft="<boolean>" isFitContent="<boolean>"> </snipcart-submit>

preventLoading: boolean
icon: string
label: string
labelLoading: string
labelError: string
labelSuccess: string
type: ButtonTypes
state: BaseButtonStates
hasIconLeft: boolean
isFitContent: boolean

Default Template

<!-- COMPONENT: snipcart-submit -->
<overridable name="snipcart-submit">
    <button-primary 
        class="snipcart-submit"
        type="submit"
        :label="label"
        :icon="icon"
        :state="buttonState"
    ></button-primary>
</overridable>

snipcart-textarea

Usage of snipcart-textarea

<snipcart-textarea name="<string>"> </snipcart-textarea>

name: string

snipcart-typeahead

Typeahead (autocomplete) form element.

Usage of snipcart-typeahead

<snipcart-typeahead type="<string>" name="<string>" autocomplete="<string>"> </snipcart-typeahead>

type: string
name: string
autocomplete: string

spinner

Usage of spinner

<spinner> </spinner>

Default Template

<!-- COMPONENT: spinner -->
<overridable name="spinner">
    <div class="snipcart-spinner">
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
            <mask id="snipcart-spinner-mask" x="0" y="0" width="100" height="100">
                <circle cx="50" cy="50" r="50" fill="white" />
                <circle cx="50" cy="50" r="40" fill="black" />
            </mask>
            <g mask="url(#snipcart-spinner-mask)">
                <rect class="snipcart-spinner__spinning" x="50" y="0" width="50" height="100" fill="currentColor"/>
                <circle cx="50" cy="50" r="50" fill="rgba(255, 255, 255, 0.2)"/>
            </g>
        </svg>
    </div>
</overridable>

subscription

Usage of subscription

<subscription date="<string>" total="<number>" currency="<string>" token="<string>" items="<>" detailsUrl="<string>" invoiceNumber="<string>" nextBillingDate="<string>" planInterval="<number>" featureVersion="<>"> </subscription>

date: string
total: number
currency: string
token: string
items:
detailsUrl: string
invoiceNumber: string
nextBillingDate: string
planInterval: number
featureVersion:

Default Template

<div class="snipcart-subscription snipcart__box">
    <div class="snipcart-subscription__header">
        <!-- Date -->
        <div class="snipcart-subscription__header-item">
            <div class="snipcart-subscription__header-title">{{ $localize('customer_dashboard.ordered_on') }}</div>
            <div>{{ date | date }}</div>
        </div>
        <!-- Billing date -->
        <div class="snipcart-subscription__header-item">
            <div v-if="nextBillingDate != null">
                <div class="snipcart-subscription__header-title">{{ $localize('customer_dashboard.next_billing_date') }}</div>
                <div>{{ nextBillingDate | date }}</div>
            </div>
        </div>
        <!-- Total -->
        <div class="snipcart-subscription__header-item">
            <div class="snipcart-subscription__header-title">{{ $localize('customer_dashboard.total') }}</div>
            <div>{{ total | money(currency) }} ({{ planInterval }})</div>
        </div>
        <!-- Invoice -->
        <div class="snipcart-subscription__header-item">
            <div class="snipcart-subscription__header-title">{{ $localize('customer_dashboard.subscription', { invoice_number: invoiceNumber }) }}</div>
            <button-link
                label="customer_dashboard.view_invoice"
                @click="gotoDetails"
            ></button-link>
        </div>
    </div>

    <!-- Items -->
    <div class="snipcart-subscription__product-ctn">
        <card-product
            v-for="item in providedItems"
            v-bind="{...item}"
            :key="`${token}:${item.itemKey}`"
        ></card-product>
    </div>
</div>

subscriptions-list

Usage of subscriptions-list

<subscriptions-list> </subscriptions-list>

Default Template

<paginated-list
    :on-fetch-next-page="snipcart.api.customer.fetchSubscriptions"
    :item-component="itemComponent"
    :props-provider="propsProvider"
    message-no-result="customer_dashboard.no_subscriptions"
    label-show-more="customer_dashboard.show_more_subscriptions"
></paginated-list>

summary-fees

Usage of summary-fees

<summary-fees summaryData="<SummaryFeesProvider>"> </summary-fees>

summaryData: SummaryFeesProvider

Default Template

<div class="snipcart-summary-fees">
    <div
        class="snipcart-summary-fees__notice snipcart__font--regular"
        v-if="!summaryData.hasShippingAddress"
    >
        <slot>
            {{ $localize('checkout.shipping_taxes_calculated_when_address_provided') }}
        </slot>
    </div>

    <div class="snipcart-summary-fees">
        <div
            class="snipcart-summary-fees__item snipcart-summary-fees__discounts snipcart__font--slim"
            v-if="summaryData.hasDiscounts"
        >
            <span class="snipcart-summary-fees__title">
                {{ $localize('cart_summary.discount') }}
                <div class="snipcart-summary-fees__discounts-icon">
                    <icon
                        name="question-mark"
                        @mouseover.native="displayDiscounts = true"
                        @mouseleave.native="displayDiscounts = false"
                    ></icon>
                    <tool-tip
                        v-show="displayDiscounts"
                        class="snipcart-tool-tip--bordered snipcart-summary-fees__tool-tip"
                    >
                        <div
                            class="snipcart-summary-fees__discount-container"
                            v-for="discount in summaryData.discounts"
                            :key="discount.id"
                        >
                            <div class="snipcart-summary-fees__discount-name">{{ discount.name }}</div>
                            <div
                                class="snipcart-summary-fees__discount-amount-saved"
                                v-if="!displayDiscount(discount)"
                            > -{{ discount.amountSaved | money(summaryData.currency)}}</div>
                        </div>
                    </tool-tip>
                </div>
            </span>
            <span
                class="snipcart-summary-fees__amount"
                v-if="summaryData.discountTotalAmount"
            >{{ summaryData.discountTotalAmount | money(summaryData.currency) }}</span>
        </div>

        <div
            class="snipcart-summary-fees__item snipcart__font--slim"
            v-if="summaryData.subtotal"
        >
            <span class="snipcart-summary-fees__title">{{ $localize('cart_summary.subtotal') }}</span>
            <span class="snipcart-summary-fees__amount">{{ summaryData.subtotal | money(summaryData.currency) }}</span>
        </div>

        <div
            class="snipcart-summary-fees__item snipcart__font--slim"
            v-if="summaryData.hasShipping"
        >
            <span class="snipcart-summary-fees__title">{{ $localize('cart_summary.shipping') }}</span>
            <span class="snipcart-summary-fees__amount">{{ summaryData.shippingInformation.cost | money(summaryData.currency) }}</span>
        </div>

        <div
            class="snipcart-summary-fees__item snipcart__font--slim"
            v-if="summaryData.hasTaxes"
        >
            <span class="snipcart-summary-fees__title">
                {{ $localize('cart_summary.taxes') }}
                <icon
                    name="question-mark"
                    class="snipcart-summary-fees__tax-notice"
                    v-if="summaryData.hasTaxesIncludedInPrice"
                    @mouseover.native="displayTaxesIncludedInPriceNotice = true"
                    @mouseleave.native="displayTaxesIncludedInPriceNotice = false"
                ></icon>
                <tool-tip
                    v-show="displayTaxesIncludedInPriceNotice"
                    class="snipcart-tool-tip--bordered snipcart-summary-fees__tool-tip"
                >
                    {{ $localize('cart_summary.taxes_included_in_price') }}
                </tool-tip>
            </span>
            <span class="snipcart-summary-fees__amount">{{ summaryData.taxTotalAmount | money(summaryData.currency) }}</span>
        </div>

        <div class="snipcart-summary-fees__item snipcart-summary-fees__total snipcart__font--bold snipcart__font--secondary">
            <span class="snipcart-summary-fees__title snipcart-summary-fees__title--highlight snipcart__font--large">{{ $localize('cart_summary.total')}}</span>
            <span class="snipcart-summary-fees__amount snipcart-summary-fees__amount--highlight snipcart__font--large">{{ summaryData.total| money(summaryData.currency) }}</span>
        </div>
    </div>
</div>

tab

Usage of tab

<tab name="<string>"> </tab>

name: string

tabs

Usage of tabs

<tabs> </tabs>

textbox

Usage of textbox

<textbox value="<string>" id="<string>" name="<string>" icon="<string>" inputCssClasses="<any>"> </textbox>

value: string
id: string
name: string
icon: string
inputCssClasses: any

tool-tip

Usage of tool-tip

<tool-tip> </tool-tip>

Default theme reference

Usage of address-fields

Default Template

Usage of address-formatted

Default Template

Usage of authentication-view

Default Template

Usage of base-button

Default Template

Usage of base-layout-sidebar

Default Template

Usage of billing

Default Template

Usage of billing-completed

Default Template

Usage of button-danger

Default Template

Usage of button-icon

Default Template

Usage of button-link

Default Template

Usage of button-primary

Default Template

Usage of button-secondary

Default Template

Usage of card-icon

Usage of card-product

Default Template

Usage of cart

Default Template

Usage of cart-header

Default Template

Usage of cart-summary

Default Template

Usage of cart-summary-expanded-item

Default Template

Usage of cart-summary-item

Default Template

Usage of cart-summary-items-list

Usage of change-password-form

Default Template

Usage of checkout

Default Template

Usage of checkout-step

Usage of close-cart-action

Usage of close-side-cart-action

Usage of customer-account-link

Usage of customer-details

Default Template

Usage of customer-details-group

Default Template

Usage of customer-notification

Usage of customer-notifications-list

Usage of dashboard

Default Template

Usage of dashboard-home

Default Template

Usage of disabled-checkout-step

Usage of discount-box

Usage of edit-customer-address-form

Default Template

Usage of edit-shipping-address-button

Usage of empty-cart

Default Template

Usage of error-message

Default Template

Usage of fancy-select

Usage of featured-payment-methods

Default Template

Usage of flash-message

Default Template

Usage of forgot-password-form

Default Template

Usage of guest-checkout

Default Template

Usage of icon

Usage of item-custom-fields

Usage of item-description

Usage of item-image

Usage of item-line