EU Cart v24

by Petr Haluza

HTML

<link rel="stylesheet" href="http://megashophal3000.1md.cz/hal3000/stylesheets/style.css?v=2">
<link rel="stylesheet" href="http://megashophal3000.1md.cz/hal3000/stylesheets/bootstrap.min.css">
<div id="CartBox">

	<div class="CBrow">
		<div class="CBleft">
			<div class="CBimg">
				<a href="#"><img src="https://www.img4.cz/www/img/imgthumb?code=PCHS2769"></a>
			</div><!-- /.CBimg -->
			<div class="CBname">
				<div class="name-product">
					<a href="/cs/303158-hal3000-herni-sestava-mcr-2024-amd" title="HAL3000 Herní sestava MČR 2024 (AMD)">HAL3000 Herní sestava MČR 2024 Ultimate (AMD)</a>
				</div>
				<div class="cart-store">
					<span>skladem  1 ks</span>
					<span class="openStoreModalList" style="cursor: pointer;" data-id="303158">Termíny doručení</span>
				</div>
			</div><!-- /.CBname -->
		</div><!-- /.CBleft -->
		<div class="CBright">
			<div class="price" data-text="Cena za kus">59 990 Kč</div>
      <div class="quantity">
				<input type="number" value="1">
			</div>
			<div class="total" data-text="Cena za položku">59 940 Kč</div>
		</div><!-- /.CBright -->
	</div><!-- /.CBrow -->

	<div class="CBrow">
		<div class="CBleft">
			<div class="CBimg">
				<a href="#"><img src="https://www.img4.cz/www/img/imgthumb?code=PCHS2769"></a>
			</div><!-- /.CBimg -->
			<div class="CBname">
				<div class="name-product">
					<a href="/cs/303158-hal3000-herni-sestava-mcr-2024-amd" title="HAL3000 Herní sestava MČR 2024 (AMD)">HAL3000 Herní sestava MČR 2024</a>
				</div>
				<div class="cart-store">
					<span>skladem  1 ks</span>
					<span class="openStoreModalList" style="cursor: pointer;" data-id="303158">Termíny doručení</span>
				</div>
			</div><!-- /.CBname -->
		</div><!-- /.CBleft -->
		<div class="CBright">
			<div class="price" data-text="Cena za kus">59 990 Kč</div>
      <div class="quantity">
				<input type="number" value="1">
			</div>
			<div class="total" data-text="Cena za položku">59 940 Kč</div>
		</div><!-- /.CBright -->
	</div><!--...

CSS

/* jen DEMO */
#CartBox {max-width:756px} /* je max v kontaineru na HAL3000*/


#CartBox .CBrow {display:flex; justify-content: space-between}
#CartBox .CBleft,
#CartBox .CBright {display:flex; align-items: center;}

#CartBox .CBimg img {max-width: 100px}
#CartBox input[type='number'] {width: 52px; padding: 5px 0 5px 17px;}

/* prava část */
.CBright * {white-space:nowrap}
.CBright div[data-text] {position: relative}
.CBright div[data-text]:before { content: attr(data-text); position: absolute; font-size: 10px; color: var(--main-subGray); bottom: -15px; opacity: 0}
.CBrow:hover div[data-text]:before {opacity:.8}
.CBright .price {opacity:0}
.showPpp .CBright .price {opacity:1}
.CBright .quantity {margin: 0 8px}
.CBright .total { text-align: right; color: var(--main-blue); font-size: 18px;}

#CartBox { container-type: inline-size;}
.CBrow {  background-color: hotpink;}
@container (max-width: 500px) {
  .CBrow { background-color: red; }
}

JavaScript

$(document).ready(function() {
            function checkInputValues() {
                $('.CBrow').each(function() {
                    var inputValue = $(this).find('input').val();
                    if (inputValue > 1) {
                        $(this).addClass('showPpp');
                    } else {
                        $(this).removeClass('showPpp');
                    }
                });
            }
            // Kontrola hodnot při načtení stránky
            checkInputValues();
            // Kontrola hodnot při změně inputu
            $('input').on('input', function() {
                checkInputValues();
            });
        });