自由に配置できるショッピングカート実装方法

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

デモサイト

画像をクリックするとデモへリンクします
画像をクリックするとデモへリンクします

<var>shoppingcart</var>について

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

実装方法

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

jQuery

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

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

HTML

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

JavaScript

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

CSS

#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;
}

手順

1.<var>shoppingcart</var>の挿入

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

 

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

 

2.CSSの適用

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

 

3.jQueryのアップロード

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

 

4.JavaScriptをヘッダー部に記入

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

 最後までお読みいただきありがとうございます!いかがでしたか?

このページが参考になったら、ぜひ左のボタンでFacebookかTwitterにシェアしていただけると嬉しいです!

押してくれたらもっとこうしんするぴ!