JMT Alimentation Animal
Project version : 1.0.3

Card Product 

<article class="card card-product">
    <a href="" aria-label="Produit pour chat - Versele Laga Senior" title="Produit pour chat - Versele Laga Senior">

        <div class="card-product__thumbnail">
            <img src="/img/friandise-cheval.png" />
        </div>

        <div class="card-product__description">
            <span>Cheval</span>
            <h4 class="alt--font">Reverdy friandises cheval vanille 3,5 kg</h4>
        </div>

        <button class="card-product__heart js-add-to-current-list">
         <svg class="svg-heart" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
            <g fill="none" fill-rule="evenodd">
               <path class="svg-heart-body" d="M28.083 13.519L16.056 26.006 3.98 13.52c-2.396-2.475-2.895-7.194.48-10.075 3.418-2.925 7.436-.806 8.908.718L16.03 6.92l2.664-2.756c1.447-1.5 5.501-3.626 8.907-.72 3.369 2.876 2.876 7.595.48 10.076z" fill="#F05D61" fill-rule="nonzero"/><path class="svg-heart-shadow" d="M13.567 24.563L25.887 12c1.169-1.19 2-2.524 2.495-4a8.948 8.948 0 0 0 .343-4.469l2.589 3.75-.718 3.907-2.214 4.156-11.696 11.625-3.119-2.407z" fill="#D4484C"/><ellipse class="svg-heart-light" fill="#FFC6C6" cx="6.497" cy="6.655" rx="2.559" ry="4.341"/><path class="svg-heart-border" d="M28.9 1.919c-3.4-2.9-8.484-2.419-11.64.844l-1.229 1.274-1.229-1.268C12.257.13 7.124-1.456 3.162 1.919-.754 5.269-.96 11.28 2.546 14.906l12.07 12.488c.387.4.898.606 1.41.606.511 0 1.023-.2 1.41-.606l12.07-12.488c3.518-3.625 3.312-9.637-.605-12.987zm-.817 11.6L16.056 26.006 3.98 13.52c-2.396-2.475-2.895-7.194.48-10.075 3.418-2.925 7.436-.806 8.908.718L16.03 6.92l2.664-2.756c1.447-1.5 5.501-3.626 8.907-.72 3.369 2.876 2.876 7.595.48 10.076z" fill="#4C4636" fill-rule="nonzero"/>
            </g>
         </svg>

         <span class="visually-hidden">Ajouter le produit à ma liste</span>
         <span>272</span>
         <span class="visually-hidden">clients ont déjà ajoutés ce produit à leur liste.</span>
      </button>

        <div class="card-product__tools">
            <button class="js-display-list-dropdown">
            Ajouter à <span class="visually-hidden">l'une de mes listes.</span>

            <ul class="list--products-list">
               <span></span>

               <form>
                  <label>Ajouter une liste</label>
                  <span>
                     <input type="text" name="Titre de la liste" />
                     <object><button class="button button--tertiary button--shadow"><i class="icon icon--plus"></i></button></object>
            </span>
            </form>
            </ul>
            </button>
            <span>Voir <i class="icon icon--chevron-right"></i></span>
        </div>
    </a>
</article>
 
