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

Всем привет!

Пример: при разработке интернет магазина нужно поставить заглушку в виде списка товаров (буквально три наименования в 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>


Вот как это всё в одном цикле замутить?
  • Вопрос задан
  • 482 просмотра
Решения вопроса 3
jlekapb
@jlekapb
.do
в jade я бы создал миксин, который выводит товар, а в качестве аргумента передавал бы количество создаваемых блоков.

Текст, который должен содержаться в блоках товара, можно описать в json файле.
NEW, TOP RATED передать в качестве аргументов.
Ответ написан
@chirskiy_mixail
Очень давно занимаюсь версткой, имею огромный опыт
Смотря какие препроцессоры вы используете, ну как и везде, есть условные операторы if, else, сообственно все выводите также, просто где есть доп. атрибуты проверяете их наличие и выводите.

Или скиньте ваш кусок кода, будет проще помочь.
Ответ написан
Vyad
@Vyad Автор вопроса
Нашёл ответ касаемо первого моего вопроса
stackoverflow.com/questions/24316772/iterate-over-...

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

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

где array[item] - элемент массива, выводимого в цикле
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы