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 JasonH May 9, 2025Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025