Welcartカスタマイズ – カートボタンをページ最後にもつける

2015年11月4日

https---www.pakutaso.com-assets_c-2015-06-PAK85_notepc20150319202127-thumb-1000xauto-18289 (1)

引き続きWelcartネタとなります。商品個別ページでレイアウトを決めた後、カートボタンがもう一つ欲しい。そういうことありませんか?商品ページで商品スライダーの横にカートボタン、楽天ぽく縦長の商品説明を追加してその最後にもカートボタンが欲しい!そういう時はJQueryで要素をコピーしましょう。

Welcart商品ページにカートボタンを2つ設置する

まずはカートに入れる動作をする箇所を

<div class="clone-true">

カート動作PHP部分

</div>

などとしてくくってしまいましょう。ここまで出来たら後は楽勝。JQueryの出番です。

<script language="javascript">
$(function() {
$(".clone-true").clone(true).addClass("clone-cart").insertAfter(".text-section");
});
</script>

おしまい!

clone(true)でコピーして、コピーした要素にclassを追加することでコピーした要素だけにCSSを適用すれば全くイメージの違うカートボタンの出来上がりです。

主な著書

Django

Flask

Bottle