Modèle de produit personnalisé étape par étape réactif HTML5

Bref tutoriel

Il s'agit d'un modèle de produit personnalisé, étape par étape, réactif HTML5, réalisé à l'aide de jQuery et CSS3. Grâce à ce modèle, les utilisateurs peuvent personnaliser étape par étape les produits dont ils ont besoin. La dernière étape vous donnera le prix et la description de l'article.

Utilisation

Structure HTML

La structure HTML de ce modèle est divisée en 3 parties : header.main-header est utilisé comme navigation supérieure, div.cd-builder - steps est utilisé pour les étapes de personnalisation du produit, et footer.cd-builder-footer est utilisé pour la navigation inférieure et certaines informations de description.

<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>

Style CSS

Le style CSS de l'interface est très simple. Notez simplement que div.cd-builder-steps est utilisé pour envelopper différentes étapes de personnalisation. sont positionnés de manière absolue, ils se chevauchent, la hauteur et la largeur sont à 100 %, ils sont masqués par défaut et ne seront affichés que lorsque .activeclass est attaché.

.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

Crée un objet ProductBuilder dans le code JS et utilise la méthode bindEvents pour gérer divers événements.

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));
  });
}

Une fois que l'utilisateur a sélectionné un modèle, obtenez du nouveau contenu via l'appel Ajax. Chaque élément de liste dans ul.models-list possède un attribut de modèle de données, qui est exactement égal au nom de cette nouvelle page HTML.

$.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) {
       //...
    }
});

Ce qui précède est le contenu du modèle de produit personnalisé étape par étape réactif HTML5. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !