K
K
Kirill2020-10-18 22:43:24
Pug
Kirill, 2020-10-18 22:43:24

How to pass different data for cards of the same type in pug mixin?

Just starting to touch pug and need help.
I made a card template in a pug file, which I want to transfer using a mixin to another file with different data (additional class, picture and text data):

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

I'm trying to paste into another file like this:

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


It gives errors, something is wrong with the syntax. How to do it right so that it works? And if there are, say, 10 of these cards, how can I sort through them, giving similar data to each of them?
And one more question: let's say I want to selectively add some kind of div to some cards, how can this be done?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
S
SagePtr, 2020-10-19
@Lirrr

Not sure if your nesting level is correct, try placing the element at the same level as the 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'})

G
GF, 2020-10-18
@fomenkogregory

When you pass an object, it must be in json format i.e. you need to take the keys in quotes

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question