- Web制作
welcart 商品を価格順で並べ替えるソート機能を実装
welcart を使ったショッピングサイトで商品一覧ページに価格順や新着順で並べ替えるソート機能を実装する方法です。
Advanced Custom Fields の場合はパッチプラグインが必要
今回はWordPressにもともと備わっているカスタムフィールドではなく、プラグイン「ACF(Advanced Custom Fields)」を使用してカスタムフィールドを作っていきます。
以前の記事でも書いたように、Welcart で ACF を使うにはパッチプラグイン WCEX Patch for AFC をインストールする必要があります。
詳しくはこちらの記事を参照ください。
WCEX Patch for AFC をインストールできたらカスタムフィールドで「search_price」という名前のフィールドを作っておきます。
※フィールド名は好きな名前でOKです。
カスタムフィールドに商品価格を自動登録
次に商品価格が自動で先ほどのカスタムフィールドに登録されるように functions.php に下の内容を記述します。
ACF のフィールドの値を更新するには update_field() という ACF の関数を利用します。
functions.php
function set_search_price($post_id, $post) { if (wel_get_product($post_id)) { $price = usces_the_firstPrice('return', $post); update_field('search_price', $price, $post_id); } } add_action('save_post', 'set_search_price', 99, 2);
これで商品登録時や更新時に商品価格が自動でカスタムフィールド「search_price」に登録されます。
セレクトボックスを使ってソート機能を実装
archive.php などの商品一覧ページにソートボタンを実装します。
archive.php(等)
<div class="sortarea"> <form name="itemsort" method="get" id="sort_form" class="sort_form"> <select name='sort_select' onChange="document.forms['itemsort'].submit()"> <option value="sort1" <?php if (!isset($_REQUEST['sort_select']) || $_REQUEST['sort_select'] == 'sort1') echo ' selected="selected"'; ?>>新着順</option> <option value="sort2" <?php if (isset($_REQUEST['sort_select']) && $_REQUEST['sort_select'] == 'sort2') echo ' selected="selected"'; ?>>価格が高い順</option> <option value="sort3" <?php if (isset($_REQUEST['sort_select']) && $_REQUEST['sort_select'] == 'sort3') echo ' selected="selected"'; ?>>価格が安い順</option> </select> </form> </div> <?php $sortset = $_GET['sort_p']; ?> <?php $sortall = array( "sort1" => "cat=$cat&order=DESC&posts_per_page=20&paged=", "sort2" => "cat=$cat&order=DESC&orderby=meta_value_num&meta_key=search_price&posts_per_page=20&paged=", "sort3" => "cat=$cat&order=ASC&orderby=meta_value_num&meta_key=search_price&posts_per_page=20&paged=", ); ?> <?php if ($sortset != '') { $sort = $sortall[$sortset]; } else { $sort = $sortall["sort1"]; } ?> <?php query_posts($sort . $paged); ?> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); usces_the_item(); ?> //商品のループ出力 <?php endwhile; ?> <?php endif; ?>
セレクトの項目を選んだと同時に submit してソートがかかるようになっています。
まとめ
以上でソート機能が実装できました。
商品点数が多い時は便利なのでぜひお試しください。
名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 100 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。主にWeb系の情報をお届けします。