Saetl.net

Simple And Easy TempLate

ダウンロード販売のやり方

Zen Cart を使ったダウンロード販売のやり方

無料オンラインショップ構築プログラムの中で有名な Zen CartEC-CUBE などがありますが、どちらを選ぶか比較した時に、ダウンロード販売のやりやすさ(個人的意見)の点で Zen Cart を選びました。
その Zen Cartを使ったダウンロード販売のやり方を解説します。 ※ご利用に関してはこちらの免責事項をご確認ください。



Zen Cart のインストール

Zen Cart を利用するためのインストール方法を解説します。


  1. インストール時に必要になる Zen Cart で利用するデータベースを作成。
    ※図はロリポップでデータベースを作成した例
zencartインストール
  1. こちらのページから Zen Cart vバージョン ja(正式版)をクリックしてファイル1式をダウンロード。
  1. 解凍したフォルダの中から下記ファイル名を dist-configure.php から configure.php に変更。
    \admin\includes\dist-configure.php ⇒ \admin\includes\configure.php
    \includes\dist-configure.php ⇒ \includes\configure.php
  1. サーバーに shop などのフォルダを作成し、ファイル1式をアップロード。
  1. アップロードしたURL(例:https://saetl.net/shop/)へアクセスして Click here をクリック。
zencartインストール
  1. 「続ける」をクリック。
zencartインストール
  1. 「上記を確認したうえでこれに同意します。」を選択して「続ける」をクリック。
zencartインストール
  1. システムの検査結果で、エラーがない事を確認して「インストール」をクリック。
zencartインストール
  1. データベース設定で、サーバーで作成した内容(図はロリポップの例)を各項目に入力し、任意のデータベースパスワードを入力して「データベース設定を保存」をクリック。
zencartインストール
  1. システム設定で、各項目を入力(自動的に入力されている場合は確認)して「設定を保存」をクリック。
zencartインストール
  1. セットアップ - ショップ設定で、各項目に任意の値を入力して「ショップ設定を保存」をクリック。
zencartインストール
  1. 管理者アカウント設定で、各項目に任意の値を入力して「管理者設定を保存」をクリック。
zencartインストール
  1. セキュリティの為にサーバーの shop フォルダ の admin フォルダの名前を変更し、zc_install フォルダを削除する。
    セキュリティの詳細はこちら
zencartインストール
  1. セキュリティの為にサーバーの shop\includes\configure.php と shop\manage\includes\configure.php のパーミッションを「644」か「444」にする。
  1. 管理画面にアクセスする為に admin フォルダの名前変更したURL(例:https://saetl.net/shop/manage/)にアクセスする。
  1. 図のような警告が出る場合は admin フォルダの名前変更と zc_install フォルダの削除を再度確認。
zencartインストール
  1. IDとパスワードを入力して「Login」をクリック。
zencartインストール
  1. 管理画面で、商品登録や支払方法など各種設定をする。
zencartインストール
  1. ショップにアクセスするにはアップロードしたURL(例:https://saetl.net/shop/)にアクセスする。
zencartインストール


ダウンロード販売のやり方

ダウンロード販売をする為の設定方法を解説します。


  1. 管理画面で、「一般設定」>「商品属性の設定」を選択して「ダウンロードを有効にする」を「true」にする。
    「リダイレクトでダウンロード画面へ」はUNIX系でないサーバでは「false」にするようです。
    「false」の場合 /download フォルダにファイルをアップロードする。「true」の場合、/pub フォルダ(パーミッションを777に設定)にファイルをアップロードする。
    (ここでは /download フォルダにファイルをアップロードしたので「false」)
zencartダウンロード販売
  1. 管理画面で、「商品の管理」>「カテゴリ・商品の管理」を選択して、「新しいカテゴリー」をクリック。
zencartダウンロード販売
  1. 新しいカテゴリでカテゴリ名を入力し、カテゴリの説明や画像は適宜設定(設定しなくてもOK)して「保存」をクリック。
zencartダウンロード販売
  1. 管理画面で、「商品の管理」>「オプション名の管理」を選択して、オプション名を入力し「挿入」をクリック。
zencartダウンロード販売
  1. 管理画面で、「商品の管理」>「オプション値の管理」を選択して、オプション値を入力し「挿入」をクリック。
zencartダウンロード販売
  1. ダウンロード対象のファイルを download フォルダにアップロードする。
zencartダウンロード販売
  1. 管理画面で、「商品の管理」>「カテゴリ・商品の管理」を選択して、「ダウンロード商品」をクリック。
zencartダウンロード販売
  1. 「新しい商品」をクリック。
zencartダウンロード販売
  1. 必要事項を入力及び選択して、「バーチャル商品」で「送付先住所をスキップ」、「常に送料無料」で「常に送料無料」を選択、「商品重量」で「0」を入力し、「プレビュー」をクリック。
zencartダウンロード販売
  1. 内容を確認して「挿入」をクリック。
  1. リストに登録されているのを確認し、右端にある「A」をクリック。
zencartダウンロード販売
  1. 「商品オプション属性の管理」で、「オプション名」「オプション値」でそれぞれ目的の項目をクリックして色を反転。
zencartダウンロード販売
  1. 画面一番下でファイル名を入力し、有効期間と最大ダウンロード数を適宜入力して右端の「挿入」をクリック。
zencartダウンロード販売
  1. ダウンロードファイルが追加されているのでファイル名の横のアイコンが緑色になっているのを確認。
    ※アイコンが赤色の場合は /download フォルダにファイルが無いかファイル名が間違っているので再度見直す。
zencartダウンロード販売
  1. ショップにアクセスすると登録したファイルが追加されている。
zencartダウンロード販売
  1. 購入後ダウンロード出来るようにするには、管理画面で、「モジュール」>「支払い」を選択し、支払いモジュールの設定をする。
    無料商品の場合、「Free order」を選択して「Set Order Status」を「配送済み」に設定すると購入後すぐダウンロード出来るようになる。
zencartダウンロード販売
  1. 支払いモジュールを銀行振込にした場合、「Set Order Status」を「デフォルト」又は「処理待ち」に設定し、支払いを確認した時点で管理画面の「顧客・注文の管理」>「注文管理」で該当する項目の「e」をクリック。
zencartダウンロード販売
  1. 注文管理画面の一番下のステータスを「配送済み」にして「更新」をクリックすると通知メールが送信されダウンロード出来るようになる。
zencartダウンロード販売


テンプレートのカスタマイズ

テンプレートのカスタマイズ方法を解説します。
既存のホームページで、Zen Cart のカート機能を追加したい場合にテンプレートをカスタマイズして別ウインドウなどで表示します。


テンプレートをカスタマイズする為に、Zen Cart の html や css を修正するには Over-Ride 機能を利用します。
※ Over-Ride の詳細はこちら
Over-Ride 機能を利用する為にカスタマイズ用のフォルダを作成し、レイアウトを修正する template ファイルと文言を修正する language ファイルをカスタマイズ用のフォルダにそれぞれコピーしてそれを修正します。


  1. レイアウトを修正します。
    図はレイアウトを修正する為に includes/templates/ の中に custom というフォルダを作成し、さらにその中に css というフォルダを作成して、includes/templates/template_default/template_info.php と includes/templates/template_default/css/stylesheet.css をそれぞれコピーした例。
    ※ template_default から stylesheet.css をコピーすると元のレイアウトやデザインとは異なります。元のレイアウトやデザインを使用したい場合は classic フォルダから stylesheet.css をコピーします。
zencartカート機能
  1. コピーした includes/templates/custom/template_info.php を開き、各項目を変更して保存し、custom フォルダをアップロード。
        $template_name : 'Sample Template'; ←テンプレート名
        $template_version : 'Version 1.0'; ←テンプレートのバージョン
        $template_author : 'Saetl net'; ←テンプレートの作者
        $template_description : 'Template of Saetl net.'; ←テンプレートの説明
        $template_screenshot : 'scr_template_default.jpg'; ←テンプレートのスクリーンショットのファイル名
    
  1. 管理画面で、「追加・設定ツール」>「テンプレートの設定」を選択して、右側のテンプレート名で先ほど作成したテンプレート名「Sample Template」を選択し、「更新」をクリック。
zencartカート機能

※更新後、サイトにアクセスしてサイドボックスが表示されていない場合は管理画面で、「追加・設定ツール」>「サイドボックスの表示設定」を選択して、一番下の「リセット」をクリック。

  1. レイアウトを修正する例として、includes/templates/custom/css/stylesheet.css を開き、任意の場所に下記を追加(カート機能以外の不要な項目を非表示)してアップロード。
    #logoWrapper/*ロゴ部分*/, #indexDefault/*トップページの文章と新着商品*/, #navColumnOne/*左サイドボックス全部*/, #navColumnTwo/*右サイドボックス全部*/, #navSuppWrapper/*フッター部分*/, #siteinfoIP/*フッター部分*/, #siteinfoLegal/*フッター部分*/, #bannerSix/*フッター部分*/, #whatsNew/*ページ中央新着商品*/ {
     display: none;
    }
    
<修正前のダウンロード商品のページ例>
zencartカート機能
<修正後のダウンロード商品のページ例>
zencartカート機能
  1. 文言を修正します。
    図は文言を修正する為に includes/languages/japanese/ の中に custom というフォルダを作成し、includes/languages/japanese/header.php をコピーした例。
zencartカート機能
  1. 文言を修正する例として、コピーした includes/languages/custom/header.php を開き、HEADER_TITLE_CATALOG の「ホーム」を「商品一覧」に変更してアップロード。
    // header text in includes/header.php
      define('HEADER_TITLE_CREATE_ACCOUNT', 'アカウント作成');
      define('HEADER_TITLE_MY_ACCOUNT', 'マイページ');
      define('HEADER_TITLE_CART_CONTENTS', 'カートを見る');
      define('HEADER_TITLE_CHECKOUT', 'レジへ進む');
      define('HEADER_TITLE_TOP', 'トップ');
      define('HEADER_TITLE_CATALOG', '商品一覧'); //「ホーム」を「商品一覧」に変更
      define('HEADER_TITLE_LOGOFF', 'ログアウト');
      define('HEADER_TITLE_LOGIN', 'ログイン');
<修正後のページ>
zencartカート機能
  1. デザインを修正します。
    デザインを修正するには templates の各 php ファイルの html 部分や cssファイル を編集します。
    図は includes/templates/custom/ の中に common フォルダを作成し、includes/templates/template_default/common/ から tpl_header.php などをコピーした例。
    同様に includes/templates/template_default/templates/ のファイルは includes/templates/custom/ の中に templates フォルダを作成し、そこにファイルをコピーして編集します。
zencartカート機能
  1. デザイン修正の例として、php ファイルの html 部分の修正の参考として図のように変更してみます。
    コピーした tpl_header.php を開き、99行目あたりの下記コードをコピーした後コメントアウトしてアップロード。
    <コメントアウト後のコード>
    <?php //require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
    コピーした tpl_main_page.php を開き、100行目あたりに上記でコピーしたコードを貼り付けてアップロード。
    <貼り付けた後のコード>
    <!-- bof  breadcrumb -->
    <?php if (DEFINE_BREADCRUMB_STATUS == '1' || (DEFINE_BREADCRUMB_STATUS == '2' && !$this_is_home_page) ) { ?>
        <div id="navBreadCrumb"><?php echo $breadcrumb->trail(BREAD_CRUMBS_SEPARATOR); ?></div>
    <?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>  <!--貼り付けたコード-->
    <?php } ?>
    <!-- eof breadcrumb -->
    
zencartカート機能
  1. 次に、css ファイルの修正の参考として図のように変更してみます。
    includes/templates/custom/css/stylesheet.css を開き、 id="navMainWrapper" 部分の css を編集。
    <css 編集でデザインが変更される部分の html コード>
    <div id="navMainWrapper">
    <div id="navMain">
        <ul class="back">
        <li><a href="http://test.saetl.net/shop/">商品一覧へ</a></li>
        <li><a href="http://test.saetl.net/shop/index.php?main_page=login">ログイン</a></li>
    </ul>
    </div>
    
    <編集後の css コード>
    #navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
     margin: 0em;
     background-color: #fff;
     font-weight: bold;
     color: #ffffff;
     height: 1%;
     width: 100%;
    }
    #navMain ul, #navSupp ul, #navCatTabs ul {
     margin: 0;
     padding: 0.5em;
     list-style-type: none;
     text-align: center;
     line-height: 2em;
     font-size: 1.5em;
    }
    #navMain ul li, #navSupp ul li, #navCatTabs ul li {
    	display: inline;
    }
    #navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
    	text-decoration: none;
    	padding: 0em 0.5em;
    	margin: 0;
    	color: #333;
    	white-space: nowrap;
    }
    
