@adammatthiesen/astro-snipcart
Advanced tools
Astro SnipCart Integration based on another npm package by lloyedjatkinson that has been updated for astro v4
This project is based on another project with the same name... lloyedjatkinson/astro-snipcart that hasnt been updated to properly support Astro v4. This project is super simple and just gives you support for Snipcart within astro using very simple components...
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.
import * as SC from '@adammatthiesen/astro-snipcart';
// Available usage; <SC.Cart>, <SC.CartItemCount />, <SC.CartTotal />, <SC.Login />, <SC.HeaderAstro />, <SC.MakeProduct>
import * as SCVue from '@adammatthiesen/astro-snipcart/vue';
// Available usage; <SCVue.CartItemCount client:? />, <SCVue.CartTotal client:? />, <SCVue.HeaderVue client:? />
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.HeaderVueSCVue.CartItemCountSCVue.CartTotalnpm i @adammatthiesen/astro-snipcart
Make sure to add PUBLIC_SNIPCART_API_KEY to your environment variables
Add one of the following inside your <head>:
Astro Without ViewTransitions
---
import { HeaderAstro } from '@adammatthiesen/astro-snipcart';
---
<head>
/** Other Head Data */
<HeaderAstro />
</head>
Astro WITH ViewTransitions (Requires @astrojs/vue)
import { HeaderVUE } from '@adammatthiesen/astro-snipcart/vue';
---
<head>
/** Other Head Data */
<HeaderVUE transition:persist client:idle />
</head>
For a Full tutorial of this addon, check out the blog post here
FAQs
Astro SnipCart Integration based on another npm package by lloyedjatkinson that has been updated for astro v4
The npm package @adammatthiesen/astro-snipcart receives a total of 0 weekly downloads. As such, @adammatthiesen/astro-snipcart popularity was classified as not popular.
We found that @adammatthiesen/astro-snipcart demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.