app/template/aneros2023/abtest/pdp_value_msg.twig line 1

Open in your IDE?
  1. {# === PDP Above-the-Fold Value Message (B-only; pill style; block after .price-box .point-area) === #}
  3. {# --- DeliveryDate42 holidays -> array of "YYYY-MM-DD" (bounded window for production use) --- #}
  4. {% set _from = ("now"|date_modify("-30 days"))|date("Y-m-d") %}
  5. {% set _to   = ("now"|date_modify("+400 days"))|date("Y-m-d") %}
  7. {% set _holidayRows = repository('Plugin\\DeliveryDate42\\Entity\\Holiday').findAll() %}
  8. {% set holiday_dates = [] %}
  10. {% for h in _holidayRows %}
  11.   {% if h.date is not null %}
  12.     {% set d = h.date|date('Y-m-d') %}
  13.     {% if d >= _from and d <= _to %}
  14.       {% set holiday_dates = holiday_dates|merge([d]) %}
  15.     {% endif %}
  16.   {% endif %}
  17. {% endfor %}
  19. {# --- Optional debug list (2026 full year) ONLY when ?debug=1&debug_holidays=1 --- #}
  20. {% set debug_holidays_2026 = [] %}
  21. {% if app.request.query.get('debug') == '1' and app.request.query.get('debug_holidays') == '1' %}
  22.   {% for h in _holidayRows %}
  23.     {% if h.date is not null %}
  24.       {% set d = h.date|date('Y-m-d') %}
  25.       {% if d >= '2026-01-01' and d <= '2026-12-31' %}
  26.         {% set debug_holidays_2026 = debug_holidays_2026|merge([d]) %}
  27.       {% endif %}
  28.     {% endif %}
  29.   {% endfor %}
  30. {% endif %}
  32. <meta id="pdp-msg-price"
  33.       data-price01="{{ Product.getPrice01IncTaxMin|default('') }}"
  34.       data-price02="{{ Product.getPrice02IncTaxMin|default('') }}">
  36. <style>
  37.   /* Block line placed AFTER .point-area inside .price-box (prevents ATC collisions) */
  38.   .price-box .pdp-msg-floater{
  39.     display: block;
  40.     font-size: 13px;
  41.     line-height: 1.2;
  42.     margin: 5px 0;
  43.     clear: both;
  44.   }
  45.   @media (min-width: 1000px){
  46.     #default-product-page .price-box .pdp-msg-floater{
  47.       text-align:left;
  48.     }
  49.   }
  50.   /* Pill styles */
  51.   .pdp-pill{
  52.     display: inline-block;
  53.     padding: 6px 10px;
  54.     border-radius: 9999px;
  55.     font-weight: 700;
  56.     line-height: 1.2;
  57.     max-width: 100%;
  58.     white-space: nowrap;   /* single line on wider screens */
  59.   }
  60.   .pdp-pill--free{     background:#ff0000; color:#fff; } /* 送料無料：赤 */
  61.   .pdp-pill--speed{    background:#1a73e8; color:#fff; } /* 即日出荷：青 */
  62.   .pdp-pill--fallback{ background:#2e7d32; color:#fff; } /* 翌営業日：緑 */
  64.   /* Mobile: allow wrapping so long text doesn't collide */
  65.   @media (max-width: 480px){
  66.     .pdp-pill{ white-space: normal; }
  67.   }
  68. </style>
  70. <script>
  71. (function(){
  72.   document.addEventListener('DOMContentLoaded', function(){
  73.     try{
  74.       /* ===== Constants ===== */
  75.       const EXP_NAME    = 'pdp_value_msg_v1';
  76.       const CAMPAIGN_ID = '2025-10-pdp-msg';
  78.       // B-only
  79.       const variant = 'B';
  81.       const FREE_SHIPPING_THRESHOLD = 5000;  // ¥5,000+
  82.       const CUTOFF_HOUR = 14;                // Same-day ship cutoff (平日)
  84.       /* ===== JST date helper ===== */
  85.       const now = new Date();
  86.       const todayJST = new Date(now.getTime() - now.getTimezoneOffset()*60000).toISOString().slice(0,10);
  88.       /* ===== Debug flags ===== */
  89.       const qs = new URLSearchParams(location.search);
  90.       const DEBUG = qs.get('debug') === '1';
  91.       const DEBUG_HOLIDAYS = DEBUG && qs.get('debug_holidays') === '1';
  93.       /* ===== Persist debug/metadata ===== */
  94.       localStorage.setItem('pdp_value_msg_experiment', EXP_NAME);
  95.       localStorage.setItem('pdp_value_msg_campaign',  CAMPAIGN_ID);
  96.       localStorage.setItem('ab_variant_pdp_msg_v1',   variant);
  98.       /* ===== Helpers ===== */
  99.                                                       
  101.       const safeInt = (x) => {
  102.         if (x == null) return null;
  103.         const v = parseInt(String(x).replace(/[^\d]/g,''), 10);
  104.         return Number.isNaN(v) ? null : v;
  105.       };
  107.       const getMetaPrice = (which) => {
  108.         const m = document.getElementById('pdp-msg-price');
  109.         return m ? safeInt(m.dataset[which]) : null;
  110.       };
  112.       function getGA4Price(){
  113.         try{
  114.           const arr = window.dataLayer || [];
  115.           for (let i = arr.length - 1; i >= 0; i--){
  116.             const e = arr[i];
  117.             if (e?.ecommerce?.items?.length){
  118.               const n = safeInt(e.ecommerce.items[0].price);
  119.               if (n != null) return n;
  120.             }
  121.             if (e?.ecommerce?.detail?.products?.length){
  122.               const n = safeInt(e.ecommerce.detail.products[0].price);
  123.               if (n != null) return n;
  124.             }
  125.           }
  126.         }catch(_){}
  127.         return null;
  128.       }
  130.       function getVisiblePrice(){
  131.         const el = document.querySelector('[itemprop="price"]') ||
  132.                    document.querySelector('.ec-productRole__price, .price02, .current-price');
  133.         return el ? safeInt(el.getAttribute('content') || el.textContent) : null;
  134.       }
  136.       const price02 = () => getMetaPrice('price02') ?? getVisiblePrice() ?? getGA4Price();
  138.       /* ===== Holidays from DeliveryDate42 (YYYY-MM-DD) ===== */
  139.                                                                                            
  140.                  
  141.                                      
  142.                                            
  143.         
  144.       const holidaySet = new Set({{ holiday_dates|json_encode|raw }});
  146.       function isHolidayOrWeekend(isoYmd){
  147.         // Force JST weekday calculation for consistency
  148.         const d = new Date(isoYmd + 'T00:00:00+09:00');
  149.         const wd = d.getUTCDay(); // weekday in JST
  150.         const weekend = (wd === 0 || wd === 6);
  151.         return weekend || holidaySet.has(isoYmd);
  152.       }
  154.       if (DEBUG_HOLIDAYS){
  155.         const rangeFrom = {{ _from|json_encode|raw }};
  156.         const rangeTo   = {{ _to|json_encode|raw }};
  157.         console.group('[pdp_value_msg] holiday debug');
  158.         console.log('Range used (server filtered):', rangeFrom, '→', rangeTo);
  159.         console.log('holidaySet size:', holidaySet.size);
  160.         console.log('todayJST:', todayJST, 'isHolidayOrWeekend(todayJST)=', isHolidayOrWeekend(todayJST));
  162.         // 2026-only list (only rendered when debug=1&debug_holidays=1)
  163.         const holidays2026 = {{ debug_holidays_2026|json_encode|raw }};
  164.         console.log('Holidays in 2026 (from plugin table): count=', holidays2026.length);
  165.         console.log(holidays2026);
  166.         console.groupEnd();
  167.       }
  169.       const htmlFor = (type) => ({
  170.         free:     '<span class="pdp-pill pdp-pill--free">送料無料対象</span>',
  171.         speed:    '<span class="pdp-pill pdp-pill--speed">本日14時までのご注文で即日出荷</span>',
  172.         fallback: '<span class="pdp-pill pdp-pill--fallback">今ご注文で翌営業日出荷</span>'
  173.       })[type];
  175.       function computeMessage(){
  176.         // QA forcing (only with debug=1 to avoid accidental use)
  177.                                                    
  178.         const forceType = DEBUG ? qs.get('pdp_msg_force') : null; // free | speed | fallback
  179.         if (forceType && ['free','speed','fallback'].includes(forceType)) {
  180.           return { type: forceType, html: htmlFor(forceType) };
  181.         }
  183.         const p2 = price02();
  184.         if (p2 != null && p2 >= FREE_SHIPPING_THRESHOLD) {
  185.           return { type: 'free', html: htmlFor('free') };
  186.         }
  188.         // weekday + before cutoff => speed
  189.         if (!isHolidayOrWeekend(todayJST) && (new Date()).getHours() < CUTOFF_HOUR) {
  190.           return { type: 'speed', html: htmlFor('speed') };
  191.         }
  193.         return { type: 'fallback', html: htmlFor('fallback') };
  194.       }
  196.       /* ===== Render (once) ===== */
  197.       if (document.querySelector('.pdp-msg-floater')) return; // avoid duplicates
  199.       const msg  = computeMessage();
  200.       const line = document.createElement('div');
  201.       line.className = 'pdp-msg-floater';
  202.       line.innerHTML = msg.html;
  204.       // Primary target: AFTER .price-box .point-area (inside .price-box)
  205.       const pointArea =
  206.         document.querySelector('.product-price-info .price-box .point-area') ||
  207.         document.querySelector('.price-box .point-area');
  209.       if (pointArea?.parentNode){
  210.         pointArea.insertAdjacentElement('afterend', line);
  211.       } else {
  212.         // Fallbacks: append in .price-box, else above ATC
  213.         const priceBox = document.querySelector('.product-price-info .price-box') ||
  214.                          document.querySelector('.price-box');
  215.         if (priceBox){
  216.           priceBox.appendChild(line);
  217.         } else {
  218.           const atc = document.querySelector('.ec-productRole__btn, .ec-productAction__btn, .product-cart');
  219.           if (atc?.parentNode) atc.parentNode.insertBefore(line, atc);
  220.           else return; // no anchor found
  221.         }
  222.       }
  224.       /* ===== Main tracking (kept) ===== */
  225.       window.dataLayer = window.dataLayer || [];
  226.       window.dataLayer.push({
  227.         event: 'pdp_msg_view',
  228.         experiment_name: EXP_NAME,
  229.         campaign_id: CAMPAIGN_ID,
  230.         variant: variant,
  231.         position: 'pdp',
  232.         pdp_msg_type: msg.type
  233.       });
  234.       localStorage.setItem('pdp_msg_type', msg.type);
  236.       /* ===== Click tracking (kept; only if link exists in pill) ===== */
  237.       line.addEventListener('click', function(e){
  238.         const a = e.target.closest('a');
  239.         if (!a) return;
  240.         window.dataLayer.push({
  241.           event: 'pdp_msg_click',
  242.           experiment_name: EXP_NAME,
  243.           campaign_id: CAMPAIGN_ID,
  244.           variant: variant,
  245.           position: 'pdp',
  246.           pdp_msg_type: msg.type,
  247.           href: a.href || null
  248.         });
  249.       });
  251.     }catch(e){
  252.       console && console.warn && console.warn('pdp_value_msg_v1 error', e);
  253.     }
  254.   });
  255. })();
  256. </script>