【Shopify】アプリ不要！追従クーポンバナーをコードで実装する方法【かご落ち対策】

{% comment %}
  ファイル名: c_coupon-banner.liquid
  機能: クーポン風デザイン追従バナー。PC特大・スマホ最適化・セッション制御付き。
{% endcomment %}

<!-- ★設定：ここにステップ1で作ったクーポンコードを入力してください -->
{% assign coupon_code = "FREE-SHIPPING202512" %} 

<style>
  /* --- PC / 基本スタイル --- */
  #sticky-coupon-banner {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 2147483647; /* 最前面 */

    /* 初期状態は非表示（アニメーション用） */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease;

    /* デザイン：チケット風 */
    background-color: #d32f2f; /* 赤色 */
    color: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    border-radius: 12px;
    padding: 5px;
    width: 400px;
    max-width: 90vw;
    cursor: pointer;
    text-align: center;
  }

  /* 破線枠のデザイン */
  .coupon-inner {
    border: 2px dashed #fff;
    border-radius: 8px;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  /* 表示時のクラス */
  #sticky-coupon-banner.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  #sticky-coupon-banner:hover {
    background-color: #b71c1c;
    transform: scale(1.02);
  }

  #sticky-coupon-banner a {
    color: inherit;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
  }

  /* PC用テキストサイズ */
  .coupon-date { font-size: 18px; font-weight: bold; color: #ffeb3b; line-height: 1.2; }
  .coupon-main-text { font-size: 24px; font-weight: 900; line-height: 1.2; }
  .coupon-note { font-size: 11px; opacity: 0.9; margin-top: 5px; line-height: 1.2; }

  /* --- スマホ用の調整 --- */
  @media screen and (max-width: 767px) {
    #sticky-coupon-banner {
      /* 下部メニューを避けて少し上に配置 */
      bottom: 85px; 
      right: 10px;
      left: auto;

      width: auto;
      max-width: 170px; /* 右寄せコンパクト */
      padding: 3px;
      border-radius: 8px;
    }

    .coupon-inner { padding: 10px 5px; border-width: 1px; gap: 4px; }
    .coupon-date { font-size: 10px; }
    .coupon-main-text { font-size: 15px; }
    .coupon-note { font-size: 9px; transform: scale(0.9); }

    #sticky-coupon-banner:hover { transform: translateY(-2px); }
  }
</style>

<div id="sticky-coupon-banner">
  <!-- リンク：クーポン適用後に元のページに戻る -->
  <a href="/discount/{{ coupon_code }}?redirect={{ request.path }}" id="coupon-click-link">
    <div class="coupon-inner">

      <!-- 1. 期間やキャッチ -->
      <div class="coupon-date">
        ＼期間限定セール／
      </div>

      <!-- 2. メイン文言 -->
      <div class="coupon-main-text">
        🎁 送料無料クーポン
      </div>
      <div class="coupon-main-text">
        👉 クリックして取得
      </div>

      <!-- 3. 注釈 -->
      <div class="coupon-note">
        ※対象外の商品を除く
      </div>

    </div>
  </a>
</div>

<script>

  document.addEventListener("DOMContentLoaded", function() {
    var banner = document.getElementById('sticky-coupon-banner');
    var link = document.getElementById('coupon-click-link');
    var storageKey = 'coupon_used_' + '{{ coupon_code }}'; 

    // ブラウザを閉じるまで非表示を維持（sessionStorage）
    if (sessionStorage.getItem(storageKey) === 'true') {
      banner.style.display = 'none';
      return;
    }

    // 読み込み0.5秒後にフワッと表示
    setTimeout(function() {
      banner.classList.add('is-visible');
    }, 500);

    // クリックしたら消す＆使用済みフラグを立てる
    link.addEventListener('click', function() {
      sessionStorage.setItem(storageKey, 'true');
      banner.classList.remove('is-visible');
    });
  });
</script>

{% render 'c_coupon-banner' %}