ここでは売れている商品をWelcartのDBから読み出して「売れ筋商品」としてリストする関数を作成しています。
尚、このプログラムは下記の設定が完了している事が前提となります。
①Jqueryで制御するスライダープラグイン「slick.js」の導入と使い方
②総ての「Font Awesome」アイコンフォントを利用可能にする
1.「ベストセラー商品」のリスト関数の開発方針
1.ベストセラー商品情報の取得方法
ベストセラー商品は下記の方法で取得できます。
global $usces; $ids = $usces->get_bestseller_ids( $days );
■「$days」は検索期間で、その期間の売上件数が多い順に商品リストが抽出されます。
「$days」を指定しない場合は「30日」です。
2.関数名と引数
bestsale_products($pc_num,$sm_num,$days,$msg)
引数 | デフォルト値 | 備考 |
$pc_num | 5 | PC画面の時、1行に表示する商品数 |
$sm_num | 2 | スマホ画面の時、1行に表示する商品数 |
$days | 9999 | 売れ筋商品を検索する期間 |
$msg | ’売れ筋商品’ | タイトルに付ける名前 |
3.その他の条件
①売れ筋商品が1行に表示する商品数を超えた場合は「slick.js」でスライドさせる。
よって「slik.js」がインストールされている必要があります。
4.この関数を利用する場所
プロントページ、固定ページを原則としますが、個別商品ページやその他のページに配置しても問題ありません。
2.プログラム
1.functions.phpに記述する内容
/* 商品リスト関数の追加 */ get_template_part('func/welcart/item-list/bestsale_products'); /* 売れ筋商品 */
■「welcart」の下に「item-list」フォルダを作成し、その中に「bestsale_products.php」関数を作成します。
2.bestsale_products.phpの中身
<?php /***************************************************************************** ベストセラー商品のリスト出力 引数 $pc_num:1行の表示個数(PC) -デフォルトは5 引数 $sm_num:1行の表示個数(スマホ) -デフォルトは2 引数 $days :検索期間 -デフォルトは9999 引数 $msg :タイトル -デフォルトは売れ筋商品 *******************************************************************************/ function bestsale_products($pc_num=5,$sm_num=2,$days=9999,$msg='売れ筋商品') { global $usces; $ids = $usces->get_bestseller_ids( $days ); /* 売れ筋商品の取得 */ $msg = '<i class="fas fa-crown" style="color:tomato;"></i>'.' '.$msg; /* ①リストタイトル */ $args = array( /* ②wp_queryのパラメータセット */ 'posts_per_page' =>-1, 'post__in' => $ids, /* 売れ筋商品 */ 'orderby' =>'post__in' ); $products = new WP_Query( $args ); ?> <h3><?php echo $msg;?></h3> <div class="my_bestsale"> /* ③商品リスト */ <?php while ($products->have_posts()) : $products->the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="itemimg"> <a href="<?php the_permalink() ?>"><?php usces_the_itemImage(0, 150, 150); ?></a> <?php welcart_basic_campaign_message(); ?> </div> <div class="itemprice"><?php usces_the_firstPriceCr(); usces_guid_tax(); ?></div> <?php if(! usces_have_zaiko_anyone() ) : ?> <div class="itemsoldout"><?php _e('Sold Out', 'usces' ); ?></div> <?php endif; ?> <div class="itemname"><a href="<?php the_permalink() ?>" rel="bookmark"><?php usces_the_itemName(); ?></a></div> </article> <?php endwhile; ?> </div> <style> /* CSSの出力 */ .my_bestsale article{padding:10px;} .my_bestsale .itemimg img { width: 100%; height: auto; } @media screen and (max-width:768px){.my_bestsale{margin:0 20px;max-width:100%;}} .slick-prev:before, .slick-next:before{color:'#000';} .slick-track{margin-left:0;} </style> <?php echo <<<EOM <script> /* ④Jqueryの出力 */ $(function(){ $('.my_bestsale').slick({ arrows:true, /* 左右矢印を表示 */ dots:false, /* ドットは非表示 */ infinite:false, /* 無限ループ機能はOFF */ slidesToShow:$pc_num, /* 1行の表示個数(PC) */ slidesToScroll:1, /* スクロール個数 */ swipeToSlide:true, /* スワイプはslidesToScroll値に影響を受けない */ responsive:[{ breakpoint:768,settings:{slidesToShow:$sm_num,}/* 1行の表示個数(スマホ) */ }] }); }); </script> EOM;?> <?php wp_reset_postdata(); /* ⑤WP_Queryのリセット */ } /* functionの終了 */ ?>
①アイコンフォントは「fas fa-crown」を利用しています。
総ての「Font Awesome」アイコンフォントを利用可能にするの設定をして下さい。
②「wp_query」のパラメータは左記リンク先の解説を参照してください。
ポイントは「orderby」で「post__in」を指定する事です。
③商品の表示部分はwelcart_basicの商品表示プログラムを「wp_query」用に少し変更しました。
④「slick.js」の設定は、プログラムで変更する必要がある為、phpプログラムで書きました。
<<<EOMはヒアドキュメントと言われる物で、何行にも渡る長い文章を出力する方法です。次のEOMまでが1つのドキュメントになります。
⑤「 wp_reset_postdata()」は、Wp_Queryのリセット関数で必須です。