app/template/smartphone/Common/SizeTable.twig line 1

Open in your IDE?
  1. <div id="item-detail">
  2.     <div id="overlay"></div>
  4.     <div id="modal-window" class="modal-window">
  5.         <div id="modal-title">カートに入れる</div>
  6.         <div class="modal-content">
  7.             <p class="modal-explain">商品をカートに追加しました。</p>
  8.             <div class="modal-btns">
  9.                 <a onclick="closeModalWindow();" href="javascript:void(0);"><div class="modal-btn-back">買い物を続ける</div></a>
  10.                 <a onclick="closeModalWindow();location.href='/sp/cart-muji'" href="javascript:void(0);"><div id="modal-btn-cart">カートを見る</div></a>
  11.             </div>
  12.         </div>
  13.     </div>
  14.     <div id="modal-window-sample" class="modal-window">
  15.         <div id="modal-title-sample">貸出サンプル申し込み</div>
  16.         <div class="modal-content">
  17.             <p class="modal-explain">サンプルをカートに追加しました。</p>
  18.             <div class="modal-btns">
  19.                 <a onclick="closeModalWindowSample();" href="javascript:void(0);"><div class="modal-btn-back">続ける</div></a>
  20.                 <a onclick="closeModalWindowSample();location.href='/sp/cart-sample'" href="javascript:void(0);"><div id="modal-btn-cart-sample" style="font-size: 13px;">カートを見る</div></a>
  21.             </div>
  22.         </div>
  23.     </div>
  25.     <div id="alert-window" class="alert-window">
  26.         <div class="alert-content">
  27.             <p class="alert-explain"></p>
  28.             <div class="alert-btns">
  29.                 <a class="alert-btn-back" onclick="closeAlertWindow();" href="javascript:void(0);">OK</a>
  30.             </div>
  31.         </div>
  32.     </div>
  34.     <div id="modal-window-tel-order" class="modal-window">
  35.         <div id="modal-title-tel-order">&nbsp;</div>
  36.         <div class="modal-content">
  37.             <div class="modal-explain">
  38.                 <p>ご不明な点を、商品を知り尽くした<br>専門オペレーターに確認しながら<br>ご注文が可能です。</p>
  39.                 <p class="tel-order-info"><span>●</span>受付時間　9:00〜18:00<span>(平日)</span></p>
  40.                 <p class="tel-order-company">運営：(株)ランドマーク</p>
  41.                 <a href="tel:0120-115-116" class="call-btn"><img src="https://img0.land-mark.biz/ut_img/public_images/image_dt/btn_tel_order_call_sp.jpg" border="0" alt="発信" /></a>
  42.             </div>
  43.             <div class="modal-btns">
  44.                 <a onclick="closeModalWindowTelOrder();" href="javascript:void(0);"><div class="tel-order-close-btn"><span>&times;</span></div></a>
  45.             </div>
  46.         </div>
  47.     </div>
  49.     <div id="overlay-scrollable">
  50.         <style type="text/css">
  51.         #overlay-scrollable {
  52.             visibility: hidden;
  53.             position: fixed;
  54.             left: 0;
  55.             top: 0;
  56.             width: 100%;
  57.             height: 100%;
  58.             z-index: 1000;
  59.             background-color: rgba(0,0,0,.7);
  60.             overflow: scroll;
  61.         }
  62.         .modal-window-scrollable {
  63.             display: none;
  64.             position: absolute;
  65.             width: 100%;
  66.             height: 100%;
  67.             overflow: scroll;
  68.             padding: 5%;
  69.         }
  70.         #size-chart-table {
  71.             width: 90%;
  72.         }
  73.         </style>
  74.     </div>
  75.     <div id="modal-window-size-chart" class="modal-window-scrollable">
  76.         <style>
  77.             #size-chart {
  78.                 color: black;
  79.                 padding-top: 20px;
  80.             }
  81.             #size-chart-table {
  82.                 width: 100%;
  83.             }
  84.             #size-chart td,
  85.             #size-chart th {
  86.                 border: 1px solid #aaa;
  87.                 padding: .4em;
  88.                 font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  89.                 font-size: 3.2vw;
  90.                 font-weight: 400;
  91.             }
  92.         </style>
  93.         <div id="size-chart" class="display-3">
  94.             <table id="size-chart-table">
  95.                 <thead id="size-chart-head">
  96.                     <tr>
  97.                         <th style="background-color: #e6e6e6;"></th>
  98.                         <th style="padding: 10px; background-color: #e6e6e6;">カラー</th>
  99.                         <th style="padding: 10px; background-color: #e6e6e6;">サイズ</th>
  100.                         <th style="padding: 10px; background-color: #e6e6e6;">在庫数</th>
  101.                     </tr>
  102.                 </thead>
  103.                 <tbody id="size-chart-body">
  104.                 </tbody>
  105.             </table>
  106.         </div>
  107.     </div>
  108.     <div id="item-size-chart">
  109.         <div style="margin-top: 10px;" id="item-size-chart">
  110.             <div id="size-chart" class="display-2">
  111.                 <style>
  112.                     #item-size-chart {
  113.                         color: black;
  114.                     }
  115.                     .size-list-menu, .size-list-menu th {
  116.                         background-color: #BAD9FF;
  117.                         border: 1px solid #ccc;
  118.                         padding: 5px;
  119.                     }
  120.                     .size-list-menu td {
  121.                         padding: 5px;
  122.                     }
  123.                     .aiueo {
  124.                         background-color: #f4f9ff;
  125.                     }
  126.                     .two-step-messages {
  127.                         font-size: 14px;
  128.                         text-align: left;
  129.                         border-bottom: 1px solid #eee;
  130.                         padding-bottom: 3px;
  131.                         margin-top: 5px;
  132.                     }
  133.                     .size-name-header {
  134.                         background-color: #dddddd;
  135.                     }
  136.                     .size-header {
  137.                         background-color: rgb(226, 222, 163);
  138.                     }
  139.                     .number {
  140.                         text-align: right;
  141.                     }
  142.                     #blink {
  143.                         color: #F00;
  144.                     }
  145.                     #size-chart .size_table_comment {
  146.                         margin: 0.4em auto 0 auto;
  147.                         width: 95%;
  148.                         line-height: 1.2;
  149.                         margin-top: 0.4em;
  150.                         font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif !important
  151.                     }
  152.                     .iteme_page_sphone #item-detail #item-size-chart #size-chart table td {
  153.                         padding: 6px 0 3px !important;
  154.                         text-align: center !important;
  155.                     }
  156.                     #item-size-chart table tbody tr td {
  157.                         overflow-wrap: break-word;
  158.                     }
  159.                 </style>
  160.                     <p class="size_table_caption">{{ goods.goodsNewName }}のサイズ表</p>
  161.                 <table>
  162.                     <tbody>
  163.                     <tr>
  164.                         <th class="size-name-header">サイズ</th>
  165.                         {% for sizeName in SizeList.size %}
  166.                             <th class="size-name-header">{{sizeName}}</th>
  167.                         {% endfor %}
  168.                     </tr>
  169.                     {% for key, data in SizePosition %}
  170.                         <tr>
  171.                             <th class="size-header">{{data.position}}</th>
  172.                             {% for sizeVal in data.val %}
  173.                                 <td class="number" {% if data.count[loop.index0] != "" %} colspan='{{data.count[loop.index0]}}'{% endif %}>
  174.                                     {{sizeVal}}
  175.                                 </td>
  176.                             {% endfor %}
  177.                         </tr>
  178.                     {% endfor %}
  179.                     {% if SizeList.comment is defined %}
  180.                         <tr>
  181.                             <th class="size-header">備考</th>
  182.                             {% for sizeVal in SizeList.comment %}
  183.                                 <td>{{sizeVal}}<br/></td>
  184.                             {% endfor %}
  185.                         </tr>
  186.                     {% endif %}
  187.                     </tbody>
  188.                 </table>
  189.                 {% if SizeList is defined and SizeList.size and data.goods_size_guide_comment is defined %}
  190.                     <p class="size_table_comment">{{ data.goods_size_guide_comment | raw}} </p>
  191.                 {% endif %}
  192.             </div>
  193.         </div>
  194.     </div>
  195. </div>
  196. <style>
  197. #item-detail #main_banner_wrapper {
  198.     position: relative;
  199.     margin: 0 auto;
  200.     width: 498px;
  201.     overflow: hidden;
  202.     text-align: center;
  203. }
  204. #main_banner .slide-img:nth-child(n+2) {
  205.     display: none;
  206. }
  208. </style>