app/template/default/Item/matrix.twig line 1

Open in your IDE?
  1. <style>
  2.     .add-to-cart{
  3.         cursor:pointer;
  4.     }
  5.     #dialog {
  6.         background-color: #fffad1;
  7.     }
  8.     #dialog .kazu {
  9.         width: 31px;
  10.         height: 25px;
  11.     }
  12.     #dialog .matrix * {
  13.         font-family: Arial, Helvetica, 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif !important;
  14.     }
  16.     table.matrix{
  17.         border-collapse: initial;
  18.         border-spacing: 2px;
  19.     }
  20.     .matrix {
  21.         margin: 0;
  22.         width: 793px;
  23.     }
  24.     .matrix th {
  25.         padding: 2px;
  26.         font-size:18px;
  27.         line-height:105%;
  28.         text-align:center;
  29.     }
  30.     .matrix tr {
  31.         line-height: 1.8;
  32.         font-size: 12px;
  33.     }
  34.     .matrix td {
  35.         font-size: 12px;
  36.         line-height: 2em;
  37.         padding: 0px !important;
  38.         width: auto;
  39.     }
  40.     .matrix tr th:first-child, .matrix tr td:first-child {
  41.         width: 14px;
  42.         min-width: 14px;
  43.         max-width: 14px;
  44.         overflow: hidden;
  45.     }
  46.     .matrix .bgGray{
  47.         background: #dddddd;
  48.         margin: 3px;
  49.     }
  50.     .matrix .color-name {
  51.         width: 130px;
  52.     }
  53.     .matrix .color-name div {
  54.         max-width: 210px;
  55.     }
  56.     .matrix .size-column {
  57.         min-width: 70px;
  58.         width: 70px;
  59.         font-size: 18px;
  60.     }
  61.     .matrix .bgPink{
  62.         background: #ffc6e2;
  63.     }
  64.     .matrix_size {
  65.     }
  66.     .matrix_price_wrapper {
  67.     }
  68.     .matrix .matrix_price {
  69.         color: #CC3366;
  70.         font-size:14px;
  71.         font-weight:normal;
  72.         margin-right: 3px;
  73.     }
  74.     .matrix_price_yen {
  75.         color: #c36;
  76.         font-weight: normal;
  77.         font-size: 14px;
  78.     }
  79.     .matrix_price_tax {
  80.         display: block;
  81.         color: #c36;
  82.         font-weight: normal;
  83.         font-size: 14px;
  84.     }
  85.     .matrix span { margin:0px;padding:0px;}
  86.     .matrix .kazu-focus-background-color{
  87.         background-color: yellow !important;
  88.     }
  89.     .matrix input.kazu {
  90.         ime-mode: disabled;
  91.         border: 1px solid #7F9DB9;
  92.     }
  93.     input.kazu {
  94.         width: 31px;
  95.         height: 25px;
  96.         padding: 2px 1px 1px;
  97.         line-height: 100%;
  98.         font-size: 13px;
  99.         margin: 4px 0 4px 2px;
  100.         font-family: Arial,Helvetica,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
  101.     }
  102.     .matrix .zaiko {
  103.         font-size: 13px;
  104.         font-weight: normal;
  105.         line-height: 1em;
  106.         display: inline-block;
  107.         vertical-align: bottom;
  108.         margin-bottom: 3px;
  109.         white-space: nowrap;
  110.     }
  111.     .matrix .zaiko_comment {
  112.         font-size: 11px;
  113.        /* margin-left: 5px;*/
  114.     }
  115.     .matrix .zaiko_slash {
  116.         margin-left: 2px;
  117.     }
  118.     .matrix .zaiko_number {
  119.         font-size: 11px;
  120.     }
  121.     .matrix .zaiko-remaining {
  122.         color: #f00;
  123.         text-align: center;
  124.         margin: 2px 0;
  125.     }
  126.     .matrix .selling-color {
  127.         background-color: #f00;
  128.         color: #fff;
  129.         border-radius: 3px;
  130.         display: inline-block;
  131.         padding: 3px;
  132.         margin-left: 4px;
  133.         line-height: 1em;
  134.     }
  135.     .matrix span.rest {
  136.         font-size: 11px;
  137.         color: red;
  138.         display: block;
  139.         margin-left: 2px;
  140.     }
  141.     .matrix .least-10 {
  142.         margin: 2px 0;
  143.         color: red;
  144.     }
  145.     input.kazu.reservation {
  146.         border: 2px solid #FF0000;
  147.         padding: 1px 1px 1px 1px;
  148.     }
  149.     .nyuka-yotei {
  150.         color: #138a19;
  151.         line-height: 120%;
  152.         margin: 3px;
  153.         text-align: center;
  154.         white-space: nowrap;
  155.     }
  156.     .soldout {
  157.         color: #696969;
  158.         height: 20px;
  159.         text-align: center;
  160.     }
  161.     .sub-color-rgb {
  162.         display: inline-block;
  163.         width: 20px;
  164.         height: 20px;
  165.         border: 1px solid #ddd;
  166.     }
  167.     .sub-color-rgb,
  168.     .sub-color-name {
  169.         vertical-align: middle;
  170.     }
  171. </style>
  173. {{ include('Item/error_modal.twig') }}
  175. <form name="form01" id="form01" method="POST">
  176. <input type="hidden" id="OlToken" name="OlToken" value="{{ OlToken('matrix') }}">
  177. <input type="hidden" id="goodsId" name="goodsId" value="{{ goods.getGoodsId }}">
  179. {# カラーが10以上ある場合は上にもカートボタンを表示する #}
  180. {% if isShowMatrixButtonAbove %}
  181. {{ include('Item/matrix_button.twig') }}
  182. {% endif %}
  184. <img width="334px" height="50px" src="https://img0.land-mark.biz/ut_img/public_images/image_dt/cart_step1.gif" alt="ご希望のサイズ・カラーの枠に数字を入力"/>
  186.     {{ inventoryMatrix | raw }}
  188. {{ include('Item/matrix_button.twig') }}
  189. </form>
  191. <script type="text/javascript" src="/javascripts/fixed-category-header.js?20170130_01"></script>
  192. <script src="/javascripts/debounce.js?20240718"></script>
  193. <script type="text/javascript">
  194. $(function () {
  196.     var isProgress = false;
  198.     $(".add-to-cart").on("click", debounce(function(event){
  199.     var $form = $("#form01");
  200.     let getClass = $(this).children().attr('class');
  201.     let EstimateType = "{{EstimateType()}}";
  202.     console.log(EstimateType);
  203.         if (isProgress){
  204.             return;
  205.         }
  206.         isProgress  = true
  208.     if(getClass == 'muji'){
  209.         var actionUrl="/cart/add_Normal";
  210.     }else if(getClass == 'print' || getClass == 'susoage'){
  211.         var actionUrl="/cart/valid_estimate";
  212.     }else if(getClass == 'sample'){
  213.         var actionUrl="/cart/add_sample";
  214.     }
  216.     $.ajax({
  217.         type: "POST",
  218.         url: actionUrl,
  219.         data: $form.serialize(),
  220.         dataType: 'json',
  221.         timespan: 1000,
  222.         })
  223.         .done(function(data, textStatus, jqXHR) {
  224.             console.log(jqXHR.status); // 200
  225.             console.log(textStatus); // success
  226.             console.log(data);
  227.             if(data.status=='OK'){
  228.                 console.log(data.data);
  229.                 if(getClass == 'print' || getClass == 'susoage'){
  230.                     $form.attr('action','/estimate/');
  231.                     $form.submit();
  232.                 }else{
  233.                     window.location.href= '/cart';
  234.                 }
  235.             }
  236.             if(data.status=='Error'){
  237.                 console.log(data.Errors);
  238.                 var errorMsg="";
  239.                 $.each(data.Errors ,function(index,val){
  240.                     errorMsg += val.message+"\n";
  241.                 });
  242.                 if (data.show_error_modal) {
  243.                     showErrorModal(errorMsg)
  244.                 } else {
  245.                     alert(errorMsg);
  246.                     $form[0].reset();
  247.                 }
  248.                 $('#OlToken').val(data.OlToken);
  249.             }
  250.         })
  251.         .fail(function(jqXHR, textStatus, errorThrown) {
  252.             console.log(jqXHR.status); // 404...
  253.             console.log(textStatus); // error
  254.             console.log(errorThrown); // NOT FOUND
  255.             $form[0].reset();
  256.             alert('送信エラー:もう一度やり直してください');
  257.             location.reload();
  258.         })
  259.         .always(function() {
  260.             console.log("complete"); // complete
  261.             isProgress = false;
  262.         });
  263.     }, 500));
  264. });
  265. </script>
  267. {% if Product is defined and Product and Product.freearea %}
  268.     <div class="ec-productRole__description">
  269.         {{ include(template_from_string(Product.freearea)) }}
  270.     </div>
  271. {% endif %}