カラーミーショップのどこでもカラーミーについて実践的に学ぶ

どこでもカラーミーサンプルページ

カラーミーショップには、外部のウェブサイトにカートに入れるボタンを付けることができる機能「どこでもカラーミー」があります(導入当初はカートJS機能と呼ばれていました)。

どこでもカラーミーはブログに設置したり、ランディングページのカートボタンとして用いられます。
参考1)フリーページを使ってランディングページを作ろう | ネットショップ開業マニュアル
参考2)どこでもカラーミーサンプルサイトbyカラーミーショップ

もうひとつ、カラーミーショップにも使えます。
商品詳細ページに移動することなく、そのページで即カートインしたいときに使います。

以上、今回はどこでもカラーミーのよくある二つの使い方を解説します。

どこでもカラーミーの利用方法(基本)

どこでもカラーミーはマニュアルが整っていますので、初めての方は参照ください。
参考3)カートJS機能(どこでもカラーミー)を設定する | ネットショップ開業マニュアル

どこでもカラーミーを利用する手順を簡単に紹介します。
どこでもカラーミーは、管理画面の商品管理>商品編集から「どこでもカラーミー(カートJS機能)」のリンク先に移動します。

どこでもカラーミーのリンク

 

リンク先には、JSコードという欄があります。そのコードを設置場所にコピペします。
https://example.shop-pro.jp/は各自のショップURLが入っていて、&pid=~はカートに入れる商品の商品IDになります。
ブログなどでカートボタンを設置したい場合に使います。

JSコード(例)

<script type='text/javascript' src='https://example.shop-pro.jp/?mode=cartjs&pid=000000000&style=normal_gray&name=n&img=y&expl=n&stock=y&price=y&inq=n&sk=y' charset='euc-jp'></script>

JSコードの中身を知って、いじるための調査をする

JSコードのsrc=~の部分をブラウザで開いてみると、下記のようなコードになっています(読みやすいように改行を入れています)。
中身はJavaScriptのコードで、documet.write()でHTMLタグを書くようになっています。

デザインを変えたい場合は、class名を見てCSSを追加します。インラインで書いているスタイルに対しては、!importantで効かせます。

<form>~</form>の部分は商品詳細ページにある既存のカートに入れるボタンとほぼ同じです。
商品詳細ページにどこでもカラーミーでカートを設置する場合は数量増減のJavaScript周辺で不具合が出るので、すでに設置されているform名(product_form)とダブらないようにする必要があります(商品詳細ページ下の関連商品にカートボタンを付ける際には要注意)。

JSコードの中身

