itswadesh / svelte-commerce

The open-source storefront for any eCommerce. Built with a PWA and headless approach, using a modern JS stack. The API approach also allows you to merge Svelte Commerce with any third-party tool like payment gateways, POS or AI. WIP for MedusaJS, Woocommerce, Bigcommerce and Shopify.

Zapvi Validate

Autosuggest modal Breadcrumb CatelogNav Footer Mobile Filter S3.ts import { Footer, Nav } from '$lib/theme-config' Homepage OTP login Shop/slug/[] routes/catalog/[slug]

Svelte Commerce

The open-source frontend for any eCommerce. Built with a PWA and headless approach, using a modern JS stack. We have WIP for MedusaJS, Woocommerce, Bigcommerce and Shopify. The API approach also allows you to merge Svelte Commerce with any third-party tool like payment gateways, POS or AI.

Reach out to me with queries!

Big Brands using svelte-commerce

What is it?

• Svelte Commerce is a PWA storefront for your existing eCommerce based on Sveltekit.
• It is possible to connect with any eCommerce backend that provides an API
• We are working on adaptors of Medusajs, Shopify, Magento, Woocommerce, Litekart, Bigcommerce

Features

• 👨🏻‍💻 Its both SSR and SPA
• 🚀 Superfast
• 🔗 It is possible to connect with any eCommerce backend if the backend has Rest API
• 🔓 Svelte Commerce is free and open source. Download and modify it the way you want
• 🛒 Most of the essential features for ecommerce are already integrated
• 💰 No need to make a big leap or invest huge amount. Just take this opend source project and attach to existing backend.

Get Started

git clone https://github.com/itswadesh/svelte-commerce.git
cd svelte-commerce
npm i
npm run dev

Thats all !

Open http://localhost:3000 on chrome. Your app should be live with awesome sveltekit up and running

Configuration

There are 3 places to configure

1. src/lib/config/ All non secret and application wide configs are stored here, if required, change according to your requirement.

2. .env All secrets stored here

3. src/lib/services/index.ts This is used to define which service to use. Only 1 of the listed service can be active at a time. Valid values are Litekart Medusa Bigcommerce Shopify Woocommerce

Deployment

Click on the button to directly deploy to Netlify or Vercel. Zero configuration required.

The following envirnoment variable is mandatory

PUBLIC_LITEKART_DOMAIN=demo.litekart.in

You can replace the env variable with your store domain

Docker

We also support docker images, use the following command to pull the latest docker image and deploy it:

docker run -d -p 3000:3000 ghcr.io/itswadesh/svelte-commerce:latest

Features

Svelte ecommerce - Headless, Authentication, Cart & Checkout, TailwindCSS, Server Rendered, Proxy + API Integrated, Animations, Lazy Loading, Loading Indicators, Carousel, Instant Search, Faceted Filters, Open Source

Updates

Latest update: 07-February-2023

Click here to see all the updates

• 07-Jun-2023 - Deeplinking for social aharing buttons
• 07-February-2023 - Prettified.
• 06-February-2023 - Sveltekit 1.5
• 15-December-2022 - Sveltekit 1.0 - Finally.
• 05-December-2022 - fix: Close message
• 30-November-2022 - Fixed: Coupon apply and remove, Added: Back to top fade animation
• 29-November-2022 - Improved image lazy loading technique
• 29-November-2022 - Added Price and Discount filters to product catalog
• 29-November-2022 - Preload data on link hover
• 25-November-2022 - Service worker added
• 10-November-2022 - Product options introduced
• 04-November-2022 - Added verify pincode / zip
• 03-November-2022 - New slider added for more control over design
• 02-November-2022 - Cleanup unused packages
• 31-October-2022 - Dynamic searchbat text
• 31-October-2022 - Added title, description, keywords
• 27-October-2022 - Improved megamenu layout
• 24-October-2022 - fix: login, order success, failed payment, frequently bought together
• 20-October-2022 - Sentry added
• 20-October-2022 - Zero-configuration Coolify deployment
• 16-October-2022 - SEO attributes Added
• 11-October-2022 - Add to cart animation
• 30-September-2022 - Attached to ResT API Backend, Migrated to new Sveltekit version
• 12-September-2022 - Modal based mobile device search instead of page based
• 12-September-2022 - New fully working theme launched
• 04-September-2022 - Product schema Added
• 26-August-2022 - Added Trending Products section
• 26-April-2022 - Latest SvelteKit version
• 26-April-2022 - Improved image lazy loading
• 26-April-2022 - New Banners section
• 26-April-2022 - New Authentication System
• 26-April-2022 - New Blogs section
• 24-April-2022 - Zero-configuration Vercel deployment
• 22-July-2021 - Integrated with netlify deployment
• 07-May-2021 - Completely Migrated to SvelteKit

IDEAS

Wherever we need store info at server page, we get it from its own api call, if store info requires in client page we take it from the layout.ts page where cached store into is available