<article class="card card-product">
	<a href="" aria-label="Produit pour chat - Versele Laga Senior" title="Produit pour chat - Versele Laga Senior">

      <div class="card-product__thumbnail">
         <img src="/img/friandise-cheval.png" />
      </div>
		
		<div class="card-product__description">
			<span>Cheval</span>
			<h4 class="alt--font">Reverdy friandises cheval vanille 3,5 kg</h4>
		</div>

      <button class="card-product__heart js-add-to-current-list">
         <svg class="svg-heart" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
            <g fill="none" fill-rule="evenodd">
               <path class="svg-heart-body" d="M28.083 13.519L16.056 26.006 3.98 13.52c-2.396-2.475-2.895-7.194.48-10.075 3.418-2.925 7.436-.806 8.908.718L16.03 6.92l2.664-2.756c1.447-1.5 5.501-3.626 8.907-.72 3.369 2.876 2.876 7.595.48 10.076z" fill="#F05D61" fill-rule="nonzero"/><path class="svg-heart-shadow" d="M13.567 24.563L25.887 12c1.169-1.19 2-2.524 2.495-4a8.948 8.948 0 0 0 .343-4.469l2.589 3.75-.718 3.907-2.214 4.156-11.696 11.625-3.119-2.407z" fill="#D4484C"/><ellipse class="svg-heart-light" fill="#FFC6C6" cx="6.497" cy="6.655" rx="2.559" ry="4.341"/><path class="svg-heart-border" d="M28.9 1.919c-3.4-2.9-8.484-2.419-11.64.844l-1.229 1.274-1.229-1.268C12.257.13 7.124-1.456 3.162 1.919-.754 5.269-.96 11.28 2.546 14.906l12.07 12.488c.387.4.898.606 1.41.606.511 0 1.023-.2 1.41-.606l12.07-12.488c3.518-3.625 3.312-9.637-.605-12.987zm-.817 11.6L16.056 26.006 3.98 13.52c-2.396-2.475-2.895-7.194.48-10.075 3.418-2.925 7.436-.806 8.908.718L16.03 6.92l2.664-2.756c1.447-1.5 5.501-3.626 8.907-.72 3.369 2.876 2.876 7.595.48 10.076z" fill="#4C4636" fill-rule="nonzero"/>
            </g>
         </svg>

         <span class="visually-hidden">Ajouter le produit à ma liste</span>
         <span>272</span>
         <span class="visually-hidden">clients ont déjà ajoutés ce produit à leur liste.</span>
      </button>

      <div class="card-product__tools">
         <button class="js-display-list-dropdown">
            Ajouter à <span class="visually-hidden">l'une de mes listes.</span>

            <ul class="list--products-list">
               <span></span>

               <form>
                  <label>Ajouter une liste</label>
                  <span>
                     <input type="text" name="Titre de la liste" />
                     <object><button class="button button--tertiary button--shadow"><i class="icon icon--plus"></i></button></object>
                  </span>
               </form>
            </ul>
         </button>
         <span>Voir <i class="icon icon--chevron-right"></i></span>
      </div>
	</a>
</article>
 
/* No context defined for this component. */
  • Content: 
    .card {
   position: relative;
   margin-bottom: 3rem;
   @include mediaWQuery($media-query-l) { margin-bottom: 0 }

   > a {
      display: block;
      text-decoration: none;
      border: 3px $c-brown-lighter solid;
      border-radius: 5px;
   }

   img {
		width: calc(100% + 6px);
      height: auto;
      margin: -3px -3px 0;
      border-radius: 3px 3px 0 0;
      font-size: 0;
	}
}

