- Use deferred transitions for add to cart.
A next generation E-Commerce theme built with SvelteKit.
This is how to build a modern website
- Debugging backend code is not yet supported. More info
- Stores can't be updated in server as the
$app/env/browser
is not available - It's better to use Svelte Context API to share data between nested components than using props.
- For separated components, it's better to use stores.
- Use custom
__error.svelte
to show error message. - It's better to separate reusable components into
$lib
directory. - Always keep an eye on monthly changelog, as sveltekit is still in beta.
One example for this is in commit (63737b89b3881f891c68513189361a485e5c9ab2) When I found that
$page.path
was replaced with$page.url.pathname
- Always check
<slot />
in layouts and children components. - The function
get
fromsvete/store
will returnfalse
if the store is an empty array, So you should validate it withif (!get(store)) ...
. - If you found a bug, it's better to use incognito mode to ignore cache & localStorage.
-
SVG follows HTML direction.
-
Fancy border radius follow HTML direction as well.
-
Useful libraries:
- Typesafe i18n (⭐+720)
An opinionated, fully type-safe, lightweight localization library for TypeScript and JavaScript projects with no external dependencies.
- svelte-i18n (⭐+660)
Internationalization library for Svelte
- svelte-intl-precompiled (⭐+180)
I18n library for Svelte.js that analyzes your keys at build time for max performance and minimal footprint.
- 🔥 sveltekit-i18n (⭐+30)
Internationalization library built for SvelteKit
- Typesafe i18n (⭐+720)
What a discovery!
- localStorage is always text based, so it's better to use
JSON.stringify
andJSON.parse
to store objects and arrays (which are objects btw).
Using gQuery
I already had experience with building with Wordperss+Woocommerce
But this was a good refresher on the API
Unfortunately it was not the right choice here. as Our website uses a 3rd party plugin for products, And they changed the way it works with images so now it fetches images from their Google Cloud not from our server! This resulted in lots of CORS errors that I don't really care to fix anymore. I'll explore other options.
A headless-first shopify alternative built with Javascript More info
- Tried to use it but it had lots of issues!
I used v2 in previous projects
- Tailwind has some nice plugins available in documentation
- Most of DaisyUI components can be easily rebuilt with Tailwind (for better control)
The default bot action is to comment on each push with the deployment status.
To disable this, you can modify vercel.json
as follows:
- This website is a great tool for managing favicons
- Use inline SVG instead of external for fewer HTTP requests and to disable right click save image as, also to avoid dealing with accessiblity for the image tag.
{
"github": {
"silent": true
}
}
Source ⭐+7.3K
- ✅ Built with TailwindCSS.
- ✅ Easy to use and customize.
- ✅ Regular updates
Source ⭐+2.2K
- ✅ Material design.
- ✅ Regular updates
Source ⭐+70
- ✅ Great for prototyping (paper like).
Source ⭐+500
- ✅ Gorgeous design.
- ✅ Regular updates.
Source ⭐+1.3K
- ✅ Most feature complete, has most components I may need.
- ✅ Regular updates.
- ❎ Ugly design for my taste.
Source ⭐+260
- ✅ Material design.
- ✅ Regular updates.
- ⚠ Still work in progress.
Source ⭐+1.2K
- ⚠ Built with Tailwind 2.
- ⚠ A bit outdated.
Source ⭐+130
- ✅ Typescript + plain CSS.
- Svelte materialfy (deprecated)
- Svelteit (deprecated)
UI Inspired by muroexe
- Undraw For awesome illustrations
- jovianmoon for the lazy loading image function