FROM CACHE - jp_header
解決済

PCの時のみ電話番号の発信を無効にする方法

Kite
Shopify Partner
9 0 1

初めまして。

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>

1 件の受理された解決策

Qcoltd
Shopify Partner
1056 431 419

成功

こちらの記事を参考に、回答しております。

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 (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1056 431 419

成功

こちらの記事を参考に、回答しております。

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 (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
Kite
Shopify Partner
9 0 1

株式会社Q 田辺様

ご返信いただきありがとうございます。

ご教示いただいたスクリプト部分を変更するとうまく反映することができました!

他の方法や参考URLまで本当にありがとうございました、、!