https://github.com/lloydjatkinson/astro-snipcart
Allows for the creation of E-Commerce sites using the Astro framework and Snipcart. Start your e-commerce business in minutes!
https://github.com/lloydjatkinson/astro-snipcart
astro astrojs-ecommerce cart e-commerce jamstack online-shop snipcart snipcart-api
Last synced: 14 days ago
JSON representation
Allows for the creation of E-Commerce sites using the Astro framework and Snipcart. Start your e-commerce business in minutes!
- Host: GitHub
- URL: https://github.com/lloydjatkinson/astro-snipcart
- Owner: lloydjatkinson
- License: mit
- Created: 2022-04-28T13:43:25.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2025-02-18T16:11:21.000Z (about 2 months ago)
- Last Synced: 2025-04-03T12:57:40.030Z (16 days ago)
- Topics: astro, astrojs-ecommerce, cart, e-commerce, jamstack, online-shop, snipcart, snipcart-api
- Language: Astro
- Homepage: https://astro-snipcart.vercel.app
- Size: 37.2 MB
- Stars: 109
- Watchers: 5
- Forks: 22
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- my-awesome-astro - astro-snipcart - Astro integration for [Snipcart](https://snipcart.com/) (What Do I Use... / If I want to add E-Commerce?)
- awesome-astro - Astro + Snipcart
- awesome-jamstack - Astro Snipcart - Astro Snipcart allows developers to build E-Commerce sites using the Astro framework and the Snipcart platform. (API / E-commerce)
README
Welcome to astro-snipcart 👋
> Astro Snipcart allows developers to rapidly build E-Commerce sites using the Astro framework and the Snipcart platform. Create an e-commerce site with just a few lines of HTML and Astro components!
This Astro integration contains all of the features that you need to build an e-commerce site with [Snipcart](https://snipcart.com/), including:
- ✅ **Automatic installation of the Snipcart library**
- ✅ **Zero JavaScript by default (apart from Snipcart)**
- ✅ **Astro components to define products**
- ✅ **Astro components for features such as displaying basket and total price**
- ✅ **TypeScript based product definitions surfaced as Astro component props**
- ✅ **An optional small design system providing common e-commerce components**
- 🔜 **Not just products, but subscription support also!**
### 🏠 [Homepage](https://astro-snipcart.vercel.app/en/introduction)
### ✨ [Demo](https://astro-snipcart-playground.vercel.app/)
## Install Astro Snipcart
This provides you with a set of Astro components that allow you to define your products and enables checkout. They do not have any visual aspects, do not imply any sort of theme, and are up to you to work with. These are how your application and Snipcart interact.
```sh
npm install @lloydjatkinson/astro-snipcart
```
## (Optional) Install Astro Snipcart Design System
This builds upon (and depends upon Astro Snipcart) and provides an optional E-Commerce orientated [design system](https://www.nngroup.com/articles/design-systems-101/#:~:text=Definition%3A%20A%20design%20system%20is,using%20reusable%20components%20and%20patterns.) which you can use all or parts of as the foundation for your E-Commerce site. In fact, you can build real-world sites as shown in [this playground demo](https://astro-snipcart-playground.vercel.app/).
```sh
npm install @lloydjatkinson/astro-snipcart-design-system
```
You'll then need to follow the steps to setup Tailwind and the [design system as per the Astro Snipcart documentation](https://astro-snipcart.vercel.app/en/design-system/getting-started)
Here's a brief example of what you can do with the design system:
```tsx
I'm some styled text!
```
Which can be built up into real-world site designs:
## Development and build
This project is a monoepo. Additionally, it uses pnpm as it's package manager. The `packages` directory is where the source is contained.
## Install
```sh
pnpm -r i
```
## Usage
```sh
pnpm run docs
pnpm run playground
```
## Format & Lint
```sh
pnpm -r format
pnpm -r lint
```
## Run tests
```sh
pnpm -r test
```
## Author
👤 **Lloyd Atkinson**
* Website: [https://lloydatkinson.net](https://lloydatkinson.net?ref=github-astro-snipcart)
* Twitter: [@lloydjatkinson](https://twitter.com/lloydjatkinson)
* Github: [@lloydjatkinson](https://github.com/lloydjatkinson)
## Show your support
Give a ⭐️ if this project helped you!