このところ連続でご紹介しているカートページのカスタマイズですが、今回は商品ページの施工です。
「カート入力時にフリガナ、FAXを入力しなくて良い方が成約が上がる！」や「カート離脱防止アラートを表示させる」と一緒にご紹介しておくとコードの記載が簡単なので、商品ページのサムネイルをスライダー化するカスタマイズをご紹介しておきます。
Flexslider2を導入
初期設定の商品画像はサブ画像はポップアップされてしまい、いちいち画像を閉じなくてはならず面倒です。（⇒WelcartBasicのデモサイトで確認）
これをスライドショー化できればいいなとおもっていたのですが、やっぱり『Welcart カスタマイズブログ』さんにありました！！
今回も『Welcart カスタマイズブログ』さんを参考に！
生まれ年ワインショップのWelcartのカスタマイズは、半分以上このサイトを参考にさせてもらっています。今回もそう！設置も私が説明する必要はないと思うし、こんなに詳しく書けないので「画像をスライドショーで見せる FlexSlider2」（『Welcart カスタマイズブログ』さん）をご覧ください。
さて、では私は何を書くかというと、前回まで書いてきたfunction.php内のjQuery本体を読み込む命令文部分を、Flexslider2のカスタマイズも組み込んだものに変更するということ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/*離脱防止用、商品サムネイル、カート内入力チェック用*/ function my_scripts(){ wp_enqueue_script( 'jquery' ); if(is_single()){ wp_enqueue_style( 'flexslider-css', get_stylesheet_directory_uri() . '/css/flexslider.css'); wp_enqueue_script( 'flexslider-js', get_stylesheet_directory_uri() . '/js/jquery.flexslider-min.js', array(), '2.2.2', true); } if( is_page( array( 'usces-cart','usces-member' )) ){ wp_enqueue_script( 'validation', get_stylesheet_directory_uri() . '/js/validation.js', array(), '', true); wp_enqueue_style( 'validationEngine.jquery.css', get_stylesheet_directory_uri() . '/css/validationEngine.jquery.css', array(), '1.0', 'all'); wp_enqueue_script( 'jquery.validationEngine.js', get_stylesheet_directory_uri() . '/js/jquery.validationEngine.js', array('jquery'), '2.6.2', true); wp_enqueue_script( 'jquery.validationEngine-ja.js', get_stylesheet_directory_uri() . '/js/jquery.validationEngine-ja.js', array('jquery'), '2.0', true); } } add_action( 'wp_enqueue_scripts', 'my_scripts'); /*離脱防止用、商品サムネイル、カート内入力チェック用（終了）*/ |
です。実際、生まれ年ワインショップは2017年2月現在、この形でjQuery本体を読み込む命令文部分は完成形となっています。
商品のメイン画像を大きくする
『Welcart カスタマイズブログ』さんに
大きさを変える場合はusces_the_itemImageの中の数字を変えて下さい（メイン画像とサブ画像の2箇所）。
とあるように、画像のサイズはFlexSlider2の読込部分で調整できます。
ただし、生まれ年ワインショップでは、できるだけ商品画像は最適化してからアップしていますが、たまに忘れてしまうことがあるため、画像が大きすぎてもメイン画像の部分に納まるように、画像ボックスのサイズを指定しています。なので、メイン画像のサイズを変更させたい場合は、この部分も数値を一致させなければなりません。
例の如く実際の生まれ年ワインショップのコードを書いておきます。最初の1行が画像ボックスのサイズ指定をしている部分です。この部分とusces_the_itemImage(0, 375, 250,・・・の部分をご覧いただくと、横幅250pxで統一しているのが分かると思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div id="img-box" style="width:250px;margin: 0 auto;"> <!--商品画像スライダー--> <div id="slider" class="flexslider"> <ul class="slides"> <li data-thumb="<?php usces_the_itemImageURL(0); ?>"> <a href="<?php usces_the_itemImageURL(0); ?>" <?php echo apply_filters('usces_itemimg_anchor_rel', NULL); ?>><?php usces_the_itemImage(0, 375, 250, $post); ?></a> </li> <?php $imageid = usces_get_itemSubImageNums(); ?> <?php foreach ( $imageid as $id ) : ?> <li data-thumb="<?php usces_the_itemImageURL($id); ?>"> <a href="<?php usces_the_itemImageURL($id); ?>" <?php echo apply_filters('usces_itemimg_anchor_rel', NULL); ?>><?php usces_the_itemImage($id, 375, 250, $post); ?></a> </li> <?php endforeach; ?> </ul> </div> <!--商品画像スライダー（終了）--> |
以上です。皆さんもコピーしてやってみてください＾＾
お願い
検索でここにたどり着いた方は、自営業者さんでWelcartを導入しようと思っている方だと思います。役に立った方は、ビジネスでの贈り物に当店「生まれ年ワインショップ」もしくは、日本初のプレゼント専門ワインショップ「プレゼントワインショップ」をご利用いただけると嬉しいですm(__)m
