【実践ガイド】Ptengineポップアップの外側クリックで閉じる機能の実装方法

共有
#1

みなさん、いつもPtengineご利活用いただきありがとうございます！

実は、PtengineのExperienceで作成したポップアップは、クローズボタンではなく、ページ余白をクリックすることでポップアップを閉じることを実現可能です！
Ptengineの画面から直接設定はできませんが、少し手間をかけると、便利に設定いただけます！

この記事では、その実装方法を具体的にご紹介します。

:bulb: 活用シーン

  1. 情報提供型ポップアップ
  • お知らせやニュースを表示するポップアップ
  • 簡単に閉じられる必要がある一時的な情報表示
  1. プロモーション告知
  • キャンペーン情報の表示
  • 新商品・新機能の告知
  1. ユーザーガイド
  • 初回訪問時のチュートリアル
  • 機能説明のポップアップ

:dart: 実装できること

  • ポップアップの外側をクリックした時に自動で閉じる
  • ポップアップ内のコンテンツクリックは通常通り機能

:gear: 実装手順

  1. 該当ポップアップの編集画面を開く
  • 「ポップアップをコード編集」にて以下のコードをJavaScriptコードとして追加

//ptKit.query(
  "div[id^='engage_popup_']>div[data-silex-type='container-element']", {
    timeout: 60000,
    interval: 500
  }).then(function(element) {
  element.addEventListener("click", function(e) {
    e.target.style.display = 'none';
  });
  element.querySelectorAll("div").forEach(function(innerDiv) {
    innerDiv.addEventListener("click", function(e) {
      e.stopPropagation();
    });
  });
});
  • プレビューにて検証
  1. プレビューで検証できたら公開
  • 編集画面の右上の「保存して配信条件を設定」をクリックし、体験公開

:warning: 注意点

  • ptKit.queryで特定のポップアップのみを制御するため、 既存のポップアップに影響はありません
  • このコードはPC・モバイル両方において動作します
  • Ptengineで作成したポップアップのみが対象となりますこのテキストは表示されません

詳しい操作は以下の動画よりご参照くださいませ

「いいね！」 1
#2

同じページに複数のpop upを出している場合は、
以下のcodeをご利用いただくようお願いいたします:relaxed:

document.querySelector("pt-experience").shadowRoot.querySelectorAll("div[id^='engage_popup_']>div[data-silex-type='container-element']").forEach(function (popup) {
    popup.addEventListener("click", function(e) {
        let ele = e.target;
        ele.style.display = 'none';
      });
      popup.querySelector("div").addEventListener("click", function(e) {
        e.stopPropagation();
      });
})
「いいね！」 1