app/template/user_data/subscription_detail.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% block stylesheet %}
  14.     <link rel="stylesheet" href="{{ asset('assets/css/page/_subscription_point.css', 'user_data') }}">
  15.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css">
  16.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css">
  17.     <style>
  18.     .quantities{
  19.       display:none; /* フォームで送信する必要はあるため、非表示にして個数を触れないようにする */
  20.     }
  21.     .reservation4-add-cart{
  22.         justify-content: center;
  23.     }
  24.         .new {
  25.           position: absolute;
  26.           top: -1%;
  27.           left: -2%;
  28.           width: 41%;
  29.           background: linear-gradient(to top left, transparent 50%, #df0b75 50%);
  30.           z-index: 10;
  31.           display: flex;
  32.           align-items: center;
  33.           justify-content: center;
  34.           transform-origin: top left;
  35.           container-type: inline-size;
  36.           color: white;
  37.           clip-path: polygon(0 60%, 60% 0, 100% 0, 0 100%);
  38.           aspect-ratio: 1 / 1;
  39.         }
  40.             
  41.         .new-text {
  42.           position: absolute;
  43.           color: #ffffff;
  44.           font-weight: bold;
  45.           font-size: 20cqw;
  46.           text-align: center;
  47.           line-height: 3em;
  48.           transform: rotate(-45.5deg) translate(0%,-25%);
  49.         }
  50.     
  51.     .list-btn {
  52.         width:100%;
  53.     }
  54.     @media screen and (max-width: 820px) {
  55.     .list-btn {
  56.         width:50%;
  57.     }
  58.     }
  59.     .ec-modal {
  60.       display: none;
  61.       position: fixed;
  62.       top: 0;
  63.       left: 0;
  64.       z-index: 9999;
  65.       width: 100%;
  66.       height: 100%;
  67.     }
  68.     .ec-modal.small {
  69.       width: 30%;
  70.     }
  71.     .ec-modal.full {
  72.       width: 100%;
  73.       height: 100%;
  74.     }
  75.     .ec-modal .ec-modal-overlay {
  76.       display: flex;
  77.       justify-content: center;
  78.       align-items: center;
  79.       background-color: rgba(0, 0, 0, 0.3);
  80.       width: 100%;
  81.       height: 100%;
  82.     }
  83.     .ec-modal .ec-modal-wrap {
  84.       position: relative;
  85.       border-radius: 10px;
  86.       border: 1px solid #333;
  87.       background-color: #fff;
  88.       width: 40%;
  89.       margin: 20px;
  90.       padding: 40px 5px;
  91.       color: #555555;
  92.       text-decoration: none;
  93.     }
  94.     .ec-modal .ec-modal-close {
  95.       cursor: pointer;
  96.       position: absolute;
  97.       right: 20px;
  98.       top: 10px;
  99.       font-size: 20px;
  100.       height: 30px;
  101.       width: 20px;
  102.     }
  103.     .ec-modal .ec-modal-close:hover {
  104.       color: #4b5361;
  105.     }
  106.     .ec-modal .ec-modal-box {
  107.       text-align: center;
  108.       font-weight: 600;
  109.     }
  110.     .ec-modal .ec-role {
  111.       margin-top: 20px;
  112.     }
  113.     #ec-modal-header {
  114.         text-align: center;
  115.     }
  116.     .ec-role {
  117.         display: flex;
  118.         justify-content: space-around;
  119.     }
  120.     .ec-inlineBtn--cancel {
  121.         color: #09860d;
  122.         border: solid 1px #09860d;
  123.         border-radius: 50px;
  124.         padding: 10px;
  125.     }
  126.     .ec-inlineBtn--cancel:hover {
  127.         color: #ffffff;
  128.         background-color:#09860d;
  129.     }
  130.     .ec-inlineBtn--action {
  131.         color: #e8353e;
  132.         border: solid 1px #e8353e;
  133.         border-radius: 50px;
  134.         padding: 10px;
  135.     }
  136.     .ec-inlineBtn--action:hover {
  137.         color: #ffffff;
  138.         background-color:#e8353e ;
  139.     }
  140.     
  141.     /* このページだけ無効化 */
  142.     .product_page #sns-pc {
  143.       padding: 0 !important;
  144.     }
  145.     .product_page .header_inner1 {
  146.       margin-bottom: 0 !important;
  147.     }
  148.     
  149.     #site_header {
  150.         margin: 0px 15px 0 15px !important;
  151.     }
  152.     .danger{
  153.         color: #e8353e;
  154.         font-size: 12px;
  155.     }
  156.     </style>
  157. {% endblock %}
  159. {% set body_class = 'product_page' %}
  161. {% block javascript %}
  162.     <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  163.     <script>
  164.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  166.         // 規格2に選択肢を割り当てる。
  167.         function fnSetClassCategories(form, classcat_id2_selected) {
  168.             var $form = $(form);
  169.             var product_id = $form.find('input[name=product_id]').val();
  170.             var $sele1 = $form.find('select[name=classcategory_id1]');
  171.             var $sele2 = $form.find('select[name=classcategory_id2]');
  172.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  173.         }
  175.         {% if form.classcategory_id2 is defined %}
  176.         fnSetClassCategories(
  177.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  178.         );
  179.         {% elseif form.classcategory_id1 is defined %}
  180.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  181.         {% endif %}
  182.     </script>
  183.     <script>
  184.         $(function() {
  185.             $('.add-cart').on('click', function(event) {
  186.                 {% if form.classcategory_id1 is defined %}
  187.                 // 規格1フォームの必須チェック
  188.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  189.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  190.                     return true;
  191.                 } else {
  192.                     $('#classcategory_id1')[0].setCustomValidity('');
  193.                 }
  194.                 {% endif %}
  196.                 {% if form.classcategory_id2 is defined %}
  197.                 // 規格2フォームの必須チェック
  198.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  199.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  200.                     return true;
  201.                 } else {
  202.                     $('#classcategory_id2')[0].setCustomValidity('');
  203.                 }
  204.                 {% endif %}
  206.                 // 個数フォームのチェック
  207.                 if ($('#quantity').val() < 1) {
  208.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  209.                     return true;
  210.                 } else {
  211.                     $('#quantity')[0].setCustomValidity('');
  212.                 }
  214.                 event.preventDefault();
  215.                 $form = $('#form1');
  216.                 $.ajax({
  217.                     url: $form.attr('action'),
  218.                     type: $form.attr('method'),
  219.                     data: $form.serialize(),
  220.                     dataType: 'json',
  221.                     beforeSend: function(xhr, settings) {
  222.                         // Buttonを無効にする
  223.                         $('.add-cart').prop('disabled', true);
  224.                     }
  225.                 }).done(function(data) {
  226.                     // レスポンス内のメッセージをalertで表示
  227.                     $.each(data.messages, function() {
  228.                         $('#ec-modal-header').html(this);
  229.                     });
  231.                     $('.ec-modal').show()
  233.                     // カートブロックを更新する
  234.                     $.ajax({
  235.                         url: "{{ url('block_cart') }}",
  236.                         type: 'GET',
  237.                         dataType: 'html'
  238.                     }).done(function(html) {
  239.                         $('.ec-headerRole__cart').html(html);
  240.                     });
  241.                 }).fail(function(data) {
  242.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  243.                 }).always(function(data) {
  244.                     // Buttonを有効にする
  245.                     $('.add-cart').prop('disabled', false);
  246.                 });
  247.             });
  248.         });
  250.         $('.ec-modal-wrap').on('click', function(e) {
  251.             // モーダル内の処理は外側にバブリングさせない
  252.             e.stopPropagation();
  253.         });
  254.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  255.             $('.ec-modal').hide()
  256.         });
  257.     </script>
  258.     <script type="application/ld+json">
  259.     {
  260.         "@context": "https://schema.org/",
  261.         "@type": "Product",
  262.         "name": "{{ Product.name }}",
  263.         "image": [
  264.             {% for img in Product.ProductImage %}
  265.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  267.             {% else %}
  268.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  269.             {% endfor %}
  270.         ],
  271.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  272.         {% if Product.code_min %}
  273.         "sku": "{{ Product.code_min }}",
  274.         {% endif %}
  275.         "offers": {
  276.             "@type": "Offer",
  277.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  278.             "priceCurrency": "{{ eccube_config.currency }}",
  279.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  280.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  281.         }
  282.     }
  283.     </script>
  284.     <script>
  285.         document.addEventListener('DOMContentLoaded', function() {
  286.             function adjustItems(selector,amount) {
  287.                 const items = document.querySelectorAll(selector);
  288.                 items.forEach((item, index) => {
  289.                     if (window.innerWidth <= 768) {
  290.                         item.style.display = index < amount ? 'block' : 'none';
  291.                     } else {
  292.                         item.style.display = 'block';
  293.                     }
  294.                 });
  295.             }
  296.         
  297.             adjustItems(".relation .card-2",3);
  298.             adjustItems(".recommended .card-2",3);
  299.             window.addEventListener('resize', adjustItems);
  300.         });
  301.     </script>
  302. {% endblock %}
  304. {% block main %}
  305.     {% set ProductClass = Product.ProductClasses|first %}
  306.     {% set price_ex = ProductClass.price02 %}
  307.     {% set price_in = ProductClass.price02IncTax %}
  308.     {% set tax_price = price_in - price_ex %}
  310.     {% if Product.Id == 1278 %}
  311.         {% set grant_point = (price_ex * 0.06) + 30 %}
  312.     {% elseif Product.Id == 1279 %}
  313.         {% set grant_point = price_ex * 0.06 %}
  314.     {% else %}
  315.         {% set grant_point = price_ex * 0.06 %}
  316.     {% endif %}
  317.     <section class="subsc-point-page">
  318.         <div class="subsc-point-page__inner">
  320.             <header class="subsc-point-page__header">
  321.                 <h1 class="subsc-point-page__title">
  322.                     <span class="subsc-point-page__title-main">
  323.                         <img src="{{ asset('assets/icon/title_ic_subscription.svg', 'user_data')}}" alt="" aria-hidden="true" class="subsc-point-page__title-icon">
  324.                         <span>{{ Product.name }}</span>
  325.                     </span>
  326.                     <span class="subsc-point-page__title-divider" aria-hidden="true"></span>
  327.                 </h1>
  328.             </header>
  330.             <div class="subsc-point-page__layout">
  332.                 <div class="subsc-point-page__main">
  334.                     <section class="subsc-box">
  335.                         <h2 class="subsc-box__title">商品情報</h2>
  337.                         <div class="subsc-product-card">
  338.                             <div class="subsc-product-card__thumb">
  339.                                 {% if Product.Id == 1278 %}
  340.                                     <img src="{{ asset('assets/img/subscription_point_purchase_1year.png', 'user_data') }}" alt="">
  341.                                 {% elseif Product.Id == 1279 %}
  342.                                     <img src="{{ asset('assets/img/is_subscription_point_purchase_one_month.png', 'user_data') }}" alt="">
  343.                                 {% else %}
  344.                                     <img src="{{ asset('assets/img/is_subscription_point_purchase_one_month.png', 'user_data') }}" alt="">
  345.                                 {% endif %}
  346.                             </div>
  348.                             <div class="subsc-product-card__body">
  349.                                 <dl class="subsc-product-card__list">
  350.                                     <div class="subsc-product-card__row">
  351.                                         <dt>商品名：</dt>
  352.                                         <dd>{{ Product.name }}</dd>
  353.                                     </div>
  354.                                     <div class="subsc-product-card__row">
  355.                                         <dt>月額：</dt>
  356.                                         <dd>{{ price_in|price }}（税込）</dd>
  357.                                     </div>
  358.                                     <div class="subsc-product-card__row">
  359.                                         <dt>付与ポイント：</dt>
  360.                                         <dd>{{ grant_point|number_format }}ポイント</dd>
  361.                                     </div>
  362.                                 </dl>
  363.                             </div>
  364.                         </div>
  365.                     </section>
  367.                     <section class="subsc-box">
  368.                         <h2 class="subsc-box__title">お手続きの前に</h2>
  370.                         <div class="subsc-notes">
  371.                         {% set raw = Product.description_detail|default('') %}
  372.                         {% if '<ul' in raw or '<li' in raw %}
  373.                           <div class="subsc-notes">
  374.                             {{ raw|raw }}
  375.                           </div>
  376.                         {% else %}
  377.                           {% set text = raw|striptags %}
  378.                           {% set text = text|replace({'\r\n':'\n','\r':'\n'})|trim %}
  379.                           {% set text = text|replace({'・': "\n・"}) %}
  380.                           {% set lines = text|split("\n") %}
  381.                           <div class="subsc-notes">
  382.                             {% set in_list = false %}
  383.                             {% for line in lines %}
  384.                               {% set line = line|trim %}
  385.                               {% if line == '' %}
  386.                               {% elseif line starts with '・' %}
  387.                                 {% if not in_list %}
  388.                                   <ul class="subsc-notes__list">
  389.                                   {% set in_list = true %}
  390.                                 {% endif %}
  391.                                 <li>{{ line|replace({'・':''})|trim }}</li>
  392.                               {% else %}
  393.                                 {% if in_list %}
  394.                                   </ul>
  395.                                   {% set in_list = false %}
  396.                                 {% endif %}
  397.                                 <p class="subsc-notes__p">{{ line }}</p>
  398.                               {% endif %}
  399.                             {% endfor %}
  400.                             {% if in_list %}
  401.                               </ul>
  402.                             {% endif %}
  403.                           </div>
  404.                         {% endif %}
  406.                         </div>
  407.                         <div class="subsc-switch-buttons">
  408.                             {% if Product.Id == 1279 %}
  409.                                 <a href="/subscription/detail/1278" class="subsc-switch-buttons__item">
  410.                                     <img src="{{ asset('assets/icon/title_ic_subscription.svg', 'user_data')}}"
  411.                                          alt="" aria-hidden="true" class="subsc-switch-buttons__icon">
  412.                                     <span class="subsc-switch-buttons__text">1年サブスク</span>
  413.                                 </a>
  414.                             {% elseif Product.Id == 1278 %}
  415.                                 <a href="/subscription/detail/1279" class="subsc-switch-buttons__item">
  416.                                     <img src="{{ asset('assets/icon/title_ic_subscription.svg', 'user_data')}}"
  417.                                          alt="" aria-hidden="true" class="subsc-switch-buttons__icon" style="left: 65px;">
  418.                                     <span class="subsc-switch-buttons__text">1ヶ月サブスク</span>
  419.                                 </a>
  420.                             {% endif %}
  421.                         </div>
  422.                     </section>
  424.                 </div>
  426.                 <aside class="ec-orderRole__summary subsc-point-page__summary">
  427.                     <div class="subsc-summary">
  429.                         <div class="ec-totalBox__spec">
  430.                             <span>付与ポイント：</span>
  431.                             <span class="ec-totalBox__price">{{ grant_point|number_format }}ポイント</span>
  432.                         </div>
  434.                         <div class="ec-totalBox__spec">
  435.                             <span>料金：</span>
  436.                             <span class="ec-totalBox__price">¥{{ price_ex|number_format }}</span>
  437.                         </div>
  439.                         <div class="ec-totalBox__spec">
  440.                             <span>消費税：</span>
  441.                             <span class="ec-totalBox__price">¥{{ tax_price|number_format }}</span>
  442.                         </div>
  444.                         <div class="ec-totalBox__total subsc-summary__total">
  445.                             <span>合計：</span>
  446.                             <span class="ec-totalBox__price">¥{{ price_in|number_format }}</span>
  447.                         </div>
  449.                         <form action="{{ url('product_add_cart', { id: Product.id }) }}" method="post" id="form1" name="form1">
  450.                             {% if Product.stock_find %}
  451.                                 <div class="ec-productRole__actions">
  453.                                     {% if form.classcategory_id1 is defined %}
  454.                                         <div class="subsc-hidden-fields">
  455.                                             <div class="ec-select">
  456.                                                 {{ form_row(form.classcategory_id1) }}
  457.                                                 {{ form_errors(form.classcategory_id1) }}
  458.                                             </div>
  460.                                             {% if form.classcategory_id2 is defined %}
  461.                                                 <div class="ec-select">
  462.                                                     {{ form_row(form.classcategory_id2) }}
  463.                                                     {{ form_errors(form.classcategory_id2) }}
  464.                                                 </div>
  465.                                             {% endif %}
  466.                                         </div>
  467.                                     {% endif %}
  469.                                     <div class="quantities hidden">
  470.                                         <p>数量:</p>
  471.                                         {{ form_widget(form.quantity) }}
  472.                                         {{ form_errors(form.quantity) }}
  473.                                     </div>
  474.                                 </div>
  476.                                 <div class="ec-totalBox__btn">
  477.                                     {% if Customer %}
  478.                                         {% if isSubscription %}
  479.                                             <p class="danger">現在有効になっているサブスクリプションを解除しないと購入できません。</p>
  480.                                         {% else %}
  481.                                             <button type="submit" class="ec-blockBtn--action add-cart">
  482.                                                 ポイント購入
  483.                                             </button>
  484.                                         {% endif %}
  485.                                     {% else %}
  486.                                         <p class="danger">ポイントを購入するためにはログインしてください</p>
  487.                                     {% endif %}
  489.                                     <a href="{{ app.request.headers.get('referer') ?: url('homepage') }}" class="ec-blockBtn--cancel">
  490.                                         戻る
  491.                                     </a>
  492.                                 </div>
  493.                             {% else %}
  494.                                 <div class="ec-totalBox__btn">
  495.                                     <button type="button" class="ec-blockBtn--action" disabled="disabled">
  496.                                         {{ 'ただいま品切れ中です。'|trans }}
  497.                                     </button>
  498.                                     <a href="{{ app.request.headers.get('referer') ?: url('homepage') }}" class="ec-blockBtn--cancel">
  499.                                         戻る
  500.                                     </a>
  501.                                 </div>
  502.                             {% endif %}
  504.                             {{ form_rest(form) }}
  505.                         </form>
  506.                     </div>
  507.                 </aside>
  509.             </div>
  510.         </div>
  511.     </section>
  513.     <div class="ec-modal">
  514.         <div class="ec-modal-overlay">
  515.             <div class="ec-modal-wrap">
  516.                 <span class="ec-modal-close">
  517.                     <span class="ec-icon">
  518.                         <img src="{{ asset('assets/icon/cross-dark.svg') }}" alt="">
  519.                     </span>
  520.                 </span>
  521.                 <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  522.                 <div class="ec-modal-box">
  523.                     <div class="ec-role">
  524.                         <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  525.                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  526.                     </div>
  527.                 </div>
  528.             </div>
  529.         </div>
  530.     </div>
  531. {% endblock %}