https://github.com/rodneylab/svelte-ecommerce-site-start

SvelteKit eCommerce site: how to build a fast, SEO friendly, static eCommerce site using Svelte, Snipcart and Directus.
https://github.com/rodneylab/svelte-ecommerce-site-start

directus ecommerce snipcart svelte sveltekit

Last synced: 4 days ago
JSON representation

SvelteKit eCommerce site: how to build a fast, SEO friendly, static eCommerce site using Svelte, Snipcart and Directus.

• Host: GitHub
• URL: https://github.com/rodneylab/svelte-ecommerce-site-start
• Owner: rodneylab
• Created: 2022-09-29T09:52:50.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-02-18T21:41:50.000Z (over 1 year ago)
• Last Synced: 2024-05-08T23:06:53.333Z (6 months ago)
• Topics: directus, ecommerce, snipcart, svelte, sveltekit
• Language: Svelte
• Homepage:
• Size: 2.43 MB
• Stars: 9
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        




  

    

  





  Svelte eCommerce Site Start



## svelte-ecommerce-site-start

Starter code for the Svelte eCommerce Site tutorial. Head over there to get started! Also see the Demo site for finished storefront.

## 🧱 Svelte eCommerce Site: What We’re Building

We will build out an small online lego store using SvelteKit for the frontend, Snipcart to manage the checkout and Directus for storing our lego product details and images. The store will have the basic pages you expect from a an eCommerce store, linking them hierarchically in an SEO friendly way recommended by Google. That’s not the end of the SEO side of things though! We see how you can let Google and other search engines know about product prices, reviews and where the images are. With the right information Google will be able to create featured snippets in search results. These let your eCommerce store stand out from others returned in results. We will also use edge functions paired with Directus search capability to add a quick search facility without the need to add an external service or host you own Open Source search instance.

Pop open the Svelte eCommerce site demo to take a look yourself.

## 👍🏽 Svelte eCommerce Site: What we will Cover

> **What we cover**:

>

> - New **SvelteKit routing API**,

> - integrating **Snipcart checkout** state with Svelte stores,

> - **Svelte flip animations** for dynamic product pages,

> - uploading product data to **Directus** using your **existing JSON** files,

> - using **Netlify Edge functions** to add Middleware,

> - querying Directus SQL database the **TypeScript friendly** way,

> - generating **responsive, NextGen images** for products using the Directus API,

> - adding **eCommerce Schema.org** markup to improve site SEO,

> - **product search feature** using Directus API and edge functions,

> - **generating Base64 encoded low res placeholder images** in SvelteKit and Deno edge functions,

> - **deploying to Netlify and testing** SEO.

## ⛔️ What we won’t Cover

- SvelteKit basics: check out the Starting out Svelte and SvelteKit tutorial if this tutorial starts too quickly for you,

- order fulfilment, though if you can integrate a service like Printful to help with fulfilment, packing and shipping,

- finding clients to build eCommerce sites for — that’s down to you!

## 😕 Still not sure if it’s for you?

Jump into the [Rodney Lab matrix chat room](https://matrix.to/#/%23rodney:matrix.org) to get your questions answered.