Как избавится от сотен товарных карточек в html коде?

Question

[Ne0n5amura1]

Сейчас разбираю свой старый проект с интернет магазином и замечаю, что html код заполонен товарными карточками (точного названия не знаю). Есть ли способ как-то соптимизировать, возможно вынести их в отдельный html документ и импортировать в основной ? Как это решается с точки зрения опытного разраба ?

<div class="cl-item pled" id="A000">
                <img src="img/dpled/dpled1.jpg" alt="" />
                <div class="cl-item__info">
                    <div class="cl-item__color cream">Кремовый</div>
                    <div class="cl-item__size">150x200cm, 200x220cm</div>
                </div>
                <p>Плед из велсофта</p>
            </div>

Comments

[Владимир]

У вас сайт на статических HTML? А может HTML динамически формируется на сервере, а может SPA? Вы хотите отрефакторить существующий или выьираете на будущее технологию?
Дохера разных подходов, попробуйте точнее вопрос задать.

[Ne0n5amura1]

Владимир, если бы. Это чисто сайт открытка с минимальным функционалом каталога. Поднял спустя два года, решил привести в божеский вид, и попутно думаю как бы почистить html.

[Владимир]

Ne0n5amura1, Ну можно использовать клиент сайд темплейты, тот же React или Vue (на них не обязательно SPA писать и API для них не обязательно), генератор статических сайтов, препроцессоры вроде pug
https://pugjs.org/language/iteration.html

Answer 1

[Максим]

Переписать в json и вывести всё это в цикле в javascript - и будет на выходе один блок в котором гора карточек

примерно вот так




это я единственное что на js умею

Answer 2

[Арсений Матыцин]

Повторяющиеся элементы выводятся с помощью циклов, на уровне бэкенда или фронтенда.

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

В php это выглядело бы как-то так:

...
foreach (&items as $item) { ?>
[HTML-тело карточки товара со вставленными параметрами вида $item->title]

Могут быть как прямые выводы на ЯП, так и с помощью шаблонизатора.

Итого, если у тебя проект с бэкендом, или фронтом, которые позволяет рисовать в цикле из базы или файла, используй язык. А если нужно просто 1 раз занести список, то можно это сделать в файле и обратить к генератору статики, например Jekyll.