Cart

URL:

/user/order/cart

List of Elements

My cart title 

<div class=”container”>
<div class="cart-top-section">
<div>
<div class="cart-top-sec-left">
   <span class="my-cart-text">MY CART</span>
   <span class="cart-total-txt">TOTAL :</span>
   <span class="cart-total-amount">SGD $ 79.90</span>
</div>
</div>
</div>
</div>

First Checkout button 

<div class=”container”>
   <div class="cart-top-section">
      <div>
         <div class="cart-top-sec-left"> … </div>
         <div class="cart-top-sec-right" align="right">
            <a href="/user" class="btn-black-cmn ">CONTINUE
            SHOPPING</a>
            <a href="javascript:void(0)" onclick="OrderCart.cartCheckout();"
               class="add-cart-btn ">CHECKOUT</a>
         </div>
      </div>
   </div>
</div>

Item Tick Box 

<div class="cart-section">
<div class="container">
<div id="dvAvtmTop"></div>
<div class="cart-item-row" data-key="item" data-id="33060" data-price="79.9000"
   data-itemid="2300" data-itemnamevalue="Hand-crafted Fitting Leather Wallet"
   data-currencycode="SGD" data-stockquantityvalue="7.000000"
   data-cartquantityvalue="1" data-stockislimitedvalue="True" data-subtotal="79.9000"
   data-deliverycost="0.0" data-item-base-price="79.9000">
<div class="cart-item-box-left">
<div class="fancy-checkbox" id="fancy-checkbox_33060">
   <input id="cartItem_select_33060" name="cartItem-select"
      checked="checked" type="checkbox"
      onchange="OrderCart.applyChangesOnQuantity(33060)">
   <label for="cartItem_select_33060">&nbsp;</label>
</div></div>
</div>
</div>
</div>

Item image 

<div class="cart-item-row" data-key="item" data-id="33060" data-price="79.9000"
   data-itemid="2300" data-itemnamevalue="Hand-crafted Fitting Leather Wallet"
   data-currencycode="SGD" data-stockquantityvalue="7.000000" data-cartquantityvalue="1"
   data-stockislimitedvalue="True" data-subtotal="79.9000" data-deliverycost="0.0"
   data-item-base-price="79.9000">
<div class="cart-item-box-left">
<div class="fancy-checkbox" id="fancy-checkbox_33060">
   … 
</div>
<div class="cart-item-img">
<div class="cart-item-slider">
<div id="carItemCarousel_33060" class="carousel slide"
   data-ride="carousel" data-interval="false">
<div class="slider-overlay"></div>
<a href="javascript:void(0);"
   class="btn-mobi-slider">&nbsp;</a>
<!-- Indicators - -->
<ol class="carousel-indicators">
   <li data-target="#carItemCarousel_33060"
      data-slide-to="0" class="active"></li>
</ol>
<!-- Wrapper for slides - -->
<div class="carousel-inner" role="listbox"
   id="carousel-inner-33060">
   <div class="item active">
      <img
         src="/images/items/Item2278-63622294779650596
         6-Iz386N.jpg" alt="cart-image">
   </div>
</div></div>
</div>
</div>
</div>
</div>

Image Slider Arrow 

<div class="cart-item-row" data-key="item" data-id="33060" data-price="79.9000"
   data-itemid="2300" data-itemnamevalue="Hand-crafted Fitting Leather Wallet"
   data-currencycode="SGD" data-stockquantityvalue="7.000000" data-cartquantityvalue="1"
   data-stockislimitedvalue="True" data-subtotal="79.9000" data-deliverycost="0.0"
   data-item-base-price="79.9000">
<div class="cart-item-box-left">
   ...
   <div class="cart-item-img">
      <div class="cart-item-slider">
         <div id="carItemCarousel_33060" class="carousel slide"
            data-ride="carousel" data-interval="false">
            …
            <!-- Left and right controls - -->
            <a class="left carousel-control"
               href="#carItemCarousel_33060" role="button" data-slide="prev">
            <span class="slide-icon slide-prev"
               aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control"
               href="#carItemCarousel_33060" role="button"
               data-slide="next">
            <span class="slide-icon slide-next"
               aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            </a>
         </div>
      </div>
   </div>
