logo Matthiesen IT Services & Support
snipcart

Getting Started with my Astro-snipcart addon

Astro FOSS Tutorial

Our blog is powered by a Self-Hosted GhostCMS server.
Table of Contents
Getting Started
-> Requirements
-> Install
-> SnipcartAPI Key
-> Snipcart allowed Domains
Usage
Examples
-> Checkout & Open Cart
-> Cart Item Count
-> Cart Total Value
-> Customer Login & Dashboard
-> Product Creation
-> Setup Script
-> Advanced Example

Getting Started

Requirements

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.

The Following are the Standard Astro Components Available to import:

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 />):

Examples

Checkout / Open Cart (Cart)

Cart Item Count (CartItemCount(Astro-Component))

Cart Item Count (CartItemCount(Vue-Component))

Cart Total Value / Price (CartTotal(Astro-Component))

Cart Total Value / Price (CartTotal(Vue-Component))

Customer Login / Dashboard (Login)

Product Creation (MakeProduct)

Setup Script NO VIEW TRANSITIONS (HeaderAstro)

Setup Script WITH VIEW TRANSITIONS (HeaderVue)

A Advanced Example (Multi import)

← Back to Blog