welcart:商品一覧に「カートに入れる」ボタンを表示させる
Tag: Welcart
welcartの商品一覧に「カートに入れる」ボタンを表示させたいという要望が少なからずあるかと思います。
こんな感じ。
デフォルトでその用途に使えるタグが用意されてるのでその紹介です。
usces_direct_intoCart
usces_direct_intoCartというタグが用意されてるのでそれを使えば一覧ページに「カートに入れる」ボタンを表示させることができます。
usces_direct_intoCart( $post->ID, usces_the_itemSku( 'return' );
usces_the_itemSku( ‘return’ )は通常では動作しません。
実際に書く場合は下記のようにしてください。
usces_the_item(); usces_have_skus(); //↑この2つのタグがないとダメ usces_direct_intoCart( $post->ID, usces_the_itemSku( 'return' );
「Add To Cart」を「カートに入れる」に変更するには引数の最後に文字を指定します。
usces_direct_intoCart( $post->ID, usces_the_itemSku( 'return' ), false, 'カートに入れる' );
3番目の引数の用途がよくわからなかったのですが、デフォルトでfalseなのでそのままfalseでOKだと思います。
複数SKUの場合
上記の方法は商品コードに対してSKUが一つの場合です。
SKUが複数あって、すべてのSKUにボタンを付けたい場合はSKUをループさせてやればOKです。
<?php usces_the_item(); ?> <?php while ( usces_have_skus() ) : ?> <?php usces_direct_intoCart( $post->ID, usces_the_itemSku( 'return' ), false, 'カートに入れる' ); ?> <?php endwhile; ?>
このままではSKUの区分がわからないのでSKU名と価格くらいは出しときましょう。
<?php usces_the_item(); ?> <?php while ( usces_have_skus() ) : ?> <p><?php usces_the_itemSkuDisp(); ?>:<?php usces_the_itemPriceCr(); ?></p> <?php usces_direct_intoCart( $post->ID, usces_the_itemSku( 'return' ), false, 'カートに入れる' ); ?> <?php endwhile; ?>
あとは表示される情報を変えたり、在庫切れの場合の表示を変えたりSKUが1つの場合と複数の場合で分岐させたりとか商品詳細ページでやってるようなことをやればOKです。
こちら記事を参考にしてみてください。
注意点として、このタグでは数量は指定できず1に固定される模様。
数量を選んだ上でカートに入れたい場合はこのタグでは無理で、商品詳細ページで使われている「usces_the_itemSkuButton」と「usces_the_itemQuant」を使う必要があります。
試したところjsのエラーは出ますがカートには入ります。
ただ、残り個数の判別や在庫切れの判別はできないのでカスタマイズする必要があります。
在庫切れはボタン自体表示させなければいいんですが、残り個数との比較は必要ですよね。
usces_direct_intoCartで吐き出される情報にそれらの情報も入っていてカスタマイズは可能ですので挑戦してみてください。