[Mobby]

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

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

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

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

PC時ヘッダー

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

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

 

### 試したこと

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

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

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

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

 

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

♥ 0

Who liked: No user

[GONSY]

@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で）タイムリーに更新させるために以下を参考にしました。

Add WooCommerce Cart Icon to Menu with Cart Item Count | WP Beaches

Here is a way to add WooCommerce cart icon to a menu with the cart item count, it links to the cart page and displays the number of items that have been added …

wpbeaches.com

♥ 3

Who liked:

[Mobby]

@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

Who liked: No user

[GONSY]

@Mobby さん

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

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

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

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

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

♥ 1

Who liked: No user

[Mobby]

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

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

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

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

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

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

♥ 3

Who liked: No user

[投稿者]

投稿