META Commerce

VPC環境で利用できます。

META Commerceは、Linux OS、Apache Web Serverと MySQLを活用したショッピングモール構築サービスプラットフォームです。META Commerceで構築したショッピングモールサービスは、安定性に優れた NAVERクラウドプラットフォーム上で運用され、数段階の設定ですぐにサービスを開始できます。

META Commerceを使用するメリットは、次の通りです。

• NAVERクラウドプラットフォームのインフラサービスを活用して、安定的にショッピングモールを運用できます。
• オープンソースでありながら無料でスタンドアロンで提供されるため、ユーザーが自由にサービスをパーソナライズ化できます。
• 直接開発や設計が難しい場合は、専門のパートナー会社との連携にてコラボレーションを実現できます。

サーバ作成とアクセス

サーバの作成とアクセス方法は、NAVERクラウドプラットフォームの一般的なサーバ作成方法と似ていますが、それ以外の追加タスクが含まれます。詳しい手順と参考になるガイドは、次の通りです。

ホストマッピング

ウェブで META Commerceを実行するには、サーバのグローバル IPアドレスと META Commerceの URLをマッピングする必要があります。
マッピングする方法は、次の通りです。

1. NAVERクラウドプラットフォームコンソールの Region メニューや Platform メニューから利用中の環境をクリックします。

2. Services > Compute > Server メニューを順にクリックします。

3. META Commerceサーバのグローバル IPアドレスを確認します。

4. メモ帳を管理者権限で実行します。

5. メモ帳で ファイル > 開く メニューを順にクリックし、C:\Windows\System32\drivers\etcに移動して hostsファイルを開きます。

   • パスに入ってもファイルが表示されない場合は、ファイル形式を すべてのファイル に変更します。
   参考

   hostsファイルの詳細は、Microsoftのホストファイルのデフォルト値をリセットする方法をご参照ください。

6. 以下の内容を hostsファイルに入力して保存します。

   (グローバル IPアドレス)   ncloud.meta-commerce.co.kr
   (グローバル IPアドレス)   admin-ncloud.meta-commerce.co.kr
   

   

   参考

   実行中のウィルス対策(アンチウイルス)ソフトが hostsファイルの変更を制限する場合がありますので、ウィルス対策ソフトを一時停止または終了してください。

管理者アカウント登録

META Commerceを利用するには、サービスに登録して管理者アカウントを登録する必要があります。
管理者アカウントを登録する方法は、次の通りです。

1. サーバに接続した状態でウェブブラウザを開き、admin-ncloud.meta-commerce.co.krにアクセスします。
   • META Commerce wizardページが表示されます。
2. ライセンスサービス利用約款の内容を確認して同意した後、 [次へ] ボタンをクリックします。
3. ポータルアカウント情報を入力し、 [ログイン] ボタンをクリックします。
   • ポータルアカウントがない場合、 [会員登録] ボタンをクリックしてポータル会員登録を先に行います。
4. 管理者アカウントとして登録する情報を入力し、 [保存] ボタンをクリックします。
5. CMS(Cloud Managed Service)サービスの使用有無に応じて [はい] または [いいえ] ボタンをクリックします。
   • [はい] ボタンをクリックした場合、利用中の業者を選択し、 [次へ] ボタンをクリックします。
   • [いいえ] ボタンをクリックした場合、使用する CMSサービスを選択し、 [次へ] ボタンをクリックします。
6. 決済サービス利用約款および自動/定期決済同意にチェックマークを付けた後、 [決済手段の登録] ボタンをクリックして決済手段を登録します。
7. メタペイ決済画面が表示されたら、メタペイを登録します。
8. すべての設定が完了したら、 [ショッピングモール管理者移動] ボタンをクリックします。

レイアウト構造

META Commerceを利用して作成したショッピングモールサイトのレイアウト構造は、次の通りです。

Head

レイアウトの headには、ファビコン、メタタグおよび CSS、JavaScriptの連携が設定されており、必要に応じて追加できます。

Body

レイアウトの bodyには以下のようなプロパティが含まれます。

• header、content、footerで構成されており、各コンポーネントはテンプレートのアンダースコア(Templet_)記法で決められた変数名で繋げられています。
  • 例) {#headerTop}
• body idは 디렉터리명_페이지명で自動作成されます。ページごとに分けて作業するときに便利に活用できます。
  • 例) ncloud.meta-commerce.co.kr/shop/goodsListの場合: shop_goodsList
