_products.html

<!-- Wappler include head-page="index.html" appconnect="local" is="dmx-app" bootstrap4="local" fontawesome_5="cdn" jquery_slim_33="local" id="products" components="{&quot;dmxFormatter&quot;:{}}" -->
<section id="products">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<h1 class="mt-3" dmx-show="(params.category != &quot;all&quot;)">{{dvMetaTags.data[0].metaPage}}</h1>
				<h1 class="mt-3" dmx-show="(params.category == &quot;all&quot;)">Products</h1>
			</div>
		</div>
		<div class="row mt-4" is="dmx-repeat" id="rptProducts" dmx-bind:repeat="dvProducts.data">
			<div class="col-12 col-md-4 col-lg-3">
				<div class="card h-100 d-flex">
					<img class="card-img-top flex-grow-1 img-fluid" alt="Card image cap" dmx-bind:src="assets/images/products/{{ProductID}}/thumbs/{{qryImages[0].ProductImageFile}}" dmx-show="qryImages.hasItems()">
					<img class="card-img-top flex-grow-1 img-fluid" alt="Card image cap" src="assets/images/products/no-image.jpg" dmx-hide="qryImages.hasItems()">
					<div class="card-body">
						<h4 class="card-title" dmx-text="ProductName">Card title</h4>
						<p dmx-text="ProductPrice.formatCurrency(&quot;$&quot;, &quot;.&quot;, &quot;,&quot;, &quot;2&quot;)"></p>
						<p class="card-text" dmx-html="ProductShortDesc"></p>
					</div>
					<div class="card-footer pt-0 pb-0 pl-0 pr-0">
						<button class="btn btn-primary btn-block" dmx-on:click="dsCart.upsert({productid: ProductID},{productid: ProductID, quantity: `quantity + 1`, productname: ProductName, productprice: ProductPrice});mdlShoppingCart.show()"
							dmx-class:text-warning="dsCart.data.values(`productid`).contains(ProductID)">
							<i class="fas fa-cart-plus fa-lg"></i>&nbsp; Add<span dmx-show="dsCart.data.values(`productid`).contains(ProductID)">ed</span> to Cart
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>