HTML5 responsive step-by-step customized product template

Brief Tutorial

This is an HTML5 responsive step-by-step customized product template made using jQuery and CSS3. Through this template, users can customize the products they need step by step. The final step will give you the price and description of the item.

How to use

HTML structure

The HTML structure of this template is divided into 3 parts: header.main-header is used as the top navigation, div.cd-builder- steps is used for product customization steps, and footer.cd-builder-footer is used for bottom navigation and some description information.

<div class="cd-product-builder">
  <header class="main-header">
    <h1>Product Builder</h1>
     
    <nav class="cd-builder-main-nav disabled">
      <ul>
        <li class="active"><a href="#models">Models</a></li>
        <li><a href="#colors">Colors</a></li>
        <li><a href="#accessories">Accessories</a></li>
        <li><a href="#summary">Summary</a></li>
      </ul>
    </nav>
  </header>
  
  <div class="cd-builder-steps">
    <ul>
      <li data-selection="models" class="active builder-step">
        <section class="cd-step-content">
          <header>
            <h1>Select Model</h1>
            <span class="steps-indicator">Step <b>1</b> of 4</span>
          </header>
  
          <a href="#0" class="cd-nugget-info">Article & Downaload</a>
  
          <ul class="models-list options-list cd-col-2">
            <!-- models here -->
          </ul>
        </section>
      </li>
      <!-- additional content will be inserted using ajax -->
    </ul>
  </div>
  
  <footer class="cd-builder-footer disabled step-1">
    <div class="selected-product">
      <img src="img/product01_col01.jpg" alt="Product preview">
  
      <div class="tot-price">
        <span>Total</span>
        <span class="total">$<b>0</b></span>
      </div>
    </div>
     
    <nav class="cd-builder-secondary-nav">
      <ul>
        <li class="next nav-item">
          <ul>
            <li class="visible"><a href="#0">Colors</a></li>
            <li><a href="#0">Accessories</a></li>
            <li><a href="#0">Summary</a></li>
            <li class="buy"><a href="#0">Buy Now</a></li>
          </ul>
        </li>
        <li class="prev nav-item">
          <ul>
            <li class="visible"><a href="#0">Models</a></li>
            <li><a href="#0">Models</a></li>
            <li><a href="#0">Colors</a></li>
            <li><a href="#0">Accessories</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  
    <span class="alert">Please, select a model first!</span>
  </footer>
</div>

CSS style

The interface CSS style is very simple. Just note that div.cd-builder-steps is used to wrap different customization steps. The sub-elements inside it are absolutely positioned. They Overlapping each other, the height and width are both 100%. They are hidden by default and will only be displayed when .activeclass is attached.

.cd-builder-steps > ul {
  height: 100%;
  overflow: hidden;
}
.cd-builder-steps .builder-step {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  visibility: hidden;
  transition: visibility .5s;
}
.cd-builder-steps .builder-step.active {
  position: relative;
  z-index: 2;
  visibility: visible;
}

JavaScript

Create a ProductBuilder object in the JS code and use the bindEvents method to handle various events.

function ProductBuilder( element ) {
  this.element = element;
  this.stepsWrapper = this.element.children('.cd-builder-steps');
  //...
  this.bindEvents();
}
  
  
if( $('.cd-product-builder').length > 0 ) {
  $('.cd-product-builder').each(function(){
    //create a productBuilder object for each .cd-product-builder
    new ProductBuilder($(this));
  });
}

When the user selects a model, obtain new content through Ajax calls. Each list item in ul.models-list has a data-model attribute, which is exactly equal to the name of this new HTML page.

$.ajax({
    type       : "GET",
    dataType   : "html",
    url        : modelType+".html",
    beforeSend : function(){
      self.loaded = false;
    },
    success    : function(data){
      self.models.after(data);
      self.loaded = true;
      //...
    },
    error     : function(jqXHR, textStatus, errorThrown) {
       //...
    }
});

The above is the content of HTML5 responsive step-by-step customized product template. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!