39 lines
1.3 KiB
Plaintext
39 lines
1.3 KiB
Plaintext
|
//- Product card mixin - displays a product in grid/list view
|
||
|
|
//- Parameters:
|
||
|
|
//- product: { id, name, price, image, rating, category }
|
||
|
|
|
||
|
|
mixin product-card(product)
|
||
|
|
article.product-card
|
||
|
|
a.product-image(href="/products/" + product.id)
|
||
|
|
img(src=product.image alt=product.name)
|
||
|
|
if product.sale
|
||
|
|
span.badge.badge-sale Sale
|
||
|
|
.product-info
|
||
|
|
span.product-category #{product.category}
|
||
|
|
h3.product-name
|
||
|
|
a(href="/products/" + product.id) #{product.name}
|
||
|
|
.product-rating
|
||
|
|
+rating(product.rating)
|
||
|
|
.product-footer
|
||
|
|
span.product-price $#{product.price}
|
||
|
|
button.btn.btn-primary.btn-sm(data-product=product.id) Add to Cart
|
||
|
|
|
||
|
|
//- Featured product card with larger display
|
||
|
|
mixin product-featured(product)
|
||
|
|
article.product-card.product-featured
|
||
|
|
.product-image-large
|
||
|
|
img(src=product.image alt=product.name)
|
||
|
|
if product.sale
|
||
|
|
span.badge.badge-sale Sale
|
||
|
|
.product-details
|
||
|
|
span.product-category #{product.category}
|
||
|
|
h2.product-name #{product.name}
|
||
|
|
p.product-description #{product.description}
|
||
|
|
.product-rating
|
||
|
|
+rating(product.rating)
|
||
|
|
span.review-count (#{product.reviewCount} reviews)
|
||
|
|
.product-price-large $#{product.price}
|
||
|
|
.product-actions
|
||
|
|
button.btn.btn-primary.btn-lg Add to Cart
|
||
|
|
button.btn.btn-outline Wishlist
|