Are you ready to take your business to the next level and open an online store using Prismic? In this project we’ll show you how to get an eCommerce site up and running in no time. We'll be integrating Prismic with the lean & powerful shopping cart service, Snipcart.
1. Install the Prismic Command Line Tool
The first step will be to install the 'prismic-cli' package to be able to run the needed Prismic commands. Launch a terminal, from where you will run the command to globally install the package.
npm install -g prismic-cli
If for some reason this command doesn't work for you, try executing a sudo command:
sudo npm install -g prismic-cli
2. Run the theme command
Once the installation is finished, navigate to the location where you want to create your new project folder and run the following command. This will create a new Prismic repository along with different custom types and install the project code:
prismic theme --theme-url https://github.com/prismicio/nodejs-example-snipcart --conf prismic-configuration.js
(MAKE SURE YOU'RE USING THE LATEST VERSION OF THE CLI)
This command will ask you to add a name to create a Prismic repository and the name of the local folder to initialize the project.
Navigate to the folder you have just created. Open the 'prismic-configuration.js' file and confirm that the name you have chosen for your Prismic repository has been set up correctly as the API endpoint that the web application will use to fetch the content you will create in Prismic.
3. Write some content
Go to your repository. You'll notice that there'll be three brand new Custom types in which you'll create your documents: Product, Category and Layout:
- Product: A Repeatable type product that has a Unique Identifier (UID) for constructing page urls, product release date, title, image, price, description, related product links, and all the information we need to integrate with Snipcart.
- Category: A Repeatable type category used to organize products into groups on the site.
- Layout: A Single type layout that consists of a title used to identify the document, an image for the site logo, and a repeatable group of categories that will make up the main navigation.
1) Create categories
Create one or two product categories. Go to Content, hit New, and select the Category type. Make sure to fill the mandatory UID field that is used for the category page’s url. Save and publish!
2) Create products
Create some product pages. Go to Content, hit New, and select the Product type. Enter a unique ID for the product page’s url in the UID field, and fill in the content for the product. Be sure to add a category to at least some of the products. Then save and publish!
3) Fill in the layout
Finally we need to fill in our layout custom type. Go to Content, hit New, and select the Layout type. Add a title such as “Site Layout” so you can easily identify the layout in your documents. Then include a logo if you have one, and add your categories for the main navigation.
For each category you want to add to the navigation:
a) Add a Link Label
b) Select the appropriate category
Save and publish!
4. Get set up on Snipcart
When signing up, ignore the field asking for the website url. We will update this later.
5. Run the website
Next we need to add your Snipcart key to the project. From your Snipcart dashboard, click on Account then API Keys to get your Public Test API Key. Copy and paste this code into your project's config file and replace the mock text with your API key.
// In prismic-configuration.js snipcartKey: 'your-snipcart-api-key',
Now, open your project folder in the terminal and run the following command:
npm install -g nodemon
Test how everything looks in your local development server at http://localhost:3000.
NOTE: You will not be able to fully go through the checkout process until you have launched the site live and correctly set up snipcart as explained further below.
6. Deploy & go live
Create a new Heroku application
Initialize a new Git repository
git init heroku git:remote -a your-heroku-app-name
Commit your code to the Git repository and deploy it to Heroku
git add . git commit -am "make it better" git push heroku master
Ensure you have at least one node running
heroku ps:scale web=1
You can now browse your application online
7. Connect to Snipcart
The last step is to update your Snipcart settings to point to your new heroku site online.
- Go to your snipcart dashboard
- Click on Account then Domains & URLs
- Enter your heroku website url under the Default Website Domain and save your settings.
Your eCommerce site should now be up and running! Try viewing your categories, adding items to your cart, and checking out. While your snipcart account is in Test mode, no purchases will actually be made.
Once you are ready to truly begin selling your products online, you can set your Snipcart account from Test to Live from the Snipcart dashboard.
Update your Snipcart API Key
If/when you set your account to Live, you will need to replace your snipcart API Key in your configuration file with your Public Live API Key.
All set up!
Congrats, you are now selling your products online using Prismic and Snipcart! You should easily be able to modify this example eCommerce site to create your own online store: just edit the custom types, stylesheets, and templates to fit your design.