Référence du thème par défaut

Cette entrée contient la documentation de tous les composants de notre thème par défaut.

address-fields

Displays a form to edit an address.

Usage of address-fields

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

Default Template

<div>
<overridable name="address-fields" section="top"></overridable>
<fieldset class="snipcart-form__set">
  <template v-if="useAutocomplete">
    <div class="snipcart-form__row">
      <div class="snipcart-form__field snipcart-form__cell--large">
        <snipcart-address-autocomplete :label="`${type}.address`"></snipcart-address-autocomplete>
        <snipcart-error-message name="address"></snipcart-error-message>
      </div>
    </div>
    <div class="snipcart-form__row">
      <div class="snipcart-form__field snipcart-form__cell--tidy">
        <snipcart-label for="address2">{{ $localize('address_form.address2') }}</snipcart-label>
        <snipcart-input name="address2" />
      </div>
      <div class="snipcart-form__field snipcart-form__cell--large snipcart-form__cell--input-aligned">
        <snipcart-checkbox name="addressNotFound"></snipcart-checkbox>
        <snipcart-label
          for="addressNotFound"
          class="snipcart-form__label--checkbox"
        >{{$localize('address_form.dont_see_address')}}</snipcart-label>
      </div>
    </div>
  </template>
  <template v-else>
    <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>
      <snipcart-error-message name="country"></snipcart-error-message>
    </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-error-message name="province"></snipcart-error-message>
      </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>
  </template>
</fieldset>
  </div>

address-formatted

