忍者ブログ
29 April

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

10 July

WCEX Mobile トップページの新着ボックスを複数設置する welcart

有料拡張プラグインWCEX Mobileで、トップページにあるスライドボックスを
さらに増やしたいときのやり方。

「再入荷商品」として新たに設置したい。

前提条件:再入荷商品のカテゴリーを作成し、商品を登録しておく

1、新着商品<div id="home_new">のdivを丸ごとコピーして表示させたい場所に置く。
2、コピーした <div id="home_new"> のid名を変更→ <div id="sainyuka">
3、コピーした <div id="home_new"> 内の
<span><a href="<?php wcmb_get_category_link_by_slug( 'itemnew' ); ?>"><?php _e('list', 'usces'); ?> &raquo;</a></span> のスラッグ名を再入荷商品のスラッグ名に変更
<?php $reco_ob = new wp_query(array('category_name'=>'itemnew', 'posts_per_page'=>12, 'post_status'=>'publish')); ?> のカテゴリー名を再入荷商品のカテゴリー名に変更変更
4、style.css内を「home_new」で検索して、出てきた箇所全てに「sainyuka」も加える

これで見た目は完成。
しかし次へ前へのボタンをおしてもスライドしない!
Rotoというjqueryを使って動いていました。
これの設定の仕方は非常に簡単なのでありがたいです。
http://www.skuare.net/2011/09/roto.html

5、コピーした <div id="home_new"> 内の <div id="listbox" class="roto"> の
id名を変更します→ <div id="listbox2" class="roto">
6、コピーした <div id="home_new"> 内の <button id="listbox-prev"><button id="listbox-next"> の id名を先ほど変更したid名と同じにします
→ <button id="listbox2-prev"><button id="listbox2-next">
7、footer.phpを開き、</body>直前にあるScriptに        $("#listbox2").roto({ direction: "v" });
と書き足します。

完成です!

おすすめ商品のほうのスライドボックスを増やしたいときは、<div id="home_recommend">
のdivをコピペして上記と同じことをしてください。スライドのScriptは、おすすめ商品で
使われているid名のものをコピペしてid名を変えてください。
縦スライド、横スライドで指定の仕方が違います。
コピペ元→      $("#carousel").roto({ snap: false });

PR