WooCommerce使用時にヘッダー内にカートアイコンとカート入れた数量を表示したい

0
いいねをした人: 居ません
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #54061
    GONSY
    参加者
    836

    My Snow Monkey +  WooCommerceプラグインで物販向けのオンラインショップを試みています。

    実装が可能であれば、ヘッダー内にカートアイコンとカートに入れた商品数(下図みたいなもの)を表示できればと思い、フォーラム内やネットをざっと調べてみましたが、情報があまり収集できませんでした。

    参考として、WooCommerce対応テーマ「Storefront」を見たところ、

    WC()->cart->get_cart_contents_count()

    あたりを使うと思いますが、Snow Monkeyのヘッダー内に追加するのは、どの程度のカスタマイズが必要でしょうか。
    ヒントをいただけると助かります。
    よろしくお願いします。

    【お使いの Snow Monkey のバージョン】10.10.7
    【お使いのブラウザ】Google Chrome 83 for Mac
    【当該サイトのURL】ローカル環境

    0
    いいねをした人: 居ません
    #54106
    Kmical Lights
    閲覧者
    234

    Snow Monkeyのヘッダー内に追加するのは、どの程度のカスタマイズが必要でしょうか。

    Snow Monkeyのヘッダーは、レイアウト(シンプル、1行…)と位置(上部固定、オーバーレイ…)と、多々のパターンがあるので、全てのパターンでカスタマイズを対応しようとすると結構な量になると思います。

    お使いのレイアウトと位置の設定のみに留めておくのであれば、PC時の表示と、モバイル時の表示の2つのパターンの書き換えのみの最低限で済むと思います。

    ヒントとしてのサンプルコードを書くのも、そのカスタマイズのパターンの問題もありますので、
    先にカートアイコンをどの部分に表示するかのデザインと CSS の記述を決めておかれると、アドバイスしやすいです。

    2
    いいねをした人: 居ません
    #54137
    GONSY
    参加者
    836

    Kmical Lightsさん、ありがとうございます。

    カートアイコンを入れる場所としては、

    カスタマイザーのデザイン → ヘッダー → ヘッダーコンテンツ(モバイルでもヘッダーコンテンツを表示)
    に該当する場所です。
    以下のようなコードを追加して、ヘッダーにカートの数量が出せるとベストと考えています。

    <a class="head_cart" href="<?php echo esc_url( wc_get_cart_url() ); ?>">
    <i class="icon-cart"></i>
    <span class="quantity_badge"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
    </a>
    0
    いいねをした人: 居ません
    #54140
    Kmical Lights
    閲覧者
    234

    ヘッダーコンテンツに入れられているなら、ヘッダーコンテンツの記述をフィルターフックのtheme_mod_header-contentで代入する形にすれば良いと思います。
    これだと、HTMLやPHP構文も使えるんで。

    例としてはこんな感じでどうでしょう?
    元々カスタマイザーで設定されているヘッダーコンテンツの記述は削除して使ってみてください。

    カスタマイザー内のページ速度最適化のヘッダーのキャッシュを有効にしている場合、正しくカウントされないので、そのキャッシュ設定は使わないようにしてください。

    if ( ! is_admin() ) { // 管理画面内ではWCクラスでのget_cart_contents_countができないので…
    	add_filter(
    		'theme_mod_header-content',
    		function( $html ) {
    			$html = '<a class="head_cart" href="' . esc_url( wc_get_cart_url() ) . '">';
    			$html .= '<i class="icon-cart"></i>';
    			$html .= '<span class="quantity_badge">' . WC()->cart->get_cart_contents_count() . '</span>';
    			$html .= '</a>';
    			return $html;
    		}
    	);
    }
    2
    いいねをした人:
    #54155
    アバター画像キタジマ タカシ
    参加者
    2371

    @Kmical Lights さん、コードありがとうございます! 使い勝手を考えるとショートコード化するのも良いかなと思いました(ヘッダーコンテンツはショートコードが使えます)。

    add_shortcode(
    	'my_cart_contents_count',
    	function() {
    		ob_start();
    		?>
    		<a class="head_cart" href="<?php echo esc_url( wc_get_cart_url() ); ?>">
    			<i class="icon-cart"></i>
    			<span class="quantity_badge"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
    		</a>
    		<?php
    		return ob_get_clean();
    	}
    );

    で、[my_cart_contents_count] として使うみたいな。

    3
    いいねをした人: 居ません
    #54175
    GONSY
    参加者
    836

    @Kmical Lightsさん
    @キタジマ タカシさん

    ご教示いただいてありがとうございます。
    どちらも良い方法ですね!
    今回のサイトは、ヘッダーコンテンツに何も入っていないので、@キタジマ タカシさんのショートコード版を試してみます。

    @Kmical Lightsさんのコードはまた別の案件で試してみたいと思います。

    お二方、ありがとうございました!

    1
    いいねをした人: 居ません
    #54251
    GONSY
    参加者
    836

    @Kmical Lightsさん
    @キタジマ タカシさん

    おかげさまでカート内の商品数を表示させることができました。
    ありがとうございました。

    ヘッダーコンテンツにショートコードでカート内商品数表示

    今後、Snow Monkey × WooCommerceのECサイトを組む機会が増えそうなので、またつまづいたら教えてください。
    今回はありがとうございました。

    3
    いいねをした人:
    #54262
    アバター画像キタジマ タカシ
    参加者
    2371

    おぉ、いいですね! これだけのアドオンをつくるのも良さそうですね。
    解決済みということでトピック閉じますね。

    2
    いいねをした人:
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • トピック「WooCommerce使用時にヘッダー内にカートアイコンとカート入れた数量を表示したい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。