Produkt FlexLayout v2025d

// dárky // přepracován overflow, ať můžou ven dárky a clipboard hláška

by Petr Haluza

HTML

<main>
  <section id="__main-prod-list" class="style-gallery">


      
		<article>
      <a href="#" rel="bookmark">
        <div class="__product-image-area">
          <div class="__product-image">
            <img src="https://www.img4.cz/www/img/imgthumb?code=NOTCA0558">          
          </div>
          <ul class="__product-tags">
            <li class="__cenova-akce">CENOVÁ AKCE</li>
            <li class="__">3 ROKY ZÁRUKY</li>
          </ul>
          <ul class="__product-functions">
            <li><button>🔍 Náhled</button></li>
            <li><button>♡ Oblíbený</button></li>
            <li><button>✔ Porovnat</button></li>
            <li><button>Do nabídky</button></li>
            <li><button>Expresní nákup</button></li>
          </ul>          
        </div>
        <div class="__product-gift-area">
          <div><!-- opakovat pro vic darku -->
            <div><img src="https://www.img4.cz/www/img/imgthumb?code=YY002638"></div>
            <h4>+<span>Wifi kamera XtendLan OKO 26</span></h4>
          </div>
        </div>
        <div class="__product-name-area">
          <h3>DELL Latitude 5340/ i5-1345U/ 16GB/ 512GB / 13.3" </h3>
        </div>
      </a>
      
      <div>
        <div class="__price-area">
          <div class="__main-price"><span><b>26 493 Kč</b> bez DPH</span></div> 
          <div class="__secondary-price">
            <span>32 110 Kč s DPH</span>
            <span>26 537 Kč bez DPH + popl.</span>
          </div>
          <div class="__buy-area">
							<input type="text" value="Koupit" class="fakeButton" disabled>
							<input type="text" value="1" class="quantity">
              <div class="QtyControll"><div class="pridatKus">+</div><div class="odebratKus">-</div></div>
          </div>
        </div>
        <div class="__stock-area">
          <a class="__on-stock">Brno <b>5 ks</b></a>
          <a class="">Praha <b>24.12.</b></a>
          <a class="">ČB...

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap');


body {font-size:13px; font-family: 'Roboto', sans-serif;} /* Roboto Inter Poppins */
main {background: #f1f4f6; padding:1em; margin: 2em 0 4em}
#__main-prod-list {display: flex;flex-wrap: wrap; gap: 1em; container-type: inline-size;  container-name: galleryHolder; position:relative; }



#__main-prod-list article { display: flex;flex-direction: column;justify-content: space-between; transition: width 0.4s ease; width:300px; background-color: hsla(217, 83%, 70%, 0.1); border: none; border-radius:3px; position: relative;}
#__main-prod-list article a {text-decoration:none; overflow:hidden}
#__main-prod-list article.hover {box-shadow:0 0 0px 1px white, 0 5px 10px rgba(4,9,20,.2) }

@container galleryHolder (max-width: 1800px) { #__main-prod-list article {  width: 20% } }
@container galleryHolder (max-width: 1400px) { #__main-prod-list article {  width: 25% } }
@container galleryHolder (max-width: 1130px) { #__main-prod-list article {  width: 33% } }
@container galleryHolder (max-width: 850px)  { #__main-prod-list article {  width: calc(50% - .5em) } }
@container galleryHolder (max-width: 500px)  { #__main-prod-list article { width: 100% } }



#__main-prod-list .__product-image-area { position: relative; padding: 5px 5px 0}
#__main-prod-list .__product-image { background: white; border-radius: 2px; overflow: hidden; text-align: center}
#__main-prod-list .__product-image img {max-width:100%;max-height:100%; height:220px; transition: transform .15s}
#__main-prod-list .hover .__product-image img { transform: translate(-50px, 0px);}


#__main-prod-list .__product-tags { position: absolute; top: 7px; left: 0px; display: flex;...

JavaScript

/* zakázat link na vysouvacím panelu funkcí */
$(".__product-functions").click(function (e) {
  e.preventDefault()
})

/* hover pro box produktu / ukážeme funkce */
$("article").each(articleHover)
function articleHover(i, element) {
  var articleTimeout
  $(this).hover(
    function () {
      clearTimeout(articleTimeout)
      $(this).addClass("hover")
    },
    function () {
      var $self = $(this)
      articleTimeout = setTimeout(function () {
        $self.removeClass("hover")
      }, 150)
    },
  )
}

/* hover pro inputy počtu produktu do košíku */
$(".__buy-area").each(createHover)
function createHover(i, element) {
  var hoverTimeout
  $(this).hover(
    function () {
      clearTimeout(hoverTimeout)
      $(this).addClass("hover")
    },
    function () {
      var $self = $(this)
      hoverTimeout = setTimeout(function () {
        $self.removeClass("hover")
      }, 700)
    },
  )
}

/*ovladač počtu kusů do košíku, už je na b2b*/
$(document).ready(function () {
  $("body").on("click", ".pridatKus", function (e) {
    var $kusy = $(this).parent().prev(".quantity").val()
    var $max = $(this).parent().prev(".quantity").attr("data-max")
    if ($max != undefined && $kusy != undefined) {
      if ($kusy >= $max) {
        alert("Toto zboží lze objednat v maximálním počtu " + $max + " ks")
        return false
      }
    }
    $(this)
      .parent()
      .prev(".quantity")
      .val(parseInt($kusy) + 1)
  })

  $("body").on("click", ".odebratKus", function (e) {
    var $kusy = $(this).parent().prev(".quantity").val()
    if (parseInt($kusy) > 0) {
      $(this)
        .parent()
        .prev(".quantity")
        .val(parseInt($kusy) - 1)
    }
  })
})

/* zkopírování d clipboardu + efekt */
$(".__meta-area > div").click(function () {
  var $temp = $("<input class='temp'>")
  $("body").append($temp)
  $temp.val($(this).find("a").text()).select()
 ...