</div></div>

Item name and desc 

<div class="cart-item-row" data-key="item" data-id="33060" data-price="79.9000"
   data-itemid="2300" data-itemnamevalue="Hand-crafted Fitting Leather Wallet"
   data-currencycode="SGD" data-stockquantityvalue="7.000000" data-cartquantityvalue="1"
   data-stockislimitedvalue="True" data-subtotal="79.9000" data-deliverycost="0.0"
   data-item-base-price="79.9000">
<div class="cart-item-box-left"> … </div>
<div class="cart-item-box-desc">
<h3>
   <a href="/user/item/detail/hand-crafted-fitting-leather-wallet/2293"
      class="cart-item-id">Hand-crafted Fitting Leather Wallet</a>
</h3>
<div class="cart-item-desc">We will customise your sleek and compact wallet
   with your desired number of cards, the size of your palm and the type of bank notes that you would like to fit. For the gentleman who knows that it's not about what you can fit, but what you do with what you always carry.
</div></div></div>

Quantity 

<div class="cart-item-row" data-key="item" data-id="33060" data-price="79.9000"
   data-itemid="2300" data-itemnamevalue="Hand-crafted Fitting Leather Wallet"
   data-currencycode="SGD" data-stockquantityvalue="7.000000" data-cartquantityvalue="1"
   data-stockislimitedvalue="True" data-subtotal="79.9000" data-deliverycost="0.0"
   data-item-base-price="79.9000">
<div class="cart-item-box-left"> … </div>
<div class="cart-item-box-desc">
...
<div>
<div class="cart-top-sec-left">
   <span>QTY:</span>
   <span>
      <select id="qty-33060" name="qty" class="qty-selectbpx"
         onchange="OrderCart.applyChangesOnQuantity(33060)">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
         <option value="6">6</option>
         <option value="7">7</option>
      </select>
   </span>
</div></div>
</div>
</div>

Price 

<div class="cart-item-row" data-key="item" data-id="33060" data-price="79.9000"
   data-itemid="2300" data-itemnamevalue="Hand-crafted Fitting Leather Wallet"
   data-currencycode="SGD" data-stockquantityvalue="7.000000" data-cartquantityvalue="1"
   data-stockislimitedvalue="True" data-subtotal="79.9000" data-deliverycost="0.0"
   data-item-base-price="79.9000">
<div class="cart-item-box-left"> … </div>
<div class="cart-item-box-desc">
...
<div>
   <div class="cart-top-sec-left"> … </div>
   >>
   <div class="cart-top-sec-right">
      <div class="cart-item-price">SGD $ 79.90</div>
   </div>
</div></div></div>

Seller name and picture 

<div class="cart-item-row" data-key="item" data-id="33060" data-price="79.9000"
   data-itemid="2300" data-itemnamevalue="Hand-crafted Fitting Leather Wallet"
   data-currencycode="SGD" data-stockquantityvalue="7.000000" data-cartquantityvalue="1"
   data-stockislimitedvalue="True" data-subtotal="79.9000" data-deliverycost="0.0"
   data-item-base-price="79.9000">
<div class="cart-item-box-left"> … </div>
<div class="cart-item-box-desc">
   …
   <div>
      <div class="cart-top-sec-left">
         <img
            src="/userdata/thestraitscollective.arcadier.io/images/user/johnlyman2017
            0224082929.jpg" style="margin-bottom: 0.25em; vertical-align: middle;
            width:40px">
         <a href="/user/merchantaccount?merchantid=2278">
         <span class="cart-publish-merchant">John</span>
         </a>
      </div>
   </div>
</div></div>

Variant 

