Getting Started with my Astro-snipcart addon

January 6, 2024 at 04:35 AM

Owner & Operator of Matthiesen.xyz - Also the Core Developer of the Projects we maintain

snipcart

Table of Contents
Getting Started
-> Requirements
-> Install
-> SnipcartAPI Key
-> Snipcart allowed Domains
Usage
Examples

Getting Started

Requirements

Snipcart account
Snipcart API Key
Setup Allowed Domains that can use the API key from Snipcart
Setup Shipping rates (if applicable)
Astro v4.0

For more information about Snipcart SnipCart Docs

For more information about this addon Check the Github Repo

Install

npm i @adammatthiesen/astro-snipcart

before running the dev server you will need to add your environment variable...

Snipcart API Key

If your unsure about how to add environment variables check the Astro Documentation.

This Integration requires an environment variable named PUBLIC_SNIPCART_API_KEY.

Snipcart allowed domains

Snipcart by default does not allow any domain to use your API Key without first defining your domain. Configure it here....

Usage

The Following are the available imports availble to you for building your page... i have layed them out in a typical layout of how to import them into your Astro project for use.

// imports.astro
---
import * as SC from '@adammatthiesen/astro-snipcart';

import * as SCVue from '@adammatthiesen/astro-snipcart/vue';

---

The Following are the Standard Astro Components Available to import:

SC.Cart creates a button for opening the cart
SC.CartItemCount Shows the ammount of items as ( 2 )
SC.CartTotal Shows the current cart total ( $2.00 )
SC.Login Shows the Sign-in/Customer Dashboard if you've enabled the feature within snipcart
SC.MakeProduct is the script used for product creation
SC.HeaderAstro Put this in your <head> tag to activate snipcart on your website (DOSE NOT WORK WITH VIEW TRANSITIONS)

The Following are the Vue Astro Components, They are inteded to fix the ViewTransition bug with Snipcart's Interactive components(REQUIRES @astrojs/vue Replaces SC.* with SCVue.* if you use <ViewTransitions />):

SCVue.HeaderVue
SCVue.CartItemCount
SCVue.CartTotal

All Examples

1
---
2
import * as SCVue from '@adammatthiesen/astro-snipcart/vue';
3
---
4
<span>
5
    You have <SCVue.CartItemCount transition:persist client:load /> items in your cart.
6
</span>

1
---
2
import * as SC from '@adammatthiesen/astro-snipcart';
3
---
4
<span>
5
    You have <SC.CartItemCount /> items in your cart.
6
</span>

1
---
2
import * as SCVue from '@adammatthiesen/astro-snipcart/vue';
3
---
4
total of <SCVue.CartTotal transition:persist client:load />.

1
---
2
import * as SC from '@adammatthiesen/astro-snipcart';
3
---
4
total of <SC.CartTotal />.

1
---
2
import { HeaderAstro } from '@adammatthiesen/astro-snipcart';
3
---
4
<html>
5
    <head>
6
        <!-- ... other header stuff ... -->
7
        <HeaderAstro />
8
    </head>
9
    <body>
10
        <slot />
11
    </body>
12
</html>

1
---
2
import { ViewTransitions } from "astro:transitions";
3
import { HeaderVUE } from '@adammatthiesen/astro-snipcart/vue';
4
---
5
<html>
6
    <head>
7
        <!-- ... other header stuff ... -->
8
        <ViewTransitions />
9
        <HeaderVUE transition:persist client:idle />
10
    </head>
11
    <body>
12
        <slot />
13
    </body>
14
</html>

1
---
2
import * as SC from '@adammatthiesen/astro-snipcart';
3
---
4
<SC.Cart>
5
    <button>Open basket/checkout</button>
6
</SC.Cart>

1
---
2
import * as SC from '@adammatthiesen/astro-snipcart';
3
// Available usage; <SC.Cart>, <SC.CartItemCount />, <SC.CartTotal />, <SC.Login />, <SC.HeaderAstro />, <SC.MakeProduct>
4
import * as SCVue from '@adammatthiesen/astro-snipcart/vue';
5
// Available usage; <SCVue.CartItemCount client:? />, <SCVue.CartTotal client:? />, <SCVue.HeaderVue client:? />
6
---

1
---
2
import * as SC from '@adammatthiesen/astro-snipcart';
3
---
4
<SC.Login>
5
    <button>Login</button>
6
</SC.Login>

1
---
2
import * as SC from '@adammatthiesen/astro-snipcart';
3
---
4
<SC.MakeProduct
5
  id="SKU-0001"
6
  name="Example Name"
7
  price={ 12.99 }
8
  url="/store/example" # OPTIONAL Remove entry if not using...
9
  description="Some Default Example Product" # OPTIONAL Remove entry if not using...
10
  image="/Link/To/Image" # OPTIONAL Remove entry if not using...
11
  catagories? # OPTIONAL Remove entry if not using...
12
  fileGuid? # OPTIONAL Remove entry if not using...
13
  quantity? # OPTIONAL Remove entry if not using...
14
  minimumQuantity? # OPTIONAL Remove entry if not using...
15
  maximumQuantity? # OPTIONAL Remove entry if not using...
16
  quantityStep? # OPTIONAL Remove entry if not using...
17
  customFields? # OPTIONAL Remove entry if not using...
18
  stackable? # OPTIONAL Remove entry if not using...
19
  >
20
  <button>Add to cart</button>
21
</SC.MakeProduct>

1
---
2
import * as SC from "@adammatthiesen/astro-snipcart";
3
---
4
<SC.Cart>
5
    <button>
6
        Cart / Checkout
7
    </button>
8
</SC.Cart>
9

10

11
<SC.CartItemCount /> Items - Sub Total: <SC.CartTotal />