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

Open in your IDE?
  1. {#
  2. * Plugin Name : CustomerRank
  3. *
  4. * Copyright (C) BraTech Co., Ltd. All Rights Reserved.
  5. * http://www.bratech.co.jp/
  6. *
  7. * For the full copyright and license information, please view the LICENSE
  8. * file that was distributed with this source code.
  9. #}
  11. {% block stylesheet %}
  12. <style>
  13. .next-level { color: #ff0000; font-weight: bold; }
  14. .progress-container {
  15.   position: relative;
  16.   background: #eee;
  17.   border-radius: 10px;
  18.   height: 20px;
  19.   max-width: 500px;
  20.   width:80%;
  21.   margin: 10px auto;
  22.   overflow: hidden;
  23.   border: 1px #000 solid;
  24. }
  25. .progress-bar-fill {
  26.   background: linear-gradient(to right, #ee0000, #ff7f7f);
  27.   height: 100%;
  28.   width: 0;
  29.   border-radius: 10px;
  30.   transition: width 1.5s ease;
  31. }
  32. .progress-text {
  33.   position: absolute;
  34.   left: 50%; top: 0;
  35.   transform: translateX(-50%);
  36.   font-size: 12px;
  37.   color: #000;
  38. }
  40. .rank {
  41.   position: relative;
  42.   cursor: help;
  43. }
  44. .rank span.tooltip {
  45.   position: absolute;
  46.   bottom: 125%; left: 50%;
  47.   transform: translateX(-50%);
  48.   background: rgba(0,0,0,0.8);
  49.   color: #fff;
  50.   padding: 4px 8px;
  51.   border-radius: 4px;
  52.   white-space: nowrap;
  53.   opacity: 0;
  54.   pointer-events: none;
  55.   transition: opacity .3s ease;
  56.   z-index: 10;
  57.   font-weight:normal !important;
  58. }
  59. .rank:hover .tooltip,
  60. .rank:focus .tooltip { opacity: 1; }
  62. .tooltip-percent {
  63.   color: #e60000;
  64.   font-weight: bold;
  65. }
  67. .next_info .note {
  68.   font-size: 10px;
  69.   color: #555;
  70.   margin-top: 5px;
  71. }
  72. </style>
  73. {% endblock stylesheet %}
  75. {% if NextCustomerRank %}
  76.   {# Pre-compute once #}
  77.   {% set userTotal       = CurrentCondition.total_amount|default(0) %}
  78.   {% set cartTotal       = get_carts_total_price()|default(0) %}
  79.   {% set combinedTotal   = userTotal + cartTotal %}
  80.   {% set currentStart    = CurrentCustomerRank.condAmount|default(0) %}
  81.   {# Safer: default nextEnd to 0 if not set #}
  82.   {% set nextEnd         = NextCustomerRank.condAmount|default(0) %}
  83.   {% set nextAmount      = nextEnd - combinedTotal %}
  84.   {% if nextAmount < 0 %}{% set nextAmount = 0 %}{% endif %}
  86.   {# --- SAFE progress calculation (avoid division by zero) --- #}
  87.   {% set denom = nextEnd - currentStart %}
  89.   {% if denom > 0 %}
  90.     {# Normal case: can compute progress safely #}
  91.     {% set rawPercent = (((combinedTotal - currentStart) / denom) * 100)|round(0, 'floor') %}
  92.   {% else %}
  93.     {# No valid "next" threshold (top rank, or misconfigured thresholds) #}
  94.     {# Treat as 100% so we never divide by zero and never crash mypage/cart. #}
  95.     {% set rawPercent = 100 %}
  96.   {% endif %}
  98.   {# Clamp progress to 0–100 #}
  99.   {% if rawPercent < 0 %}
  100.     {% set progressPercent = 0 %}
  101.   {% elseif rawPercent > 100 %}
  102.     {% set progressPercent = 100 %}
  103.   {% else %}
  104.     {% set progressPercent = rawPercent %}
  105.   {% endif %}
  107.   {# total point rate #}
  108.   {% set totalPointRate = BaseInfo.basic_point_rate|default(0) + NextCustomerRank.pointRate|default(0) %}
  110.   <div id="customer_rank">
  111.     <div class="container-fluid">
  112.       <div class="col-md-10 col-md-offset-1">
  113.         <div class="next_info">
  114.           <p>
  115.             {% if nextAmount == 0 %}
  116.               おめでとうございます！
  117.               「<span class="rank {{ NextCustomerRank.name }}" tabindex="0">
  118.                 {{ NextCustomerRank.name }}
  119.                 <span class="tooltip">
  120.                   次回のご注文からポイント率が
  121.                   <span class="tooltip-percent">{{ totalPointRate }}%</span>に！
  122.                 </span>
  123.               </span>」にランクアップします！
  124.             {% else %}
  125.               あと <span class="next-level">{{ nextAmount|number_format }}円</span> で
  126.               「<span class="rank {{ NextCustomerRank.name }}" tabindex="0">
  127.                 {{ NextCustomerRank.name }}
  128.                 <span class="tooltip">
  129.                   次回のご注文からポイント率が
  130.                   <span class="tooltip-percent">{{ totalPointRate }}%</span>に！
  131.                 </span>
  132.               </span>」にランクアップ！
  133.             {% endif %}
  134.           </p>
  136.           <div class="progress-container">
  137.             <div class="progress-bar-fill"></div>
  138.             <span class="progress-text">0%</span>
  139.           </div>
  140.           <p class="note">※クーポン・ポイント適用前の目安です。ご注文発送後にランクが更新されます。</p>
  141.         </div>
  142.       </div>
  143.     </div>
  144.   </div>
  145. {% endif %}
  147. {% block javascript %}
  148. <script>
  149.   $(function(){
  150.     $("#customer_rank").appendTo("#customer-rank-info");
  151.   });
  153.   document.addEventListener("DOMContentLoaded", function(){
  154.     {% if NextCustomerRank %}
  155.       var bar      = document.querySelector(".progress-bar-fill"),
  156.           text     = document.querySelector(".progress-text"),
  157.           percent  = {{ progressPercent }},
  158.           duration = 1500,
  159.           stepTime = percent ? duration / percent : duration;
  161.       bar.style.transition = 'width ' + duration + 'ms ease';
  162.       setTimeout(function(){
  163.         bar.style.width = percent + "%";
  164.         var current = 0,
  165.             timer   = setInterval(function(){
  166.               text.textContent = (++current) + "%";
  167.               if (current >= percent) clearInterval(timer);
  168.             }, stepTime);
  169.       }, 200);
  170.     {% endif %}
  171.   });
  172. </script>
  173. {% endblock javascript %}