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 name="<string>"> </address-fields>

name: string – The name of the address to edit.

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">
                <snipcart-label class="snipcart__font--tiny" for="address1">{{ $localize('address_form.address1') }}</snipcart-label>
                <snipcart-input name="address1"></snipcart-input>
                <snipcart-error-message name="address1"></snipcart-error-message>
            </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-error-message name="address2"></snipcart-error-message>
            </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-error-message name="city"></snipcart-error-message>
        </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>
        </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>
            </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-error-message name="postalCode"></snipcart-error-message>
            </div>
        </div>
    </fieldset>
</div>

billing

Component that gathers billing address and customer information

Usage of billing

<billing> </billing>

Default Template

<snipcart-form @submit="save">
    <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-error-message></snipcart-error-message>

            <overridable name="billing" section="top"></overridable>
            
            <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-error-message name="name"></snipcart-error-message>
                </div>

                <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__font--secondary snipcart__font--bold" v-else>{{ state.email }}</span>
                    <snipcart-error-message name="email"></snipcart-error-message>
                </div>
            </fieldset>

            <address-fields></address-fields>

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

            <fieldset class="snipcart-form__set" v-if="shippingEnabled">
                <div class="snipcart-form__field">
                    <div class="snipcart-form__field-checkbox">
                        <snipcart-checkbox name="useDifferentShippingAddress" @input="useDifferentShippingAddressHandler"/>

                        <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">
                <submit-button type="submit" class="snipcart-cart-button--highlight snipcart__font--large">
                    {{ shippingEnabled ? $localize('billing.continue_to_shipping') : $localize('payment.continue_to_payment') }}
                </submit-button>
            </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--large snipcart__icon--blue-dark"></icon></div>
                    <h1 class="snipcart-billing-completed__title snipcart__font--subtitle">
                        <icon name="user" class="snipcart__icon--left snipcart__icon--blue-dark" v-if="!checkout"></icon>
                        {{ $localize('billing.title') }}
                    </h1>
                </div>

                <a href="#" @click="edit" v-if="checkout" class="snipcart__actions--link">{{ $localize('actions.edit')}}</a>
            </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" class="snipcart__icon--blue-dark"></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.name }}<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" class="snipcart__icon--blue-dark"></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 | address }}</span>
                    </div>
                </div>
            </div>
        </div>
    </overridable>
</transition>

card-icon

Usage of card-icon

<card-icon> </card-icon>

cart

Usage of cart

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

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

Default Template

<layout>
    <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>
                <icon name="plus" class="snipcart__icon--darker snipcart__icon--medium snipcart__icon--angled" alt="item.remove_item"></icon>
            </close-side-cart-action>
        </div>
        <overridable name="cart" v-if="hasItems">
            <section class="snipcart-cart__content">
                <item-list item-template="item-line" class="snipcart-item-list--no-shadow"></item-list>

                <div class="snipcart-cart__footer">
                    <div class="snipcart-cart__footer-col cart__footer-discount-box snipcart-cart__actions">
                        <discount-box class="snipcart-cart__discount-box"></discount-box>
                    </div>

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

                        <footer v-if="!editingCart">
                            <cart-button 
                                class="snipcart-cart__checkout-button snipcart-cart-button--highlight snipcart__font--large"
                                icon-right="continue-arrow"
                                :disabled="checkoutDisabled"
                                @click="checkout">
                                {{ $localize('actions.checkout') }}
                            </cart-button>
                        </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-checkout-transitions">
        <router-view />
    </transition>
</layout>

cart-button

Component that renders a button

Usage of cart-button

<cart-button type="<string>" icon="<string>" iconRight="<string>" disabled="<boolean>" loading="<boolean>" loadingMessage="<string>"> </cart-button>

type: string – Button type
icon: string – Icon to show on the left-side of the button
iconRight: string – Icon to show on the right-side of the button
disabled: boolean – Indicates if the button is disabled or not.
loading: boolean – Indicates if the button is in loading state.
loadingMessage: string – The message to display when the button is in loading state.

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>" backButtonTitle="<string>"> </cart-header>

title: string
showItemsCount: boolean
showAccountMenu: boolean
showSummary: 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 snipcart__icon--blue-light" name="back-arrow" />
        <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">
            <icon name="user" class="snipcart-cart-header__icon snipcart__icon--blue-dark"></icon>
            {{ $localize('signin_form.signin')}}
        </sign-in-action>

        <sign-out-action class="snipcart-cart-header__option snipcart-cart-header__sign-out" v-if="showAccountMenu">
            <icon name="sign-out" class="snipcart-cart-header__icon snipcart__icon--blue-dark"></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">
            <icon name="user" class="snipcart-cart-header__icon snipcart__icon--blue-dark"></icon>
            {{ $localize('customer_dashboard.my_account') }}
        </customer-account-link>

        <show-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 snipcart__icon--blue-dark" />
            {{ itemsCount }}
        </show-cart-action>
    </div>

    <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__icon--blue-dark"></icon>
            <span>
                {{ cart.total | money(cart.currency) }}
            </span>
            <icon :name="summaryIcon" class="snipcart__icon--blue-dark snipcart__icon--medium"></icon>
        </div>

        <cart-summary class="snipcart-cart-summary--small" v-if="summaryVisible" @close="closeSummary">
        </cart-summary>
    </media>
