さて今回は、カートJS機能を使って、よくありそうなパターンをサンプルとして作ってみました。
使い道や使い方をご存じない方はこちらから。カラーミーショップ-カートJS機能とは？
いろんなところに「カートに入れる」ボタンがつけられるよ、って機能ですが、実際には、ブログよりも、商品一覧ページやトップページに設置したい、ついでにボタンのデザインも変更したいなぁ、と思うことが多いんじゃないでしょうか。
今回のサンプルでは、デザインをシンプルに画像だけして、購入数も表示しません。
カートJS機能で作成したコードをちょいちょいといじって、ショップページの<{section}>ループ内に設置。
HTML（ショップページのどこか）+JavaScript
<{section name=num loop=$recommend}>上例の場合はおすすめ商品のID。<{$seller[num].id}>、<{$productlist[num].id}>でももちろんOK。
<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}>
ページによって使える独自タグが異なるので、注意が必要です（ここ重要）。
CSS
.cartjs_cart_in {上の2つで、都合の悪いマージンを0にして、購入数テーブルの表示を消しています。
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. */
}
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機能について」「カートに入れるボタンを商品詳細ページ以外に設置する」
【追記】
ということで、商品詳細ページに「カートに入れる」ボタンを設置するには、色々やる必要あり。
