-
@ Sync
2023-07-14 17:15:51Still with us, Ready to setup Shop? Let's start introducing some commerce into the mix ! On todays menu setting up points of sale in your project.
As for every build we start with a fresh copy of the Flamewerk Template.
For everybody new, you are one blog post away of learning to build Flamewerk apps read our setup of NodeJS, Yarn, Github and VS code. [
Flamewerk: Nuxt3 Startup Theme
🔥 Build Modern Webapps for Free Forever with one easy config, Deploy in less then 5min on any cloudprovider. Create a website, application, shop or community with super documentation and our community.
Flamewerk
](https://flamewerk.com/news/setup-installation)
More documentation can be found at https://flamewerk.com/docs/setupOkay that out of the way let's start.
For our e-commerce integration we will use Snipcart to povide us with a shopping cart. Signup for a free API key to start recieving payments. [
Add a Shopping Cart to Any Website in Minutes
Add a shopping cart to your site in minutes. Works with any site builder, CMS, and framework. 20 000+ merchants trust our e-commerce solution for their website. Join them!
Snipcart
](https://snipcart.com/)
Today's focus is on the project.js file and products.js file.
Make sure you have the following project.js settings defined.layout: 'web', // (default, web, app ) headertype: 'Maximum', // Options: Tiny, Maximum, Application footertype: 'Ecommerce', // Options: Tiny, Minimal, Maximum, Ecommerce shop: true, // Enable Ecommerce shopcurrency: 'eur', // Default Currenty ( Should be an object) snipcartid: 'CopyApiKeyHere', // Snipcart API
Setting up shop
Example of a page: content/en/shop.md
--- title: 'Webshop' description: 'meta description of the page' --- :BlockShopProductsCategory{type="Product" category="New" max=4 title="Fresh Products" icon="👑" subtitle="Newest product releases and most popular items."} :BlockShopProductsShippingblockCustomizing a product in the Project.js inventory List:
{ id: 1, identity: "1", type: "Product", //Options Product, Digital, Subscription category: "New", title: "Hoody with zipper", description: "Simple Black with logo", stock: "low", //Options: Low & Out By default products are stocked price: { usd: 40, eur: 35, }, image: "https://production.flamewerk.com/stock/product1.jpg", imagelocal: "/stock/product1.jpg", features: [ "100% Extra hacker power", "Can be used as a Emo/Hardcore hoody", "Makes you look badass", ], },That's it for the basics around adding products and a storefront to your project ! See you tomorrow for our final build example.