#Welcartのカート画面で任意の商品画像を表示する
##目的
Wlecartを使用したショッピングサイトの案件で、販売商品としてカスタマイズが可能な商品の販売案件が有りました。商品の単価や数量、在庫の情報は商品マスタに登録した情報を使用するのですが、カスタマイズが可能な為、個別に商品画像が変化します。別途、カスタマイズのプログラムを実行して、カスタマイズされた商品画像は作成されて、メディアファイルとしてアップロードされている前提で、カートの写真をカスタマイズされた画像にします。
前提となる状況までの情報はネット上で比較的見つかったのですが、Welcartのカートの商品画像の入れ替えは少し手間取ったので、コードをアップしておこうと思います。
##準備
Welcartの商品マスタでオプションが指定できるように設定します。
1.メニューのWelcart shop → 基本設定 から共通オプションでオプションを指定します。
今回は、コードでオプションに入力したURLの画像を表示させるようにしているので任意のオプション名とし、入力項目はテキストとします。
2.1の設定後、商品マスタで商品オプションが設定できるようになるので、1で設定したオプションを適用します。
3.カートボタンを表示するとオプションの入力欄が表示されるようになります。
##コード
/*
* Welcart のカード画面のサムネイルをカスタマイズ結果の画像にする
*
* オプション-完成画面 に完成画像のパスを渡してその画像をカートのサムネイルに表示
*
*/
class welcart_change_thumnail {
public function __construct() {
add_filter('usces_filter_cart_thumbnail', array( __CLASS__, 'change_thumnail' ), 10, 5);
}
public static function change_thumnail( $cart_thumbnail, $post_id, $pictid, $i, $cart_row ){
if ($cart_row['options'][urlencode('完成画面')]){
$optstr = $cart_row['options'][urlencode('完成画面')];
$upload_dir = wp_upload_dir();
$cart_thumbnail = '<img src="' . $upload_dir['url'] . '/' . nl2br(esc_html(urldecode($optstr))) . '">';
}
return $cart_thumbnail;
}
}
「完成画面」という部分を実際にオプションで指定した名前にします。
「完成画面」というオプション項目を持った商品をカートに入れてカート画面に移行したときに商品画像の部分を「完成画面」に入力されたURLの画像を表示します。御覧の通り、img の srcで指定出来る画像であれば表示するはずです。
「完成画面」オプションのない商品は通常通り、登録された商品画像が表示されます。
##実際の使用について
オプションにURLを入れて表示させているため実際の使用には入力時点で色々と考慮する必要が有ると思います。私の場合は、カートの画面をほぼ非表示としてオプションを入力して使っています。
表示状態で任意の入力をしてもらう場合は入力制限などが必要になると思います。そこの部分は別途ネットで情報を検索したほうが精度の高い情報が有ると思います。
写真を使っていないので分かりにくい説明になっていますが、時間のある時にでも操作画面の写真を入れようと思います。
ひとまず、2件目の投稿として・・・