Как в html препроцессорах вносить изменения в повторяющиеся элементы?

Question

[Думай Головой]

Всем привет!

Пример: при разработке интернет магазина нужно поставить заглушку в виде списка товаров (буквально три наименования в 10 рядов). Чтобы не громоздить код используем html препроцессор и создаём шаблон карточки товара. Этот шаблон выводится встроенным в препроцессор циклом, т.к. html структура тегов у каждой карточки товара повторяется, но различаются название, цена, src картинки.

1) Но как эти различия выводить через цикл?
2) Что если есть карточка товара (допустим вторая в седьмом ряду), у которой помимо основной html разметки есть какие-нибудь лейблы в виде NEW, TOP RATED и тп - как прописать эти данные в цикл вывода?

То есть грубо говоря есть шаблон карточки:

<div class="item">
    <div class="item_img">
        <img src="path/to/img" alt="alt">
    </div>
    <h3 class="item_title">Product title</h3>
    <p class="item_price">100$</p>
    <p class="item_text">Lorem ipsum dolor sit amet.</p>
</div>

Но есть карточки, чей шаблон немного отличается, допустим у второй картинки в седьмом ряду есть лейбл NEW:

<div class="item">
    <div class="item_img">
        <img src="path/to/img" alt="alt">
        <div class="item_label">NEW</div>
    </div>
    <h3 class="item_title">Product title</h3>
    <p class="item_price">100$</p>
    <p class="item_text">Lorem ipsum dolor sit amet.</p>
</div>

Вот как это всё в одном цикле замутить?

Comments

[Михаил Чирский]

я так и не понял, вы ищете шаблонизатор, или же выводите родным WP на php?
Ну в любом случае есть условные операторы, сейчас покажу на вашем примере

[Михаил Чирский]

jsfiddle.net/ztpc3ytg/1

Answer 1

[jlekapb]

в jade я бы создал миксин, который выводит товар, а в качестве аргумента передавал бы количество создаваемых блоков.

Текст, который должен содержаться в блоках товара, можно описать в json файле.
NEW, TOP RATED передать в качестве аргументов.

Comments

[Думай Головой]

блин, похоже в случае сетки 3*10 проще не заморачиваться

[jlekapb]

Думай Головой: зависит от сложности проекта.

Answer 2

[Михаил Чирский]

Смотря какие препроцессоры вы используете, ну как и везде, есть условные операторы if, else, сообственно все выводите также, просто где есть доп. атрибуты проверяете их наличие и выводите.

Или скиньте ваш кусок кода, будет проще помочь.

Comments

[Думай Головой]

Шаблонизатор как раз и выбираю, чтобы понять какой гибче.

Код в вопросе дописал.

[Думай Головой]

Но как именно проверяется условие в цикле?
То есть цикл выводит шаблон и с чем именно должен сверяться If?

[Михаил Чирский]

Я потому и спросил у вас, какой вы хотите использовать шаблонизатор типо jade, как предложил jlekapb или на родном php от WP? я же так понял у вас на WP сайт?

[Михаил Чирский]

Шаблонизаторов очень много, вот например один из них: habrahabr.ru/post/148573
если минимальные знания js есть, вопрос с if отпадет

[Думай Головой]

Михаил Чирский
как раз php пока не нужен, делаю фронтенд со всякими заглушками на html

[Михаил Чирский]

Думай Головой: тогда пост выше) думаю все станет ясно, это элементарщина

Answer 3

[Думай Головой]

Нашёл ответ касаемо первого моего вопроса
stackoverflow.com/questions/24316772/iterate-over-...

Что касаемо второй части: достаточно в json массив вставить булевы переменные вида
new: false/true
topRated: false/true

в шаблон карточки вставить условие вида
if(array[item].new) {выводим лейбл}

где array[item] - элемент массива, выводимого в цикле