このところ連続でご紹介しているカートページのカスタマイズですが、今回は商品ページの施工です。
「カート入力時にフリガナ、FAXを入力しなくて良い方が成約が上がる！」や「カート離脱防止アラートを表示させる」と一緒にご紹介しておくとコードの記載が簡単なので、商品ページのサムネイルをスライダー化するカスタマイズをご紹介しておきます。
Flexslider2を導入
初期設定の商品画像はサブ画像はポップアップされてしまい、いちいち画像を閉じなくてはならず面倒です。（⇒WelcartBasicのデモサイトで確認）
これをスライドショー化できればいいなとおもっていたのですが、やっぱり『Welcart カスタマイズブログ』さんにありました！！
今回も『Welcart カスタマイズブログ』さんを参考に！
生まれ年ワインショップのWelcartのカスタマイズは、半分以上このサイトを参考にさせてもらっています。今回もそう！設置も私が説明する必要はないと思うし、こんなに詳しく書けないので「画像をスライドショーで見せる FlexSlider2」（『Welcart カスタマイズブログ』さん）をご覧ください。
さて、では私は何を書くかというと、前回まで書いてきたfunction.php内のjQuery本体を読み込む命令文部分を、Flexslider2のカスタマイズも組み込んだものに変更するということ。
/*離脱防止用、商品サムネイル、カート内入力チェック用*/
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で統一しているのが分かると思います。
<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