zencartカート機能

同様にその他のコードも適宜修正し、ファイルをアップロードして確認。

<修正後のページ例>
zencartカート機能
  1. ボタンを変更します。
    例えばカートのボタンを変更するには includes/templates/template_default/buttons/japanese/button_in_cart.gif を画像編集ソフトなどで編集してアップロード。
<修正後のページ>
zencartカート機能


顧客アカウント作成項目の変更

ダウンロード販売で顧客アカウント作成時に、メールアドレスとパスワードだけの登録でいい場合などに、顧客アカウント作成項目の変更方法を解説します。


  1. 管理画面で、「一般設定」>「顧客アカウントの設定」を選択し、不要な項目を選択して「編集」をクリックし「false」を選択して「更新」をクリック。
zencartアカウント
<管理画面で不要な項目を削除した時のページ>
zencartアカウント
  1. 管理画面にない項目を削除するために、「一般設定」>「最小値の設定」を選択し、不要な項目を選択して「編集」をクリックし「値」を「0」にするか削除して「更新」をクリック。
zencartアカウント
  1. includes/templates/template_default/templates/ から includes/templates/custom/templates/ に tpl_modules_create_account.php をコピーして不要な項目の表示をコメントアウトか削除して非表示にしアップロード。
<修正後のページ(cssも修正済)>
zencartアカウント


