Dynamic Pricing Table

Introduction

Today I’m going to recreate a Dynamic Pricing Table inspired by the pricing table from Website Chef. The main point of this is to have an editable list of options that will recalculate the features and price of the whole table. As you toggle different addable “Packages” extra features will pop into view in the table as well as updating the overall price.

Source: I tweaked the custom checkmark toggle buttons from here.

Toggle Checkbox HTML Structure

Here is the structure for the checkmark options. The id’s of these must correspond to the choices in the hidden li tags.

<div class="options-table">
  <form>
    <div class="switch">
      <span>Pro Package</span>
      <input id="choice-1" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" data-price="80">
      <label for="choice-1"></label>
      <div class="clearfix"></div>
    </div>
    <div class="switch">
      <span>Designer Package</span>
      <input id="choice-2" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" data-price="150">
      <label for="choice-2"></label>
      <div class="clearfix"></div>
    </div>
    <div class="switch">
      <span>Developer Package</span>
      <input id="choice-3" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" data-price="50">
      <label for="choice-3"></label>
      <div class="clearfix"></div>
    </div>
  </form>
</div>

Pricing Table HTML Structure

This is the html for just the pricing table. I made it so any li with a class starting with “choice” will be hidden on default. This is how it ties in with the checkboxes.

<div class="pricing-table">
  <ul>
    <li class="price"><i>$</i><span>100</span></li>
    <li><i>+</i>3 Years Managed Hosting</li>
    <li><i>+</i>Unlimited Domains</li>
    <li class="choice-1"><i>+</i>2 Year Warranty</li>
    <li class="choice-1"><i>+</i>Unlimited Service and Maintenance</li>
    <li class="choice-2"><i>+</i>Drag and Drop Designer</li>
    <li class="choice-2"><i>+</i>5 Ready Made Templates</li>
    <li class="choice-3"><i>+</i>Advanced Statistics</li>
    <li class="choice-3"><i>+</i>Custom CSS Options</li>
    <li><i>+</i>Basic Statistics</li>
  </ul>
</div>

CSS Styles

This is just the css for the pricing table. You can find the css for the toggle checkmarks in the separate file or in the tutorial listed in the introduction.

/* Dynamic Pricing Table */
.pricing-table {
  width: 63%;
  float: right;
  background-color: #fff;
  font-weight: normal;
}
  li {
    padding: 15px 20px 0;
    color: #444;
    text-align: left;
    font-size: 14px;
    line-height: 23px;
  }
    li.price {
      padding: 15px 20px;
      text-align: center;
      color: #fff;
      line-height: 70px;
      font-size: 32px;
      background-color: #a36bc6;
    }
      li.price i {
        color: #fff;
        line-height: 70px;
        font-weight: normal;
        margin-right: 10px;
      }
    li i {
      vertical-align: top;
      color: #7fc442;
      font-size: 23px;
      font-weight: bold;
      line-height: 23px;
      margin-right: 15px;
    }
    li:last-child {
      padding: 15px 20px;
    }
    li[class^="choice"] {
      padding: 0 20px;
      overflow: hidden;
      height: 0px;

      transition: .3s;
      -webkit-transition: .3s;
    }
      li[class^="choice"].active {
        height: 23px;
        padding: 15px 20px 0;
      }

jQuery

This is what links the toggles to the pricing table. It uses jQuery’s change method that detects when the state of the checkmark is changed. Then it will apply the class active to all the matching choices in the pricing table which will animate them in to view.

$('.cmn-toggle').each(function () {
  $(this).change(function() {
    var curr_class = '.' + $(this).attr('id');
    var price = $(this).attr('data-price');
    var price_box = $('.pricing-table li.price span');

    $(curr_class).toggleClass('active');

    if (price) {
      if ($(curr_class).hasClass('active')) {
        price_box.html(parseInt(price_box.html()) + parseInt(price));
      }
      else {
        price_box.html(parseInt(price_box.html()) - parseInt(price));
      }          
    }


  });
});

The post Dynamic Pricing Table appeared first on webdesigncrowd.com.