Skip to main content

Create An Online Store Theme Used By MyCMS


MyCMS is an open-source Content Management System to generate static online shop website. You can use my hosting to input your products, or you can download the source codes and host it in your own server (running NodeJS). Please refer to my Github repo for the detailed installation instructions.

This blog is a step-by-step tutorial that shows you how to create an online-shop theme. In this tutorial, it’s using my hosting to input the shop details and products. If you’re hosting the MyCMS by yourself, just change the domain name to yours will do.

Introducing MyCMS

Before making the theme, you’ll need to use MyCMS to configure the demo shop and input two demo products. MyCMS generates a static website via a theme. The generated static website is NO server program required. You can put the website files (HTML/CSS/JS) to any CDN, hosting.

Shop Configuration

You must prepare below settings Before using MyCMS:
SettingDescriptionExample
Store nameYour store name will be displayed in the online shop. But it depends on your theme designSimon’s Fruit Store
Store currencyThe currency used in the online storeUSD
LocaleTells Paypal what language to be displayed in the payment pageEnglish US
Your store URLSpecify the URL of your online store.https://www.myshop.com
Shipping ProviderInput your shipper/carrierUPS
Paypal order success pageThe webpage file name when Paypal order payment successful/order-success.html
Paypal order cancel pageSimilar to above setting, this is to specify the webpage file name when Paypal order payment canceled by the user/order-cancel.html
Paypal modeFor Paypal sandbox mode, you can make fake payment for testing. When everything alright, set to Live to receive real paymentSandbox
Paypal Client IDInput the Paypal client ID (live or sandbox mode). The client ID can be found in Paypal Developer PortalXXXXXX
Paypal Client SecretLive above client ID, input the Paypal client secret (live or sandbox mode). The client secret can also be found in Paypal Developer PortalXXXXXX
Paypal order handling feeOptional and additional charge per Paypal order0

Input Products

Below steps are to input three sample products in MyCMS:

1. Goto MyCMS and login with your Google or Facebook account (no worry that the password is not stored in MyCMS database)

2. Goto products screen:

3. Click Add Product to add the first product:

4. Input the product details as below:
FieldValue
Product IDsku-apple-1
NameApple
DescriptionPer unit:
  • Calories: 95
  • Fat: 0g
  • Carbohydrates: 25g
  • Sugars: 19g
  • Fiber: 4g
  • Protein: 0g
Regular Price1.99
Tax0
Is activeY
Image 1Download & upload this image
Image 2Download & upload this image
Then click Save and close when finished.

5. Click Add Product to add the second product and input below details:
FieldValue
Product IDsku-orange-1
NameOrange
DescriptionPer unit:
  • Calories: 62
  • Fat: 0.16g
  • Sodium: 0mg
  • Carbohydrates: 15.4g
  • Fiber: 3.1g
  • Sugars: 12.2g
  • Protein: 1.2g
  • Vitamin C: 69.7mg
  • Potassium: 237mg
  • Calcium: 52.4mg
Regular Price1.99
Sell Price1.79
Tax0
Is activeY
Image 1Download & upload this image
Image 2Download & upload this image
Then click Save and close when finished.

6. Click Add Product to add the second product and input below details:
FieldValue
Product IDsku-banana-1
NameBanana
DescriptionPer unit:
  • Calories: 105
  • Fat: 0.4g
  • Sodium: 1.2mg
  • Carbohydrates: 27g
  • Fiber: 3.1g
  • Sugars: 14.4g
  • Protein: 1.3g
Regular Price1.29
Sell Price0.99 
Tax0
Is activeY
Image 1Download & upload this image
Image 2Download & upload this image
Then click Save and close when finished.

Making The Theme

MyCMS Theme Requirements

Basically, MyCMS requires below files in EJS format:
FilePurpose(s) Generated file
index.ejsHome page of the online shopindex.html
product.ejsProduct page to view full product details. The file name will be named by the product ID and defined in MyCMS. (in this tutorial, it would be “sku-orange-1.html” & “sku-banna-1.html”)One or more [item_id].html file(s)
checkout.ejsShopping cart checkout page for the user to input shipping info. And it redirects to PayPal payment pagecheckout.html
order-success.ejsPaypal callback page when the payment is successfully placed.order-success.html
order-cancel.ejsPaypal callback page when the payment is canceled by the user.order-cancel.html

Together with other asset files (such as logo.png, site.css, index.js… etc). All together zip into a single ZIP file. Finally, upload to MyCMS to generate the static website. The upload webpage is shown as below:

Reference Implementation

The example theme that meets the above requirements (but without beauty design 😛) is covered in this Github repo. You can clone it, read the comments, and modify it with your design. If you have any questions, please submit an issue.

Comments

  1. The King Casino | 100% Deposit Match up to €300 +
    The King Casino is the place to get m88 ทางเข้า in on the fun with 다파벳 the best online casino in the UK and get a fantastic welcome 더킹카지노 bonus up to £300 + a 100% bonus.

    ReplyDelete

Post a Comment

Popular posts from this blog

How I make a web-components based dynamic Javascript page at the top of Google Search

Introduction Everybody wants their website shown at the first position of Google search. SEO (Search Engine Optimization) is a big topic. I just helped my client's website shows the database records at the top search rankings (at least several Chinese generic keywords). See the three example questions all are listed at top ranking: Website background: My client's website  popa.qa  is a traditional Chinese Q&A site that lets members ask and answer questions. All answers and questions are storing in the database server. Step 1: Create The Project This blog illustrates the problems and the steps to fix that with project source codes. Below is the description of the basic project: NodeJS backend (server.js) Develop an API ( /get-database-records ) to simulate getting database records Web-components frontend (index.html) An example component IndexPage  make use of  LitElement to render database records To start the server type: npm start Then I check the webpage speed using th

Build A Simple Sales System using Google Drive

Google Drive is a free-to-use cloud service with a 15 GB limit storage. 15 GB is large enough to store documents, and "program" too. Yes, it's correct. We can program Google Drive. This blog is a step-by-step tutorial to show you how to build a simple P.O.S. system on Google Drive. Create a Google Sheets to define the products 1. Login to Google Drive using your Gmail account and create a Google Sheets: 2. Input the products in the Google Sheets Create a Google Forms for sale input 1. Create a new Google Form 2. Edit the form and the first field Note that leave the option field unchanged. We'll assign it programmatically in below 3. Add a quantity field 4.  Add a last field for the price input How to copy data from Google Sheets to Google Forms? We need to add a script to do that. Google developed Google App Script (GAS) for us to achieve that. Now go back to the Google Sheet we just created above. Then enter to the script editor You'll see the below screen. Then