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.
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.
Jump into the Rodney Lab matrix chat room to get your questions answered.