Produkt FlexLayout v2024

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=NOTD55730">          
          </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-name-area">
          <h3>DELL Latitude 5340/ i5-1345U/ 16GB/ 512GB SSD/ 13.3" FHD/ FPR/ Iris Xe/ W11Pro/ vPro/ 3Y PS on-site </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>
        </div>
        <div class="__stock-area">
          <a href="#" class="__on-stock">Brno <b>5 ks</b></a>
          <a href="#" class="">Praha <b>24.12.</b></a>
          <a href="#" class="">ČB <b>25.12.</b></a>
          <a href="#" class="">EXT <b>25.12.</b></a>
        </div>
        <div class="__meta-area">
          <div>PN: N-3525-N2-555K</div>
          <div>Kód: NOTD53860</div>
        </div>
      </div>
    </article>
      
			<article>
      <a href="" rel="bookmark">
        <div class="__product-image-area">
          <div...

CSS

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

body {font-size:13px; font-family: 'Roboto', sans-serif;}
main {background: #f1f4f6; padding:1em}
#__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; overflow:hidden}
#__main-prod-list article a {text-decoration:none;}
#__main-prod-list article.hover {box-shadow:0 0.46875rem 2.1875rem rgba(4,9,20,.03), 0 0.9375rem 1.40625rem rgba(4,9,20,.03), 0 0.25rem 0.53125rem rgba(4,9,20,.05), 0 0.125rem 0.1875rem rgba(4,9,20,.03)}

@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: 5px; left: 5px; display: flex; flex-direction: column; gap: 2px;}
#__main-prod-list .__product-tags li { background: #e4ebf5; padding: 3px 5px; color: #67818a; font-size:10px; text-align:center...

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');
      }, 1000);
  });
}

/* přidat ke všem inputům na počt produktů ovladače*/
$(document).ready(function() {
    $(".__buy-area").append('<div class="QtyControll"><div class="pridatKus">+</div><div class="odebratKus">-</div></div>');
});

/*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);
				}
			});
		});