B2C Storefront
for Mercur - Open Source Marketplace Platform
๐๏ธ B2C Marketplace Storefront Demo ยท Mercur Website ยท ๐ Explore the docs
Customizable storefront designed for B2C with all elements including browsing and buying products across multiple vendors at once.
Ready to go:
- Home Page - ๐๏ธ Check demo
- Listing
- Product Page
- Shopping Cart
- Seller Page
- Selling Hub - Moved to external VendorPanel
- Wishlist
Mercur is an open source marketplace platform that allows you to create high-quality experiences for shoppers and vendors while having the most popular Open Source commerce platform MedusaJS as a foundation.
Mercur is a platform to start, customize, manage, and scale your marketplace for every business model with a modern technology stack.
Clone the repository
git clone https://github.com/mercurjs/b2c-marketplace-storefront.gitย
Go to directory
cd b2c-marketplace-storefrontย
Install dependencies
npm installย
Make a .env.local file and copy the code below
# API URL
MEDUSA_BACKEND_URL=http://localhost:9000
# Your publishable key generated in mercur admin panel
NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY=
# Your public url
NEXT_PUBLIC_BASE_URL=http://localhost:3000
# Default region
NEXT_PUBLIC_DEFAULT_REGION=pl
# Stripe payment key. It can be random string, don't leave it empty.
NEXT_PUBLIC_STRIPE_KEY=supersecret
# Backend cookie secret
REVALIDATE_SECRET=supersecret
# Your site name in metadata
NEXT_PUBLIC_SITE_NAME="Fleek Marketplace"
# Your site description in metadata
NEXT_PUBLIC_SITE_DESCRIPTION="Fleek Markeplace"
# Algolia Application ID
NEXT_PUBLIC_ALGOLIA_ID=supersecret
# Algolia Search API Key
NEXT_PUBLIC_ALGOLIA_SEARCH_KEY=supersecret
#TalkJS APP ID
NEXT_PUBLIC_TALKJS_APP_ID=<your talkjs app id>ย
Start storefront
npm run devย
To work Algolia correctly you need to configure facets and searchable attributes. You can use import function to upload algolia-config.json file ย
In Algolia dashboard chose your index and select Import configuration from Manage index dropdown menu ย
ย
{
"settings": {
"minWordSizefor1Typo": 4,
"minWordSizefor2Typos": 8,
"hitsPerPage": 20,
"maxValuesPerFacet": 100,
"searchableAttributes": [
"title",
"subtitle",
"brand.name",
"tags.value",
"type.value",
"categories.name",
"collection.title",
"variants.title"
],
"numericAttributesToIndex": null,
"attributesToRetrieve": null,
"unretrievableAttributes": null,
"optionalWords": null,
"attributesForFaceting": [
"average_rating",
"filterOnly(categories.id)",
"categories.name",
"seller.handle",
"seller.store_status",
"filterOnly(supported_countries)",
"searchable(title)",
"variants.color",
"variants.condition",
"variants.prices.currency_code",
"variants.size"
],
"attributesToSnippet": null,
"attributesToHighlight": null,
"paginationLimitedTo": 1000,
"attributeForDistinct": null,
"exactOnSingleWordQuery": "attribute",
"ranking": [
"typo",
"geo",
"words",
"filters",
"proximity",
"attribute",
"exact",
"custom"
],
"customRanking": null,
"separatorsToIndex": "",
"removeWordsIfNoResults": "none",
"queryType": "prefixLast",
"highlightPreTag": "<em>",
"highlightPostTag": "</em>",
"alternativesAsExact": ["ignorePlurals", "singleWordSynonym"],
"renderingContent": {
"facetOrdering": {
"facets": {
"order": ["variants.color", "variants.size", "variants.condition"]
},
"values": {
"variants.color": {
"sortRemainingBy": "count"
},
"variants.condition": {
"sortRemainingBy": "count"
},
"variants.size": {
"sortRemainingBy": "count"
}
}
}
}
},
"rules": [],
"synonyms": []
}