document.write("
<!--cartjs basic-->
<div style=\"width: 100%;margin: 0 auto;padding: 0;\">
  <div class=\"cartjs_box\" style=\"margin: 0;padding: 20px 0;\">
    <form name=\"product_form\" method=\"post\" action=\"https://secure.shop-pro.jp/?mode=cart_inn\" class=\"cartjs_product_form\" style=\"width: 100%;margin: 0px;padding: 0;\">
      <!-- 商品画像 -->
      <div class=\"cartjs_product_img\" style=\"width: 50%;margin: 0 auto 20px;padding: 0;text-align: center;\">
        <img src=\"https://img00.shop-pro.jp/PA00000/000/product/000000000.png?cmsp_timestamp=201800000000000\" style=\"width: 100%;\" />
      </div>
      <!--// 商品画像 -->
      <div class=\"cartjs_product_table\">
        <table style=\"border: none;width: 50%;margin: 0 auto 15px;text-align: left;\">
          <tr class=\"cartjs_sales_price\">
            <th style=\"font-weight: normal;padding-bottom: 10px;\">販売価格
            </th>
            <td style=\"font-weight: bold;font-size: 18px;padding-bottom: 10px;\">
              <!-- 販売価格 -->108円(税8円)
              <br />
            </td>
          </tr>
          <!-- 売切れ時・休止時・ログイン限定購入商品は表示しない  -->
          <tr class=\"cartjs_product_num\">
            <th style=\"font-weight: normal;padding-bottom: 10px;\">購入数
            </th>
            <td style=\"padding-bottom: 10px;\">
              <input type=\"text\" name=\"product_num\" value=\"1\" class=\"cartjs_product_input_txt\" style=\"width: 50px;padding: 4px 6px;\" />
            </td>
          </tr>
          <!--オプション情報-->
          <tr class=\"cartjs_option cartjs_option1\">
            <th style=\"font-weight: normal;padding-bottom: 10px;\">カラー
            </th>
            <td style=\"padding-bottom: 10px;\">
              <select name=\"option1\" style=\"width: 100%;border: 1px solid #ccc;background-color: #fff;height: 30px;line-height: 30px;padding: 4px 6px;border-radius: 3px;color: #333;\">
                <option label=\"赤\" value=\"00000000,0\">赤
                </option>
                <option label=\"青\" value=\"00000000,1\">青
                </option>
              </select>
            </td>
          </tr>
          <tr class=\"cartjs_option cartjs_option2\">
            <th style=\"font-weight: normal;padding-bottom: 10px;\">サイズ
            </th>
            <td style=\"padding-bottom: 10px;\">
              <select name=\"option2\" style=\"width: 100%;border: 1px solid #ccc;background-color: #fff;height: 30px;line-height: 30px;padding: 4px 6px;border-radius: 3px;color: #333;\">
                <option label=\"S\" value=\"00000001,0\">S
                </option>
                <option label=\"M\" value=\"00000001,1\">M
                </option>
                <option label=\"L\" value=\"00000001,2\">L
                </option>
              </select>
            </td>
          </tr>
        </table>
      </div>
      <!-- 売切れ時・休止時・ログイン限定購入商品は表示しない  -->
      <div class=\"cartjs_cart_in\" style=\"width: 100%;text-align: center;margin: 0 auto;\">
        <input type=\"submit\" value=\"カートに入れる\" style=\"margin-bottom: 20px;background-color: #555555;text-align: center;border-radius: 6px;height: 60px;width: 50%;color: #fff;font-size: 16px;border: 0;cursor: pointer;\" />
      </div>
      <!-- 特定商取引法リンク -->
      <div class=\"cartjs_sk_link_other\" style=\"width: 50%;margin: 0 auto 5px;text-align: left;font-size: 12px;\">
        <a href=\"https://example.shop-pro.jp/?mode=sk\">&raquo;&nbsp;特定商取引法に基づく表記 (返品など)
        </a>
      </div>
      <!--// 特定商取引法リンク -->
      <div class=\"cartjs_product_info\">
        <input type=\"hidden\" name=\"members_hash\" value=\"00000000000000000000000000\">
        <input type=\"hidden\" name=\"shop_id\" value=\"PA00000000\">
        <input type=\"hidden\" name=\"product_id\" value=\"00000000\">
        <input type=\"hidden\" name=\"members_id\" value=\"\">
        <input type=\"hidden\" name=\"back_url\" value=\"\">
        <input type=\"hidden\" name=\"back_url_with_get\" value=\"1\">
        <input type=\"hidden\" name=\"reference_token\" value=\"00000000000000000000000000\">
      </div>
    </form>
    <div style=\"display: block;text-align: center;font-size: 10px;margin-top: 10px;\">
      <a href=\"https://shop-pro.jp/\" target=\"_blank\">powered by カラーミーショップ
      </a>
    </div>
  </div>
</div>
<!--//cartjs-->
");

カラーミーショップの商品を即カートインする

どこでもカラーミーはブログに設置する以外にも使い途があります。
商品詳細ページに移動せずに即カートインできるように、カラーミーショップのトップページや商品一覧ページの商品にもカートボタンを付けることもできます。

前提としては、Smartyのsectionループで商品表示している場所に設置でき、独自タグ+どこでもカラーミーの組み合わせで実装します(Smartyに慣れていないとわかりにくいかも)。

たとえば、おすすめ商品ループ内に設置する場合(下例)は、JSコードの&pid=~部分を独自タグ<{$recommend[num].id}>に変更すれば、おすすめ商品ごとにカートボタンが設置されます。

該当するループ内(loop=~)であれば、独自タグは<{$favorite[num].id}>、<{$history[num].id}>、<{$seller[num].id}>、<{$productlist[num].id}>などに変更して設置可能です。

おすすめ商品ループ内に設置する例

<{section name=num loop=$recommend}>
 (省略) 
  <script type='text/javascript' src='https://example.shop-pro.jp/?mode=cartjs&pid=<{$recommend[num].id}>&style=normal_gray&name=n&img=y&expl=n&stock=y&price=y&inq=n&sk=y' charset='euc-jp'></script>
 (省略) 
<{/section}>

 

表示される購入数などのテーブルをCSSで消します。
「オプション項目なし、購入数1」でよければ、CSSで非表示にしてカートボタンのみにできます。
不要な項目はテーブルごとCSSで消す

.cartjs_product_table {
  display: none;
}

sectionループ内に設置する問題点

商品一覧、売れ筋商品などを表示するsectionループ内に設置する際には問題もあります。

document.write()はその性質上、ページの読み込み・描画のボトルネックになります。
動作がもっさりするときは再検討すべきかも。

カートに入れるボタンを画像にする

sectionループ内のカートボタンだと、小さめがよいでしょう。
下例では、CSSで背景(background-image)にボタン画像(cart.png 30×30px)を入れるようにしています。
既存のボタンには「カートに入れる」という文字が表示されますので、CSSで消します。SEO的に評判の良くない隠しテキストに該当しますので、ご留意ください。

背景にボタン画像を入れて、カートに入れるという文字を消す

input[type=submit] {
  background-image: url(https://www.example.com/img/cart.png);
  width: 30px;
  height: 30px;
  border-style: none;
  cursor: pointer;
  /* Hide text on input */
  text-indent: -999em; /* Hide the text, works in most modern browsers */
  /* --- Needed for IE --- */
  font-size: 0px; /* works well in IE7. still a black line (basically the text) in IE6. */
  display: block; /* Negative text-indent works in IE(6? worked fine in 7) only if this is added. */
  line-height: 0px; /* Another fix for IE6. */
}

 

ランディングページ向けのカートボタンも上記コードとほぼ同じです。
大きめ画像で設置するとこんな感じになります(クリックできます)。

ランディングページにカートを設置する際の注意点

外部サイトにランディングページを作成し、どこでもカートでカートボタンを設置した場合は、決済画面に移動した際のリンク先が問題になることがあります。
戻り先URL、注文後戻URL、商品リンクのいずれも、場合によってはショップページに戻る場合があります(下記の参考リンク)。

ランディングページからショップページに飛ばされると、お客様は戸惑うかもしれませんので、極力ショップページは見せない方向で準備しておくとよいでしょう。
準備の詳細は下記リンク(参考4の中段、【裏技】外部サイトでショップを構築している場合のおすすめ設定)をご参照ください。

参考4)「どこでもカラーミー」に新しいテンプレートが追加されました | ECお役立ち情報 ネットショップ運営サービス【カラーミーショップ】
参考5)WordPress・Tumblrで制作したサイトにカートを設置!「メディアEC」デザイン事例10選 | ECお役立ち情報 ネットショップ運営サービス【カラーミーショップ】

おわりに

会員機能を利用している場合は、カートボタンはログイン時のみ表示されます。

売切れ時はボタンが表示されません。この仕様は困る場合が多いです。
jQueryでカートボタン(.cartjs_cart_in)の有無を調べて、ない場合に「SOLD OUT」を差し込むことは可能です(すこし手間ですが)。

執筆者

えいじ@naeco.jp この記事を書いた人

メーカー系情報システム部門出身で、第一種情報処理技術者
個人事業主/カラーミー歴10年目/カラーミーショップ公認パートナー。
カスタマイズやモールへの出店作業 (CSV) をお手伝いしています。

お仕事のご相談はこちら