【Shopify オリジナル構築②】 『ポップアップ(モーダル)表示』の実装

サイトにアクセスすると、画像のポップアップが表示されるものがあります。
「セールス情報」や「注意事項」などを、お客様に伝えることができます。

Web Storageについて

ポップアップ表示は、アクセスした際の1回のみ表示されれば良いです。

その仕様を実装するために、今回はアクセス記録をWeb Storageを使用していきます。
Web Storageは、JavaScript を用いてブラウザにデータを保存できるものです。
Web Storageは、local Storageとsession Storageの2種類があります。
local Storage：ブラウザを閉じても持続(サイトを閉じても記録が残る)
session Storage：ブラウザを開いてる間のみ記録される(サイトを閉じれば記録が切れる)
Web Storageは、保存・取得・削除・初期化の4種類あります。
※具体的なコードは省略します。

仕様について

今回は、サイトにアクセスしてサイトの画像などの読み込みがすべて終わった1秒後に表示させる仕様です。

1秒後に表示させる仕様

  window.addEventListener('load', () => {
    setTimeout(() => {
      //処理
    }, 1000);
  });

ファイルの作成

今回は、新しいセクションファイルとして作成します。
コードを編集 > セクション > 新しいセクションを追加する
ファイル名をmodal-display.liquidとします。

コードについて

HTML、CSS、JavaScript、Liquid(schema)のコードはこちらです。

HTMLコード

<div class="modal-display-wrapper">
  <div class="image-wrapper">
    <img
      src="{{ section.settings.image | image_url: width: 1000 }}"
      loading="lazy"
      alt="{{ section.settings.image.alt | escape }}"
    >
    <span class="close-btn">×</span>
  </div>
</div>

CSS

  .modal-display-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }
  
  .modal-display-wrapper.active {
    opacity: 1;
    visibility: visible;
  }

  .modal-display-wrapper > .image-wrapper {
    position: relative;
    height: 70%;
  }
  
  @media screen and (max-width: 750px) {
    .modal-display-wrapper > .image-wrapper {
      height: unset;
      width: 85%;
    }
  }

  .modal-display-wrapper > .image-wrapper > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom;
  }
  
  .modal-display-wrapper > .image-wrapper > .close-btn {
    position: absolute;
    width: 30px;
    height: 30px;
    top: -15px;
    right: -15px;
    line-height: 30px;
    background-color: #ffffff;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    font-size: 30px;
  }

JavaScriptのコード

  const targetmodal = document.querySelector('.modal-display-wrapper');
  const sessionStrageKey = 'modal-display';
  const sessionStrageValue = 'on';
  const closeBtn = document.querySelector('.close-btn');

  window.addEventListener('load', () => {
    if (!sessionStorage.getItem(sessionStrageKey)) {
    //sessionStrageに記録されているかで分岐
      sessionStorage.setItem(sessionStrageKey, sessionStrageValue);
      setTimeout(() => {
        targetmodal.classList.add('active');
      }, 1000);
    }
  });
  closeBtn.addEventListener('click', () => {
    targetmodal.classList.remove('active');
  });

Liquid(schema)

{
  "name": "モーダル表示",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "画像"
    }
  ]
}

動作確認

PC版、スマホ版ともにキレイに表示されていますね！
https://youtu.be/_RWf1kc4siY

Shopifyの構築を承ります！

Shopifyで実装したいデザインなどがござましたら、お気軽にご相談、お問い合わせくださいませ！