Liquid、JavaScriptなどに関する質問
初めまして。
Shopify partnerのkiteと申します。
現在、テーマ「Focal」を利用してサイト構築を行なっております。
商品詳細ページに発信可能な電話番号を記載したいのですが、PCのときは電話を使用しないと思いますので、クリックしても発信できないようにしたいのですが可能でしょうか。
コードの知識が少ないのですが、ご教授いただけますと幸いです。
現在こちらのコードをカスタムHTMLのブロックに記載していますが、上手く反映されない状況です。
(電話番号部分は投稿用に000-000-000に変更しています)
<h4 style="text-align:center">
<a href="tel:000-000-000">000-000-000</a>
</h4>
<script>
var ua = navigator.userAgent.toLowerCase();
var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua);
if (!isMobile) {
$('a[href^="tel:"]').on('click', function(e) {
e.preventDefault();
});
}
</script>
解決済! ベストソリューションを見る。
成功
こちらの記事を参考に、回答しております。
https://illbenet.jp/view/css-pointer-events
<h4 style="text-align:center">
<a href="tel:000-000-000">000-000-000</a>
</h4>
こちらを、下記のようにされてはいかがでしょうか?
<h4 style="text-align:center">
<a href="tel:000-000-000">000-000-000</a>
</h4>
<style>
@media (min-width: 750px) {
a[href^="tel:"] {
pointer-events: none;
}
}
</sytle>
750px以上をPCとしましたが、
@media (min-width: 750px)
の数値をご変更いただくことで、
ご希望の数値以上をPC扱いとすることができます。
User-Agentで制御するより、緩い判定になりますので、
ご要望に沿わないようでしたら申し訳ございません。
もし、JSでの実装をご希望でしたら、
jQueryが存在しないためにエラーが出ている可能性がありますので、
下記のようにスクリプトを変えますと、うまくいくかもしれません。
<script>
var ua = navigator.userAgent.toLowerCase();
var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua);
if (!isMobile) {
const telLinks = document.querySelectorAll('a[href^="tel:"]');
telLinks.forEach(telLink => {
telLink.addEventListener('click', function(e) {
e.preventDefault();
});
});
}
</script>
ご参考まで。
(キュー田辺)
成功
こちらの記事を参考に、回答しております。
https://illbenet.jp/view/css-pointer-events
<h4 style="text-align:center">
<a href="tel:000-000-000">000-000-000</a>
</h4>
こちらを、下記のようにされてはいかがでしょうか?
<h4 style="text-align:center">
<a href="tel:000-000-000">000-000-000</a>
</h4>
<style>
@media (min-width: 750px) {
a[href^="tel:"] {
pointer-events: none;
}
}
</sytle>
750px以上をPCとしましたが、
@media (min-width: 750px)
の数値をご変更いただくことで、
ご希望の数値以上をPC扱いとすることができます。
User-Agentで制御するより、緩い判定になりますので、
ご要望に沿わないようでしたら申し訳ございません。
もし、JSでの実装をご希望でしたら、
jQueryが存在しないためにエラーが出ている可能性がありますので、
下記のようにスクリプトを変えますと、うまくいくかもしれません。
<script>
var ua = navigator.userAgent.toLowerCase();
var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua);
if (!isMobile) {
const telLinks = document.querySelectorAll('a[href^="tel:"]');
telLinks.forEach(telLink => {
telLink.addEventListener('click', function(e) {
e.preventDefault();
});
});
}
</script>
ご参考まで。
(キュー田辺)
株式会社Q 田辺様
ご返信いただきありがとうございます。
ご教示いただいたスクリプト部分を変更するとうまく反映することができました!
他の方法や参考URLまで本当にありがとうございました、、!
Shopifyペイメント決済サービスを利用していて、ストアの管理画面の通知セクションに突然「Shopifyペイメントの使用を継続するために必要な情報」というバナーメッセージが表示さ...
By Mirai Dec 3, 2023すべてのShopifyアカウントはデフォルトではmyshopify.comのURLと関連付けられており、これはアカウント設定時に使用したビジネス名に基づいて作成されます。しかし、オ...
By Nina_13 Nov 26, 2023このトピックは英語版コミュニティの投稿:Shopify Web Pixel Manager Sandbox FAQの日本翻訳です。
By Mirai Nov 19, 2023