• body下部にある各ページの JSは、現在のページ名と同じ JSファイルと自動的に繋げられます。
  • 例) ncloud.meta-commerce.co.kr/shop/goodsListの JSファイル位置: js/shop/goodsList.js

クラスルール

クラスルールは、BEM(Block Element Modifier)記法で作成されています。
BEM記法は、問題要素に対するプロパティに基づき、クラス名を定義できる構造的な方法を提示します。IDには使用できず、クラス名にのみ使用できます。

関数と変数

関数と変数の使い方について説明します。

Templet_

Templet_の使用方法について説明します。

Templet_ "共通"

Templet_ "共通"の使用方法は、次の通りです。

Position: レイアウトインクルード

Position: 共通変数

Position: 共通関数

Position: 下部情報

Position: GNBメニュー

Position: カテゴリリスト

Position: 統合バナー

Templet_ "メインページ/main/index.htm"

Templet_ "メインページ/main/index.htm"の使用方法は、次の通りです。

Position: メインバナー

Position: 展示商品リスト

Position: 企画展リスト

Templet_ "商品リストページ /shop/goods list/goods list.htm"

Templet_ "商品リストページ /shop/goods list/goods list.htm"の使用方法は、次の通りです。

Position: 商品リスト

Position: 上部ナビゲーション

Position: カテゴリバナー

Templet_ "商品詳細ページ /shop/goods list/goods list.htm"

Templet_ "商品詳細ページ /shop/goods list/goods list.htm"の使用方法は、次の通りです。

Position: 上部ナビゲーション

Position: 商品の詳細情報

Position: カテゴリの人気商品

Position: おすすめの関連商品

Position: [商品情報] タブ

Position: [商品レビュー] タブ

Position: [商品お問い合わせ] タブ

Position: [交換/返品案内] タブ

Templet_ マイページ

Templet_ マイページの使用方法は、次の通りです。

Position: マイページ上部共通

Position: 注文履歴

Position: 直近

Position: 興味

Position: カート内の商品情報

handlebars.js

handlebars.jsの使用方法について説明します。

handlebars.js "商品リストページ /shop/goods list/goods list.htm"

handlebars.js "商品リストページ /shop/goods list/goods list.htm"の使用方法は、次の通りです。

Position: 商品リスト

Position: [商品レビュー] タブ

新規ページ追加

新規ページを追加する方法は次の通りです。

1. 新規ファイルを作成する位置でマウスを右クリックし、 Reveal in Explorer をクリックします。
   

2. ローカルディレクトリにリモートサーバと同じディレクトリが作成されたことを確認します。
   

3. マウスを右クリックしてフォルダとファイルを追加します。

   • 例) フォルダ: new\new product、ファイル: new product.htm
     

4. マウスを右クリックして Sync Local をクリックし、リモートサーバにアップロードします。
   

5. リモートサーバに接続し、追加したファイルがアップロードされたことを確認します。
   

   参考

   ファイルが表示されない場合は、右上の をクリックします。

6. htmファイルをサーバと接続する phpファイルを追加するために www で右クリックした後、Reveal in Explorer をクリックします。
   

7. phpファイルを作成します｡

   • ファイル名には記号を使用できず、キャメルケースで入力します。
     • 例) newProduct.view.php

8. phpファイルが作成されたら、 Sync Local > Remote を順にクリックしてリモートサーバにアップデートします。
   

9. 作成された phpファイルを開き、次のソースを入力して保存します。

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

   

10. マウスを右クリックし、 Sync Local > Remote を順にクリックしてリモートサーバにアップデートします。

レイアウト設定

レイアウトを設定する方法は、次の通りです。

1. META Commerce管理者ポータル(admin-ncloud.meta-commerce.co.kr)にアクセスします。

2. System > デザイン管理 > レイアウトデザイン メニューを順にクリックします。

3. レイアウトデザインを設定します。

   • 新しいレイアウトデザインを追加するには、画面右上の [追加] ボタンをクリックします。登録のポップアップが表示されたら情報を入力し、[保存] ボタンをクリックします。
   • 既存のレイアウトデザインを修正するには、修正するデザインの [修正] ボタンをクリックします。修正のポップアップが表示されたら情報を修正し、[保存] ボタンをクリックします。
   • 既存のレイアウトデザインを削除するには、削除するデザインの [削除] ボタンをクリックします。
   参考

   登録または修正のポップアップで、 ファイルパス にはディレクトリ名、 アクセス URL には phpファイル名、 コンテンツ には htmlファイル名を入力する必要があります。

4. 設定が完了したら、画面右上の [Export] ボタンをクリックします。

   • 修正事項がサイトに反映されます。