Overview

This article is part two of the two part series that demonstrates the Checkout UI pattern. The checkout application is based of Tizen WebUI framework. The application demonstrates how the checkout page can be designed for the Tizen applications using Tizen widgets.

Main Screen

The application home page provides a list based view. The unordered list is place in content of the body. It contains information regarding the item, shipping, address and payment. The address and payment items link to different pages facilitating the option to provide information. Grid layout is used to properly align
the item details.

<ul id="ulPage" data-role="listview" data-inset="true">
  <li><div class="ui-grid-b">
    <div class="ui-block-a">
      <img src="WebContent/images/iPad-cover-blue.jpg" class="ui-li-img" />
    </div>
    <div class="ui-block-b ui-highlight-text">iPad Smart Cover
      Polyurethane - Blue</div>
    <div class="ui-block-c ui-highlight-text" align="right">$41.00</div>
    <div class="ui-block-a"></div>
    <div class="ui-block-b ui-li-sub-cust-li-text ui-li-sub-cust-li-text1">Ships
      in 24 hrs</div>
    <div class="ui-block-c "></div>
    <div class="ui-block-a"></div>
    <div class="ui-block-b ui-li-sub-cust-li-text ui-li-sub-cust-li-text2">Delivers
      in 3 -5</div>
    <div class="ui-block-c ui-li-desc"></div>
    <div class="ui-block-a"></div>
    <div class="ui-block-b ui-li-sub-cust-li-text ui-li-sub-cust-li-text2">business
      days</div>
    <div class="ui-block-c ui-li-desc"></div>
  </div></li>
</ul>

The home screen of the application also contains two buttons Help and Contact Us. On clicking on them, a popup dialog is launched.

<div class="ui-grid-a">
  <div class="ui-block-a">
    <a href="#two" data-role="button" data-rel="popup"
      data-position-to="window">Help</a>
  </div>
  <div class="ui-block-b">
    <a href="#popup" data-role="button" data-rel="popup"
      data-position-to="window">Contact us</a>
  </div>
</div>

The footer includes links to the licenses of the images used in the application

<div data-role="footer" data-position="fixed">
  <h4>
    Image Credits <a href="http://creativecommons.org/licenses/by-sa/2.0/">1</a>
    <a href="http://commons.wikimedia.org/wiki/File:Arrow_Blue_Right_001.svg">2</a>
  </h4>
</div>

Update Data Fields

The address and payment details are updated on navigating back to the home page using jQuery function.

function updateAddress(){
  var val = document.getElementById('address').value;
  $.mobile.changePage('index.html');
  $('#shipping').text(val);
}

function updatePayment(){
  var val = document.getElementById('cardNum').value;
  $.mobile.changePage('index.html');
  $('#payment').text(val);
}

CSS

CSS styles are applied to highlight text and resize the images.

.ui-li-img {
  height: 12%;
  width: 50%
}

.ui-highlight-text {
  font-size: .75em;
  font-weight: bold;
}

.ui-li-sub-cust-li-text {
  display: block;
  font-weight: bold;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ui-center-text {
  align: center;
}

.ui-li-sub-cust-li-text1 {
  font-size: .7em;
  color: blue;
}

.ui-li-sub-cust-li-text2 {
  font-size: 0.6em;
  color: grey;
}

#arrow-icon {
  background-position: 2px 2px;
  height: 5%;
  width: 20%;
  background-size: 90%;
}

Color property is used to highlight the shipping, address and payment details.

.ui-grey-colored {
  background-color: lightGrey;
  background-position: 2px 2px;
  height: 30px;
  max-height: 40px;
  font-size: 1.25em;
  color: purple;
}

.ui-li-heading {
  font-size: 1em;
  font-weight: bold;
  color: #2489CE;
}

.ui-li-desc {
  font-size: 0.75em;
  color: black;
}

.ui-shipping {
  font-size: 0.75em;
  color: red;
}

Snapshot:

Below are the snapshots of the checkout page from application

.