</header>
<header class="snipcart-cart-header" v-else>
    <close-cart-action class="snipcart-modal__close">
        <icon class="snipcart-modal__close-icon snipcart__icon--blue-light" name="back-arrow" />
        <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> </cart-summary>

Default Template

<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>
                    <open-side-cart-action class="snipcart__actions--link">{{ $localize('actions.edit') }}</open-side-cart-action>
                </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">
                        <cart-summary-fees></cart-summary-fees>
                    </div>
                </loading-overlay>
            </section>

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

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

    <transition name="snipcart-checkout-transitions">
        <cart :editingCart="true" class="snipcart-cart-summary--edit" v-if="editing"></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 item.customFields" 
                :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-fees

Components that shows the cart fees such as taxes, shipping, grand total, etc.

Usage of cart-summary-fees

<cart-summary-fees> </cart-summary-fees>

Default Template

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

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

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

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

        <div class="snipcart-cart-summary-fees__item snipcart__font--slim" v-for="tax in taxes" :key="tax.name">
            <span class="snipcart-cart-summary-fees__title"> {{ tax.name }}</span>
            <span class="snipcart-cart-summary-fees__amount">{{ tax.amount | money(cart.currency) }}</span>
        </div>

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

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.unitPrice | 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.

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" />
                    </div>
                    <media name="large" class="snipcart-layout__col">
                        <cart-summary />
                    </media>
                </div>
            </div>
        </overridable>
    </loading-screen>
    <transition name="snipcart-checkout-transitions">
        <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>

decrement-quantity-action

Usage of decrement-quantity-action

<decrement-quantity-action> </decrement-quantity-action>

disabled-checkout-step

Usage of disabled-checkout-step

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

errors:

discount-box

Usage of discount-box

<discount-box> </discount-box>

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>

    <cart-button 
        class="snipcart-cart-button--secondary snipcart-cart-button--fit"
        icon="back-arrow"
        @click="$actions.goBack">
        {{ $localize('actions.back_to_store') }}
    </cart-button>
</section>

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">
            <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>
  <p class="snipcart-flash-message__action snipcart__font--std snipcart__font--black" v-if="hasAction">
    <slot></slot>
  </p>
</div>
  </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: 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, 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, 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, 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

increment-quantity-action

Usage of increment-quantity-action

<increment-quantity-action> </increment-quantity-action>

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>"> </item-line>

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

Default Template

