Skip to content
Astro Snipcart

Components & TypeScript

export interface Element {
    readonly as?: keyof HTMLElementTagNameMap;
}


export type Currency = number; // | { readonly [key: string]: string };


export type SnipcartAttributes =
    | 'id'
    | 'class'
    | 'data-item-id'
    | 'data-item-name'
    | 'date-item-image'
    | 'data-item-price'
    | `data-item-price-${string}`
    | 'data-item-description'
    | 'data-item-categories'
    | 'data-item-metadata'
    | 'data-item-url'
    | 'data-item-file-guid'
    | 'data-item-quantity'
    | 'data-item-min-quantity'
    | 'data-item-max-quantity'
    | 'data-item-quantity-step'
    | 'data-item-stackable'
    | 'data-item-shippable'
    | 'data-item-has-taxes-included'
    | 'data-item-taxes'
    | `data-item-custom${number}-name`
    | `data-item-custom${number}-options`
    | `data-item-custom${number}-type`
    | `data-item-custom${number}-required`
    | `data-item-custom${number}-placeholder`
    | `data-item-custom${number}-placeholder`
    | 'data-item-weight'
    | 'data-item-length'
    | 'data-item-height'
    | 'data-item-width'
    | 'data-item-width';


export interface SnipcartProductDimensions {
    readonly weightInGrams?: number;
    readonly lengthInCentimeters?: number;
    readonly heightInCentimeters?: number;
    readonly widthInCentimeters?: number;
}


export type SnipcartProductCustomField = {
    readonly name: string;
    readonly options: readonly string[];
    readonly value?: string;
    readonly type?: string;
    readonly required?: boolean;
    readonly placeholder?: string;
};


export type SnipcartProductStackable = 'auto' | 'never' | 'always';


export interface SnipcartProduct {
    readonly id: string;
    readonly name: string;
    readonly price: Currency;
    readonly url?: string | URL;
    readonly description?: string;
    readonly image?: string;
    readonly categories?: readonly string[];
    readonly metadata?: { readonly [key: string]: string };
    readonly fileGuid?: string;
    readonly quantity?: number;
    readonly minimumQuantity?: number;
    readonly maximumQuantity?: number;
    readonly quantityStep?: number;
    readonly dimensions?: SnipcartProductDimensions;
    readonly customFields?: readonly SnipcartProductCustomField[];
    readonly stackable?: SnipcartProductStackable;
    readonly shippable?: boolean;
    readonly taxable?: boolean;
    readonly taxes?: readonly string[];
    readonly hasTaxesIncluded?: boolean;
}


export interface ProductMeta {
    readonly currency: string;
    readonly relatedProductIds?: readonly string[];
    readonly additionalImages?: readonly string[];
    readonly originalPrice?: Currency;
    readonly variants?: readonly string[];
    readonly sizes?: readonly string[];
}


// This type is likely to be refactored away.
export type SnipcartProductWithProductMeta = SnipcartProduct &
    Omit<ProductMeta, 'relatedProductIds'>;

Components

SnipcartSetup

Used to install the Snipcart library.

  • Requires the environment variable PUBLIC_SNIPCART_API_KEY to be set.
  • Must be inserted into the <head>, such as in a base layout component.
---
import { SnipcartSetup } from '@lloydjatkinson/astro-snipcart/astro';
---

CartCheckout

Used to trigger the opening of the Snipcart dialog.

  • Slotted content will automatically trigger opening.
---
import { CartCheckout } from '@lloydjatkinson/astro-snipcart/astro';
---


<CartCheckout>
    <button>Open basket</button>
</CartCheckout>

CustomerSignIn

Used to allow a customer to login or signup.

  • The account is managed by Snipcart.
  • Must be enabled in the Snipcart dashboard. Default is to allow guests only.
  • Does nothing if allow guests only is enabled.
---
import { CartCheckout } from '@lloydjatkinson/astro-snipcart/astro';
---


<CustomerSignIn>
    <button>Login</button>
</CustomerSignIn>

CartItemsCount

Used to render the count of total items in the cart.

  • Snipcart will render the value.
---
import { CartItemsCount } from '@lloydjatkinson/astro-snipcart/astro';
---


<span>
    You have <CartItemsCount /> items in your cart.
</span>

CartTotalPrice

Used to render the total price of the items in the cart.

  • Snipcart will render the value.
---
import { CartTotalPrice } from '@lloydjatkinson/astro-snipcart/astro';
---


<span>
    You have £<CartItemsCount />  worth of items in your cart.
</span>

Product

Used to define a product that is added to the cart when the user interacts with the component.

  • This is a renderless component. That is, it does not visually render anything other than the slotted content and the appropriate Snipcart data attributes.
  • Clicking this component triggers the adding of a product to the cart.
  • Snipcart looks for the existence of this component with the appropriate data attributes and values as part of it’s order validation (Snipcart can also use a JSON returning API for this).
---
import { Product } from '@lloydjatkinson/astro-snipcart/astro';
---
<Product
    as="span"
    id="SKU-0001"
    name="Standard T-Shirt"
    url="/product/standard-t-shirt"
    price={12.99}
    description="Every day basic t-shirt"
    image="/blue-t-shirt.jpg">
    <button>
        Add
    </button>
</Product>