Как красиво выводить торговые предложения в карточке товара?

Question

[lie2]

Доброго дня! возникла такая проблема:
Нужно выводить свойство товара красиво, как на нормальных сайтах типа али и т.п.
Пример типа:

и так по каждому.
сейчас реализовано так:
Естественно при большем количестве товаров - не удобно и громоздко.
Вот код вывода:

<div class="btn-offer-label <?php echo ($isOfferFirst) ? ' active' : ''; ?>"
                                 type="button"
                                 data-offer-price="<?php echo $offer['PRICE']['RATIO_PRICE']; ?>"
                                 data-offer="<?php echo $id; ?>">
                                <div class="row no-gutters align-items-center">
                                    <div class="col-2">
                                        <div class="contain" style="background-image: url('<?php echo $offer['IMAGE']; ?>');">
                                            <img src="/local/3x2.svg"
                                                 alt="<?php echo $alt; ?>"
                                                 title="<?php echo $title; ?>" />
                                        </div>
                                    </div>
                                    <div class="col-10">
                                        <div class="px-3 text-12px">
                                            <?php $isFirst = true; ?>
                                            <?php foreach ($offer['PROPERTIES'] as $key => $value) : ?>
                                                <?php echo ($isFirst) ? '' : ' / '; ?>
                                                <span class="text-muted font-weight-semibold"><?php echo $value['NAME']; ?>:</span>
                                                <span class="text-lowercase font-weight-bold"><?php echo $value['DISPLAY_VALUE']; ?></span>
                                                <?php $isFirst = false; ?>
                                            <?php endforeach; ?>
                                        </div>
                                    </div>
                                </div>
                            </div>

Comments

[Антон]

Как красиво выводить

нанять верстальщика и дизайнера!

[lie2]

Антон, а если скорректировать вопрос:
как мне обработать массив ТП, чтобы (если у меня 5 тп, из них 1 - цвет, 2 - размер) :

1. красный / 2
   
2. красный / 1
   
3. желтый / 2
   
4. желтый / 1
   
5. зеленый / 1
   

чтобы вывело не 5 тп, а как в штатной корзине: свойство цвет: /варианты цвета/ , свойство размер: /варианты размера/.
смысл был в этом...

Answer 1

[xmoonlight]

Плитка критериев: цвет, размер и ниже - плитка изображений, согласно критериям.