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

8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #54061
    GONSY
    参加者

    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
    参加者

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

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

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

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

    2
    #54137
    GONSY
    参加者

    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
    参加者

    ヘッダーコンテンツに入れられているなら、ヘッダーコンテンツの記述をフィルターフックの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;
    		}
    	);
    }
    1
    #54155
    キタジマ タカシ
    キーマスター

    @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
    参加者

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

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

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

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

    1
    #54251
    GONSY
    参加者

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

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

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

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

    1
    #54262
    キタジマ タカシ
    キーマスター

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

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