WooCommerce使用時にヘッダー内にカートアイコンを設置、スクロールしてもヘッダーに隠れない様にしたい

2
いいねをした人:
  • このトピックには4件の返信、2人の参加者があり、最後にMobbyにより3年、 8ヶ月前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #66722
    Mobby
    参加者
    21

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

    はじめての投稿です。不躾な点がありましたらお許しください。

    ### 実現したいこと
    SNOW MONKEYとWooCommerceを利用してECサイトのトップを制作しています。
    ヘッダーにカートとログインアイコンを設置、スクロールしても固定されるように試みています。

    ### 発生している問題
    カスタマイズ→ヘッダー→ヘッダー位置をPC.モバイルいずれも「オーバーレイ(上部固定/スクロール)」にしているためか、モバイルのときはスクロールするとカートアイコンがヘッダーに隠れてしまいます。

    PC時ヘッダー

    PC時ヘッダー

    モバイル時ヘッダー(スクロール前)

    モバイル時ヘッダー(スクロール後)

     

    ### 試したこと

    – 過去の投稿1.
    WooCommerce使用時にヘッダー内にカートアイコンとカート入れた数量を表示したい
    を参考に設置はできたものの
    カスタマイズ→ヘッダー→ヘッダー位置をPC.モバイルいずれも「オーバーレイ(上部固定/スクロール)」にしているためか、モバイルのときはスクロールするとカートアイコンがヘッダーに隠れてしまいます。(PCのときはヘッダー内に固定されます)

    – 過去の投稿2.
    ヘッダー上にデザインがある電話を載せたいPCとスマホ共に
    を参考にしようとも思ったのですが、まだ試せてはおりません。

    モバイルでスクロールしたときにカートアイコン等が隠れないようにしたいのですが、

    1. ショートコードでの実装が可能であれば、プラグイン(My Snow monkey)内の記述の仕方を教えていただけないでしょうか
    2. ショートコードにて実装する場合、ヘッダーコンテンツに複数のショートコードを記述してCSSで並びや位置をコントロールする方法があれば合わせて教えていただければと大変ありがたいです。現在は[my_cart_contents_count]のみです。
    3. ショートコードを使うことが難しいようであれば使わない方法として何が適切か(過去の投稿②の内容も含めて)ご教示いただければありがたいです。

     

    どうぞよろしくお願いします。

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

    @Mobbyさん

    この投稿をしたGONSYです。

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

    キタジマさんのアドバイスのとおり、ヘッダーコンテンツにショートコードで入れています。
    スマートフォン用には以下のフックでハンバーガーメニューの前に追加しました。

    add_action( 
    'get_template_part_template-parts/header/hamburger-btn',
    	function() {
    	?>
    		ここにカートへのリンク( wc_get_cart_url() )
    		ここに数量表示( WC()->cart->get_cart_contents_count() )
    	<?php
    	}
    );

    また、カート内の商品数を(Ajaxで)タイムリーに更新させるために以下を参考にしました。

    3
    いいねをした人:
    #66843
    Mobby
    参加者
    21

    @GONSYさん、
    おかげさまにてモバイル時にオーバーレイ(オーバレイ(上部固定/スクロール)にしてカートボタンを表示されることが出来ました。アドバイスありがとうございます。
    アドバイスを頂きながら、大変恐縮なのですが、条件分岐の記述が必要と思われるのですが、いくつか試してみてもエラーとなってしまいます。php自体に詳しくないこともあり色々調べてみて

    function if_pc($atts, $content = null ) {
    	$content = do_shortcode( $content);
    	if(!wp_is_mobile()) {
    		return $content;
    	}
    }
    add_shortcode('pc', 'if_pc');

    もしくは

    if ( wp_is_mobile() ) {}
    

    のいずれかなのかと推測して入るのですが、どうやら間違いのようです。

    お返事を頂き、更にご質問となり申し訳ございません。どのように分岐をさせるのかご教示いただければ尚ありがたいです。(JSやCSSで表示・非表示を分けていることもあろうかと思いますが、できましたら合わせてお知恵をお借りできれば嬉しいです。)

    下記が現在my-snow-monkey.phpに記載している該当コードです。よろしくお願いします。

    //ショッピングカート読み込み cf. https://tinyurl.com/y4bv9ynl
    add_shortcode(
    	'my_cart_contents_count',
    	function () {
    		ob_start(); ?>
    <a href="#"><span class="material-icons">
    perm_identity
    </span></a>
    <a>
    <span class="material-icons">
    shopping_cart
    </span>
    <span class="quantity_badge"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
    </a>
    		<?php
    		return ob_get_clean();
    	}
    );
    
    // mobile時ハンバーガーメニュー横読み込み
    add_action(
    	'get_template_part_template-parts/header/hamburger-btn',
    	function () {
    		?>
    <a href="#"><span class="material-icons">
    perm_identity
    </span></a>
    <a>
    <span class="material-icons">
    shopping_cart
    </span>
    <span class="quantity_badge"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
    </a>
    		<?php
    	}
    );

    モバイル時スクロール前

    モバイル時スクロール中

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

    @Mobby さん

    カスタマイザー→デザイン→ヘッダー
    モバイル用ヘッダー位置→オーバレイ(上部固定)

    ヘッダーコンテンツ
    [ショートコード]

    モバイルでもヘッダーコンテンツを表示
    ↑ここにチェックを入れない。

    私の環境では、上記の方法でハンバーガーメニューの左隣にカート内の数量しか表示されていません。

    「モバイルでもヘッダーコンテンツを表示」にチェックは入っていませんか?
    ご確認くださいませ。

    1
    いいねをした人: 居ません
    #66883
    Mobby
    参加者
    21

    @GONSYさん、ありがとうございました。

    先程ダッシュボードからアドバイスの通りに操作したところ、@GONSYさんがおっしゃるように表現することが出来ました。

    今回はダッシュボードから分岐させることが出来ましたが、今後はよりphpやWordPressのテンプレートタグについても学びを深めていきたいと思いました。

    とはいえまたお知恵を借りることもあると思います。

    @GONSYさま、この度は改めてありがとうございました。

    こちらのトピックを閉じさせていただこうと思います

    3
    いいねをした人: 居ません
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • トピック「WooCommerce使用時にヘッダー内にカートアイコンを設置、スクロールしてもヘッダーに隠れない様にしたい」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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