app/template/smartphone/Cart/index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block stylesheet %}
  4.     <style>
  5.         .cart-wrapper {
  6.             margin: 10px;
  7.         }
  9.         .cart-item {
  10.             display: flex;
  11.             margin-bottom: 20px;
  12.             border: 1px solid #ccc;
  13.             padding: 10px;
  14.             border-radius: 8px;
  15.             background: #fff;
  16.         }
  18.         .cart-item-image img {
  19.             width: 100px;
  20.             height: auto;
  21.             object-fit: cover;
  22.             border-radius: 8px;
  23.         }
  25.         .cart-item-info {
  26.             flex: 1;
  27.             margin-left: 10px;
  28.             display: flex;
  29.             flex-direction: column;
  30.             justify-content: space-between;
  31.         }
  33.         .cart-item-title a {
  34.             font-weight: bold;
  35.             color: #333;
  36.         }
  38.         .cart-item-price,
  39.         .cart-item-subtotal,
  40.         .cart-item-quantity,
  41.         .cart-item-delete {
  42.             margin: 5px 0;
  43.         }
  45.         .quantity-control {
  46.             display: flex;
  47.             align-items: center;
  48.             gap: 10px;
  49.         }
  51.         .quantity-control a img {
  52.             width: 20px;
  53.             height: 20px;
  54.         }
  56.         .cart-total {
  57.             text-align: right;
  58.             font-weight: bold;
  59.             margin: 10px 0;
  60.             font-size: 18px;
  61.         }
  63.         .cart-buttons {
  64.             display: flex;
  65.             justify-content: center;
  66.             gap: 20px;
  67.             margin: 20px 0;
  68.         }
  70.         .cart-buttons a img {
  71.             width: 150px;
  72.         }
  74.         .quantity-label-and-control {
  75.             display: flex;
  76.             align-items: center;
  77.             gap: 10px; /* ラベルとボタンの間 */
  78.         }
  80.         .quantity-label-and-control .label {
  81.             white-space: nowrap; /* ラベル改行防止 */
  82.             font-weight: bold;
  83.         }
  85.         .quantity-control {
  86.             display: flex;
  87.             align-items: center;
  88.             gap: 10px; /* ボタンと数量の間 */
  89.         }
  91.         .quantity-control a img {
  92.             width: 20px;
  93.             height: 20px;
  94.         }
  96.     </style>
  97. {% endblock %}
  99. {% block main %}
  101. <!DOCTYPE html>
  102. <html>
  103. <head>
  104. <meta charset="UTF-8">
  105. {# ▼ ブロック：DispHtag ▼ #}
  106. {{ include('Block/DispHtag.twig') }}
  107. {# ▲ ブロック：DispHtag ▲ #}
  108. <title>ベースボール・マガジン社　BBM＠BOOK CART</title>
  109. <meta name="description" content="ベースボール・マガジン社が運営する総合スポーツサイト。ベースボール・マガジン社発行の書籍・雑誌・スポーツカードなどの新着情報、各競技の技術情報や専門家によるコラムなど、スポーツファンを応援する情報が満載です。">
  110. <meta name="keywords" content="ベースボールマガジン社,BBM">
  111. {# ▼ ブロック：DispHead ▼ #}
  112. {{ include('Block/DispHead.twig') }}
  113. {# ▲ ブロック：DispHead ▲ #}
  114. </head>
  116. <body id="general">
  118. {# ▼ ブロック：DispBtag ▼ #}
  119. {{ include('Block/DispBtag.twig') }}
  120. {# ▲ ブロック：DispBtag ▲ #}
  122. {# ▼ ブロック：DispHeader ▼ #}
  123. {{ include('Block/DispHeader.twig') }}
  124. {# ▲ ブロック：DispHeader ▲ #}
  126. <div id="container" style="background-image: linear-gradient(#f9f9f9, #eee);">
  128.     <div id="contentbox">
  130.         <h2 class="title">現在のカゴの中</h2>
  132.         {% if totalQuantity > 0 %}
  133.             <div>
  134.                 <p>カゴの中の商品の合計金額は{{ totalPrice|number_format }}円です。</p>
  136. {% for CartIndex, Cart in Carts %}
  137.     {% set cartKey = Cart.cart_key %}
  138.     <div class="cart-wrapper">
  139.         {% for CartItem in Cart.CartItems %}
  140.             {% set ProductClass = CartItem.ProductClass %}
  141.             {% set Product = ProductClass.Product %}
  143.             <div class="cart-item">
  144.                 <div class="cart-item-image">
  145.                     <a target="_blank" href="{{ url('product_detail', {id : Product.id} ) }}">
  146.                         <img src="{{ asset(Product.MainListImage|no_image_product, 'save_image') }}" alt="{{ Product.name }}">
  147.                     </a>
  148.                 </div>
  149.                 <div class="cart-item-info">
  150.                     <div class="cart-item-title">
  151.                         <a target="_blank" href="{{ url('product_detail', {id : Product.id} ) }}">{{ Product.name }}</a>
  152.                         {% if ProductClass.ClassCategory1 and ProductClass.ClassCategory1.id %}
  153.                             <div>{{ ProductClass.ClassCategory1.ClassName.name }}：{{ ProductClass.ClassCategory1 }}</div>
  154.                         {% endif %}
  155.                         {% if ProductClass.ClassCategory2 and ProductClass.ClassCategory2.id %}
  156.                             <div>{{ ProductClass.ClassCategory2.ClassName.name }}：{{ ProductClass.ClassCategory2 }}</div>
  157.                         {% endif %}
  158.                     </div>
  160.                     <div class="cart-item-price">
  161.                         単価：{{ CartItem.price|number_format }}円
  162.                     </div>
  164.                     <div class="cart-item-quantity">
  165.                         <div class="quantity-label-and-control">
  166.                             <span class="label">数量：</span>
  167.                             <div class="quantity-control">
  168.                                 <a href="{{ url('cart_handle_item', {'operation': 'down', 'productClassId': ProductClass.id}) }}" {{ csrf_token_for_anchor() }} class="load-overlay" data-method="put" data-confirm="false">
  169.                                     <img src="{{ asset('common_img/button/btn_minus.jpg', 'user_data') }}" alt="減らす" />
  170.                                 </a>
  171.                                 <span>{{ CartItem.quantity|number_format }}</span>
  172.                                 <a href="{{ url('cart_handle_item', {'operation': 'up', 'productClassId': ProductClass.id}) }}" {{ csrf_token_for_anchor() }} class="load-overlay" data-method="put" data-confirm="false">
  173.                                     <img src="{{ asset('common_img/button/btn_plus.jpg', 'user_data') }}" alt="増やす" />
  174.                                 </a>
  175.                             </div>
  176.                         </div>
  177.                     </div>
  179.                     <div class="cart-item-subtotal">
  180.                         小計：{{ CartItem.total_price|number_format }}円
  181.                     </div>
  183.                     <div class="cart-item-delete">
  184.                         <a href="{{ url('cart_handle_item', {'operation': 'remove', 'productClassId': ProductClass.id }) }}" {{ csrf_token_for_anchor() }} data-method="put" data-message="カートから商品を削除してもよろしいですか?">削除</a>
  185.                     </div>
  186.                 </div>
  187.             </div>
  188.         {% endfor %}
  190.         <div class="cart-total">
  191.             合計：<span>{{ Cart.totalPrice|number_format }}円</span>
  192.         </div>
  194.         <div class="cart-buttons">
  195.             <a href="{{ url('bookcart') }}">
  196.                 <img src="{{ asset('common_img/button/btn_back.jpg', 'user_data') }}" alt="戻る" />
  197.             </a>
  198.             <a href="{{ path('cart_buystep', {'cart_key':cartKey}) }}">
  199.                 <img src="{{ asset('common_img/button/btn_buystep.jpg', 'user_data') }}" alt="購入手続きへ" />
  200.             </a>
  201.         </div>
  202.     </div>
  203. {% endfor %}
  205.             </div>
  206.        {% else %}
  207.             <p class="empty"><span class="attention">※ 現在カート内に商品はございません。</span></p>
  208.         {% endif %}
  209.     </div>
  211. {# ▼ ブロック：DispFooter ▼ #}
  212. {{ include('Block/DispFooter.twig') }}
  213. {# ▲ ブロック：DispFooter ▲ #}
  215. {# ▼ ブロック：DispFtag ▼ #}
  216. {{ include('Block/DispFtag.twig') }}
  217. {# ▲ ブロック：DispFtag ▲ #}
  219. </div>
  221. </body>
  222. </html>
  223. {% endblock %}
  224. {# ▲ main ▲ #}