<div class="cart-item-row" data-key="item" data-id="33060" data-price="79.9000"
   data-itemid="2300" data-itemnamevalue="Hand-crafted Fitting Leather Wallet"
   data-currencycode="SGD" data-stockquantityvalue="7.000000" data-cartquantityvalue="1"
   data-stockislimitedvalue="True" data-subtotal="79.9000" data-deliverycost="0.0"
   data-item-base-price="79.9000">
<div class="cart-item-box-left"> … </div>
<div class="cart-item-box-desc"> … </div>
<div class="cart-item-box-variant">
<div>
   <select class="variant-selectbpx" name="optVariantGroup-33060-387"
      id="optVariantGroup-33060-387"
      onchange="OrderCart.onChangeVariantGroup(this, 33060, onchange);"
      data-base-image-url="/images/items/">
      <option value=""></option>
      <option data-image-url="" value="1256">Burgundy</option>
      <option data-image-url="" value="1257">Black</option>
      <option data-image-url="" value="1258">Tan</option>
   </select>
   <select class="variant-selectbpx" name="optVariantGroup-33060-388"
      id="optVariantGroup-33060-388"
      onchange="OrderCart.onChangeVariantGroup(this, 33060, onchange);"
      data-base-image-url="/images/items/">
      <option value=""></option>
      <option data-image-url="" value="1271">8</option>
      <option data-image-url="" value="1272">4 + Coin Slot</option>
      <option data-image-url="" value="1273">3 + Coin Slot</option>
      <option data-image-url="" value="1274">6</option>
      <option data-image-url="" value="1275">7</option>
   </select>
</div></div>

Choose Delivery Method 

<div class="cart-item-row" data-key="item" data-id="33060" data-price="79.9000"
   data-itemid="2300" data-itemnamevalue="Hand-crafted Fitting Leather Wallet"
   data-currencycode="SGD" data-stockquantityvalue="7.000000" data-cartquantityvalue="1"
   data-stockislimitedvalue="True" data-subtotal="79.9000" data-deliverycost="0.0"
   data-item-base-price="79.9000">
<div class="cart-item-box-left"> … </div>
<div class="cart-item-box-desc"> … </div>
<div class="cart-item-box-variant">
   <div> … </div>
   <div class="cart-item-desc-bottom">
      <div data-selected-deliveryid="2705" data-selected-deliverytype="pickup"
         id="selected_delivery_33060" class="cart-delivery-title">
         Pick-up :
      </div>
      <div class="cart-delivery-method-txt">7 Jalan Kilang</div>
      <div>
         <a href="javascript:void(0);"
            onclick="OrderCart.showPopupChangeDeliveryMethod(33060);"
            class="btn-grey-small-cmn">CHANGE</a>
      </div>
   </div>
</div></div>

Remove item 

<div class="cart-item-row" data-key="item" data-id="33060" data-price="79.9000"
   data-itemid="2300" data-itemnamevalue="Hand-crafted Fitting Leather Wallet"
   data-currencycode="SGD" data-stockquantityvalue="7.000000" data-cartquantityvalue="1"
   data-stockislimitedvalue="True" data-subtotal="79.9000" data-deliverycost="0.0"
   data-item-base-price="79.9000">
<div class="cart-item-box-left"> … </div>
<div class="cart-item-box-desc"> … </div>
<div class="cart-item-box-variant">
   <div class="cart-item-delete-sec">
      <a href="javascript:void(0);" onclick="OrderCart.deleteCartItem(33060);">
      <i class="icon icon-delete"></i>
      </a>
   </div>
</div></div>

Price breakdown 

