Чтобы создать миксин в Pug для вывода товаров однотипных, вы можете использовать следующий код:
mixin productCard(title, price, image)
.product-card
.product-card__image
img(src=image)
.product-card__info
h2.product-card__title= title
p.product-card__price= price
В этом примере создается миксин под названием productCard, который принимает три параметра: title - заголовок товара, price - цена товара и image - путь к изображению товара.
Затем внутри миксина мы создаем структуру для карточки товара, которая состоит из трех блоков: .product-card, .product-card__image и .product-card__info.
Внутри блока .product-card__image размещается изображение товара, а в блоке .product-card__info располагаются заголовок и цена товара.
Чтобы использовать миксин и вывести товары на странице, вам нужно вызвать его следующим образом:
+productCard('Название товара', '100$', '/путь/к/изображению.jpg')
+productCard('Другой товар', '50$', '/путь/к/другому/изображению.jpg')
Вы можете вызвать миксин несколько раз, передавая ему разные значения для каждого товара. Например, в приведенном выше коде мы создаем две карточки товара.
Пользуясь этим примером, вы можете создавать и стилизовать карточки товаров однотипным образом в вашем проекте, используя Pug. Вы также можете расширить миксин, добавив дополнительные параметры для настройки внешнего вида карточек товаров.