Secura Vita

Category: Works , WordPress , Plugins
Works

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で吐き出される情報にそれらの情報も入っていてカスタマイズは可能ですので挑戦してみてください。


おもしろかった・役に立った
▼ブログランキング参加中!クリック!▼
  • ブログランキング・にほんブログ村へ

Leave a comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ソースコードを記入する場合は [code]~[/code] でくくってください。
[code]
echo "Hello World";
[/code]

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください