app/template/default/Item/NewCartArea/cart_matrix.twig line 1

Open in your IDE?
  1. <style>
  2.     .gray {
  3.         background: #dddddd;
  4.     }
  5.  </style>   
  6. {% set formId = "form-#{loop.index0}" %}
  7. {% set anchor = "goods-#{item.goods.goodsId}" %}
  8. {% if parent %}
  9. <input type="hidden" name="returnUrl" value="{{ url('item/detail', { 'id': parent.goods.itemId }) }}#{{ anchor }}">
  10. {% endif %}
  11. <div class="anchor-wrapper">
  12.     <a class="anchor" id="{{ anchor }}"></a>
  13.     <div class="new-cart-area">
  14.         {% if NewUI.ColorSelector.Enabled %}
  15.         <div class="col1">
  16.             <div class="current-sku-info">
  17.                 <div class="current-color">
  18.                     <div class="image-holder">
  19.                         <img class="current-color-img" src="">
  20.                     </div>
  21.                     <div class="tile-name"></div>
  22.                     <div class="title">選択中のカラー</div>
  23.                 </div>
  24.                 <div class="goods-label-list">
  25.                     {{ showGoodsLabelList(item.goods) | raw }}
  26.                 </div>
  27.             </div>
  28.         </div>
  29.         {% endif %}
  30.         <div class="col2">
  31.             <div class="select-sku-panel">
  32.                 {% if NewUI.ColorSelector.Enabled %}
  33.                 <div class="select-color-panel">
  34.                     {% if NewUI.ColorSelector.ShowCaption %}
  35.                     <div class="title required">カラーを選択</div>
  36.                     {% endif %}
  37.                     <div class="horizontal-menu color-selector">
  38.                         {% for index, color in item.colorList %}
  39.                             {% if not color.isHidden %}
  40.                             <div class="menu-item">
  41.                                 <div class="color-tile{% if index == "main" or 0 %} selected{% endif %}" data-gcl-id="{{ color.gclId }}">
  42.                                     <div class="image-holder{% if color.isSokujitsuHassou %} sokujitsu-hassou{% endif %}">
  43.                                         {% if color.itemSashikomiImage is not empty %}
  44.                                         <img src="https://img0.land-mark.biz/ut_img/{{ color.itemSashikomiImage.path }}">
  45.                                         {% elseif item.itemHiraokiImage is not empty %}
  46.                                         <img src="{{ item.itemHiraokiImage.path }}">
  47.                                         {% endif %}
  48.                                     </div>
  49.                                     <div class="tile-name">{{ color.colorName }}({{ color.janShiireColor }})</div>
  50.                                 </div>
  51.                             </div>
  52.                             {% endif %}
  53.                         {% endfor %}
  54.                     </div>
  55.                 </div>
  56.                 {% endif %}
  57.                 {% if NewUI.SizeSelector.Enabled %}
  58.                 <div class="select-size-panel">
  59.                     {% if NewUI.SizeSelector.ShowCaption %}
  60.                     <div class="title required">サイズ・数量を選択</div>
  61.                     {% endif %}
  62.                     {% for j, color in item.goods.goodsColorList %}
  63.                     <div class="size-selector{% if j == 0 %} active{% endif %}" data-gcl-id="{{ color.gclId }}">
  64.                         <table>
  65.                             <colgroup>
  66.                                 <col class="size" />
  67.                                 <col class="price" />
  68.                                 <col class="quantity" />
  69.                                 <col class="stock" />
  70.                             </colgroup>
  71.                             <thead>
  72.                                 <tr class="head">
  73.                                     <th>サイズ</th>
  74.                                     <th>販売価格(税込)</th>
  75.                                     <th>数量</th>
  76.                                     <th>在庫状況</th>
  77.                                 </tr>
  78.                             </thead>
  79.                             <tbody>
  80.                             {% if visibleSizes is empty %} 
  81.                                 {% set visibleSizes = item.sizeList|filter(size => not size.hidden) %}
  82.                             {% endif %}
  83.                             {% set indexLoop = 0 %}
  84.                             {% for size in visibleSizes %}
  85.                                 {% if skuMap is empty %}
  86.                                     {% set sku = item.getSkuByIdentifiers(color.gclId, size.gpId , indexLoop) %}
  87.                                 {% else %}
  88.                                     {% set sku = skuMap[color.gclId][size.gpId] ?? null %}
  89.                                 {% endif %}
  90.                                 {% set indexLoop = indexLoop + 1 %}
  91.                                 {% if sku is not empty %}
  92.                                 <tr>
  93.                                     <td class="size">
  94.                                         <span class="size_name{% if sku.isSokujitsuHassouAvailable %} sokujitsu{% endif %}">{{ size.sizeName }}</span>
  95.                                     </td>
  96.                                     <td class="price"><span class="price">{{ size.price|LmPrice }}(税込)</span></td>
  97.                                     {% set gray = sku.noDisp %}
  98.                                     <td class="quantity">
  99.                                         {% if isMobile() %}
  100.                                         <select name="product_matrix[{{ sku.janId }}]" class="kazu{% if sku.backOrder == constant('\\Lm\\Entity\\Sku::BACK_ORDER_RESERVATION') %} reservation{% endif %}"{% if (sku.backOrder != constant('\\Lm\\Entity\\Sku::BACK_ORDER_RESERVATION') and sku.stockAvailability == constant('\\Lm\\Entity\\Sku::STOCK_AVL_OUT_OF_STOCK')) or gray %} disabled{% endif %}>
  101.                                             {% for i in range(0, 100) %}
  102.                                             <option value="{{ i }}">{% if i == 0 %}数量{% else %}{{ i }}{% endif %}</option>
  103.                                             {% endfor %}
  104.                                         </select>
  105.                                         {% else %}
  106.                                         <input type="text" name="product_matrix[{{ sku.janId }}]" class="kazu{% if sku.backOrder == constant('\\Lm\\Entity\\Sku::BACK_ORDER_RESERVATION') %} reservation{% endif %}"{% if (sku.backOrder != constant('\\Lm\\Entity\\Sku::BACK_ORDER_RESERVATION') and sku.stockAvailability == constant('\\Lm\\Entity\\Sku::STOCK_AVL_OUT_OF_STOCK')) %} disabled{% endif %} min="0" value="0">
  107.                                         <div class="btn-up-down">{#
  108.                                             #}<span class="btn-up">▲</span>{#
  109.                                             #}<span class="btn-down">▼</span>{#
  110.                                         #}</div>
  111.                                         {% endif %}
  112.                                     </td>
  113.                                     <td class="stock{% if gray is defined and gray %} gray{% endif %}">
  114.                                         <span class="zaiko">
  115.                                         {% if sku.backOrder > constant('\\Lm\\Entity\\Sku::BACK_ORDER_UNAVAILABLE') %}
  116.                                         {% elseif sku.stockAvailability != constant('\\Lm\\Entity\\Sku::STOCK_AVL_OUT_OF_STOCK') %}
  117.                                             {% if not gray %}
  118.                                                 <span class="zaiko_number{% if sku.stockAvailability == constant('\\Lm\\Entity\\Sku::STOCK_AVL_LOW_STOCK') %} low-stock{% endif %}">{{ sku.stockTotal }}</span>
  119.                                             {% endif %}
  120.                                         {% else %}
  121.                                             {% if not gray %}
  122.                                                 在庫切れ
  123.                                             {% endif %}
  124.                                         {% endif %}
  125.                                         {% if sku.sokujitsuHassouAvailable and not gray %}
  126.                                             {# dump({ "sku.stockBichiku": sku.stockBichiku, "sku.isBichikuReady": sku.isBichikuReady }) #}
  127.                                             <span class="zaiko_number sokujitsu">{{ sku.stockSokujitsu }}</span>
  128.                                         {% endif %}
  129.                                         {% if sku.backOrder > constant('\\Lm\\Entity\\Sku::BACK_ORDER_UNAVAILABLE') %}
  130.                                             <div class="nyuka-yotei">
  131.                                                 入荷予定日<br>
  132.                                                 {{ formatStockArrivalDate(sku.bichikuNyukaDate ?: sku.nyukaDate) }}
  133.                                             </div>
  134.                                         {% else %}
  135.                                         {% endif %}
  136.                                         </span>
  137.                                     </td>
  138.                                 </tr>
  139.                                 {% endif %}
  140.                             {% endfor %}
  141.                             </tbody>
  142.                         </table>
  143.                     </div>
  144.                     {% endfor %}
  145.                 </div>
  146.                 {% endif %}
  147.             </div>
  148.             {% if parent %}
  149.             <div>
  150.                 <button type="button" class="btn-v2 forward btn_next_item" alt="※クリックすると画面が下に移動します">次のセット商品を選ぶ</button>
  151.             </div>
  152.             {% endif %}
  153.         </div>
  154.     </div>
  155. </div>