<div id="globalcss">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{openzc:define.HEADING_TITLE/}</title>
{openzc:include filename="system/common/css.tpl"/}
<style>
#globalcss .cartTable .item td {border: none;}
#globalcss .cartTable .item .del, #globalcss .cartTable .item .quantity, #globalcss .cartTable .item .price {vertical-align: middle;}
#globalcss .cartTable .item .del a {color: #333}
#globalcss .cartTable .item .itemInfo .image {width: 90px;}
#globalcss .cartTable .item .itemInfo .image span {position: absolute;margin-top: -10px;right: -10px}
#globalcss .cartTable .item .itemInfo .catename {color: #888}
#globalcss .cartTable .item .itemInfo .options {color: #666}
#globalcss .cartTable .item .itemInfo .proname {width: 290px;display: inline-table;margin-top: 0}
#globalcss .summary .ordertotal {border-top: 1px solid #ccc;}
#globalcss .is-hidden-desktop .cartTable .item .itemInfo .proname {max-width: 100%;white-space: nowrap;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;}
#globalcss .is-hidden-desktop.table-container {overflow: hidden;}
</style>
</head><body>
<div class="container mb-5"> {openzc:ajax filename="cartlist"}
  <div class="columns p-3 is-hidden-mobile">
    <div class="column is-two-thirds">
      <table class="table is-fullwidth cartTable is-narrow is-hoverable">
        <tbody>
          <tr>
            <td colspan="4" class="py-4 pl-0"><p class="title is-6"> <span class=" mr-2 fs-14"><i class="fas fa-cart-arrow-down"></i></span>Your cart items <span class="font-weight-600">({openzc:var name='$cartCount'/})</span> </p></td>
          </tr>
        {openzc:cart}
        <tr class="item">
          <td class="del py-5 has-text-centered d-flex"><a href="javascript:;" class="d-block mr-4 openzc-btn" data-action="delCart" data-id="[field:id/]" data-reload="cartlist"><i class="fas fa-times"></i></a></td>
          <td class="itemInfo py-5 pl-0"><div class="media">
              <div class="image mr-4"><img src="[field:products_image/]" alt=""></div>
              <div class="media-body">
                <p class="mb-3 catename subtitle is-6">[field:categories_name/]</p>
                <a href="[field:products_link/]" class="proname title is-6 mb-2">[field:products_name/]</a> {openzc:loopson item="attr"}
                <p class="options subtitle is-7 mt-0  mb-0">[field:products_options_name/]: [field:products_options_values_name/]</p>
                {/openzc:loopson} </div>
            </div></td>
          <td class="pl-0 py-5 quantity has-text-centered"><div class="input-group">
              <div class="field has-addons">
                <p class="control"> <a href="javascript:;" class="down button openzc-btn" data-action="cutOne" data-id="[field:id/]" data-reload="cartlist"><i class="fas fa-minus"></i></a> </p>
                <p class="control">
                  <input class="input has-text-centered" type="text" size="5" placeholder="Quantity" value="[field:products_qty/]">
                </p>
                <p class="control"> <a href="javascript:;" class="up button openzc-btn" data-action="addOne" data-id="[field:id/]" data-reload="cartlist"><i class="fas fa-plus"></i></a> </p>
              </div>
            </div></td>
          <td class="price pl-0 py-5"><p class="mb-0 ml-12 title is-6">[field:products_qty/] x [field:products_price/]</p></td>
        </tr>
        {/openzc:cart}
          </tbody>
        
      </table>
    </div>
    <div class="column is-one-thirds ">
      <div class="summary is-fullwidth pt-1 px-5 pb-5">
        <h4 class="title is-4 mb-6">Summary</h4>
        {openzc:modules item="order_total" nocode='ot_total'}
        <p class="level mb-0"> <span class="level-left title is-6">[field:title/]</span> <span class="level-right subtitle is-6">[field:text/]</span> </p>
        {/openzc:modules}
        {openzc:modules item="order_total" code='ot_total'}
        <p class="level ordertotal mb-0 pt-5"> <span class="level-left title is-5">[field:title/]</span> <span class="level-right subtitle is-5">[field:text/]</span> </p>
        {/openzc:modules} <a class="button is-black is-flex" href="{openzc:link name='FILENAME_CHECKOUT'/}">Checkout</a> </div>
    </div>
  </div>
  <div class="columns m-3 is-hidden-desktop table-container">
    <table class="table cartTable is-narrow is-hoverable is-fullwidth">
      <tbody>
        <tr>
          <td class="py-4 pl-0"><p class="title is-6"> <span class=" mr-2 fs-14"><i class="fas fa-cart-arrow-down"></i></span>Your cart items <span class="font-weight-600">({openzc:var name='$cartCount'/})</span> </p></td>
        </tr>
      {openzc:cart}
      <tr class="item">
        <td class="itemInfo py-5 pl-0"><div class="is-inline-flex">
            <div class="image mr-5"><span class="tag is-dark is-normal is-rounded">[field:products_qty/]</span><img src="[field:products_image/]" alt=""></div>
            <div class="media-body"> <a href="[field:products_link/]" class="proname title is-7 mb-2">[field:products_name/]</a> {openzc:loopson item="attr"}
              <p class="options subtitle is-7 mt-0  mb-0">[field:products_options_name/]: [field:products_options_values_name/]</p>
              {/openzc:loopson}
              <p class="title is-6 is-clearfix mt-2 mb-3">[field:products_price/]</p>
              <div class="field has-addons mt-0 ml-0">
                <p class="control"> <a href="javascript:;" class="down button openzc-btn is-small" data-action="cutOne" data-id="[field:id/]" data-reload="cartlist"><i class="fas fa-minus"></i></a> </p>
                <p class="control">
                  <input class="input has-text-centered is-small" size="2" type="text" placeholder="Quantity" value="[field:products_qty/]">
                </p>
                <p class="control "> <a href="javascript:;" class="up button openzc-btn is-small" data-action="addOne" data-id="[field:id/]" data-reload="cartlist"><i class="fas fa-plus"></i></a> </p>
                <a href="javascript:;" class="button ml-6 is-small is-white openzc-btn" data-action="delCart" data-id="[field:id/]" data-reload="cartlist"><i class="fas fa-trash-alt"></i></a> </div>
            </div>
          </div></td>
      </tr>
      {/openzc:cart}
        </tbody>
      
    </table>
    <div class="column p-0">
      <div class="summary is-fullwidth pt-0 px-0 pb-5 m-0">
        <h4 class="title is-4 mb-5">Summary</h4>
        {openzc:modules item="order_total" nocode='ot_total'}
        <p class="is-clearfix mb-2"> <span class="title is-6">[field:title/]</span> <span class="subtitle is-6">[field:text/]</span> </p>
        {/openzc:modules}
        {openzc:modules item="order_total" code='ot_total'}
        <p class="is-clearfix ordertotal mb-0 pt-5 mt-4"> <span class="title is-4">[field:title/]</span> <span class="subtitle is-4">[field:text/]</span> </p>
        {/openzc:modules} <a class="button is-black is-flex mt-5" href="{openzc:link name='FILENAME_CHECKOUT'/}">Checkout</a> </div>
    </div>
  </div>
  {/openzc:ajax} </div>
</body>
{openzc:include filename="system/common/js.tpl"/}
</html>
</div>