svelte-commerce's Issues

Documentation or Guide for integration with Medusa

I have been trying to integrate my medusa backend with this store-front app.

I would like to know if you have some documents or guide for integrations with Medusa?
Or integration with Medusa is still WIP?

Documentation for Woocommerce

Please add a small documentation for Woocommerce configuration just like medusa.

Svelte Commerce seems like a great project. Many thumbs up

Err at Hooks... TypeError: Cannot read properties of undefined (reading '_id')

Hey, thanks for the great project! And also happy to hire you for 20-30min to help me get it working locally and connecting to my REST API. My email [email protected] if interested. Thanks.

So, I cloned, npm install with 0 vulnerabilities and WARN derecated and then renamed to .env but didn't change there anything. When I npm run dev then all nice in console but when I open http://localhost:3000/ then I get 500 undefined in my browser and in console: https://i.imgur.com/6XIBxRG.png

I'm on Win 11 and Node v18.7.0

Display server errors

Describe the bug
Adding items to the cart feels like the app is not working with no warning been displayed.

To Reproduce
I downloaded the repo and install dependencies and try adding an item to the cart.

Expected behavior
There should be server errors warnings. I see the error on the web console "401 unauthorized" invalid token...

api structure document

hallo , its the best ecommerce tamlet i came a cross so far
i want to integrate it with my Strapi backend, is it possible? where can he api structure so i can make my api the same

Add a security policy

Hey there!

I belong to an open source security research community, and a member (@ktg9) has found an issue, but doesn’t know the best way to disclose it.

If not a hassle, might you kindly add a SECURITY.md file with an email, or another contact method? GitHub recommends this best practice to ensure security issues are responsibly disclosed, and it would serve as a simple instruction for security researchers in the future.

Thank you for your consideration, and I look forward to hearing from you!

(cc @huntr-helper)

[filtering page] APPLY button is not shown at the bottom of a screen on an Android phone

Describe the bug
APPLY button is not shown at the bottom of a screen on an Android phone. I am talking about the "filtering" page.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://svelte-commerce.litekart.in/search' from your Android smartphone
2. Click on 'filter'

Expected behavior
APPLY button is shown at the bottom of the screen

Screenshots

Smartphone (please complete the following information):

• Device: Android smartphone
• OS: Android 10
• Browser: Chrome
• Version: 96.0.4664.92

npm i (8.19.1) not able to run dev

Not able to run dev
Not able to install dependencies fully on npm version 8.19.1

Errors which I have faced:
npm ERR! syscall read
npm ERR! errno -4077
npm ERR! network read ECONNRESET
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network 'proxy' config is set properly. See: 'npm help config'
npm ERR! A complete log of this run can be found in:
npm ERR!

I have tried

• npm i
• npm install vite
• npm config set fetch-retry-mintimeout 20000
• npm config set fetch-retry-maxtimeout 120000

How can I start using?
Should I try going back to npm previous version?
Any suggestion would be appreciated

Is it possible to use with wordpress (woocommerce) as a backend?

Also thanks for making this promising project.

What is the docker compose.yaml

What is the best compose.yaml if I deploy using docker compose? Because I have to use woocommerce, I need to modify some configurations

WooCommerce 'undefned' error

Undefined error
After compiling, modifying the appropriate parameters for WooCommerce, it loads. it just doesn't take anything from WooCommerce.

Screenshots
Image URL Link: https://ibb.co/YyjLd93
Image URL Link: https://ibb.co/DbfYxwr

You should enalbe Discusion here on Github

Instead of people asking random questions on issues they could use discussion section here with GitHub.

Unhandled Promise Rejection

Description
I have a medusajs backend. I cloned this repo, added medusa-backend-url in .env file, exported medusa in the src/lib/services/index.ts directory, then installed dependencies. When i run the app it starts correctly but brings an error(shown below) and the server stops. Is there anything i'm missing?

Error message

[email protected] dev
node src/lib/services/copy && vite dev --host --port 3000

VITE v4.3.7 ready in 27283 ms

➜ Local: http://localhost:3000/
➜ Network: http://192.168.22.112:3000/
➜ Network: http://10.42.0.1:3000/
➜ press h to show help
10:21:04 AM [vite-plugin-svelte] /node_modules/svelte-toasts/src/FlatToast.svelte:37:0 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
10:21:07 AM [vite-plugin-svelte] /node_modules/svelte-toasts/src/BootstrapToast.svelte:23:0 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
node:internal/process/promises:265
triggerUncaughtException(err, true /* fromPromise */);
^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "[object Object]".] {
code: 'ERR_UNHANDLED_REJECTION'
}

Migrate to SvelteKit

Sapper is no longer actively developed and SvelteKit is a much better experience

Migration guide: https://kit.svelte.dev/migrating

Document is not defined

Got the following error while accessing the profile page