<div class=”cart-section”>
<div class=”container”>
…
<div class="cart-total-bottom">
<div class="cartpg-itm-total-sec" id="summaryDiv">
   <div class="cartpg-total-line1">
      <div class="cartpg-totline-left">Sub Total</div>
      <div id="cart-subtotal" class="cartpg-itm-tprice"
         data-currencycode="SGD" cart-subtotal="79.9000000000">
         SGD $ 79.90
      </div>
   </div>
   <div class="cartpg-total-line1">
      <div class="cartpg-totline-left">Delivery Costs</div>
      <div id="cart-deliverycost" data-currencycode="SGD"
         class="cartpg-itm-tprice" cart-deliverycostval="0.000000">
         SGD $ 0.00
      </div>
   </div>
   <div class="cartpg-maintotal-line">
      <div class="cartpg-totline-left">TOTAL</div>
      <div id="cart-total" class="cartpg-itm-mprice"
         data-currencycode="SGD">
         SGD $ 79.90
      </div>
   </div>
</div></div>
</div>
</div>

Second Checkout Button 

<div class=”cart-section”>
   <div class=”container”>
      …
      <div class="cart-total-bottom">
         <div class="cartpg-itm-total-sec" id="summaryDiv"> … </div>
         <div class="cart-btn-area">
            <a href="/" class="btn-black-cmn ">CONTINUE SHOPPING</a>
            <a href="javascript:void(0)" onclick="OrderCart.cartCheckout();"
               class="add-cart-btn ">
            CHECKOUT</a>
            <form action="/user/order/postdeliverydetail"
               id="frmCheckoutCartItems" method="post"></form>
         </div>
      </div>
   </div>
</div>

Title 

<div class="popup-area cartitem-change-popup" style="display: block;">
<div class="wrapper">
<div class="title-area text-capitalize">
   <h1>DELIVERY METHOD
      <a href="javascript:void(0);"
         onclick="OrderCart.closePopupChangeDeliveryMethod();"
         class="cartitem-chngpop-close"></a>
   </h1>
</div></div></div>

Item image, name, and price 

<div class="popup-area cartitem-change-popup" style="display: block;">
<div class="wrapper">
<div class="title-area text-capitalize"> … </div>
<div class="content-area">
<div class="cart-itmind-area">
   <div class="cart-itmind-img">
      <img
         src="/images/items/Item2278-636222947796505966-Iz386N.jpg">
   </div>
   <div class="cart-itmind-desc">
      <p style="font-weight:bold;">Hand-crafted Fitting Leather
         Wallet
      </p>
      <div class="cart-itmind-price">SGD $79.90</div>
   </div>
</div></div></div></div>

Choose Delivery 

<div class="popup-area cartitem-change-popup" style="display: block;">
<div class="wrapper">
<div class="content-area">
   <div class="delivery-details" tabindex="2" style="overflow: hidden; outline: none; cursor:
      -webkit-grab;">
      <div class="delivery-later">
         <div class="option-row fancy-radio">
            <input type="radio" checked="checked" name="delivery-method"
               id="delivery-later" data-delivery-id="0">
            <label for="delivery-later">
            <span>Choose a delivery method later</span>
            </label>
         </div>
      </div>
      <div class="delivery-method">
         <div class="desc-title">Delivery</div>
         <!-- delivery method here -->
      </div>
      <div class="delivery-method">
         <div class="desc-title">Pick-up</div>
         <div class="option-row fancy-radio"
            onclick="OrderCart.selectThisDeliveryMethod(2705)">.
            <input type="radio" name="delivery-method" id="delivery_2705"
               checked="'checked'" data-delivery-id="2705" data-delivery-ispickup="1"
               data-delivery-description="7 Jalan Kilang">
            <label for="delivery_2705"><span>7 Jalan Kilang</span></label>
         </div>
      </div>
   </div>
</div></div></div>

Apply Button 

<div class="popup-area cartitem-change-popup" style="display: block;">
<div class="wrapper">
   …
   <div class="content-area"> … </div>
   <div class="btn-area">
      <div class="text-center">
         <input type="button"
            onclick="OrderCart.applyChangesOnDeliveryMethod();" id="delivery-update"
            data-cartitemid="33060" value="Apply" class="my-btn btn-saffron">
      </div>
   </div>
</div></div>