商品一覧ページで売り切れ・入荷待ちを表示

スポンサーリンク

商品詳細ページに行って初めて「売り切れ」表示があると、「先に書いといてよ!時間がムダになった!」と怒るユーザーも無きにしも非ず。

商品ページの売り切れ表示

最初からカテゴリーの商品一覧で「売り切れ」が表示されていれば、ユーザーに無駄な時間を過ごさせないばかりか、在庫がある商品への回遊だけを促し、ひいては成約に繋がるというものです。

という訳で、今回は「商品一覧ページで売り切れ・入荷待ち」を表示する方法。

商品一覧ページで売り切れ・入荷待ちを表示

私のWelcartのECサイトでは随分前からこのカスタマイズを入れております。恐らく当時参考にしたであろうWelcartフォーラムのトピックは多分こちら。

[解決済み] 在庫ステータスの条件分岐「在庫僅少」が反映されない。(Welcartコミュニティー)

カスタマイズ方法

カスタマイズの基本は、以下の2点のポイントです。

  • カスタマイズするのはcategory.phpやarchive.phpなどの一覧テンプレート
  • ループwhile(have_post())内の価格表示の直後に、下記コードを追加

デフォルトテーマなら、このようになると思います。

  • カスタマイズするのはitem_category.php
  • 33行目に<div><?php usces_crform( usces_the_firstPrice(‘return’), true, false ); ?><?php usces_guid_tax(); ?></div>という価格を表示するコードがあるので、その直後に下記コードを追加

ただ、私はWelcartのデフォルトテーマを使ったことがないので、間違ってたらスミマセン。

追加するコードは、

<?php
	$status = usces_get_itemZaiko( 'id' );
	switch( $status ){
		case 2:
			echo '<span class="soldout">売り切れ</span>';
			break;
		case 3:
			echo '<span class="waiting">入荷待ち</span>';
			break;
	}
?>

です。PHPを学習中の私は、switch関数を使ってすっきりさせてみました。もちろんif文でも出来ますが、条件が色々ある場合はif文ではかなりコードが長くなるので、switch関数のほうが便利です。

2行目のコードで、在庫ステータスを数値として取得していますが、数値はそれぞれ以下のようになっています。商品登録ページの在庫状態の選択肢と同じ順序になっています。

商品登録ページの在庫状態の選択

0 在庫有り
1 在庫僅少
2 売切れ
3 入荷待ち
4 廃盤

フォーラムの説明ではechoの後にフックを設置してfunctions.phpなどで表示を一括カスタマイズ出来るコードも紹介されています。

私は「このくらいのカスタマイズであれば別にフックはいらない」と判断、フックは外してシンプルなコードにし、かつclassを追加してスタイルシートで自由に装飾出来るようにしました。

「在庫僅少」も追加したい場合

上記のステータスの番号を参考にコードを追加して、「在庫僅少」も表示可能です。

<?php
	$status = usces_get_itemZaiko( 'id' );
	switch( $status ){
		case 1:
			echo '<span class="few">残りわずか</span>';
			break;
		case 2:
			echo '<span class="soldout">売り切れ</span>';
			break;
		case 3:
			echo '<span class="waiting">入荷待ち</span>';
			break;
	}
?>

もちろん、画像を用意してecho ' 'の中身を、<img src="…">などに置き換えてもいいですね。

2 Responses to “商品一覧ページで売り切れ・入荷待ちを表示”

  1. ナカタ より:

    こんにちは。Welcartの商品一覧ページでに「売り切れ」表示を導入したいと思い、こちらの記事にたどり着きました。
    紹介されている追加コードをarchive.phpに入れてみたのですが、表示されません。他に設定が必要なのでしょうか?
    よろしくお願い致します。

    • まめ子(管理人) より:

      ご利用のテーマで、商品一覧を表示するテンプレートが本当にarchive.phpかどうか、確認なさってみては如何でしょうか(商品一覧を表示するテンプレートが他にある場合があります)。

Copyright© 2017 Welcart カスタマイズ ブログ All Rights Reserved.