Как в pug миксином передать разные данные для однотипных карточек?

Question

[Кирилл]

Только начинаю трогать pug и нуждаюсь в помощи.
Сделал шаблон карточки в pug файле, который с помощью миксина хочу передавать в другой файл с разными данными (дополнительным классом, картинкой и текстовыми данными):

mixin masonry-card(ClassName, product)
  .masonry-card(class= ClassName)
    a.masonry-card__img-wrapper(href="#")
      img.masonry-card__img(src="img/" + product.img)
    .masonry-card__info
      a.masonry-card__title(href="#")= product.title
      a.masonry-card__author(href="#")= product.author
      span.masonry-card__type Картина,  80x60 см.
    .masonry-card__footer
      .masonry-card__price= product.price
        <span class="masonry-card__price-rub">7</span>
      .masonry-card__old-price= product.oldPrice

Пытаюсь вставить в другой файл таким способом:

include ../masonry-card/masonry-card
      +masonry-card('new-works__grid-item', {img: 'masonry-card-1.jpg', title: 'abc', author: 'author', price: '12348', oldPrice: '23456'})

Выдает ошибки, видно что-то не так с синтаксисом. Как сделать правильно, чтобы работало? И если этих карточек будет, допустим, 10 штук, как мне их перебрать давая подобные данные каждой из них?
И еще один вопрос: допустим некоторым карточкам выборочно я хочу добавлять какой-то div, как это можно сделать?

Answer 1

[SagePtr]

Не уверен, что уровень вложенности у вас правильный, попробуйте элемент разместить на одном уровне с include:

include ../masonry-card/masonry-card
+masonry-card('new-works__grid-item', {img: 'masonry-card-1.jpg', title: 'abc', author: 'author', price: '12348', oldPrice: '23456'})

Comments

[Кирилл]

Да, помогло! спасибо.

Answer 2

[G F]

Когда передаешь объект, он должен быть в json формате т.е. тебе ключи надо в ковычки взять

Comments

[G F]

Надеюсь я не чушь написал сейчас.
Давно с пагом работал.

[Кирилл]

+masonry-card('new-works__grid-item',{
img: 'masonry-card-1.jpg',
title: 'Екатерина Александровна Преображенская',
price: '927 750',
oldPrice: '727 750'})

вот так у меня получилось. Осталось еще 2 момента:

1. если карточек 10 штук, есть ли смысл в использовать цикл или проще 10 раз добавить данный миксин с разными данными?
2. В данной карточке иногда нужно выводить стикеры, (div с текстом), как примерно это дело прописать в миксине, чтобы передать как еще один ключ типа sticker: true, sticker-content: 'asdf'?

[G F]

1. Есть конечно.
2. Добавьте if блок внутри миксина.
Кирилл

[Кирилл]

G F, в общем я продолжаю себя закапывать...

Теперь миксин такого вида

mixin masonry-card(ClassName, dataCard, sticker)
  - sticker.view = 'false'
  .masonry-card(class= ClassName)
    a.masonry-card__img-wrapper(href="#")
      img.masonry-card__img(src="img/" + dataCard.img)
    .masonry-card__info
      if sticker.view == 'true'
        include ../card-sticker/card-sticker
        +card-sticker(sticker.class, sticker.text, sticker.mod)
      a.masonry-card__title(href="#")= dataCard.title
      a.masonry-card__author(href="#")= dataCard.author
      span.masonry-card__type Картина,  80x60 см.
    .masonry-card__footer
      .masonry-card__price= dataCard.price
        <span class="masonry-card__price-rub">7</span>
      .masonry-card__old-price= dataCard.oldPrice

миксин card-sticker

mixin card-sticker(ClassName, text, mod)
  span.card-sticker(class= ClassName.ClassName+'--'+mod)= text

вызов первого миксина

+masonry-card('new-works__grid-item', {
img: 'masonry-card-1.jpg',
title: 'Распоряжения о структуре тут длинное название картины',
aithor: 'Екатерина Александровна Преображенская',
price: '927 750',
oldPrice: '727 750'}, {
view: 'true',
class: 'masonry-card__card-sticker',
text: 'Новинка',
mod: 'new'
})

выдает ошибку:

[00:23:43] Plumber found unhandled error:
TypeError in plugin "gulp-pug"
Message:
/Users/kirillkulikov/Documents/GitHub/ArtGallery/src/blocks/masonry-card/masonry-card.pug:2
1| mixin masonry-card(ClassName, dataCard, sticker)
> 2| - sticker.view = 'false'
3| .masonry-card(class= ClassName)
4| a.masonry-card__img-wrapper(href="#")
5| img.masonry-card__img(src="img/" + dataCard.img)

Cannot set property 'view' of undefined
Details:
path: /Users/kirillkulikov/Documents/GitHub/ArtGallery/src/blocks/masonry-card/masonry-card.pug
я передаю параметры миксина sticker и указываю их в качестве ключей параметра-объекта sticker в миксине masonry-card, и вызываю проверку if sticker.view == 'true', чтобы выводить или нет его в карточке. Хочется сделать все по красоте, но слишком много сложностей возникает. Спасибо за помощь в любом случае)