31|lapi    | GET /api/users/me 200 8.617 ms - 144
31|lapi    | GET /api/cart 200 6.822 ms - 888
31|lapi    | GET /api/settings 200 1.144 ms - -
31|lapi    | GET /api/users/me 401 0.808 ms - 25
30|h       | (node:25367) UnhandledPromiseRejectionWarning: ReferenceError: document is not defined
30|h       |     at Object.goto (/var/www/hopyshopy/www/__sapper__/build/server/api-a61cbacc.js:454:45)
30|h       |     at getMe (/var/www/hopyshopy/www/__sapper__/build/server/profile-a0922ee7.js:21:11)
30|h       |     at process._tickCallback (internal/process/next_tick.js:68:7)
30|h       | (node:25367) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
30|h       | (node:25367) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
31|lapi    | GET /api/cart 200 11.761 ms - 888

.prettierrc missing plugins key, uses deprecated option

Describe the bug
prettier-plugin-svelte isn't being loaded on prettier invocation because "plugins" is empty/undefined.

[warn] Ignored unknown option { svelteSortOrder: "options-styles-scripts-markup" }.
[warn] Ignored unknown option { svelteStrictMode: true }.
[warn] Ignored unknown option { svelteBracketNewLine: false }.
[warn] Ignored unknown option { svelteAllowShorthand: true }.
[warn] Ignored unknown option { svelteIndentScriptAndStyle: false }.
[error] No parser could be inferred for file "src/lib/ui/Errors.svelte".

Additionally, once the plugin is loaded, a warning indicating that the svelteBracketNewLine option is deprecated in favor of bracketSameLine appears.

To Reproduce
Steps to reproduce the behavior:

1. Run npx prettier src/lib/ui/Errors.svelte -c
2. Observe warning and error output:

Checking formatting...
[warn] Ignored unknown option { svelteSortOrder: "options-styles-scripts-markup" }.
[warn] Ignored unknown option { svelteStrictMode: true }.
[warn] Ignored unknown option { svelteBracketNewLine: false }.
[warn] Ignored unknown option { svelteAllowShorthand: true }.
[warn] Ignored unknown option { svelteIndentScriptAndStyle: false }.
src/lib/ui/Errors.svelte
[error] No parser could be inferred for file "src/lib/ui/Errors.svelte".
All matched files use Prettier code style!

Expected behavior

Checking formatting...
All matched files use Prettier code style!

Proposed solution

I don't work with prettier regularly, but this seems to work in my environment without issue.

diff --git a/.prettierrc b/.prettierrc
index b577b951..ff8b5f00 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,9 +2,10 @@
        "semi": false,
        "singleQuote": true,
        "trailingComma": "none",
+       "bracketSameLine": true,
+       "plugins": ["prettier-plugin-svelte"],
        "svelteSortOrder": "options-styles-scripts-markup",
        "svelteStrictMode": true,
-       "svelteBracketNewLine": false,
        "svelteAllowShorthand": true,
        "printWidth": 100,
        "useTabs": true,

Instructions to integrate with Saleor?

Is your feature request related to a problem? Please describe.
I want to integrate this frontend with Saleor
Describe the solution you'd like
A simple readme with how to get started would be great!
Otherwise, just some resources on how to get started will also do.
Describe alternatives you've considered
I've tried to have a look at config.js, but I guess this frontend is using a REST API and Saleor uses GraphQL, I'm new to GraphQL and can't figure out the integration.

Deployment to netlify is broken

Deployment to netlify via Deploy button produce a faulty website.
The error message is

Add theming feature

We need to add a theming feature so that a developer can change the look and feel of the storefront without modifying a lot of code.

Fix reel video page

Update Tailwind to v2

Hi. Are there any plans to switch to the newer version of TailwindCSS ?. I use Sapper and Tailwind 2 in production and about to start a new e-commerce project. Before I begin, was looking for ready-made options. Your project is almost perfect. Cheers

Link to documentation

Hi sorry to disturb you this looks like an amazing project but I was wondering if there's any link to documentation on how can I integrate this with a MedusaJS backend. I can see some variable defined in the .env.example but I also see other backend solutions so I don't know if I should delete those or how should I proceed/possible caveats etc

Thanks in advance

BTW I know it's not ideal to open an issue for this but I couldn't see any way to reach out to you to ask this question, apologies.

Instructions for Magento 2.3

This project looks interesting for us, do you have an instructions how to integrate it with Magento 2.3? I mean how to install it globally for whole website (not for a single module)?

Make documentations on how to change part of the project

Error 500 when deployed to vercel/netlify

Getting Error 500 when deployed to vercel/netlify

To Reproduce

1. click the the deploy to netlify or the deploy to vercel button on the github repo
2. wait for the site to be deployed on vercel or netlify
3. after the site is deployed successfully you will see the error 500
4. no error to be found on the log of the deployment

Expected behavior
The main ecommerce page appearing on the deployed site

Screenshots
If applicable, add screenshots to help explain your problem.