支払い方法にPayPalを追加するやり方

支払い方法に PayPalエクスプレスチェックアウトを追加するやり方を解説します。
PayPal を支払い方法にすると購入者がショップでアカウントを作成せずに購入する事が出来ます。
顧客がペイパルアカウントを持っていなくてもクレジットカード決済を受け付けることができます。
PayPal の決済サービスを利用するにはビジネスアカウントが必要です。


  1. 実際の決済をテストで出来るように PayPal の sandbox の API 署名を取得します。
    こちらにアクセスしてログインし、ビジネスアカウントの Profile をクリックしてAPI Credentials を選択すると API 署名を確認できます。
zencart PayPalを追加
  1. 管理画面で、「モジュール」>「支払い」を選択してモジュールの中から「PayPal Express Checkout」を選択し、右側の「モジュールインストール」をクリック。
zencart PayPalを追加
  1. 必要事項を入力及び選択し、テストの為に一番下の方の「sandbox」を選択(本番では「live」を選択)して PayPal の sandbox 用の API 署名(本番では本アカウントの API 署名)を入力し「更新」をクリック。
zencart PayPalを追加
  1. PayPal で決済完了後、ただちに商品をダウンロードしていただくために PayPal の「個人設定」「販売ツール」の即時支払い通知(IPN)の「更新」をクリックして即時支払い通知(IPN)を有効にします。
zencart PayPalを追加
  1. 支払い方法を PayPal にした場合の購入からダウンロードまでの流れ
zencart PayPalを追加

<sandboxへの接続がうまくいかなかった場合の対処法>

このページを製作中に突然sandboxへの接続でエラーが出るようになりました。※2016年1月21日
paypalに問い合わせたところ「CURL Libraryのバージョンを7.34.0以上に更新してください」との回答でした。
レンタルサーバーに問い合わせたところ「現時点では即時バージョンの更新が難しい状態になります」との回答でした。
お手上げ状態なので本番のアカウントでテストをする際の不明点を再度 paypal に問い合わせた結果が下記になります。
  • 問い1:自分の個人用アカウントとビジネス用アカウント間での取引は可能でしょうか。
  • 答え1:はい、可能です。
  • 問い2:取引決済金額は1円でもOKでしょうか。
  • 答え2:はい、大丈夫です。
  • 問い3:1円の場合手数料はどうなるでしょうか。
  • 答え3:1円の場合は、手数料は1円になります。

<まとめ>
sandboxが動作しない場合、自分の個人用アカウントとビジネス用アカウントを使い、商品の価格を1円にして実際に取引をすると1回の取引に付き1円の peypal への手数料でテストが出来る。