Créer une card produit style Asos

Dans ce nouvel article, nous apprendrons à réaliser une card produit de style Asos.

Posté le par Benoît Philibert|1192 vues

Nous utiliserons des éléments Bootstrap 4 tels que Flexbox, le composant card ou encore le bouton toggle.
Découvrez ci-dessous le résultat final :

Création de la structure

Notre conteneur principal utilisera la classe .container-fluid et intégrera respectivement les div .row et 2 div .col-6 (dans cet exemple, nous utilisons 2 produits par ligne).

<div class="container-fluid">
 <div class="row">
    <div class="col-6"></div>
    <div class="col-6"></div>
 </div><!-- /row -->
</div><!-- /container -->

Une fois la structure réalisée, il est bon de penser au responsive design et à l’adaptation mobile de notre grille. Pour ce faire, nous allons définir notre grille sur 2 colonnes jusqu’à l’affichage small. Lorsque l’écran passe sur un rendu extra-small, une seule colonne sera utilisée.

<div class="container-fluid">
 <div class="row my-3">
    <div class="col-12 col-sm-6 my-3 my-sm-0"></div>
    <div class="col-12 col-sm-6 my-3 my-sm-0"></div>
 </div><!-- /row -->
</div><!-- /container -->
Par la même occasion, nous avons défini une marge externe verticale my-3 sur les écrans inférieurs à une résolution small pour les éléments .row et colonnes. La classe my-sm-0 supprime cette marge lorsque l’écran possède une résolution d’affichage supérieur à small.

Intégration du composant card

L’élément .card est composé d’une image, d’un conteneur .card-body intégrant respectivement un titre et un paragraphe.

Le titre utilise un <h5> et intègre une balise utilise un <small> . Le paragraphe quant à lui sert à mettre en forme le prix du produit. Dans cet exemple, le produit bénéficie d’une promotion et nous utilisons respectivement la classe .text-danger sur le nouveau prix et une div <del> pour barrer l’ancien prix.

<div class="container-fluid">
 <div class="row my-3">
    <div class="col-12 col-sm-6 my-3 my-sm-0">
       <div class="card">
         <img src="https://images.asos-media.com/products/nike-air-max-90-baskets-en-cuir-bleu-302519-400/9536548-1-blue?$n_640w$&amp;wid=634&amp;fit=constrain" class="card-img-top" alt="Nike - Air Max 90">
         <div class="card-body">
            <h5 class="card-title"><small>Nike - Air Max 90 - Baskets en cuir - Bleu 302519-400</small></h5>
            <p class="card-text"><strong class="text-danger">111,49 €</strong> <del>139,99 €</del></p>
         </div><!-- /card-body -->
       </div><!-- /card-->
    </div><!-- /col -->
  </div><!-- /row -->
</div><!-- /container -->

Intégration du bouton like

Cette intégration nécessite dans un premier temps la mise en place d’une div .card-img-overlay. Cela va nous permettre de positionner le bouton « like » par dessus notre card. Le bouton « like » sera matérialisé par un bouton de type toggle qui permet de rester cliqué lorsque l’utilisateur l’active avec le paramètre HTML5 aria-pressed.

<div class="card">
   <img src="https://images.asos-media.com/products/nike-air-max-90-baskets-en-cuir-bleu-302519-400/9536548-1-blue?$n_640w$&amp;wid=634&amp;fit=constrain" class="card-img-top" alt="Nike - Air Max 90">
   <div class="card-img-overlay">
      <button type="button" class="btn btn-light rounded-circle" data-toggle="button" aria-pressed="false" autocomplete="off">
         <i class="far fa-heart"></i>
      </button>
   </div><!-- /card-img-overlay -->
   <div class="card-body">
      <h5 class="card-title"><small>Nike - Air Max 90 - Baskets en cuir - Bleu 302519-400</small></h5>
      <p class="card-text"><strong class="text-danger">111,49 €</strong> <del>139,99 €</del></p>
   </div><!-- /card-body -->
</div><!-- /card-->
Nous utilisons la librairie gratuite Font Awesome en ligne pour le coeur de notre bouton like.
Coinbase
Acheter et vendre des cryptomonnaies

Coinbase est l’endroit idéal pour acheter, vendre et gérer votre portefeuille de cryptomonnaies. Coinbase est la plateforme numéro 1 dans le monde avec plus de 20 millions d’utilisateurs.

Acheter sur Coinbase

Ajuster le positionnement avec Flexbox

Après avoir intégré la fonction d’overlay sur notre card, nous devons le positionner au bon endroit : en bas à droite de l’image produit.
Pour ce faire, nous utiliserons les alignements flexbox.

<div class="card-img-overlay d-flex justify-content-end align-items-end">
   <button type="button" class="btn btn-light rounded-circle" data-toggle="button" aria-pressed="false" autocomplete="off">
      <i class="far fa-heart"></i>
   </button>
</div><!-- /card-img-overlay -->

la classe .d-flex permet d’appliquer un display: flex; à notre conteneur.
Les casses .justify-content-end et .align-items-end permettent respectivement de positionner le bouton « like » à la fin du contenu vertical (en bas) et horizontal (à droite).

Astuce de positionnement

Après cette manipulation flexbox, on s’aperçoit que le contenu se positionne tout en bas de la card produit et non sur l’image. Ce problème est lié à notre classe .card-img-overlay qui englobe l’intégralité de la card.

Pour remédier à ce problème, il nous suffit d’englober la div image ainsi que la div .card-img-overlay dans un conteneur utilisant la classe .position-relative. Cela permettra d’appliquer la fonction d’overlay uniquement à l’image de notre card produit.

<div class="position-relative">
   <img src="https://images.asos-media.com/products/nike-air-max-90-baskets-en-cuir-bleu-302519-400/9536548-1-blue?$n_640w$&amp;wid=634&amp;fit=constrain" class="card-img-top" alt="Nike - Air Max 90">
   <div class="card-img-overlay d-flex justify-content-end align-items-end">
      <button type="button" class="btn btn-light rounded-circle" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="far fa-heart"></i></button>
   </div>
</div>

Un peu de couleurs

Bien entendu, pour coller le plus possible au « look » du site Asos, nous devons appliquer quelques corrections CSS.

.card {border: 0;}
.card-body {padding: .5rem 0; font-size: 14px;}
.card-title small {font-size: 14px; font-weight: 200;}
.card-text del {font-weight: 200;}
.card-img-overlay button i {font-weight: normal;}
.btn {  padding: .75rem; line-height: 1;}

.btn-light:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled):active,
.show>.btn-light.dropdown-toggle {
  background-color: black;
  color: white;
}

Résultat final

Tuto.com
Développez vos compétences digitales

Apprenez Bootstrap aux côtés d’experts et artistes passionnés sur tuto.com, une plateforme de formation au digital.

Visiter Tuto.com


Ces articles pourraient vous intéresser

Tags

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.