新たに追加された独自タグ<var>shoppingcart</var>とjQueryを用いてドラックで自由に配置できるショッピングカートの実装方法を紹介します。

<var>shoppingcart</var>は「shopping cart」をクリックすることで挿入される独自タグです。挿入することで、ショッピングカートを任意の位置に表示することができます。

コピー&ペーストしてご利用ください。 用途に合わせて編集してください。

jquery-1-10-2-min.js、jquery-ui-1-9-2-min.jsを用意してください。

下記のリンク先から内容をコピーし、「メモ帳」や「テキストエディタ」などにペーストしてご利用ください。※拡張子を含めファイル名は正しく表記してください。

<div id="shop-cart">
    <var>shoppingcart</var>
</div>

<script type="text/javascript">
//<![CDATA[
jQuery( function() {
    jQuery( '#shop-cart') . draggable();
} );
//]]>
</script>

#shop-cart {
 clear: both;
 position: fixed;
 top: 0;
 right: 0;
}
#shop-cart #cc-sidecart-wrapper { margin: 0; }
#shop-cart #cc-sidecart-wrapper .cc-sidecart-header {
 margin: 0;
 border-top: 1px solid #CCC;
 border-left: 1px solid #CCC;
 border-right: 1px solid #CCC;
}
#shop-cart #cc-sidecart-wrapper #cc-sidecart { 
 width: 300px;
 overflow: auto;
}
#shop-cart #cc-sidecart-wrapper #cc-sidecart .cc-sidecart-content {
 border-left: 1px solid #CCC;
 border-right: 1px solid #CCC;
}

#shop-cart #cc-sidecart-wrapper .cc-sidecart-item { padding: 10px; }
#shop-cart #cc-sidecart-wrapper .cc-sidecart-calculation { padding: 10px; }
#shop-cart #cc-sidecart-wrapper .cc-sidecart-footer {
 margin: 0;
 border-bottom: 1px solid #CCC;
 border-left: 1px solid #CCC;
 border-right: 1px solid #CCC;
}

独自レイアウト画面「HTML」タブから「shopping cart」を任意の場所に挿入します。

※挿入したショッピングカートにのみJavaScript、CSSを適用するために<div id="shop-cart"></div>で囲んでいます。

独自レイアウト画面「CSS」タブから、CSSを記入します。

独自レイアウト画面「ファイル」タブから、jquery-1-10-2-min.js、jquery-ui-1-9-2-min.jsをアップロードします。

設定「ヘッダー部を編集」から、JavaScriptを記入します。