2014年4月26日

カートJS機能を実践的にいじる

公式のお知らせにありましたが、「カラーミーショップ、新サポートコミュニティはじめました。」とのこと。これまで重宝していた助け合い掲示板の役割も、新サイトに移行するようです(カラーミースタッフが回答することもあるようです)。

さて今回は、カートJS機能を使って、よくありそうなパターンをサンプルとして作ってみました。
使い道や使い方をご存じない方はこちらから。カラーミーショップ-カートJS機能とは?

いろんなところに「カートに入れる」ボタンがつけられるよ、って機能ですが、実際には、ブログよりも、商品一覧ページやトップページに設置したい、ついでにボタンのデザインも変更したいなぁ、と思うことが多いんじゃないでしょうか。

今回のサンプルでは、デザインをシンプルに画像だけして、購入数も表示しません。
カートJS機能で作成したコードをちょいちょいといじって、ショップページの<{section}>ループ内に設置。


HTML(ショップページのどこか)+JavaScript
<{section name=num loop=$recommend}>

    <script type='text/javascript' src='http://hogehoge.shop-pro.jp?mode=cartjs&pid=<{$recommend[num].id}>&style=basic&name=n&img=n&expl=n&stock=n&price=n&inq=n&sk=n' charset='euc-jp'></script>

<{/section}>
上例の場合はおすすめ商品のID。<{$seller[num].id}>、<{$productlist[num].id}>でももちろんOK。
ページによって使える独自タグが異なるので、注意が必要です(ここ重要)。

CSS
.cartjs_cart_in {
    margin-bottom: 0px!important;
}
.cartjs_product_table {
    display: none;
}

input[type=submit] {
    background-image: url(http://hogehoge.heteml.jp/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. */
}
上の2つで、都合の悪いマージンを0にして、購入数テーブルの表示を消しています。

input[type=submit]は属性セレクタと呼び、submitボタンにスタイルを適用できます(IE7以上とのこと)。
標準のボタンから、用意した画像(30×30px)に変更。
cursor: pointer;で、画像上に乗ったらマウスカーソルを変えるようにしています。
購入数テーブルの表示を消していますので、購入数1(=デフォルト)でカートに入ります。

「カートに入れる」という文字を消すのがなかなか面倒でした。
ネットで調べていると、そのものずばりの内容があったので、CSSに追加。
【参考】 SNIPPLER-Hide text on input[type=submit]

おわりに
カートJS機能で作った「カートに入れる」ボタンも、CSSでそこそこいじれるよ、という感じです。
カートJS機能について」で書きましたが、カートJS機能は、やっていることはわりとシンプルです。
もし、CSSでスタイル調整ができない場合があっても、カートJS機能から受け取ったコードをいじって、実現することができるかもしれません。

カート設置に関しては、当サイトでも過去に取り扱いがあります。いろいろいじりたくなった方は、ご一読を。
カートJS機能について」「カートに入れるボタンを商品詳細ページ以外に設置する」

【追記】
商品詳細ページに置くと、新規のセッションの場合において、カートJS機能がうまく動作しないことがある(他ページではそんなことはないが、商品詳細ページでは、すでにあるカートの、user_hash、members_hashと不一致が生じる関係で不具合が出るようだ)。
商品詳細ページに設置したい場合は、「カートに入れるボタンを商品詳細ページ以外に設置する」を使うとよい。
product_formがダブると数量がマズイので、名前を変えておく。
ということで、商品詳細ページに「カートに入れる」ボタンを設置するには、色々やる必要あり。