<li :class="{'snipcart-item-line': true, 'snipcart-item-line--cart-edit': editingCart}">
    <flash-message 
        type="info"
        icon="box"
        v-if="stockLimitReached">
        {{ $localize('errors.quantity_revised') }}
    </flash-message>
    <flash-message 
        type="error"
        icon="box"
        v-if="outOfStock">
        {{ $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>
                
                <div class="snipcart-item-line__actions">
                    <remove-item-action class="snipcart__button--icon">
                        <icon name="trash" class="snipcart__icon--red" alt="item.remove_item"></icon>
                    </remove-item-action>
                </div>
            </div>

            <div class="snipcart-item-line__content">
                <div class="snipcart-item-line__body">
                    <div class="snipcart-item-line__info">
                        <item-description></item-description>
                    </div>
                    <div class="snipcart-item-line__variants">
                        <item-custom-fields v-if="!adding"></item-custom-fields>
                        <item-quantity class="snipcart-item-line__quantity" v-if="!adding" :disabled="outOfStock"></item-quantity>
                    </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>"> </item-list>

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

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-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>" tag="<string>"> </loading-screen>

message: string – The loading message
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">
                <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> </order>

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--white snipcart__icon--large"></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') }} :&nbsp;<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">
                                <cart-summary-fees class="snipcart-order__fees"></cart-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>

payment

Usage of payment

<payment> </payment>

payment-completed

Component that renders when the payment is completed.

Usage of payment-completed

<payment-completed> </payment-completed>

payment-form

Component that renders a credit card form.

Usage of payment-form

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

disabled: boolean
paymentMethod: PaymentMethodIds

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.processing_payment')" 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
            :paymentMethod="paymentMethod"
            v-for="(paymentMethod, index) in paymentMethods"
            :key="`${paymentMethod.id}:${index}`"
            @click="onPaymentMethodSelected"></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
  class="snipcart-payment-methods-list-item__button"
  @click="onClick"
  :title="this.$localize('payment.checkout_with_method', { method: this.paymentMethod.name || this.$localize(`payment.methods.${this.paymentMethod.id}`) })"
>
  <span v-if="!isDeferredPayment" class="snipcart-payment-methods-list-item__label">
    {{ `${$localize('payment.checkout_with')}`}}
    <img
      v-if="paymentMethod.iconUrl"
      :src="paymentMethod.iconUrl"
      :alt="paymentMethod.name"
      class="snipcart-payment-methods-list-item__icon"
    />
    <icon
      v-else-if="hasIcon"
      :name="`method-${paymentMethod.id}`"
      :alt="$localize(`payment.method_icon`, paymentMethod.id)"
      class="snipcart-payment-methods-list-item__icon"
    ></icon>
    <template v-else>{{ paymentMethod.name }}</template>
  </span>
  <span v-else class="snipcart-payment-methods-list-item__label">
      {{ $localize(`payment.methods.${this.paymentMethod.id}`) }}
  </span>
  <span class="snipcart-payment-methods-list-item__arrow">
    <icon name="continue-arrow" class="snipcart__icon--blue-dark" />
  </span>
</button>
  </li>

remove-item-action

Usage of remove-item-action

<remove-item-action> </remove-item-action>

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">
    <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-error-message></snipcart-error-message>
            
            <overridable name="shipping-address" section="top"></overridable>
            
            <address-fields name="shippingAddress"></address-fields>
                
            <div class="snipcart-form__footer">
                <submit-button :loading="state.saving" class="snipcart-cart-button--highlight snipcart__font--large">
                    {{ $localize('actions.use_this_address') }}
                </submit-button>
            </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--large snipcart__icon--blue-dark" /></div>
            <h1 class="snipcart-shipping-completed__title snipcart__font--subtitle">
                <icon name="box" class="snipcart__icon--left snipcart__icon--blue-dark" v-if="!checkout"></icon>
                {{ $localize('shipping.title') }}
            </h1>
        </div>
        <a href="#" @click.prevent="edit" class="snipcart__actions--link" v-if="checkout">Edit</a>
    </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" class="snipcart__icon--blue-dark" />
            </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 | address }}</span>
            </div>
        </div>

        <div class="snipcart-checkout-step__col">
            <div class="snipcart-checkout-step__icon snipcart-shipping-completed__step-icon">
                <icon name="box" class="snipcart__icon--blue-dark"></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">{{ shippingDetails.method }}</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 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>
                <edit-shipping-address-button class="snipcart__actions--link">
                    {{ $localize("actions.edit") }}
                </edit-shipping-address-button>
            </div>

            <snipcart-error-message show-all fallback-message="shipping"></snipcart-error-message>
            
            <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>{{ formatAddress(shippingAddress) }}
                    </strong>
                </div>
            </div>
            
            <shipping-rates-list item-template="shipping-rates-list-item"></shipping-rates-list>

            <div class="snipcart-form__footer">
                <submit-button class="snipcart-cart-button--highlight snipcart__font--large">
                    {{ $localize("payment.continue_to_payment") }}
                </submit-button>
            </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>" itemTemplate="<string>"> </shipping-rates-list>

tag: string – Sets the root element tag, default is `ul`.
itemTemplate: string – The item template to use, default is `shipping-rates-list-item`.

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">
            {{ rate.description }}
        </snipcart-radio>
    </span>
    <span class="snipcart-shipping-rates-list-item--right snipcart-shipping-rates-list-item__price snipcart__font--black">
        {{ rate.cost | money(currency) }}
    </span>
</li>

show-cart-action

Usage of show-cart-action

<show-cart-action> </show-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>

snipcart-address-autocomplete

Dropdown with autocomplete for addresses.

Usage of snipcart-address-autocomplete

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

name: string – Component name
label: string – Component label
name: string – Form element name.
type: string – Form element type.

snipcart-checkbox

Checkbox form element.

Usage of snipcart-checkbox

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

type: string – Form element type.
name: string – Form element name.
type: string – Form element type.

snipcart-error-message

Displays the error message associated with the form field.

Usage of snipcart-error-message

<snipcart-error-message small="<boolean>" showAll="<boolean>" fallbackMessage="<string>" icon="<string>" name="<string>" type="<string>"> </snipcart-error-message>

small: boolean
showAll: boolean
fallbackMessage: string
icon: string
name: string – Form element name.
type: string – Form element type.

Default Template

<div>
<flash-message
  v-if="isMainFormError && !small"
  :icon="icon"
  type="error"
  :title="title"
  :description="description">
  <button
    class="snipcart-error-message__action"
    v-if="actionRequired"
    @click="rectifyCart">
    {{ $localize('actions.apply_changes') }}
  </button>
</flash-message>
<div v-else class="snipcart-error-message snipcart__font--tiny">{{ fullMessage }}</div>
<flash-message
  v-if="technicalDetail"
  icon="console"
  type="info"
  :title="technicalDetail.title"
  :description="technicalDetail.description">
  <em
    class="snipcart__font--tiny"
  >*You’re seeing this notice because you’re using your account’s Test API key.</em>
</flash-message>
  </div>

snipcart-form

Displays a form.

Usage of snipcart-form

<snipcart-form> </snipcart-form>

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 text="<string>" placeholder="<string>" toggleableVisibility="<boolean>" icon="<string>" name="<string>" type="<string>"> </snipcart-input>

text: string – The initial value of the input.
placeholder: string – The placeholder of the input.
toggleableVisibility: boolean
icon: string
name: string – Form element name.
type: string – Form element type.