カラーミーショップのカートにマウスオーバーでカゴの中身を表してみる

ここ最近ほとんど（プライベートで）PCをいじる事がなく、

ブログ書くような記事もなく、、、。

なもんで、仕事で少し使っておりますカラーミーの小ネタを少しずつ書いていこうと思います。

カラーミキットのカスタマイズ

たいしたカスタマイズではないのですが、

先日カラーミーキットを少しカスタマイズしてみました。

その際、カートの中身が（詳細）が表示されない。

商品確認するのに1ページ遷移するのも、、と思い

マウスオーバー＆ツールチップで表示させてみよう。

備忘録もかねて。

使わせていただいたツールチップはこちら

jQuery PowerTip

うれしいMITライセンスで公開されているようです（要確認!!）

使い方に関しましては

coliss様のサイトが大変参考になりました。

そんで共通HTML内に大体こんな感じのコードを入れる！

<{if $incart != ""}>//カートに商品があれば実行
  var data = [];
  data.push('<div style="width: 300px;">');
  <{section name=num loop=$incart}>
    data.push('<p><a style="color: #fff; text-overflow: ellipsis; display: block; overflow: hidden;" href="<{$incart[num].link_url}>"><{$incart[num].name}></a></p>');
    data.push('<p class="txt_r"><{$incart[num].price}>円</p>');
  <{/section}>
  data.push('<p class="bor_t_1 mar_t_5 pad_t_5"><b>商品合計&nbsp;<{$incart_total_price}>円</b></p>');
  data.push('</div>');
  $('#cart-tool-tip').data('powertipjq', $(data.join('\n'))).powerTip({placement: 'sw', mouseOnToPopup: true, closeDelay: 200, intentPollInterval: 0});
<{/if}>

とりあえずは設置してみたものの、

かごの中身の表示方法はどんな感じがベストなんでしょうか、、。

もっと色々調べてみようと思います。

一応DEMO