META Commerce

Available in VPC

META Commerce is a shopping mall building service platform utilizing a Linux OS, Apache Web Server, and MySQL. The shopping mall service built by META Commerce operates on NAVER Cloud Platform with excellent stability, and can be instantly put into service through a configuration process with only a few steps.

The advantages of using META Commerce are as follows:

• You can reliably operate a shopping mall utilizing the infrastructure services of NAVER Cloud Platform.
• It is provided as open source and free standalone, so you can customize the service as you want.
• If you can't develop or design a shopping mall, you can connect and collaborate with various partner companies.

Creating and accessing server

The method for creating and accessing the server is the same as creating a regular server on NAVER Cloud Platform, but includes additional steps. The following are detailed procedures and reference guides:

Host mapping

To run META Commerce in the web, you need to map the server's public IP address and META Commerce URL.
The following describes how to map.

1. Click the environment you are using in the Region menu and Platform menu of NAVER Cloud Platform console.

2. Click the Services > Compute > Server menus, in that order.

3. Check the public IP address of the META Commerce server.

4. Run the notepad as administrator.

5. Click the File > Open menus on the notepad, in that order, and then go to C:\Windows\System32\drivers\etc to open the hosts file.

   • If you can't see the file even after entering the path, change the file format to All files.
   Note

   For more information on the hosts file, see Microsoft's How to reset the hosts file back to the default.

6. Enter the following in the hosts file, and then save it.

   (Public IP address)   ncloud.meta-commerce.co.kr
   (Public IP address)   admin-ncloud.meta-commerce.co.kr
   

   

   Note

   A running vaccine (anti-virus) program may restrict the hosts file changes, so pause or close the vaccine program.

Registering admin account

To use META Commerce, you need to sign up to the service and register an admin account.
The following describes how to register the admin account.

1. While accessing the server, open the web browser, and then access admin-ncloud.meta-commerce.co.kr.
   • The META Commerce wizard page is displayed.
2. Read and agree to the license terms of service, and click the Next button.
3. Enter the portal account information, and then click the [Log in] button.
   • If you don't have a portal account, click the [Sign up] button to proceed with signing up as a portal member.
4. Enter the information to register with the admin account, and then click the [Save] button.
5. Depending on the Cloud Managed Service (CMS) service usage status, click the [Yes] or [No] button.
   • If you click the [Yes] button, select the company you are using, and then click the [Next] button.
   • If you click the [No] button, select the CMS service to use, and then click the [Next] button.
6. Check the payment terms of service and the consent to use automatic/regular payment, and click the Register payment method button to register a payment method.
7. When the META Pay window appears, register META Pay.
8. After all settings are completed, click the [Go to Shopping Mall Admin] button.

Layout structure

The layout of the shopping mall site created using META Commerce is as follows:

Head

Connections of favicon, meta tag, CSS, and JavaScript are set in the head of the layout. Additions can be made when required.

Body

The body of the layout includes the following properties:

• The body of the layout consists of a header, content, and footer. Each component is connected with a set parameter of the template underscore (Templet_) syntax.
  • <example> {#headerTop}
• body id is automatically created as 디렉터리명_페이지명. You can use it efficiently when the task requires separation by page.
  • <example> For ncloud.meta-commerce.co.kr/shop/goodsList: shop_goodsList
• The JS of each page located at the bottom of the body is connected automatically to the JS file with a name identical to that of the current page.
  • <example> JS file location of ncloud.meta-commerce.co.kr/shop/goodsList: js/shop/goodsList.js

Class rules

Class rules have been created with the Block Element Modifier (BEM) methodology.
The BEM methodology suggests structural methods for naming classes based on the properties for the elements of problems. It cannot be used for IDs, but only for class names.

Functions and variables

The following is a description on how to use functions and variables.

Templet_

Describes how to use Templet_.

Templet_ "common"

The following describes how to use Templet_ "common."

Position: layout include

Position: common variables

Position: common functions

Position: bottom information

Position: GNB menu

Position: category list

Position: integrated banner

Templet_ "main page/main/index.htm"

The following describes how to use Templet_ "main page/main/index.htm."

Position: main banner

Position: exhibited product list

Position: exhibition list

Templet_ "product list page /shop/goods_list/goods_list.htm"

The following describes how to use Templet_ "product list page/shop/goods_list/goods_list.htm."

Position: product list

Position: top navigation

Position: category banner

Templet_ "product details page /shop/goods_list/goods_list.htm"

Describes how to use Templet_ "product details page /shop/goods_list/goods_list.htm."

Position: top navigation

Position: product details

Position: popular products of the category

Position: recommended related products

Position: [Product information] tab

Position: [Product review] tab

Position: [Product inquiry] tab

Position: [Return/exchange details] tab

Templet_ My Page

The following describes how to use Templet_ My Page.

Position: top common area of My Page

Position: order history

Position: recent

Position: interest

Position: information of products in shopping cart

handlebars.js

Describes how to use handlebars.js.

handlebars.js "product list page/shop/goods_list/goods_list.htm"

The following describes how to use handlebars.js "product list page/shop/goods_list/goods_list.htm."

Position: product list

Position: [Product review] tab

Adding new page

The following is a description on how to add a new page.

1. Right-click from the location where you want to create a new file, and then click Reveal in Explorer.
   

2. Check that a directory identical to the remote server has been created in the local directory.
   

3. Right-click to add folders and files.

   • <example> Folder: new\new_product, File: new_product.htm
     

4. Right-click, click Sync Local, and then upload to the remote server.
   

5. Access the remote server, and check if the added file is uploaded.
   

   Note

   If you can't see the file, click at the top right of the page.

6. To add a PHP file for connecting the HTM with the server, right-click on www, and then click Reveal in Explorer.
   

7. Create a PHP file.

   • Special characters cannot be used for the file name, and you need to enter the file name in camel case format.
     • <example> newProduct.view.php

8. When a PHP file is created, click Sync Local > Remote, in that order, to update to the remote server.
   

9. Open the created PHP file, enter the following sources, and then save.

   <?php
   if (!defined('BASEPATH'))
   exit('No direct script access allowed');
   
   // Load Forbiz View
   $view = getForbizView();
   
   echo $view->loadLayout();
   

   

10. Right-click and then click Sync Local > Remote, in that order, to update to the remote server.

Configuring layout

The following is a description on how to configure the layout.

1. Access the META Commerce admin portal (admin-ncloud.meta-commerce.co.kr).

2. Click the System > Manage design > Layout design menus, in that order.

3. Set the layout design.

   • To add a new layout design, click the [Add] button at the upper right of the page. When the Registration pop-up window appears, enter the information, and then click the [Save] button.
   • To edit the existing layout design, click the [Edit] button of the design you want to edit. When the Edit pop-up window appears, edit the information, and then click the [Save] button.
   • To delete the existing layout design, click the [Delete] button of the design you want to delete.
   Note

   In the Register or Edit pop-up window, the directory name must be entered in File path, the PHP file name must be entered in Access URL, and the HTML file name must be entered in Content.

4. When the configuration is complete, click the [Export] button at the upper right of the page.

   • The edits are reflected on the site.