Come presentare un articolo nella categoria di articoli in e-commerce

 In questo tutorial vediamo alcuni esempi come presentare al meglio un nostro articolo e dare  possibilita al utente finale di non solo scoprire il suo perezzo ma agiungere per esempio ai preferiti o agiungere subito al carrello. 

La funzionalità della scheda di un articolo può essere espansa con pulsanti aggiuntivi e utilizzando le trasformazioni e transizioni posiamo renderli dinamici. e che appaiono solo nel momento giusto.

Vediamo subito il primo esempio della presentazione di un articolo in un negozio online.

Piccolo vestito nero

Piccolo vestito nero

22 Euroal carrello

 

 Primo esempio della stilizazione della presentazione nella categoria di articoli

Markup HTML

<div class="product-item">
    <img src="/black-dress.jpg">
    <div class="product-list">
        <h3>Oggeto 1</h3>
            <span class="price">20 euro</span>
            <a href="/" class="button">al carrello</a>
    </div>
</div>

Stili CSS

* {
  box-sizing: border-box;
}
.product-item {
  width: 300px;
  position: relative;
  text-align: center;
  margin: 0 auto;
  border-bottom: 2px solid #F5F5F5;
  background: white;
  -webtit- transition: .4s linear;
  transition: .4s linear;
}
.product-item:hover {
  border-bottom: 2px solid #fc5a5a;
}
.product-item:hover .button {
  background: #fc5a5a;
}
.product-item img {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
}
.product-list {
background: #fafafa;
padding: 15px 0;
}
.product-list h3 {
  font-family: "Open Sans";
  font-size: 18px;
  font-weight: 400;
  color: #444444;
  margin: 0 0 10px 0;
}
.price {
  font-family: "Open Sans";
  font-size: 16px;
  color: #fc5a5a;
  display: block;
  margin-bottom: 12px;
}
.button {
  font-family: "Open Sans";
  display: inline-block;
  padding: 1px 12px 0;
  margin: 0 auto;
  background: #cccccc;
  color: white;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  font-size: 12px;
  line-height: 28px;
  -webtit- transition: .4s linear;
  transition: .4s linear
}

Secondo esempio di presenzione di un articolo nella categoria

Piccolo vestito nero

22 Euro

Ora vediamo il codice del nostro esempio

Markup HTML

<div class="product-item">
  <div class="product-img">
    <a href="/">
      <img src="/black-dress.jpg">
    </a>
  </div>
  <div class="product-list">
    <h3>Piccolo vestito nero</h3>
    <div class="stars"></div>
    <span class="price">22 Euro</span>
    <div class="actions">
      <div class="add-to-cart">
        <a href="/" class="cart-button">al carrello</a>
      </div>
      <div class="add-to-links">
        <a href="/" class="wishlist"></a>
        <a href="/" class="compare"></a>
      </div>
      </div>
    </div>
</div>

Stili CSS

* {
 box-sizing: border-box;
}
.product-item {
  width: 300px;
  position: relative;
  margin: 0 auto;
  padding: 10px 10px 5px 10px;
  border-radius: 2px;
  transition:.4s linear
}
.product-item:hover {
  box-shadow: 1px 1px 2px rgba(0,0,0,.1), -1px -1px 2px rgba(0,0,0,.1)
}
.product-img {
  overflow: hidden;
}
.product-img img {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
}
.product-item:hover img {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.product-list {
  padding-top: 15px;
  margin-top: 15px;
}
.product-list h3 {
  font-family: "Open Sans";
  font-weight: 700;
  color: #39404B;
  margin: 0;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.5;
}
.price {
  font-family: "Open Sans";
  color: #E34D38;
  display: block;
  margin-bottom: 12px;
}
.stars {
  height: 14px;
  line-height: 14px;
  margin: 7px 0;
}
.stars:before {
  content: "\f005\f005\f005\f005\f006";
  color: #EFB71C;
  font-size: 14px;
  font-family: FontAwesome;
}
.actions {
  border-top: 1px solid #eee;
  padding-top: 4px;
}
.actions:after {
  content:"";
  display: table;
  clear: both;
}
.add-to-cart, .add-to-links {
  float: left;
}
.cart-button {
  font-family: "Open Sans";
  text-decoration: none;
  color: #8C877C;
  padding: 0 20px 0 0;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  border-right: 1px solid #ddd;
  -webkit-transition: .4s linear;
  transition: .4s linear;
}
.cart-button:before {
  content: "\f07a";
  margin-right: 10px;
  font-size: 13px;
  display: inline-block;
  font-family: FontAwesome;
}
.add-to-cart:hover .cart-button, .wishlist:hover, .compare:hover {
  color: #E34D38
}
.wishlist, .compare {
  position: relative;
  color: #8C877C;
  padding-left: 20px;
  height: 30px;
  line-height: 30px;
  -webkit-transition: .4s linear;
  transition: .4s linear;
}
.wishlist:after, .compare:after {
  display: inline-block;
  font-family: FontAwesome;
  font-size: 13px;
}
.wishlist:after {
  content: "\f004";
}
 .compare:after {
  content: "\f079";
 }

 

Ovviamente gli stili CSSe la struttura Html potete sempre correggere al vostro piacimento o alla richiesta del cliente finale del sito. Non dimenticate dei nostri video corsi per i linguaggi CSS e Html
Nella prossima lezione vediamo altri 2 esempi come posiamo presentare un articolo nel nostro negozio online.

Letto 857 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso