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

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

カラーミーショップには、ウェブサイトにカートに入れるボタンを付けることができる機能「どこでもカラーミー」があります(導入当初はカートJS機能と呼ばれていました)。
よくある使い方としては、ランディングページを作る際のカートボタンとして用いられます。

参考1)フリーページを使ってランディングページを作ろう | ネットショップ開業マニュアル
参考2)どこでもカラーミーサンプルサイトbyカラーミーショップ

 

ランディングページのような外部サイトだけでなく、内部サイト(カラーミーショップ)にも付きます。
カラーミーショップの商品詳細ページ以外にカートボタンを付ける際にも利用できます。
たとえば、トップページに表示されている「おすすめ商品」や「お気に入り商品」のリストに付けることができます(商品IDがあればその他でも)。
商品詳細ページに移動せずにカートに入れることができます。

どこでもカラーミーの基本

どこでもカラーミーはマニュアルが整っていますので、ご一読ください。

参考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コードの&pid=~部分を独自タグ<{$recommend[num].id}>に変更すれば、OKです。

該当するループ内であれば、独自タグは<{$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で消す

.cartjs_product_table {
  display: none;
}

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-->
");

どこでもカラーミーをループ内に設置した場合の問題点

ループ内とは、商品一覧、売れ筋商品などを表示するsectionループ内のことです。
document.write()はその性質上、ウェブページの読み込み・描画のボトルネックになります。
表示数が多いとウェブページの最後まで表示する際に時間がかかりますので、ウェブページの動作がもっさりするときは再検討すべきかも。

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

たとえば、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お役立ち情報 ネットショップ運営サービス【カラーミーショップ】

おわりに

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

執筆者

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

メーカー系情報システム部門出身で、第一種情報処理技術者
カラーミー歴10年目/カラーミーショップ公認パートナー。
好きが高じてブログを書いていますが、カラーミーの中の人ではありません。