Как лучше сверстать блоки?

Question

[Nimbus1996]

У меня проект по вёрстке интернет магазина, есть страница каталога состоящее из боковой панели с фильтрами и меню и основной части с товарами. Вопрос такой: при выборе пункта в боковой части, товары заменяются на другой контент, т.к. все остаётся таким же только правая часть с товарами заменяется другим контентом, так вот, это реализуется с помощью Ajax’s я правильно понимаю, как тогда следует делать вёрстку? Верстать две страницы которые будут полностью одинаковые и меняется только основная часть или сверстать одну страницу а на второй только кусок кода который будет подставляться в основной блок? А второй вопрос - как реализуется кнопка «загрузить ещё»? Ведь со страницей ничего не происходит просто добавляются товары, они подгружаются тоже с сервера? Как тогда верстать, просто ссылку сделать с этой кнопкой, а бэкэндер затем настроит добавление товара при клике на эту кнопку?

Comments

[Вадим]

Вам что нужно? Только сверстать? Если да, то не переусложняйте. С Вас только вёрстка. Одной страницы с одним тестовым наборот товаров.

А вообще, страница одна - отправил запрос, получил ответ, преобразовал данные в html элементы через Js - отрисовал их на странице.

[Nimbus1996]

Вадим, с меня только вёрстка да, бэкэндер затем сам будет брать карточку товара менять там все данные, изображения и вставлять на страницу?

[Вадим]

Nimbus1996, Да. Вы делаете вёрстку для того, чтобы бэкендер потом взял её в качестве шаблона. А в места, где контент разный, например, разное название товара, цена, и тд, выводить данные из переменных.

Например, вёрстка которую Вы отдаёте, такая:
<h1>Бананы</h1>

Когда бэкендер обработает вёрстку, то у него в коде это будет выглядеть примерно так:
<h1>{{ $productName }}</h1>

В итоге, когда пользователь запрашивает определённую страницу, сервер идёт в базу данных, извлекает из неё нужное, а потом подставляет вместо переменных соответствующие значения.

И тогда, когда пользователь перейдёт на страницу
http://shop/bananas
Ему выдаст соответствующую разметку
<h1>Бананы</h1>

А, если, скажем так:
http://shop/apples
То выдаст такую разметку
<h1>Яблоки</h1>

[Олег]

Nimbus1996, если от вас требуется только вёрстка - ограничьтесь вёрсткой макета. Если от вас требуется и сверстать макет и написать скрипты, которые будут работать на странице - то надо изучать js, в частности ajax и манипуляции с DOM-элементами.

Загрузка данных посредством ajax выглядит примерно так:
- пользователь нажал кнопку/выбрал селектор/как-то взаимодействовал с сайтом
- скрипт на странице запросил данные на сервере
- получил их, превратил в кусок html-кода, например в

<div class="content-box">...текст, полученный с сервера...</div>

- нашёл уже на вами свёрстанной странице блок, в который по вашей задумке должны догружаться данные, например <div class="insert-content-here"></div>
- вставил html-заготовку

<div class="content-box">...текст, полученный с сервера...</div>

внутрь <div class="insert-content-here"></div>
- результат:

<div class="insert-content-here">
      <div class="content-box">
            ...текст, полученный с сервера...
      </div>
</div>

Если вы верстальщик - то нужно, чтобы человек, который будет дорабатывать страницу скриптами - однозначно понял - какие куски кода при AJAX дозагрузке он будет внедрять в страницу + в какое место страницы он будет его внедрять.

Answer 1

[Ankhena]

Если заменяется таким же по типу контентом (показывались товары, потом тоже товары, то только другие), то для верстки достаточно одной страницы.
Если тип контента другой, например, текст или список новостей, то это две разные страницы.

В таких случаях удобно пользоваться шаблонизаторами (pug, twig, nunjucks) или каким-нибудь пакетом include для gulp. Чтобы не нужно было 100 раз вносить изменения в одинаковые части (хедер, футер и т.д.)

Как тогда верстать, просто ссылку сделать с этой кнопкой а бэкэндер затем настроит добавление товара при клике на эту кнопку?

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