|Table of Contents
|-> SnipcartAPI Key
|-> Snipcart allowed Domains
|-> Checkout & Open Cart
|-> Cart Item Count
|-> Cart Total Value
|-> Customer Login & Dashboard
|-> Product Creation
|-> Setup Script
|-> Advanced Example
For more information about Snipcart SnipCart Docs
For more information about this addon Check the Github Repo
npm i @adammatthiesen/astro-snipcart
before running the dev server you will need to add your environment variable...
If your unsure about how to add environment variables check the Astro Documentation.
This Integration requires an environment variable named
Snipcart by default does not allow any domain to use your API Key without first defining your domain. Configure it here....
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:
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
SCVue.* if you use