Fractal Starter
Project version : 0.1.2

Block Product Modal 

<div class="block-product-modal" id="modal-added-to-cart">
    <div class="block-product-modal__container">
        <div class="block-product-modal__message">
            <h2>Merci !</h2>
            <p>Vous venez d’ajouter <span id="blockProductName">Moduled Barre LED RVB Ayrton 150</span> à votre demande de devis.</p>
            <p>Vous pourrez adapter la quantité si nécessaire dans le formulaire de votre demande de devis.</p>

            <div class="block-product-modal__buttons">
                <a href="" class="button button--black button--close-modal">Continuer sur le catalogue</a>
                <a href="/devis/" class="button button--gold">Finaliser mon devis</a>
            </div>
        </div>

        <div class="block-product-modal__aside">
            <h3 class="h4">Nous vous conseillons ces produits associés</h3>
            <div id="js-request-card-product"></div>
        </div>

        <button class="button--close-modal button--unstyled">Fermer<span> cette fenêtre</span></button>
    </div>
</div>
 
<div class="block-product-modal" id="modal-added-to-cart">
   <div class="block-product-modal__container">
      <div class="block-product-modal__message">
         <h2>Merci !</h2>
         <p>Vous venez d’ajouter <span id="blockProductName">Moduled Barre LED RVB Ayrton 150</span> à votre demande de devis.</p>
         <p>Vous pourrez adapter la quantité si nécessaire dans le formulaire de votre demande de devis.</p>

         <div class="block-product-modal__buttons">
            <a href="" class="button button--black button--close-modal">Continuer sur le catalogue</a>
            <a href="/devis/" class="button button--gold">Finaliser mon devis</a>
         </div>
      </div>

      <div class="block-product-modal__aside">
         <h3 class="h4">Nous vous conseillons ces produits associés</h3>
         <div id="js-request-card-product"></div>
      </div>

      <button class="button--close-modal button--unstyled">Fermer<span> cette fenêtre</span></button>
   </div>
</div>
 
{
  "card_product": {
    "title": "Moduled Barre LED RVB Ayrton 250",
    "thumb": "<img src=\"https://source.unsplash.com/featured/?light\" alt=\"\" />",
    "price": "35€"
  }
}
  • Content: 
    .block-product-modal {
   position: fixed;
   height: 100vh;
   width: 100vw;
   top : 0;
   left: 0;
   overflow-y: scroll;
   background: rgba(255, 255, 255, .5);
   z-index: 9999999;

   &__container {
      margin: 2rem auto 0;
      max-width: 1300px;
      position: relative;
      padding: 3rem 1rem 1rem;
      background: $c-white;
      box-shadow: 0 8px 32px 0 rgba(0,0,0,0.2);

      @include mediaWQuery($media-query-l) {
         padding: 5rem 3rem 2rem;
         display: grid;
         grid-template-columns: 3fr 2fr;
         grid-gap: $grid-gap-xl;
      }

      > .button--close-modal {
         position: absolute;
         top: 0;
         right: 1rem;
         -webkit-appearance: none;
         border: 0;
         background: $c-black;
         color: $c-white;
         font-family: $font-primary;
         padding: 1rem 2rem;
         cursor: pointer;
         transition: .2s ease;

         &:hover { background: lighten($c-black, 10%) }

         > span {
            display: none;
            @include mediaWQuery($media-query-m) { display: inline }
         }

         i { display: none!important }
      }
   }

   &__message {
      position: relative;
      margin-bottom: $margin-l;

      p { max-width: 50ch }

      #blockProductName { font-weight: 700 }

      @include mediaWQuery($media-query-l) {
         margin-bottom: 0;
         padding-right: 2rem;

         &::after {
            content: '';
            position: absolute;
            top: -5rem;
            right: -1rem;
            width: 1px;
            height: calc(100% + 5rem + 2rem);
            background: $c-gray-30;
         }
      }
   }

   &__buttons {
      margin-top: $margin-l;

      @include mediaWQuery($media-query-s) {
         display: flex;
         justify-content: space-between;
         margin-top: $margin-xl;
      }

      .button + .button {
         margin-top: .5rem;

         @include mediaWQuery($media-query-s) {
            margin-top: 0;
         }
      }
   }
}

.site .block-product-modal {
   display: none;
}
  • URL: /components/raw/block-product-modal/block-product-modal.scss
  • Filesystem Path: components/06-components/02-blocks/08-block-product-modal/block-product-modal.scss
  • Size: 2.1 KB
  • Content: 
    let closeModal = document.querySelectorAll(".button--close-modal");
let modalAdded = document.getElementById("modal-added-to-cart");

if (closeModal) {
  [].slice.call(closeModal).forEach(close => {
    close.addEventListener("click", event => {
      event.preventDefault();
      modalAdded.style.transition = ".5s ease";
      modalAdded.style.opacity = "0";
      setTimeout(() => {
        modalAdded.style.display = "none";
      }, 600);
    });
  });

  document.body.addEventListener("keyup", event => {
    if (event.key == "Escape" && closeModal[0]) {
      closeModal[0].click();
    }
  });
}
  • URL: /components/raw/block-product-modal/block-product-modal.js
  • Filesystem Path: components/06-components/02-blocks/08-block-product-modal/block-product-modal.js
  • Size: 606 Bytes

There are no notes for this item.