Getting Started with my Astro-snipcart addon
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 cartSC.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 snipcartSC.MakeProduct
is the script used for product creationSC.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