.card-product {
   position: relative;
   width: 100%;
   z-index: 1000;
   &:hover { z-index: 99 }

   > a {
      height: 100%;
      
      &:hover {
         .card-product__heart {
            opacity: 1;
            background-color: rgba($c-white, 1);
         }
         .card-product__tools {
            transform: translateY(calc(50% - 1rem));
            opacity: 1;
            pointer-events: auto;
         }
      }

      &:focus { border-color: $c-brown-medium }
   }

   &__thumbnail {
      position: relative;
      height: 0;
      padding-top: 100%;
      

      > img {
         position: absolute;
         top: 0;
         height: 100%!important;
         width: 100%!important;
         margin: 0;
         object-fit: contain;
      }
   }
	
	&__description {
      padding: $margin-m $margin-m 0;
      line-height: 1.1;

      span {
         margin: 0;
         font-size: rem(18);
         color: $c-red;
      }

      h4 {
         margin: 0;
         font-size: rem(21);
         color: $c-font-color;
      }
   }
   
   &__heart {
      position: absolute;
      top: .5rem;
      right: .5rem;

      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      -webkit-appearance: none;
      border: 0;
      border-radius: $border-radius-xs;
      background-color: rgba($c-white, 0);
      padding: .5rem;

      color: $c-blue;
      font-size: rem(14);
      font-family: $font-secondary;

      transition: .3s ease;

      .svg-heart {
         max-width: 40px;
         width: 40px;
         height: auto;
         & > g {
            transform: translate(4px, 6px); 
         }
         .svg-heart-body, .svg-heart-light, .svg-heart-shadow {
            opacity: 0;
            //transform: translate(6px, 0) scale(.7) rotate(38deg);
         }

         .svg-heart-border { fill: $c-blue; }
      }

      .svg-heart path { transition: .3s ease }

      &:hover, &:focus {
         cursor: pointer;
         background-color: rgba($c-white, 1)!important;

         --animation-duration: 2.2s;
         .svg-heart{
            opacity: 1;
            animation: heart-beat var(--animation-duration) infinite ease-in-out;

            &-body { opacity: 1; }

            &-light {
               opacity: 1;
               animation: heart-beat-light var(--animation-duration) infinite ease-in-out;
            }

            &-shadow{
               opacity: 1;
               animation: heart-beat-shadow var(--animation-duration) infinite ease-in-out;
            }

            &-border{
               opacity: 1;
               fill: $c-brown-dark!important;
            }
         }
      }
   }

   &__tools {
      display: flex;
      margin: 0 1rem -1rem;

      border: 3px solid $c-brown-lighter;
      background: $c-white;
      border-radius: $border-radius-l;
      box-shadow: 0 10px 30px -15px rgba(0, 0, 0, .2);
      transform: translateY(calc(50% - 1rem));

      @include mediaWQuery($media-query-l) {
         opacity: 0;
         pointer-events: none;
         transform: translateY(0);
      }

      transition: .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

      > * {
         color: $c-black;
         font-family: $font-secondary;
         font-size: rem(18);
         font-weight: 700;
      }

      & > button {
         //position: relative;
         display: flex;
         justify-content: space-between;
         align-items: center;
         flex-grow: 1;
         outline: none;

         padding: .7rem 1rem;

         -webkit-appearance: none;
         border: 0;
         border-right: 3px solid $c-brown-lighter;
         border-radius: $border-radius-l 0 0 $border-radius-l;
         background: transparent;

         transition: .3s ease;

         &::after {
            content: '';
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-left: .5rem;
            background: $c-yellow;
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fas' data-icon='chevron-down' class='svg-inline--fa fa-chevron-down fa-w-14' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23332D2D' d='M207 381.5L12.7 187a24 24 0 010-34l22.7-22.6a24 24 0 0133.9 0l154.7 154 154.7-154a24 24 0 0134 0l22.6 22.7a24 24 0 010 34L241 381.4a24 24 0 01-34 0z'/%3E%3C/svg%3E");
            background-size: 13px auto;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 12px;
         }

         &:hover, &:focus {
            background: $c-brown-lighter;
            cursor: pointer;
            opacity: 1;
         }

         > ul {
            display: none;
            position: absolute;
            top: calc(100% - 5px);
            right: -10px;
            width: calc(100% + 1rem);
            z-index: 100000;

            @include mediaWQuery($media-query-m) {
               width: calc(120% + 1rem);
            }

            li {
               padding: .5rem 1rem;
               font-weight: 700;
               font-size: rem(18);
               transition: .3s ease;

               a {
                  display: block;
                  color: $c-black;
                  padding: 0!important;
                  margin: 0;
               }

               &:hover, &:focus { background: $c-yellow }
            }

            &.is-showing {
               display: block;
            }
         }
      }

      & > button form {
         border-top: 1px solid $c-brown-lighter;

         padding: $margin-s $margin-m;

         > span {
            display: flex;
            align-items: stretch;

            input {
               width: auto;
               min-width: 0;
               padding: .5rem;
            }

            object {
               margin-left: -10px
            }

            object button {
               padding: 0;
               width: 47px;
               height: 47px;
            }
         }
      }

      > span {
         border-radius: 0 $border-radius-l $border-radius-l 0;
         padding: .7rem;
         transition: .2s ease;

         > i { margin-top: -7px }

         &:hover, &:focus {
            background: $c-brown-lighter;
         }
      }
   }

   &--favorite {
      .svg-heart {
         &__body { fill: #F05D61; }
         &__fill { fill: #4C4636; }
         &__shadow { fill: #D4484C; }
      }
   }

   &--show-tools {
      .card-product__tools {
         transform: translateY(calc(50% - 1rem));
         opacity: 1;
         pointer-events: auto;
      }
   }
}

@keyframes heart-beat{
   0%  {transform: scale(1);}
   15% {transform: scale(1.1);}
   30% {transform: scale(1);}
   45% {transform: scale(1.1);}
   60% {transform: scale(1);}
   100%{transform: scale(1);}
}
@keyframes heart-beat-light{
   0%  {transform: translate(6px, 0) scale(.7) rotate(38deg);}
   15% {transform: translate(6px, -1px) scale(.8) rotate(38deg);}
   30% {transform: translate(6px, 0) scale(.7) rotate(38deg);}
   45% {transform: translate(6px, -1px) scale(.8) rotate(38deg);}
   60% {transform: translate(6px, 0) scale(.7) rotate(38deg);}
   100%{transform: translate(6px, 0) scale(.7) rotate(38deg);}
}
@keyframes heart-beat-shadow{
   0%  {opacity: 1;}
   15% {opacity: .7;}
   30% {opacity: 1;}
   45% {opacity: .7;}
   60% {opacity: 1;}
   100% {opacity: 1;}
}
  • URL: /components/raw/card-product/card-product.scss
  • Filesystem Path: components/06-components/04-cards/01-card-product/card-product.scss
  • Size: 7.8 KB
  • Content: 
    // FOR DEMO ONLY
sessionStorage.setItem('productLists', JSON.stringify([
   {
      id: 1,
      title: "Théo, Gally & Chloé"
   },
   {
      id: 2,
      title: "Bella"
   },
   {
      id: 3,
      title: "Les poissons"
   }
]));
// end. DEMO


/*
 * Add product to the current or first list
 * @param
 * - productID: int
 *
 */
const addProductToCurrentList = () => {

}

// Get all button
let togglesAPTCL = document.getElementsByClassName('js-add-to-current-list');
[].slice.call(togglesAPTCL).forEach(toggle => {
   toggle.addEventListener('click', event => {
      event.preventDefault();
      addProductToCurrentList();
   })
})





/*
 * Add product to the current or first list
 * @param
 * - productID: int
 *
 */
const displayListDropdown = el => {

   // Get listing and clean content
   let listProductContainer = el.querySelector('ul');
   let listProductContainerSpan = listProductContainer.querySelector('span');
   listProductContainerSpan.innerHTML = "";

   // Parse sessionStorage productLists
   let productLists = JSON.parse(sessionStorage.getItem('productLists'));
   //let span = document.createElement('span');

   productLists.forEach(productList => {
      
      let li = document.createElement('li');
      let a = document.createElement('a');

      a.innerHTML = productList.title;
      li.appendChild(a);
      li.setAttribute('data-list-product-ID', productList.id);
      listProductContainerSpan.appendChild(li);
   });
   

   // Toggle display the list
   listProductContainer.classList.toggle('is-showing');
}

let togglesDLD = document.getElementsByClassName('js-display-list-dropdown');
[].slice.call(togglesDLD).forEach(toggle => {
   toggle.addEventListener('click', event => {
      event.preventDefault();
      displayListDropdown(toggle);
   })
})




/*
 * Remove active list product when user leave card product
 *
 */

let cardsProduct = document.querySelectorAll('.card-product');
[].slice.call(cardsProduct).forEach(cardProduct => {
   let cardProductLink = cardProduct.querySelector('a');
   cardProductLink.addEventListener('focus', () => {
      let activeCard = document.querySelector('.card-product--show-tools');
      if(activeCard) activeCard.classList.remove('card-product--show-tools');

      cardProduct.classList.add('card-product--show-tools');
   })

   cardProduct.addEventListener('mouseleave', () => {
      let activeList = document.querySelector('.is-showing');
      if(activeList)
         activeList.classList.remove('is-showing');

      cardProduct.classList.remove('card-product--show-tools');
   })

   // disable close on click input
   let cardProductInput = cardProduct.querySelector('input');
   cardProductInput.addEventListener('click', event => {
      event.stopPropagation();
      event.preventDefault();
   })

   // Add list
   let cardProductAddList = cardProduct.querySelector('object button');
   cardProductAddList.addEventListener('click', event => {
      event.preventDefault();
      event.stopPropagation();

      
   })
})
  • URL: /components/raw/card-product/card-product.js
  • Filesystem Path: components/06-components/04-cards/01-card-product/card-product.js
  • Size: 3 KB

There are no notes for this item.