Usage of address-formatted

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

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" section="header">
          <cart-header :back-button-title="$localize('signin_form.close_form')"></cart-header>
        </overridable>
      </div>
      <slot></slot>
    </layout>

    base-button

    Usage of base-button

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

    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-error-message :show-fields-errors="false"></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-input--readonly snipcart__font--secondary snipcart__font--bold" v-else>{{ customer.email }}</span>
                            <snipcart-error-message name="email"></snipcart-error-message>
                        </div>
                    </fieldset>
        
                    <address-fields type="billing"></address-fields>
        
                    <hr class="snipcart-form__separator" v-if="shippingEnabled" />
        
                    <fieldset class="snipcart-form__set snipcart-form__set--different-shipping" v-if="shippingEnabled && !hasOnlyNonShippableGoods">
                        <div class="snipcart-form__field">
                            <div class="snipcart-form__field-checkbox">
                                <snipcart-checkbox name="useDifferentShippingAddress" />
        
                                <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.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"></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>

        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>

        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>

        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>

        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>

        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>

        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>

          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 :isCartSummary="!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"
                                  :showDescription="!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"
                                          :summaryData="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>

          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" />
                  <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"></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"></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 && 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" />
                      <template v-if="!hasSubscription">
                          {{ itemsCount }}
                      </template>
                  </show-detailed-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-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>
          </header>
          <header class="snipcart-cart-header" v-else>
              <close-cart-action class="snipcart-modal__close">
                  <icon class="snipcart-modal__close-icon" 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 isSideCart="<boolean>"> </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>
                              <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" />
                      </footer>
                  </div>
              </overridable>
          
              <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
                      :editingCart="true"
                      class="snipcart-cart-summary--edit"
                      v-if="editing || isSideCart"
                      :isSideCart="isSideCart"
                  ></cart>
              </transition>
          </div>

          cart-summary-expanded-item

          Usage of cart-summary-expanded-item

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

          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">
            
                    <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-error-message class="snipcart-error-message--global-form" />
                            <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-error-message name="currentPassword"></snipcart-error-message>
                            </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-error-message name="password"></snipcart-error-message>
                            </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-error-message name="confirmationPassword"></snipcart-error-message>
                            </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" />
                                  </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>

              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"
                              iconName="location"
                              :title="$localize('billing.address')"
                              :handleActionClick="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"
                              iconName="location"
                              :title="$localize('shipping.address')"
                              :handleActionClick="editShippingAddress"
                              :action="shippingAddressAction"
                          >
                              <address-formatted :address="customer.shippingAddress"></address-formatted>
                          </customer-details-group>
                      
                          <!-- Password -->
                           <customer-details-group
                              iconName="lock"
                              :title="$localize('signin_form.password')"
                              :handleActionClick="editPassword"
                              action="edit"
                          >
                          •••••••••••••••••••
                          </customer-details-group>
                      
                          <!-- Payment infos -->
                          <payment-info v-if="isDisplayCustomerDetails" :customerDetails="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>

                      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>

                      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 errors="<>"> </disabled-checkout-step>

                          • errors:

                          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-address">
                            
                                    <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-error-message class="snipcart-error-message--global-form" />
                                            <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>
                                            </fieldset>
                                            <address-fields
                                                :type="addressType"
                                                :initialAddress="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>

                                fancy-select

                                Usage of fancy-select

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

                                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">
                                            <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-error-message class="snipcart-error-message--global-form" />
                                    
                                                        <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-error-message name="email"></snipcart-error-message>
                                                        </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>

                                          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>

                                          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>
                                          
                                                          <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"
                                                                              :selectedPlan="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>

                                          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>

                                          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>

                                          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>

                                              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
                                                      :onFetchNextPage="snipcart.api.customer.fetchOrders"
                                                      :itemComponent="itemComponent"
                                                      :propsProvider="propsProvider"
                                                      messageLoading="customer_dashboard.loading"
                                                      messageNoResult="customer_dashboard.no_orders"
                                                      labelShowMore="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-error-message icon="front" fallback-message="payment_failed"></snipcart-error-message>
                                                            <div
                                                                v-if="authorizationFlowIsForm" 
                                                                class="snipcart-payment__form-container"
                                                                :class="{'snipcart-payment__form-container--loading': loading}">
                                                    
                                                                <payment-form 
                                                                    :paymentMethod="paymentSession.paymentMethod"
                                                                    :key="paymentSession.paymentMethod"
                                                                    :disabled="paymentMethodCurrentlyChanging"
                                                                    :paymentCurrentlyProccessing="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-form

                                                      Component that renders a credit card form.

                                                      Usage of payment-form

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

                                                      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"
                                                                  :paymentDetailsData="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>

                                                      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}`"
                                                                  :paymentMethod="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>

                                                      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" />
                                                        </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">
                                                                  <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-error-message class="snipcart-error-message--global-form" />
                                                                          <overridable name="register" 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-error-message name="email"></snipcart-error-message>
                                                                          </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-error-message name="password"></snipcart-error-message>
                                                                          </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-error-message name="passwordConfirmation"></snipcart-error-message>
                                                                          </div>
                                                          
                                                                          <overridable name="register" 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">
                                                                    <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-error-message class="snipcart-error-message--global-form" />
                                                            
                                                                            <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-error-message name="confirmationPassword"></snipcart-error-message>
                                                                            </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-error-message :show-fields-errors="false"></snipcart-error-message>
                                                                            <overridable name="shipping-address" section="top"></overridable>
                                                                
                                                                            <snipcart-label for="name">
                                                                                {{$localize('address_form.name')}}
                                                                            </snipcart-label>
                                                                            <snipcart-input name="name"></snipcart-input>
                                                                            <snipcart-error-message name="name"></snipcart-error-message>
                                                                
                                                                            <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" />
                                                                            </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" />
                                                                            </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"></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>
                                                                              <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-error-message 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>{{ shippingAddress | address }}
                                                                                          </strong>
                                                                                      </div>
                                                                                  </div>
                                                                                  <loading-component
                                                                                      message="shippingRates.loading"
                                                                                      :isLoading="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`.

                                                                  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}`">
                                                                              {{ description }}
                                                                          </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">
                                                                                    <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-error-message class="snipcart-error-message--global-form" />
                                                                            
                                                                                            <overridable name="signin" 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" 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 name="<string>" label="<string>"> </snipcart-address-autocomplete>

                                                                            snipcart-checkbox

                                                                            Checkbox form element.

                                                                            Usage of snipcart-checkbox

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

                                                                            snipcart-error-message

                                                                            Displays the error message associated with the form field.

                                                                            Usage of snipcart-error-message

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

                                                                            Default Template

                                                                            <div :data-for="inputName" class="snipcart-error-message">
                                                                            <flash-message
                                                                              v-if="isMainFormError && !small"
                                                                              :icon="icon"
                                                                              type="error"
                                                                              :title="title"
                                                                              :description="description"
                                                                            >
                                                                              <rectify-cart-action v-if="actionRequired"
                                                                                  class="snipcart-error-message__action">
                                                                                  {{ $localize('actions.apply_changes') }}
                                                                              </rectify-cart-action>
                                                                            </flash-message>
                                                                            <div
                                                                              v-else
                                                                              class="snipcart-error-message snipcart-error-message--input 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"
                                                                              >*Notices like this one are only shown in Test mode to help you diagnose issues.</em>
                                                                            </flash-message>
                                                                              </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-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>

                                                                                snipcart-select

                                                                                Usage of snipcart-select

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

                                                                                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>

                                                                                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>

                                                                                snipcart-typeahead

                                                                                Typeahead (autocomplete) form element.

                                                                                Usage of snipcart-typeahead

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

                                                                                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>

                                                                                  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
                                                                                        :onFetchNextPage="snipcart.api.customer.fetchSubscriptions"
                                                                                        :itemComponent="itemComponent"
                                                                                        :propsProvider="propsProvider"
                                                                                        messageNoResult="customer_dashboard.no_subscriptions"
                                                                                        labelShowMore="customer_dashboard.show_more_subscriptions"
                                                                                    ></paginated-list>

                                                                                    tab

                                                                                    Usage of tab

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

                                                                                    tabs

                                                                                    Usage of tabs

                                                                                    <tabs> </tabs>

                                                                                      textbox

                                                                                      Usage of textbox

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

                                                                                      tool-tip

                                                                                      Usage of tool-tip

                                                                                      <tool-tip> </tool-tip>