app/template/default/Block/one_touch_popup.twig line 1

Open in your IDE?
  1. <link rel="stylesheet" href="{{ asset('assets/css/block/one_touch_modal.css') }}">
  2. <style>
  3.    .modal_payment_kg .close {
  4.         position: absolute;
  5.         top: -30px;
  6.         right: 5px;
  7.         width: 30px !important;
  8.         height: 30px;
  9.         opacity: 1;
  10.         background: url('{{asset('assets/img/icon/icon-close.svg')}}') no-repeat center center;
  11.         filter: invert(100%) sepia(54%) saturate(1155%) hue-rotate(235deg) brightness(119%) contrast(107%);
  12.     }
  13.      .info .member .save-money {
  14.         display: flex;
  15.         align-items: center;
  16.         background:#000;
  17.         position:relative;
  19.         font-family: "Cabin";
  20.         font-weight:600;
  21.         font-size:16px;
  22.         line-height:19.44px;;
  23.         white-space: nowrap;
  24.         color: #fff;
  25.         height:30px;
  26.         padding: 0 13px;
  27.         margin-top:9px;
  28.         background: url('{{asset('assets/img/bg_kg_family_black.svg')}}') no-repeat center center;
  29.         background-size: cover;
  30.         width: fit-content;
  31.     }
  33.      .info .member .save-money::before {
  34.         content: "";
  35.         width:5px;
  36.         height:30px;
  37.         top:0;
  38.         left:0;
  39.         position:absolute;
  40.         background: url({{asset('assets/img/ribbon-arrow.png')}}) no-repeat center center;
  41.     }
  43.      .info .member .save-money:after {
  44.         content:"";
  45.         width:5px;
  46.         height:30px;
  47.         top:0;
  48.         right:0;
  49.         position:absolute;
  50.         background: url({{asset('assets/img/ribbon-arrow.png')}}) no-repeat center center;
  51.         transform: rotate(180deg);
  52.     }
  54. </style>
  55. <div style="display:none" class="background_popup">
  56. </div>
  59. <div style="display:none" class="modal_onetouch_payment" data-form="">
  60.         <div class="ec-icon img-close">
  61.             <img src="{{ asset('assets/img/icon/icon-close.svg') }}" alt="remove">
  62.         </div>
  63.     <div class="ec-modal-overlay">
  64.         <div class="modal-order">
  65.             <div class="coundown-dialog" style="margin-top:0">
  66.                 <div class="box-image">
  67.                     <img class="product-image-order" src=""/>
  68.                 </div>
  69.                 <div class="box-content info">
  70.                     {% if Product is defined %}
  71.                         {% set giftCardCategory = Product.ProductCategories|filter(pc => pc.Category.name == 'ギフトカード')|first %}
  72.                         {% if not giftCardCategory %}
  73.                         <p href="{{ url('product_detail', {'id': 522, 'slug': ''}) }}" class="point point-bonus">
  74.                             獲得予定予定 ポイント：
  75.                             {% if Customer %}
  76.                                 <span class="point" id="add_pt">0</span>pt
  77.                             {% endif %}
  78.                         </p>
  79.                         {% endif %}
  80.                     {% endif %}
  81.                     {% if Customer %}
  82.                         <div class="no-member" style="display:{{Customer.getTrialFamilyDate or Customer.prime_member != 0 ? "none" : "block" }}">
  83.                            
  84.                             <div class="no-member-info" style="display:flex; align-items: center;">
  85.                                 <div class="left">
  86.                                     {% if Product is defined and Product.id != 522 and Product.id != 814 %}
  87.                                     <div class="checkbox" id="checkbox-resign"></div>
  88.                                     {% endif %}
  89.                                 </div>
  90.                                 <div> 
  91.                                     <p class="save-info">
  92.                                     この注文でKG Familyの無料<br>
  93.                                     トライアルをご利用いただくと<br>
  94.                                     <span class="save-value">¥880</span>お得になります</p>
  95.                                     <p class="cost">1ヶ月無料 その後¥1,100/月</p>
  96.                                 </div>
  97.                             </div>
  98.                             
  99.                         </div>
  101.                         <div class="member" style="display:{{Customer.getTrialFamilyDate or Customer.prime_member != 0 ? "block" : "none" }}">
  102.                             {% set giftCardCategory = Product is defined ? Product.ProductCategories|filter(pc => pc.Category.name == 'ギフトカード')|first : null %}
  103.                             {% if not giftCardCategory %}
  104.                             <div class="category">
  105.                                 <div class="category-item">
  106.                                     ポイントの内訳
  107.                                 </div>
  108.                             </div>
  109.                             <div>
  110.                                 <table>
  111.                                     <tr>
  112.                                         <td class="td-bonus-text">
  113.                                             <div class="bonus-text">{{ get_urank_name(Customer.owner_rank) }}ポイント</div>
  114.                                         </td>
  115.                                         <td class="no-warp bonus-per">{{ Customer.owner_rank + 1}}%</td>
  116.                                         <td class="no-warp bonus-value"><span class="normal-bonus-value">0</span>pt相当</td>
  117.                                     </tr>
  118.                                     <tr>
  119.                                         <td >
  120.                                             <div class="bonus-text">KG Familyポイント</div>
  121.                                         </td>
  122.                                         <td class="no-warp bonus-per">3%</td>
  123.                                         <td class="no-warp bonus-value"><span class="kg-bonus-value">0</span>pt相当</td>
  124.                                     </tr>
  125.                                 </table>
  126.                             </div>
  127.                             
  128.                             <div class="save-money">
  129.                                 <div class="left">
  130.                                     <img src="{{ asset('assets/img/icon/icon-kg-yellow.svg') }}">
  131.                                 </div>
  132.                                 <div>
  133.                                     <p>で<span id="onetouch_discount"></span>お得になります</p>
  134.                                 </div>
  135.                             </div>
  136.                             {% endif %}
  137.                         </div>
  138.                     {% endif %}
  139.                     
  140.                 </div>
  141.             </div>
  142.             {% set Customer = app.user %}
  143.             
  144.             {% if Customer and Customer.pref %}
  145.                 <div class="account-list">
  146.                     <div class="account-list-item">
  147.                         <div class="left show_update_shipping">
  148.                             {{ 'お届け先'|trans }}
  149.                         </div>
  150.                         <div class="right">
  151.                             <p class="detail address-customer">
  152.                                 {% if Customer.name01 == "ゲスト" %}
  153.                             <p class="ec-telInput"><span class="customer-edit customer-phone_number">{{ '固定お届け先がありません。'|trans }}</span></p>
  154.                                 {% else %}
  155.                                     {{ ''|trans }} {{ Customer.name01 }} {{ Customer.name02 }}{{ ' 様'|trans }} 〒 {{ Customer.postal_code }} {{ Customer.pref }} {{ Customer.addr01 }}{{ Customer.addr02 }} {{ Customer.phone_number }}
  156.                                 {% endif %}
  157.                             </p>
  158.                             <div  data-stripe="{{ StripeCustomer ? StripeCustomer.getStripeCustomerId : null }}" class="ec-Payment"></div>
  159.                         </div>
  160.                     </div>
  161.                     <div class="account-list-item">
  162.                         <div class="left show_update_card" data-id="{{ PaymentDefault ? PaymentDefault.id : "" }}">
  163.                             {{ 'お支払い方法'|trans }}
  164.                         </div>
  165.                         <div class="right">
  166.                             <p class="detail">
  167.                                 {% if PaymentDefault %}
  168.                                     {% set Card = PaymentDefault.card %}
  169.                                     <div class="ec-Payment__card">
  170.                                         <span style="display:flex;justify-content:space-between;width:100%;"><span class="card-type detail" style="text-transform:capitalize;">{{Card.brand}} * {{Card.last4}}</span> <span class="card-exp" style="text-align:right">{{ Card.exp_month }}/{{ Card.exp_year }}</span></span>
  171.                                     </div>
  172.                                     {% else %}
  173.                                     <div class="ec-Payment__card">
  174.                                         <span style="display:flex;justify-content:space-between;width:100%;"><span class="card-type detail" style="text-transform:capitalize;">未設定</span><span class="card-exp tax-value detail" style="text-align:right; display:none"></span></span>
  175.                                     </div>
  176.                                 {% endif %}
  177.                             </p>
  178.                         </div>
  179.                     </div>
  180.                     <div class="account-list-item">
  181.                         <div class="left show_total_payment">
  182.                         {{ '合計'|trans }}
  183.                         <div id="productRole_quantity" class="hidden">1</div>
  184.                         </div>
  185.                         <div class="right">
  186.                             <div class="infoRight">
  187.                                 <p class="detail tax-value" id="productRole_totalPayment"></p>
  188.                                 <p>(税 込)</p>
  189.                             </div>
  190.                         </div>
  191.                     </div>
  192.                 </div>
  193.             {% else %}
  194.                 <div style="width:100%;text-align:center">
  195.                     <a style="color:red;font-weight:600;" href="{{ url('mypage_login') }}">ログイン</a>
  196.                 </div>
  197.                 
  198.             {% endif %}
  199.             
  200.             <div class="row slider-box" id="slider-account">
  201.                 <div class="slider-onetouch" >
  203.                     <div class="action-slide-auto" style="position: fixed; top: 0; left: 0; right: 0; width: 20px; height: 20px; background: #ffffff;opacity: 0;">hehe</div>
  204.                     <div class="thumb drag-default">
  205.                         <img src="{{ asset('assets/img/icon/icon-three-arrow-right.svg') }}">
  206.                     </div>
  207.                     <div class="slider-mess slider-mess-product" data-unlock-text="注文確定">
  208.                         {% if PaymentDefault %}
  209.                         <span style="font-size: 14px;white-space: nowrap;">
  210.                         スワイプして注文
  211.                         <span>
  212.                         {% else %}
  213.                         <span style="font-size: 14px;">
  214.                             お支払い方法をクリックし<br>
  215.                             クレジットカード登録をお願いします
  216.                         <span>
  217.                         {% endif %}
  218.                     </div>
  219.                 </div>
  220.             </div>
  221.         </div>
  222.         {% if Customer and Customer.pref %}
  223.             <div class="update_shipping hidden">
  224.                 {% include "Block/one_touch_shipping_popup.twig" with {'form_create_address' : get_form_create_address(null, Customer)} %}
  225.             </div>
  227.             <div class="update_card hidden">
  228.                 {% include "Block/one_touch_card_popup.twig" with {'form_create_card' : get_form_create_card(null, Customer), 'StripePublicKey': StripePublicKey} %}
  229.             </div>
  231.             <div class="total_payment hidden">
  232.                 {% include "Block/one_touch_total_payment.twig" %}
  233.             </div>
  235.             <div class="modal_kg_family hidden">
  236.                 {% include "Block/one_touch_kg_family_info.twig" with {'PaymentDefault' : PaymentDefault, 'StripeCustomer': StripeCustomer} %}
  237.                 
  238.             </div>
  239.             <div class="modal_payment_kg hidden">
  240.                 {% include "Block/one_touch_kg_family_payment.twig"  with {'PaymentDefault' : PaymentDefault} %}
  241.             </div>
  243.             <div class="modal_kg_bonus_detail hidden">
  244.                 {% include "Block/one_touch_kg_bonus_detail.twig" %}
  245.             </div>
  247.             {% if Product is defined and Product.id == get_trial_ambassador_product_id() %}
  248.                 <div class="modal_payment_ambassador hidden">
  249.                 {% include "Block/OneTouchPayment/one_touch_ambassador_popup.twig" with {'PaymentDefault' : PaymentDefault} %}
  250.                 </div>
  251.             {% endif %}
  253.         {% endif %}
  254.         
  255.     </div> 
  256. </div>
  258. <div style="display:none" class="modal_payment_kg_complete">
  259.     <div class="ec-modal-overlay">
  260.         <div class="">
  261.             <p class="title">KG Familyへのご入会<br/>
  262.                 ありがとうございます。</h1>
  264.             <p class="sub-title">今回のご注文から<br/>
  265.                 以下のサービスが適用されます</p>
  266.             <ul>
  267.                 <li>ポイント３％アップ</li>
  268.                 <li>送料￥880円が無料</li>
  269.             </ul>
  271.             <button class="btn-complete-close">買い物を続ける</button>
  272.         </div>
  273.     </div> 
  274. </div>
  276. <div style="display:none" class="modal_loading_payment">
  277.     <div class="ec-loadingPayment">
  278.         <img class="loading" width="50px" height="50px" src="/html/template/default/assets/img/rolling.svg" />
  279.         <img class="complete" style="display:none" width="50px" height="50px" src="/html/template/default/assets/icon/payment_complete.svg" />
  280.         <img class="error" style="display:none" width="50px" height="50px" src="/html/template/default/assets/icon/payment_error.svg" />
  281.         <p class="content">決済中</p>
  282.     </div> 
  283. </div>
  284. <script src="/html/template/default/assets/oneclick/js/jquery.slideToUnlock.js"></script>  
  285. <script>
  286.     let is_kg_family = false;
  288.             function slider(id, eventActive){
  289.                 const slider = document.querySelector(`#${id} .slider-onetouch`);
  290.                 if(!slider) return;
  291.                 const thumb = slider.querySelector('.slider-onetouch .thumb');
  292.                 const content = slider.querySelector('.content');
  294.                 let startX = 0;
  295.                 let slideW = slider.offsetWidth;
  296.                 let isTouchThumb = false;
  297.                 let isCallActive = false;
  298.                 let thumbWidth = 77;
  300.                 slider.addEventListener('touchstart', handleTouchStart);
  301.                 slider.addEventListener('touchmove', handleTouchMove);
  302.                 slider.addEventListener('touchend', handleTouchEnd);
  304.                 slider.addEventListener('mousedown', handleMouseStart);
  305.                 slider.addEventListener('mousemove', handleMouseMove);
  306.                 slider.addEventListener('mouseup', handleTouchEnd);
  307.                 slider.addEventListener('mouseleave', handleTouchEnd);
  309.                 function handleTouchStart(event) {
  310.                     startX = event.touches[0].clientX;
  311.                     handleStart(startX);
  312.                 }
  313.                 function handleMouseStart(event) {
  314.                     startX = event.offsetX;
  315.                     handleStart(startX);
  316.                 }
  317.                 function handleStart(startX){
  318.                     slideW = slider.offsetWidth;
  319.                     isTouchThumb = startX <= ( thumbWidth + 20);
  320.                     isCallActive = false;
  321.                 }
  323.                 function handleTouchMove(event) {
  324.                     if(!isTouchThumb) return;
  325.                     const currentX = event.touches[0].clientX;
  326.                     handleMove(currentX);
  327.                 }
  328.                 function handleMouseMove(event) {
  329.                     if(!isTouchThumb) return;
  330.                     const currentX = event.offsetX;
  331.                     handleMove(currentX);
  332.                 }
  334.                 function handleMove(currentX) {
  335.                     if(!isTouchThumb) return;
  337.                     const deltaX = currentX - startX + thumbWidth;
  338.                     if(deltaX < thumbWidth)
  339.                         deltaX = thumbWidth;
  340.                         
  341.                     thumb.style.setProperty('width',`${Math.min(deltaX,slideW)}px`, 'important');
  343.                     if (deltaX > slideW && !isCallActive) {
  344.                         eventActive();
  345.                         isCallActive= true;
  346.                     }
  347.                 }
  350.                 function handleTouchEnd() {
  351.                     if(!isCallActive){
  352.                         thumb.style.setProperty('width',`${thumbWidth}px`, 'important');
  353.                     }
  354.                     isTouchThumb = false;
  355.                 }
  356.             }
  358.             function lockSlider(id){
  359.                 const slider = document.querySelector(`#${id} .slider-onetouch`);
  360.                 if(!slider) return;
  362.                 const sliderMess = slider.querySelector(`.slider-mess`);
  363.                 let messUnlock = sliderMess.attr("data-unlock-text");
  364.                 if(messUnlock){
  365.                     sliderMess.html(messUnlock);
  366.                 }
  367.             }
  369.             function verify3dsecure(data) 
  370.             {
  371.                 return window.location.href = data.verify_3dsecure_url;
  372.             }
  374.         document.addEventListener('DOMContentLoaded', function() {
  375.             const actionSlideAuto = document.querySelector('.action-slide-auto');
  376.             actionSlideAuto.addEventListener('click', function(){
  377.                 $('.modal_onetouch_payment').css('display','none');
  378.                 $(".modal_loading_payment").css('display','block');
  379.                 loadingPayment()
  380.                 isloading = true;
  381.                 let stripe_payment_method_id = $('.show_update_card').attr("data-id");
  382.                 let stripe_customer_id = $('.ec-Payment').attr("data-stripe")
  383.                 let dataCheckout = {
  384.                     order_id : $('#order_id').val(),
  385.                     _shopping_order: {
  386.                         stripe_payment_method_id: stripe_payment_method_id,
  387.                         stripe_customer_id: stripe_customer_id,
  388.                         stripe_save_card: 1
  389.                     },
  390.                     is_one_touch: true
  391.                 };
  392.                             $.ajax({
  393.                                 url: "{{ url('execute_one_touch_checkout') }}",
  394.                                 type: "POST",
  395.                                 data: dataCheckout,
  396.                                 dataType: 'json',
  397.                                 success: function (data) {
  398.                                     if (data.done) {
  399.                                         shopping_page = window.location.href == "{{ url('shopping') }}" ? 1 : 0;
  400.                                         if(data.gift_card == true){
  401.                                             $.ajax({
  402.                                                 url: "{{ url('update_gift_card') }}",
  403.                                                 type: "POST",
  404.                                                 data: {
  405.                                                     order_id : $('#shopping-form').attr("data-order"),
  406.                                                     is_shopping_page: shopping_page
  407.                                                 },
  408.                                                 dataType: 'json',
  409.                                                 success: function (data) {
  410.                                                     let curTime = new Date().getTime();
  411.                                                     localStorage.setItem("hide-modal-gift-card-{{app.user.id is defined ? app.user.id : ''}}",curTime);
  412.                                                     if(shopping_page == 1){
  413.                                                         $('.modal_loading_payment').css('display','none');
  414.                                                         $('.background_popup').css('display','none');
  415.                                                         $('#buy_gift_card_comfirm').modal('show');
  416.                                                     }else{
  417.                                                         showSuccess();
  418.                                                         window.location.replace("{{ url('shopping_complete') }}")
  419.                                                     }
  420.                                                 },
  421.                                                 error: function () {
  422.                                                     showError();
  423.                                                     $('.background_popup').css('display','none');
  424.                                                     $('.modal_loading_payment').css('display','none');
  425.                                                     $('#shopping_order_use_point').val(data.use_point);
  426.                                                     window.location.replace("{{ url('shopping_error') }}")
  427.                                                 }
  428.                                             })
  429.                                         }
  430.                                         else if(data.rec_order_id){
  431.                                             showSuccess();
  432.                                             window.location.replace(data.url.targetUrl)
  433.                                         }
  434.                                         else{
  435.                                             showSuccess();
  436.                                             window.location.replace("{{ url('shopping_complete') }}")
  437.                                         }
  438.                                     } else {
  439.                                         showError();
  440.                                         window.location.replace("{{ url('shopping_error') }}")
  441.                                     }
  442.                                     
  443.                                 },
  444.                                 error: function () {
  445.                                     showError();
  446.                         window.location.replace("{{ url('shopping_error') }}")
  447.                     }
  448.                 })                
  449.                  setTimeout(function() {
  450.                  // slider.switch_off()
  451.                  }, 3000);
  452.             })
  454.             let isloading = false;
  455.             if(!$('.show_update_card').attr("data-id")){
  456.                 $('.slider-onetouch').addClass('hiden-payment')
  457.             }
  458.              $('.modal_onetouch_payment').css('display','none');
  459.             $('.background_popup').css('display','none');
  460.             $('.modal_loading_payment').css('display','none');
  461.             $('.modal_loading_payment').css('display','none');
  463.             $('.show_update_shipping').on('click', function(){
  464.                 {% if Customer %}
  465.                     {% if Customer.name01 == "ゲスト" %}
  466.                         window.location.replace("{{ url('mypage_change') }}")
  467.                     
  468.                     {% elseif Customer.pref %}
  469.                             $('.update_shipping').removeClass("hidden");
  470.                             $('.update_card').addClass("hidden");
  471.                             $('.modal-order').css('display','none');
  472.                             $('.coundown-dialog-create-shipping').css('display','none')
  473.                             $('.coundown-dialog-update-shipping').css('display','block')
  474.                             let radioHTML = `<img class="loading_address" width="25px" height="25px" src="/html/template/default/assets/img/rolling.svg" />`;
  475.                             let shippingId = $('.show_update_shipping').attr('data-shippingid')
  476.                             
  477.                             $("#address-list").html(radioHTML);
  478.                             $.ajax({
  479.                                 url: "/products/show_shipping/" + $('.show_update_shipping').attr("data-id"),
  480.                                 type: "POST",
  481.                                 success: function (data) {
  482.                                     let Shippings = data.Shippings;
  483.                                     let radioHTML = "";
  484.                                     $.each(Shippings, function( index, value ) {
  485.                                         let id = value.id;
  486.                                         if(id == null){
  487.                                             id = 0;
  488.                                         }
  489.                                         let isChecked = '';
  490.                                         if(shippingId == id){
  491.                                             isChecked = 'checked'
  492.                                         }
  493.                                         radioHTML += '<label><input type="radio" '+ isChecked +' name="radio_address" value="' + id + '" ' + value.default + ' > ' + value.name01+value.name02+' ('+value.kana01+value.kana02+') 様'+' 〒'+value.postal_code+ ' ' +value.pref +value.addr01+value.addr02+' '+value.phone_number + '</label></br>';
  494.                                     });
  495.                                    // $(".show_update_card").html('お支払い');
  496.                                     $("#address-list").html(radioHTML);
  497.                                 },
  498.                                 error: function () {
  499.                                     showError();
  500.                                 }
  501.                             })
  502.                     {% else %}
  503.                         window.location.replace("{{ url('mypage_change') }}")
  504.                     {% endif %}
  505.                 {% endif %}
  506.             });
  508.             $('.show_update_card').on('click', function(){
  509.                 
  510.                 if($(this).hasClass('kg')){
  511.                     is_kg_family = true;
  512.                 } else if($(this).hasClass('ambassador')) {
  513.                     is_kg_family = 2;
  514.                 }
  515.                 else{
  516.                     is_kg_family = false;
  517.                 }
  518.                 ShowListCard()
  519.                 $(".submit-card").css('display','none');
  520.                 let radioHTML = `<img class="loading_address" width="25px" height="25px" src="/html/template/default/assets/img/rolling.svg" />`;
  521.                 $("#card-list").html(radioHTML);
  522.                 {% if Customer and Customer.pref %}
  523.                     let stripe_payment_method_id = $('.show_update_card').attr("data-id");
  524.                     let dataCard = {
  525.                         stripe_payment_method_id: stripe_payment_method_id,
  526.                     }
  527.                     $.ajax({
  528.                         url: "/products/show_card/" + "{{ Customer.id }}",
  529.                        type: "POST",
  530.                         data: dataCard,
  531.                         dataType: 'json',
  532.                        success: function (data) {
  533.                            let Cards = data.Cards;
  534.                            if(data.done == false || Cards == null){
  535.                                 $('.coundown-dialog-create-card').css('display','block')
  536.                                 $('.coundown-dialog-update-card').css('display','none')
  537.                                 let radioHTML = "固定決済クレジットカードがありません。";
  538.                                 $("#card-list").html(radioHTML);
  539.                                 $(".submit-card").css('display','none');
  540.                            }
  541.                            if(Cards != null && Cards.length > 0){
  542.                             let radioHTML = "";
  543.                             $.each(Cards, function( index, value ) {
  544.                                radioHTML += '<label class="card-item"><input type="radio" name="radio_card" value="' + value.id + '" ' + value.default + ' > <div> <span class="' + value.brand + '">' + value.brand+' 末尾 '+value.last4+ '</span>  <span class="exp">' + value.exp_month + `/` +value.exp_year+ '</span></div></label>';
  545.                             });
  547.                             $("#card-list").html(radioHTML);
  548.                             $(".submit-card").css('display','flex');
  549.                            }
  550.                            else{
  551.                             let radioHTML = "固定の決済クレジットカードがまだ登録されていません。";
  552.                             $("#card-list").html(radioHTML);
  553.                             $(".submit-card").css('display','none');
  554.                            }
  555.                            
  556.                         },
  557.                         error: function () {
  558.                             showError();
  559.                         }
  560.                     })
  561.                 {% endif %}
  563.             })
  564.             $('.show_total_payment').on('click', function(){
  565.                 const formatPrice = Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' });
  566.                 document.getElementById("payment_quantity").textContent = document.getElementById("productRole_quantity").textContent;
  567.                 ShowTotal()
  568.             })
  570.             $('.save-money').on('click', function(){
  571.                 showKgDetail();
  572.             })
  574.             function ShowTotal(){
  575.                 $('.update_shipping').addClass("hidden");
  576.                 $('.update_card').addClass("hidden");
  577.                 $('.total_payment').removeClass("hidden");
  578.                 $('.modal-order').css('display','none');
  579.                 $('.coundown-dialog-create-shipping').css('display','none')
  580.                 $('.coundown-dialog-update-card').css('display','block')
  581.                 $('.coundown-dialog-create-card').css('display','none')
  582.             }
  583.             function ShowListCard(){
  584.                 $('.update_shipping').addClass("hidden");
  585.                 $('.update_card').removeClass("hidden");
  586.                 $('.total_payment').addClass("hidden");
  587.                 $('.modal_kg_family').addClass("hidden");
  588.                 $('.modal_payment_kg').addClass("hidden");
  589.                 $('.modal_payment_ambassador').addClass("hidden");
  590.                 
  592.                 $('.modal-order').css('display','none');
  593.                 $('.coundown-dialog-create-shipping').css('display','none')
  594.                 $('.coundown-dialog-update-card').css('display','block')
  595.                 $('.coundown-dialog-create-card').css('display','none')
  596.             }
  597.             function showSuccess(){
  598.                 $('.loading').css('display','none');
  599.                 $('.complete').css('display','block');
  600.                 $('.loading').css('display','none');
  601.                 $('.content').text('決済は完了しました。'); 
  602.             }
  604.             function showKgDetail(){
  605.                 $('.modal-order').css('display','none');
  606.                 $('.modal_kg_bonus_detail').removeClass("hidden");
  607.                 $('.modal_onetouch_payment').css("background","#000");
  608.                 
  609.             }
  611.             function showError(){
  612.                 $('.loading').css('display','none');
  613.                 $('.error').css('display','block');
  614.                 $('.complete').css('display','none');
  615.                 $('.content').text('決済が失敗しました。');
  616.                 isloading = true; 
  617.             }
  618.             function loadingPayment(){
  619.                     $('.loading').css('display','block');
  620.                     $('.error').css('display','none');
  621.                     $('.complete').css('display','none');
  622.                     $('.content').text('決済中');
  623.             }
  624.             function closeLoading(){
  625.                 $('.loading').css('display','none');
  626.                 $('.error').css('display','none');
  627.                 $('.complete').css('display','none');
  628.             }
  629.             function showModal(){
  630.                 $('.modal_onetouch_payment').css('display','block');
  631.             }
  633.             $('#checkbox-resign').on('click', function(event) {
  634.                 $('.modal_kg_family').removeClass("hidden");
  635.                 $('.modal-order').css('display','none');
  636.             });
  638.             $('.btn-complete-close').on('click', function(event) {
  640.                 $('.modal_payment_kg_complete').css('display','none');
  641.                 if(!$('.resign-trial').attr("data-trial")){
  642.                     if($('#order_id').attr("data-regular") == 1){
  643.                         $('.open-one-touch-related-product').click();
  644.                     }else{
  645.                         $('.open-one-touch').click();
  646.                     }
  647.                 }else{
  648.                      $('.background_popup').css('display','none');
  649.                 }
  650.                 $('.resign-trial').css('display','none');
  651.             });
  653.             var $redirectCallback = function() {
  654.                 loadingOverlay();
  655.                 console.log([$(this),$(this).attr('data-path')])
  656.                 var url = $(this).attr('data-path')
  657.                 if(url){
  658.                     $('#shopping_order_redirect_to').val(url);
  659.                 }else{
  660.                     $('#shopping_order_redirect_to').val("/shopping");
  661.                 }
  662.                 $('#shopping-form').attr('action', '{{ url("shopping_redirect_to") }}').submit();
  663.                 setTimeout(function () {
  664.                     loadingOverlay("hide");
  665.                 }, 2000);
  666.             };
  668.             slider("slider-account", ()=>{
  669.                 $('.modal_onetouch_payment').css('display','none');
  670.                 $(".modal_loading_payment").css('display','block');
  671.                 loadingPayment()
  672.                 isloading = true;
  673.                 let stripe_payment_method_id = $('.show_update_card').attr("data-id");
  674.                 let stripe_customer_id = $('.ec-Payment').attr("data-stripe")
  675.                 let dataCheckout = {
  676.                     order_id : $('#order_id').val(),
  677.                     _shopping_order: {
  678.                         stripe_payment_method_id: stripe_payment_method_id,
  679.                         stripe_customer_id: stripe_customer_id,
  680.                         stripe_save_card: 1
  681.                     },
  682.                     is_one_touch: true
  683.                 };
  684.                             $.ajax({
  685.                                 url: "{{ url('execute_one_touch_checkout') }}",
  686.                                 type: "POST",
  687.                                 data: dataCheckout,
  688.                                 dataType: 'json',
  689.                                 success: function (data) {
  690.                                     if (data.need_verify) {
  691.                                         return verify3dsecure(data);
  692.                                     }
  694.                                     if (data.done) {
  695.                                         shopping_page = window.location.href == "{{ url('shopping') }}" ? 1 : 0;
  696.                                         if(data.gift_card == true){
  697.                                             $.ajax({
  698.                                                 url: "{{ url('update_gift_card') }}",
  699.                                                 type: "POST",
  700.                                                 data: {
  701.                                                     order_id : $('#shopping-form').attr("data-order"),
  702.                                                     is_shopping_page: shopping_page
  703.                                                 },
  704.                                                 dataType: 'json',
  705.                                                 success: function (data) {
  706.                                                     let curTime = new Date().getTime();
  707.                                                     localStorage.setItem("hide-modal-gift-card-{{app.user.id is defined ? app.user.id : ''}}",curTime);
  708.                                                     if(shopping_page == 1){
  709.                                                         $('.modal_loading_payment').css('display','none');
  710.                                                         $('.background_popup').css('display','none');
  711.                                                         $('#buy_gift_card_comfirm').modal('show');
  712.                                                     }else{
  713.                                                         showSuccess();
  714.                                                         window.location.replace("{{ url('shopping_complete') }}")
  715.                                                     }
  716.                                                 },
  717.                                                 error: function () {
  718.                                                     showError();
  719.                                                     $('.background_popup').css('display','none');
  720.                                                     $('.modal_loading_payment').css('display','none');
  721.                                                     $('#shopping_order_use_point').val(data.use_point);
  722.                                                     window.location.replace("{{ url('shopping_error') }}")
  723.                                                 }
  724.                                             })
  725.                                         }
  726.                                         else if(data.rec_order_id){
  727.                                             showSuccess();
  728.                                             window.location.replace(data.url.targetUrl)
  729.                                         }
  730.                                         else{
  731.                                             showSuccess();
  732.                                             window.location.replace("{{ url('shopping_complete') }}")
  733.                                         }
  734.                                     } else {
  735.                                         showError();
  736.                                         window.location.replace("{{ url('shopping_error') }}")
  737.                                     }
  738.                                     
  739.                                 },
  740.                                 error: function () {
  741.                                     showError();
  742.                         window.location.replace("{{ url('shopping_error') }}")
  743.                     }
  744.                 })                
  745.                  setTimeout(function() {
  746.                  // slider.switch_off()
  747.                  }, 3000);
  748.             })
  750.             function CheckingCardModal(){
  751.                 {# if($('.show_update_card').attr("data-id")){
  752.                     $('.slider').removeClass('hiden-payment')
  753.                 }else{
  754.                     $('.slider').addClass('hiden-payment')
  755.                 } #}
  756.             }
  758.             function closePopup(){
  759.                 $('.background_popup').click(function(){
  760.                     if(isloading==false){
  761.                         $('.update_shipping').addClass("hidden");
  762.                         $('.modal_onetouch_payment').css('display','none');
  763.                         $('.background_popup').css('display','none');
  764.                         $('.modal_loading_payment').css('display','none');
  765.                         $('.modal-order').css('top','20%');
  766.                         $('.modal_kg_family').addClass("hidden");
  767.                         $('.modal_payment_kg').addClass("hidden");
  768.                     }
  769.                     }
  770.                 );
  771.             }
  773.             {% if Customer %}
  774.                 slider("payment-kg-slider",()=>{
  775.                     loadingPayment();
  776.                     $('.modal_onetouch_payment').css('display','none');
  777.                     $('.modal_loading_payment').css('display','block');
  778.                     isloading = true;
  779.                     let stripe_payment_method_id = $('.show_update_card').attr("data-id");
  780.                     let stripe_customer_id = $('.ec-Payment').attr("data-stripe")
  781.                     let dataCheckout = {
  782.                         order_id : $('#order_id').val(),
  783.                         _shopping_order: {
  784.                             stripe_payment_method_id: stripe_payment_method_id,
  785.                             stripe_customer_id: stripe_customer_id,
  786.                             stripe_save_card: 1,
  787.                             is_trial_family: true
  788.                         }
  789.                     };
  790.                     $.ajax({
  791.                         url: "{{ url('execute_one_touch_checkout') }}",
  792.                         type: "POST",
  793.                         data: dataCheckout,
  794.                         dataType: 'json',
  795.                         success: function (data) {
  796.                         if (data.need_verify) {
  797.                             return verify3dsecure(data);
  798.                         }
  800.                         if (data.done) {
  801.                                 $('.modal_payment_kg').addClass("hidden");
  802.                                 $('.modal-order').css('display','block');
  803.                                 $('.modal_loading_payment').css('display','none');
  805.                                 $('.modal_onetouch_payment').css('display','none');
  806.                                 $('.modal_payment_kg_complete').css('display','block');
  807.                                 $('.background_popup').css('display','block');
  809.                             $('.no-member').css('display','none');
  810.                             $('.member').css('display','block');
  811.                             $('#pt_family_benefits').css("display","");
  812.                             $('#pt_normal').css("display","none");
  814.                             $('#save-value-normal').css("display","");
  815.                             $('#save-value-benefits').css("display","none");
  818.                             $('#delivery_kg_family').css("display","block");
  819.                             $('#discount_total_li').css("opacity","0");
  820.                             
  822.                             let total = $('#productRole_totalPayment').attr("total");
  823.                             let delivery = $('#productRole_totalPayment').attr("delivery");
  824.                             const formatPrice = Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' });
  827.                             let payment = formatPrice.format(total - delivery);
  828.                             $('#productRole_totalPayment').text(payment);
  829.                             $('#payment_total').text(payment);
  831.                         } else {
  832.                             showError();
  833.                             window.location.replace("{{ url('shopping_error') }}")
  834.                         }
  836.                         },
  837.                         error: function () {
  838.                             showError();
  839.                             window.location.replace("{{ url('shopping_error') }}")
  840.                         }
  841.                     })
  842.                 })
  844.                 slider("payment-ambassador-slider",()=>{
  845.                     loadingPayment();
  846.                     $('.modal_onetouch_payment').css('display','none');
  847.                     $('.modal_loading_payment').css('display','block');
  848.                     isloading = true;
  849.                     let stripe_payment_method_id = $('.show_update_card').attr("data-id");
  850.                     let stripe_customer_id = $('.ec-Payment').attr("data-stripe")
  851.                     let dataCheckout = {
  852.                         order_id : $('#order_id').val(),
  853.                         _shopping_order: {
  854.                             stripe_payment_method_id: stripe_payment_method_id,
  855.                             stripe_customer_id: stripe_customer_id,
  856.                             stripe_save_card: 1,
  857.                             free_trial: true
  858.                         }
  859.                     };
  860.                     $.ajax({
  861.                         url: "{{ url('execute_one_touch_checkout') }}",
  862.                         type: "POST",
  863.                         data: dataCheckout,
  864.                         dataType: 'json',
  865.                         success: function (data) {
  866.                             if (data.need_verify) {
  867.                                 return verify3dsecure(data);
  868.                             }
  870.                             if (data.done) {
  871.                                 showSuccess()
  872.                                 window.location.replace("{{ url('shopping_complete') }}")
  873.                             } else {
  874.                                 showError();
  875.                                 window.location.replace("{{ url('shopping_error') }}")
  876.                             }
  877.                         },
  878.                         error: function () {
  879.                             showError();
  880.                             window.location.replace("{{ url('shopping_error') }}")
  881.                         }
  882.                         
  883.                     })
  884.                 })
  885.             {% endif %}
  886.         })
  887.         
  888.     </script>
  890.