app/template/aneros2023/Block/aneros_header.twig line 1

Open in your IDE?
  1. <header id="header" class="header">
  2.         <div class="no_margin container-fluid">
  3.             <div class="top">
  4.                 <div class="container" id="headre_top">
  5.                     <div id="social_area">
  6.                         <ul id="social-icons">
  7.                             <li>
  8.                                 <a href="https://twitter.com/aneros_japan" target="_blank" rel="noopener">
  9.                                     <i class="fa fa-x-twitter"></i>
  10.                                 </a>
  11.                             </li>
  12.                             <li>
  13.                                 <a href="https://www.instagram.com/aneros_japan/" target="_blank" rel="noopener">
  14.                                     <i class="fa fa-instagram"></i>
  15.                                 </a>
  16.                             </li>
  17.                             <li>
  18.                                 <a href="{{ url('contact') }}">
  19.                                     <i class="fa fa-envelope"></i>
  20.                                 </a>
  21.                             </li>
  22.                         </ul>
  23.                     </div>
  25.                     <div class="right">
  26.                         <div class="top_notices">アネロスジャパンで5,000円以上のお買い上げは送料無料！</div>
  29. {% set Carts = get_all_carts() %}
  30. {% set totalPrice = get_carts_total_price() %}
  31. {% set totalQuantity = get_carts_total_quantity() %}
  32. {% set total_price = 0 %}
  33.                         <div class="minicart sidebar">
  34.                             {% if totalQuantity <= 0 %}
  35.                                 {# <a href="{{ url('cart') }}" id="header-cart-link" class=" no-count"><span class="fa fa-shopping-cart"></span>カート内に商品はございません</a> #}
  36.                                 <a href="{{ url('cart') }}" id="header-cart-link" class=" no-count"><span class="fa fa-shopping-cart"></span></a>
  37.                             {% else %}
  38.                                 {# <a href="{{ url('cart') }}" id="header-cart-link" class=" no-count"><span class="fa fa-shopping-cart"></span>合計数量：{{ totalQuantity }}</a> #}
  39.                                 <a href="{{ url('cart') }}" id="header-cart-link" class=" no-count"><span class="fa fa-shopping-cart"></span><span class="cart-total">{{ totalQuantity }}</span></a>
  40.                             {% endif %}
  41.                             <div id="header-cart">
  42.                                 <div class="block-content">
  43.                                     {% if totalQuantity <= 0 %}
  44.                                         <p class="empty">カート内に商品はございません</p>
  45.                                     {% else %}
  46.                                         <p class="block-subtitle">現在カゴの中</p>
  47.                                         <ol id="cart-sidebar" class="mini-products-list flexbox">
  48.                                             {% set cnt = 0 %}
  49.                                             {% for Cart in Carts %}
  50.                                                 {% for CartItem in Cart.CartItems %}
  51.                                                     {% set ProductClass = CartItem.ProductClass %}
  52.                                                     {% set Product = ProductClass.Product %}
  53.                                                     {% if cnt % 2 == 0 %}
  54.                                                         <li class="item flexbox odd">
  55.                                                     {% elseif cnt % 2 == 1 %}
  56.                                                         <li class="item flexbox even">
  57.                                                     {% endif %}
  58.                                                             <a href="{{ url('product_detail', {'id': Product.id}) }}" title="{{ Product.name }}" class="product-image">
  59.                                                                 <img src="{{ asset(Product.MainListImage|no_image_product, 'save_image') }}" width="50" height="50" alt="{{ Product.name }}">
  60.                                                             </a>
  61.                                                             <div class="product-details">
  62.                                                                 <button href="{{ url('cart_handle_item', {'operation': 'remove', 'productClassId': ProductClass.id }) }}" {{ csrf_token_for_anchor() }} data-method="put" data-message="カートから商品を削除してもよろしいですか?" title="削除" class="item_remove btn-remove">削除</button>
  64.                                                                 <p class="product-name">
  65.                                                                     <a href="{{ url('product_detail', {'id': Product.id}) }}">{{ Product.name }}</a>
  66.                                                                     {% if ProductClass.ClassCategory1 and ProductClass.ClassCategory1.id %}
  67.                                                                         <p class="product-class">{{ ProductClass.ClassCategory1.ClassName }}：{{ ProductClass.ClassCategory1 }}</p>
  68.                                                                     {% endif %}
  69.                                                                     {% if ProductClass.ClassCategory2 and ProductClass.ClassCategory2.id %}
  70.                                                                         <p class="product-class">{{ ProductClass.ClassCategory2.ClassName }}：{{ ProductClass.ClassCategory2 }}</p>
  71.                                                                     {% endif %}
  72.                                                                 </p>
  73.                                                                 <a href="{{ url('cart') }}" title="商品変更" class="btn-edit">商品変更</a>
  74.                                                                 <strong>{{ CartItem.quantity|number_format }}</strong>
  75.                                                                 x
  76.                                                                 <span class="price">{{ CartItem.price|price }}</span>
  77.                                                             </div>
  78.                                                         </li>
  79.                                                     {% set cnt=cnt+1 %}
  80.                                                 {% endfor %}
  81.                                                 {% set total_price = total_price + Cart.total_price %}
  82.                                             {% endfor %}
  83.                                         </ol>
  84.                                         <div class="subtotal">
  85.                                             <span class="cart-sidebar-subtotal">
  86.                                                 <span class="label">小計:</span>
  87.                                                 <span class="price">{{ total_price|price }}</span>
  88.                                             </span>
  89.                                         </div>
  90.                                         <div class="actions">
  91.                                             <a href="{{ url('cart') }}" title="購入手続き" class="button">
  92.                                                 <span>
  93.                                                     <span>購入手続き</span>
  94.                                                 </span>
  95.                                             </a>
  96.                                         </div>
  97.                                     {% endif %}
  98.                                 </div>
  99.                             </div>
  100.                         </div>
  102.                         <ul class="toplinks links">
  103.                             <li class="first">
  104.                                 {#<a href="{{ url('contact') }}" title="お問い合わせ"><i class="ec-headerNav__itemIcon fas fa-comments fa-fw"></i><span>お問い合わせ</span></a>#}
  105.                                 <a href="{{ url('contact') }}" title="お問い合わせ"><i class="ec-headerNav__itemIcon fas fa-comments fa-fw"></i> <span>お問い合わせ</span></a>
  106.                             </li>
  107.                             <li>
  108.                                 {#<a href="{{ url('homepage') }}shop-list" title="【アネロス】取扱店"><i class="ec-headerNav__itemIcon fas fa-store fa-fw"></i><span>【アネロス】取扱店</span></a>#}
  109.                                 <a href="{{ url('homepage') }}shop-list" title="【アネロス】取扱店"><i class="ec-headerNav__itemIcon fas fa-store fa-fw"></i> <span>【アネロス】取扱店</span></a>
  110.                             </li>
  111.                             {% if is_granted('ROLE_USER') %}
  112.                             <li>
  113.                                 {#<a href="{{ url('mypage') }}" class="mypage-link"><i class="ec-headerNav__itemIcon fas fa-user fa-fw"></i>マイページ</a>#}
  114.                                 <a href="{{ url('mypage') }}" class="mypage-link" title="マイページ"><i class="ec-headerNav__itemIcon fas fa-user fa-fw"></i> <span>マイページ</span></a>
  115.                             </li>
  116.                             <li>
  117.                                 {# <a href="{{ url('logout') }}" data-clearurl="{{ url('cart_clear') }}" class="logout-link">ログアウト</a> #}
  118.                                 <a href="{{ url('logout') }}" data-clearurl="{{ url('cart_clear') }}" class="logout-link"><i class="ec-headerNav__itemIcon fas fa-right-from-bracket fa-fw"></i> <span>ログアウト</span></a>
  119.                             </li>
  120.                             {% else %}
  121.                             <li class="login-container">
  122.                                 {# <a href="{{ url('mypage_login') }}" class="login-link">ログイン</a> #}
  123.                                 <a href="{{ url('mypage_login') }}" title="ログイン"><i class="ec-headerNav__itemIcon fas fa-user fa-fw"></i> <span>ログイン</span></a>
  124.                             </li>
  125.                             {% endif %}
  126.                         </ul>
  127.                     </div>
  128.                     
  129.                     {#% if not is_granted('ROLE_USER') %#}
  130.                         <div id="top-links-signin-container" style="display: none;">
  131.                             <i class="fa fa-caret-up"></i>
  132.                             <span id="top-links-close-button" class="close"><i class="fa fa-close"></i></span>
  133.                             <div id="top-links-signin-button">
  134.                                 <a href="{{ url('mypage_login') }}" class="top-signin-button">ログイン</a>
  135.                             </div>
  136.                             <div id="top-links-signin-footer">
  137.                                 ANEROS JAPAN会員登録がお得！<br />
  138.                                 <a href="{{ url('entry') }}">新規会員登録はこちら</a>
  139.                             </div>
  140.                         </div>
  141.                     {#% endif %#}
  142.                     
  143.                 </div>
  144.             </div>
  145.             
  147.             
  148.             <div class="main">
  149.                 <div class="container main_area">
  150.                     <a class="logo" href="{{ url('homepage') }}">
  151.                         <img src="{{ asset('aneros/img/header/logo.png') }}" alt="アネロス ロゴ" class="header-logo">
  152.                     </a>
  153.                     <div class="right" id="main_menu_outher">
  154.                         <a href="#!" id="toggle-nav"><i class="fa fa-reorder"></i></a>
  155.                         <div id="nav-area">
  156.                             <nav id="main_menu">
  157.                                 <ul class="menu">
  158.                                     <li class="has-submenu" id="menu-learn" data-submenu="submenu-learning-center">
  159.                                         <a href="#!" class='show-submenu'>知識<i class="fa fa-chevron-down"></i></a>
  160.                                         <div class="submenu-contr" id="submenu-learning-center">
  161.                                             <div class="container">
  162.                                                 <i class="fa fa-caret-up"></i>
  163.                                                 <ul class="submenu">
  164.                                                     <li>
  165.                                                         <a href="{{ url('homepage') }}learning-center">
  166.                                                             <img src="{{ asset('aneros/img/header/learn/menu-learning-center.png') }}" alt="アネロス講座ヘッダー">
  167.                                                             <h3>アネロス講座</h3>
  168.                                                         </a>
  169.                                                     </li>
  170.                                                     <li>
  171.                                                         <a href="/blog/">
  172.                                                             <img src="{{ asset('aneros/img/header/learn/menu-experiences.png') }}" alt="ブログヘッダー">
  173.                                                             <h3>公式ブログ</h3>
  174.                                                         </a>
  175.                                                     </li>
  176.                                                     <li>
  177.                                                         <a href="/forums/">
  178.                                                             <img src="{{ asset('aneros/img/header/learn/menu-forum.png') }}" alt="フォーラムヘッダー">
  179.                                                             <h3>フォーラム</h3>
  180.                                                         </a>
  181.                                                     </li>
  182.                                                     <li>
  183.                                                         <a href="/blog/category/users-voice/">
  184.                                                             <img src="{{ asset('aneros/img/header/learn/menu-chat.png') }}" alt="ユーザーズボイスヘッダー">
  185.                                                             <h3>ユーザーズボイス</h3>
  186.                                                         </a>
  187.                                                         <span id="cur-online-users"></span>
  188.                                                     </li>
  189.                                                     <li>
  190.                                                         <a href="{{ url('homepage') }}dr-voice">
  191.                                                             <img src="{{ asset('aneros/img/header/learn/menu-dr-voice.png') }}" alt="ドクターズボイスヘッダー">
  192.                                                             <h3>ドクターズボイス</h3>
  193.                                                         </a>
  194.                                                     </li>
  195.                                                 </ul>
  196.                                             </div>
  197.                                         </div>
  198.                                     </li>
  199.                                     <li class="has-submenu" id="menu-products" data-submenu="submenu-products">
  200.                                         <a href="#!" class='show-submenu'>【アネロス】モデル<i class="fa fa-chevron-down"></i></a>
  201.                                         <div class="submenu-contr" id="submenu-products">
  202.                                             <div class="container">
  203.                                                 <i class="fa fa-caret-up"></i>
  204.                                                 <ul class="submenu" id="menu-aneros-products">
  205.                                                     <li>
  206.                                                         <a href="{{ url('homepage') }}products/detail/93">
  207.                                                             <img src="{{ asset('aneros/img/header/products/eupho_syn_v.png') }}" alt="ユーホーシンV"
  208.                                                                 title="ユーホーシンV">
  209.                                                             <h3>
  210.                                                                 ユーホーシンV<br />
  211.                                                                 <span class="p_new">New!</span>
  212.                                                             </h3>
  213.                                                         </a>
  214.                                                     </li>
  215.                                                     <li>
  216.                                                         <a href="{{ url('homepage') }}products/detail/92">
  217.                                                             <img src="{{ asset('aneros/img/header/products/psy.png') }}" alt="PSY"
  218.                                                                 title="PSY">
  219.                                                             <h3>
  220.                                                                 サイ<br />
  221.                                                             </h3>
  222.                                                         </a>
  223.                                                     </li>
  224.                                                     <li>
  225.                                                         <a href="{{ url('homepage') }}products/detail/82">
  226.                                                             <img src="{{ asset('aneros/img/header/products/helix_syn_v.png') }}" alt="ヒリックスシンV"
  227.                                                                 title="ヒリックスシンV">
  228.                                                             <h3>
  229.                                                                 ヒリックスシンV
  230.                                                             </h3>
  231.                                                         </a>
  232.                                                     </li>
  233.                                                     <li>
  234.                                                         <a href="{{ url('homepage') }}products/detail/73">
  235.                                                             <img src="{{ asset('aneros/img/header/products/mgx_trident_syn.png') }}" alt="MGXシントライデント"
  236.                                                                 title="MGXシントライデント">
  237.                                                             <h3>
  238.                                                                 MGXシントライデント
  239.                                                             </h3>
  240.                                                         </a>
  241.                                                     </li>
  242.                                                     <li>
  243.                                                         <a href="{{ url('homepage') }}products/detail/74">
  244.                                                             <img src="{{ asset('aneros/img/header/products/eupho_trident_syn.png') }}" alt="ユーホーシントライデント"
  245.                                                                 title="ユーホーシントライデント">
  246.                                                             <h3>
  247.                                                                 ユーホーシントライデント
  248.                                                             </h3>
  249.                                                         </a>
  250.                                                     </li>
  251.                                                     <li>
  252.                                                         <a href="{{ url('homepage') }}products/detail/70">
  253.                                                             <img src="{{ asset('aneros/img/header/products/helix_trident_syn.png') }}" alt="ヒリックスシントライデント"
  254.                                                                 title="ヒリックスシントライデント">
  255.                                                             <h3>
  256.                                                                 ヒリックスシントライデント
  257.                                                             </h3>
  258.                                                         </a>
  259.                                                     </li>
  260.                                                     <li>
  261.                                                         <a href="{{ url('homepage') }}products/detail/66">
  262.                                                             <img src="{{ asset('aneros/img/header/products/Helix-LightGrey-Flat.png') }}" alt="ヒリックストライデント"
  263.                                                                 title="ヒリックストライデント">
  264.                                                             <h3>
  265.                                                                 ヒリックストライデント
  266.                                                             </h3>
  267.                                                         </a>
  268.                                                     </li>
  269.                                                     <li>
  270.                                                         <a href="{{ url('homepage') }}products/detail/68">
  271.                                                             <img src="{{ asset('aneros/img/header/products/Eupho-LightGrey-Flat.png') }}" alt="ユーホートライデント"
  272.                                                                 title="ユーホートライデント">
  273.                                                             <h3>
  274.                                                                 ユーホートライデント
  275.                                                             </h3>
  276.                                                         </a>
  277.                                                     </li>
  278.                                                     <li>
  279.                                                         <a href="{{ url('homepage') }}products/detail/69">
  280.                                                             <img src="{{ asset('aneros/img/header/products/MGX-LightGrey-Flat.png') }}" alt="MGXトライデント" title="MGXトライデント">
  281.                                                             <h3>
  282.                                                                 MGXトライデント
  283.                                                             </h3>
  284.                                                         </a>
  285.                                                     </li>
  286.                                                     <li>
  287.                                                         <a href="{{ url('homepage') }}products/detail/67">
  288.                                                             <img src="{{ asset('aneros/img/header/products/Maximus-LightGrey-Flat.png') }}" alt="マキシマストライデント"
  289.                                                                 title="マキシマストライデント">
  290.                                                             <h3>
  291.                                                                 マキシマストライデント
  292.                                                             </h3>
  293.                                                         </a>
  294.                                                     </li>
  295.                                                     <li>
  296.                                                         <a href="{{ url('homepage') }}products/detail/72">
  297.                                                             <img src="{{ asset('aneros/img/header/products/vice2.png') }}" alt="ヴァイス 2" title="ヴァイス 2">
  298.                                                             <h3>
  299.                                                                 ヴァイス 2
  300.                                                             </h3>
  301.                                                         </a>
  302.                                                     </li>
  303.                                                     <li>
  304.                                                         <a href="{{ url('homepage') }}sessions">
  305.                                                             <img src="{{ asset('aneros/img/header/products/sessions-lube.png') }}" alt="セッションズ" title="セッションズ">
  306.                                                             <h3>セッションズローション</h3>
  307.                                                         </a>
  308.                                                     </li>
  309.                                                     <li>
  310.                                                         <a href="{{ url('homepage') }}products/detail/81">
  311.                                                             <img src="{{ asset('aneros/img/header/products/progasm.png') }}" alt="プロガスム" title="プロガスム">
  312.                                                             <h3>
  313.                                                                 プロガスムブラックアイス
  314.                                                             </h3>
  315.                                                         </a>
  316.                                                     </li>
  317.                                                     <li>
  318.                                                         <a href="{{ url('homepage') }}products/detail/45">
  319.                                                             <img src="{{ asset('aneros/img/header/products/tempo.png') }}" alt="テンポ" title="テンポ">
  320.                                                             <h3>テンポ</h3>
  321.                                                         </a>
  322.                                                     </li>
  323.                                                 </ul>
  324.                                             </div>
  325.                                             <div class="site-guarantee-infos">
  326.                                                 <img src="{{ asset('aneros/img/header/fast-shipping.png') }}" alt="早く届く！" title="早く届く！" style="max-width: 236px">
  327.                                                 <img src="{{ asset('aneros/img/header/secure-cc-processing.png') }}" alt="安全なお買い物" title="安全なお買い物" style="max-width: 197px">
  328.                                                 <img src="{{ asset('aneros/img/header/money-back-guarantee.png') }}" alt="返金保証" title="返金保証" style="max-width: 286px">
  329.                                             </div>
  330.                                         </div>
  331.                                     </li>
  332.                                     <li class="has-submenu" id="menu-shop" data-submenu="submenu-shop">
  333.                                         <a href="#!" class='show-submenu'>カテゴリ<i class="fa fa-chevron-down"></i></a>
  334.                                         <div class="submenu-contr" id="submenu-shop">
  335.                                             <div class="container">
  336.                                                 <i class="fa fa-caret-up"></i>
  337.                                                 <div class="first-time-user">
  338.                                                     <a href="{{ url('homepage') }}products/detail/73">商品詳細</a>
  339.                                                 </div>
  340.                                                 <ul class="submenu" id="menu-categories">
  341.                                                     <li class="level0 nav-1 first">
  342.                                                         <a href="{{ url('homepage') }}prostate-massagers" class="level0 "><img
  343.                                                                 alt="前立腺マッサージ器"
  344.                                                                 src="{{ asset('aneros/img/header/category/menu-icon-prostate-massagers_2.png') }}">
  345.                                                             <h3 class="light">前立腺マッサージ器</h3>
  346.                                                         </a>
  347.                                                     </li>
  348.                                                     <li class="level0 nav-2">
  349.                                                         <a href="{{ url('homepage') }}accessories" class="level0 "><img
  350.                                                                 alt="アクセサリー"
  351.                                                                 src="{{ asset('aneros/img/header/category/menu-icon-aneros-accessories_1.png') }}">
  352.                                                             <h3 class="light">アクセサリー</h3>
  353.                                                         </a>
  354.                                                     </li>
  355.                                                     <li class="level0 nav-3">
  356.                                                         <a href="{{ url('homepage') }}sex-toys-for-men" class="level0 "><img
  357.                                                                 alt="男性用商品"
  358.                                                                 src="{{ asset('aneros/img/header/category/menu-icon-mens_2.png') }}">
  359.                                                             <h3 class="light">男性用商品</h3>
  360.                                                         </a>
  361.                                                     </li>
  362.                                                     <li class="level0 nav-4">
  363.                                                         <a href="{{ url('homepage') }}sex-toys-for-women" class="level0 "><img
  364.                                                                 alt="女性用商品"
  365.                                                                 src="{{ asset('aneros/img/header/category/menu-icon-women_1.png') }}">
  366.                                                             <h3 class="light">女性用商品</h3>
  367.                                                         </a>
  368.                                                     </li>
  369.                                                     <li class="level0 nav-5">
  370.                                                         <a href="{{ url('homepage') }}sex-toys-for-couples" class="level0 "><img
  371.                                                                 alt="カップル用商品"
  372.                                                                 src="{{ asset('aneros/img/header/category/menu-icon-couple_2.png') }}">
  373.                                                             <h3 class="light">カップル用商品</h3>
  374.                                                         </a>
  375.                                                     </li>
  376.                                                     <li class="level0 nav-6">
  377.                                                         <a href="{{ url('homepage') }}lubricants" class="level0 "><img
  378.                                                                 alt="ローション"
  379.                                                                 src="{{ asset('aneros/img/header/category/menu-icon-lubricants_2.png') }}">
  380.                                                             <h3 class="light">ローション</h3>
  381.                                                         </a>
  382.                                                     </li>
  383.                                                     <li class="level0 nav-7">
  384.                                                         <a href="{{ url('homepage') }}masturbators" class="level0 "><img
  385.                                                                 alt="マスターベーション"
  386.                                                                 src="{{ asset('aneros/img/header/category/menu-icon-masturbator_1.png') }}">
  387.                                                             <h3 class="light">マスターベーション</h3>
  388.                                                         </a>
  389.                                                     </li>
  390.                                                     <li class="level0 nav-8 last">
  391.                                                         <a href="{{ url('homepage') }}special-offers" class="level0 "><img
  392.                                                                 alt="お買い得セット"
  393.                                                                 src="{{ asset('aneros/img/header/category/menu-icon-special-offers_2.png') }}">
  394.                                                             <h3 class="light">お買い得セット</h3>
  395.                                                         </a>
  396.                                                     </li>
  397.                                                 </ul>
  398.                                             </div>
  399.                                             <div class="site-guarantee-infos">
  400.                                                 <img src="{{ asset('aneros/img/header/fast-shipping.png') }}" alt="早く届く！" title="早く届く！" style="max-width: 236px">
  401.                                                 <img src="{{ asset('aneros/img/header/secure-cc-processing.png') }}" alt="安全なお買い物" title="安全なお買い物" style="max-width: 197px">
  402.                                                 <img src="{{ asset('aneros/img/header/money-back-guarantee.png') }}" alt="返金保証" title="返金保証" style="max-width: 286px">
  403.                                             </div>
  404.                                         </div>
  405.                                     </li>
  406.                                 </ul>
  407.                             </nav>
  408.                             <div class="search_area">
  409.                                 <div class="search_box">
  410.                                     <label for="search" style="display: none">商品検索:</label>
  411.                                     <form method="get" class="searchform" action="{{ path('product_list') }}">
  412.                                         <input type="search" id="name" name="name" maxlength="50" placeholder="商品名"
  413.                                         class="form-control input-text required-entry">
  415.                                     </form>
  417.                                 </div>
  418.                                 <div class="button_box">
  419.                                     <a href="#!" class="close_search_box"><i class="fa fa-close"></i></a>
  420.                                     <a href="#!" class="show_search_box"><i class="fa fa-search"></i></a>
  421.                                 </div>
  422.                             </div>
  423.                         </div>
  424.                     </div>
  425.                 </div>
  426.             </div>
  427. {# ==== Header A/B Test: Coupon (A) vs Campaign Link Banner (B) ==== #}
  428. {% set EXP_NAME = 'header_vday_coupon_vs_sale_v1' %}
  429. {% set CAMPAIGN_ID = '2026-2-vday-header' %}
  430. {% set CAMPAIGN_URL = url('homepage') ~ '2026-vday-sale' %}
  431. {% set current_route = app.request.attributes.get('_route')|default('') %}
  433. <style>
  434.   .bf-header-banner {
  435.     width: 100%;
  436.     background: #111;
  437.     color: #fff;
  438.     font-weight: 600;
  439.     font-size: 14px;
  440.     line-height: 1;
  441.     z-index: 5000;
  442.   }
  443.   .bf-header-banner-inner {
  444.     width: 100%;
  445.   }
  447.   /* Variant B: sale-link layout */
  448.   .bf-header-banner .bf-cta-repeat {
  449.     display: flex;
  450.     align-items: center;
  451.     justify-content: center;
  452.     gap: 75px;
  453.     padding: 10px 12px;
  454.     white-space: nowrap;
  455.     overflow: hidden;
  456.   }
  457.   .bf-header-banner .bf-cta {
  458.     text-decoration: none;
  459.     color: inherit;
  460.   }
  461.   .bf-header-banner .bf-cta:hover { opacity: 0.85; }
  462.   .bf-header-banner .bf-cta-repeat:hover .bf-cta {
  463.     text-decoration: underline;
  464.   }
  466.   @media (max-width: 480px) {
  467.     .bf-header-banner .bf-cta-repeat .bf-cta:not(:first-child) { display: none; }
  468.     .bf-header-banner .bf-cta-repeat { gap: 0; }
  469.   }
  471.   /* Variant A: coupon banner styling */
  472.   .bf-header-banner .coupon-row {
  473.     display: flex;
  474.     align-items: center;
  475.     justify-content: center;
  476.     padding: 10px 12px;
  477.   }
  478.   .bf-header-banner p.coupon-code {
  479.     margin: 0;
  480.     font-size: 14px;
  481.     color: #fff;
  482.     font-weight: 600;
  483.   }
  484.   .bf-header-banner .coupon-label {
  485.     margin-right: 4px;
  486.   }
  487.   .bf-header-banner .coupon-copy-btn {
  488.     display: inline-flex;
  489.     align-items: center;
  490.     gap: 4px;
  491.     border: none;
  492.     background: transparent;
  493.     color: #fff;
  494.     font-weight: 700;
  495.     cursor: pointer;
  496.     padding: 0;
  497.     font-size: 14px;
  498.   }
  499.   .bf-header-banner .coupon-copy-btn i {
  500.     font-size: 90%;
  501.   }
  502.   .bf-header-banner .coupon-copy-btn:hover {
  503.     color: #ccc;
  504.   }
  506.   .bf-header-banner .coupon-copy-btn-wrapper {
  507.     position: relative;
  508.     display: inline-flex;
  509.     align-items: center;
  510.   }
  511.   .bf-header-banner .tooltiptext {
  512.     visibility: hidden;
  513.     width: 90px;
  514.     background-color: gray;
  515.     color: #fff;
  516.     text-align: center;
  517.     border-radius: 6px;
  518.     border: 1px solid #000;
  519.     padding: 5px 0;
  520.     position: absolute;
  521.     z-index: 1;
  522.     top: 115%;
  523.     left: 50%;
  524.     margin-left: -45px;
  525.     font-size: 10px;
  526.     opacity: 0;
  527.     transition: opacity 0.3s;
  528.   }
  529.   .bf-header-banner .tooltiptext::after {
  530.     content: "";
  531.     position: absolute;
  532.     bottom: 100%;
  533.     left: 50%;
  534.     margin-left: -5px;
  535.     border-width: 5px;
  536.     border-style: solid;
  537.     border-color: transparent transparent gray transparent;
  538.   }
  539.   .bf-header-banner .coupon-copy-btn-wrapper:hover .tooltiptext {
  540.     visibility: visible;
  541.     opacity: 1;
  542.   }
  544.   /* Default: JS decides which variant block to show */
  545.   .bf-header-banner .vday-banner {
  546.     display: none;
  547.   }
  548. </style>
  550. <div id="vday-header-banner"
  551.      class="bf-header-banner"
  552.      style="display:none"
  553.      aria-hidden="true"
  554.      role="region"
  555.      aria-label="バレンタインセール告知">
  556.   <div class="bf-header-banner-inner">
  558.     {# Variant A: Coupon banner #}
  559.     <div class="vday-banner vday-banner--coupon">
  560.       <div class="coupon-row">
  561.         <p class="coupon-code">
  562.           <span class="coupon-label">14%OFF会員限定クーポンコード：</span>
  563.           <span class="coupon-copy-btn-wrapper">
  564.             <button type="button"
  565.                     class="coupon-copy-btn"
  566.                     aria-label="クーポンコード vday2026 をコピー">
  567.               <span class="coupon-code-text">vday2026</span>
  568.               <i class="fa fa-copy" aria-hidden="true"></i>
  569.             </button>
  570.             <span class="tooltiptext" aria-live="polite">コピー</span>
  571.           </span>
  572.         </p>
  573.       </div>
  574.     </div>
  576.     {# Variant B: Sale link banner #}
  577.     <div class="vday-banner vday-banner--sale">
  578.       <div class="bf-cta-repeat">
  579.         <a class="bf-cta" href="{{ CAMPAIGN_URL }}">会員専用バレンタインセール開催中｜会場はこちら</a>
  580.         <a class="bf-cta" href="{{ CAMPAIGN_URL }}" aria-hidden="true" tabindex="-1">会員専用バレンタインセール開催中｜会場はこちら</a>
  581.         <a class="bf-cta" href="{{ CAMPAIGN_URL }}" aria-hidden="true" tabindex="-1">会員専用バレンタインセール開催中｜会場はこちら</a>
  582.         <a class="bf-cta" href="{{ CAMPAIGN_URL }}" aria-hidden="true" tabindex="-1">会員専用バレンタインセール開催中｜会場はこちら</a>
  583.         <a class="bf-cta" href="{{ CAMPAIGN_URL }}" aria-hidden="true" tabindex="-1">会員専用バレンタインセール開催中｜会場はこちら</a>
  584.         <a class="bf-cta" href="{{ CAMPAIGN_URL }}" aria-hidden="true" tabindex="-1">会員専用バレンタインセール開催中｜会場はこちら</a>
  585.       </div>
  586.     </div>
  588.   </div>
  589. </div>
  591. <script>
  592. (function() {
  593.   if (window.__vdayHeaderAbInit) return;
  594.   window.__vdayHeaderAbInit = true;
  596.   var EXP = {{ EXP_NAME|json_encode|raw }};
  597.   var CAMPAIGN_ID = {{ CAMPAIGN_ID|json_encode|raw }};
  598.   var CAMPAIGN_URL = {{ CAMPAIGN_URL|json_encode|raw }};
  599.   var ROUTE = {{ current_route|json_encode|raw }};
  601.   // Per-variant suppression route lists
  602.   var SUPPRESS_A = [
  603.     'shopping_login',
  604.     'shopping_nonmember',
  605.     'shopping_shipping',
  606.     'shopping_complete',
  607.     'shopping_shipping_edit',
  608.     'shopping_error',
  609.     'shopping_redirect_to',
  610.     'shopping_confirm',
  611.     'amazon_pay_shopping_confirm'
  612.   ];
  614.   var SUPPRESS_B = [
  615.     'cart',
  616.     'shopping',
  617.     'shopping_shipping',
  618.     'shopping_complete',
  619.     'shopping_login',
  620.     'shopping_nonmember',
  621.     'shopping_shipping_edit',
  622.     'shopping_error',
  623.     'shopping_redirect_to',
  624.     'shopping_confirm',
  625.     'amazon_pay_shopping',
  626.     'amazon_pay_shopping_confirm',
  627.     'plugin_coupon_shopping'
  628.   ];
  630.   function isSuppressed(route, variant) {
  631.     if (variant === 'A') {
  632.       return SUPPRESS_A.indexOf(route) !== -1;
  633.     } else if (variant === 'B') {
  634.       return SUPPRESS_B.indexOf(route) !== -1;
  635.     }
  636.     return false;
  637.   }
  639.   // --- Cookie helpers ---
  640.   function getCookie(n) {
  641.     var m = document.cookie.split('; ').find(function(r){ return r.indexOf(n + '=') === 0; });
  642.     return m ? m.split('=')[1] : undefined;
  643.   }
  644.   function setCookie(n, v, days) {
  645.     var d = new Date();
  646.     d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000);
  647.     document.cookie = n + '=' + v + '; path=/; expires=' + d.toUTCString();
  648.   }
  650.   // Assign / read variant
  651.   var COOKIE = 'ab_' + EXP;
  652.   var variant = getCookie(COOKIE);
  653.   if (variant !== 'A' && variant !== 'B') {
  654.     variant = (Math.random() < 0.5) ? 'A' : 'B';
  655.     setCookie(COOKIE, variant, 60);
  656.   }
  658.   var SUPPRESSED = isSuppressed(ROUTE, variant);
  660.   window.dataLayer = window.dataLayer || [];
  662.   // If suppressed for this variant+route, log and bail
  663.   if (SUPPRESSED) {
  664.     window.dataLayer.push({
  665.       event: 'header_ab_suppressed',
  666.       experiment_name: EXP,
  667.       variant: variant,
  668.       campaign_id: CAMPAIGN_ID,
  669.       position: 'header',
  670.       route: ROUTE
  671.     });
  672.     return;
  673.   }
  675.   // Avoid duplicate views per session
  676.   var VIEW_KEY = EXP + ':' + CAMPAIGN_ID + ':viewed';
  677.   if (!sessionStorage.getItem(VIEW_KEY)) {
  678.     window.dataLayer.push({
  679.       event: 'header_ab_view',
  680.       experiment_name: EXP,
  681.       variant: variant,
  682.       campaign_id: CAMPAIGN_ID,
  683.       position: 'header'
  684.     });
  685.     sessionStorage.setItem(VIEW_KEY, '1');
  686.   }
  688.   var banner = document.getElementById('vday-header-banner');
  689.   if (!banner) return;
  691.   var couponBlock = banner.querySelector('.vday-banner--coupon');
  692.   var saleBlock   = banner.querySelector('.vday-banner--sale');
  694.   banner.style.display = 'block';
  695.   banner.removeAttribute('aria-hidden');
  697.   if (variant === 'A') {
  698.     if (couponBlock) couponBlock.style.display = 'block';
  699.     if (saleBlock)   saleBlock.style.display   = 'none';
  701.     var btn = banner.querySelector('.coupon-copy-btn');
  702.     var tooltip = banner.querySelector('.tooltiptext');
  703.     var code = 'vday2026';
  705.     if (btn) {
  706.       btn.addEventListener('click', function(e) {
  707.         e.preventDefault();
  709.         if (navigator.clipboard && navigator.clipboard.writeText) {
  710.           navigator.clipboard.writeText(code).catch(function(){});
  711.         } else {
  712.           var input = document.createElement('input');
  713.           input.value = code;
  714.           document.body.appendChild(input);
  715.           input.select();
  716.           try { document.execCommand('copy'); } catch (err) {}
  717.           document.body.removeChild(input);
  718.         }
  720.         if (tooltip) {
  721.           tooltip.textContent = 'コピーしました';
  722.           setTimeout(function() { tooltip.textContent = 'コピー'; }, 2000);
  723.         }
  725.         window.dataLayer.push({
  726.           event: 'header_ab_click',
  727.           experiment_name: EXP,
  728.           variant: variant,
  729.           campaign_id: CAMPAIGN_ID,
  730.           position: 'header',
  731.           click_type: 'coupon_copy',
  732.           coupon_code: code
  733.         });
  734.       }, { passive: false });
  735.     }
  737.   } else {
  738.     if (couponBlock) couponBlock.style.display = 'none';
  739.     if (saleBlock)   saleBlock.style.display   = 'block';
  741.     var links = banner.querySelectorAll('a.bf-cta');
  742.     links.forEach(function(a) {
  743.       a.addEventListener('click', function(e) {
  744.         window.dataLayer.push({
  745.           event: 'header_ab_click',
  746.           experiment_name: EXP,
  747.           variant: variant,
  748.           campaign_id: CAMPAIGN_ID,
  749.           position: 'header',
  750.           click_type: 'sale_link',
  751.           link_url: a.href
  752.         });
  754.         if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) {
  755.           return;
  756.         }
  757.         e.preventDefault();
  758.         setTimeout(function() { location.href = a.href; }, 120);
  759.       }, { passive: false });
  760.     });
  761.   }
  762. })();
  763. </script>
  764. {# ==== End Vday Header A/B Test ==== #}
  766.         {# カウントダウンタイマー設定開始 #}
  767.             <div id="sale-timer">
  768.                 <p>
  769.                     セール終了までの残り時間： <span id="count-down"></span>
  770.                 </p>
  771.                 <script>
  772.                     // Set the date we're counting down to
  773.                     var countDownDate = new Date("Feb 19, 2026 18:00:00").getTime();
  775.                         // Update the count down every 1 second
  776.                         var x = setInterval(function() {
  778.                         // Get today's date and time
  779.                         var now = new Date().getTime();
  780.                     
  781.                         // Find the distance between now and the count down date
  782.                         var distance = countDownDate - now;
  783.                     
  784.                         // Time calculations for hours, minutes and seconds
  785.                         var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  786.                         var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  787.                         var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  788.                         var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  789.                     
  790.                         // Display the result in the element with id="count-down"
  791.                         document.getElementById("count-down").innerHTML = days + "日 " + hours + "時間 "
  792.                         + minutes + "分 " + seconds + "秒 ";
  793.                     
  794.                         // If the count down is finished, write some text
  795.                         if (distance < 0) {
  796.                             clearInterval(x);
  797.                             document.getElementById("count-down").innerHTML = "大盛況にて終了致しました。誠にありがとうございました。";
  798.                         }
  799.                     }, 1000);
  800.                 </script>
  801.                 <style>
  802.                     #sale-timer {text-align:center;}
  803.                     #sale-timer p {margin: 0; padding:10px 0; font-size:16px; color:white; font-weight:bold;}
  804.                     #sale-timer p span {color:red;}
  805.                     @media only screen and (max-width: 767px){
  806.                         #sale-timer p {font-size:14px;}
  807.                     }
  808.                 </style>
  809.             </div>
  810.         {# カウントダウンタイマー設定終了 #}
  811.         
  812.         </div>
  813.     </header>