Відгуки, які клієнт поповнює сам
Відгуки надходять постійно, і краще, щоб клієнт додавав їх сам. Кожен відгук — рядок списку: цитата, фото гостя й підпис.
Що вийде
<section class="reviews">
<h2 fld-text="Reviews title">What guests say</h2>
<div class="reviews__list" fld-loop="Reviews">
<figure class="review">
<blockquote fld-area="Quote">The quietest table in town and the best flat white.</blockquote>
<figcaption>
<img class="review__photo" src="images/guest-1.jpg" alt="" fld-image="Guest photo">
<span fld-text="Guest name">Maria, regular</span>
</figcaption>
</figure>
<figure class="review">
<blockquote fld-area="Quote">They remember my order after one visit.</blockquote>
<figcaption>
<img class="review__photo" src="images/guest-2.jpg" alt="" fld-image="Guest photo">
<span fld-text="Guest name">Leo, works next door</span>
</figcaption>
</figure>
</div>
</section>“The quietest table in town and the best flat white.” — Maria
“They remember my order after one visit.” — Leo
“Cardamom bun every Friday.” — Ines
Третій відгук клієнт додав в адмінці.
Покроково
Список — на блок із відгуками
fld-loop на обгортці, усередині якої йдуть відгуки.
<div class="reviews__list" fld-loop="Reviews">
Цитата
Відгук буває на кілька рядків — fld-area: перенесення рядків, які зробить клієнт, збережуться.
<blockquote fld-area="Quote">The quietest table in town and the best flat white.</blockquote>
Фото й підпис
fld-image на
<img>і fld-text на імені гостя.<img class="review__photo" src="images/guest-1.jpg" alt="" fld-image="Guest photo"> <span fld-text="Guest name">Maria, regular</span>
Кожен відгук розмічений
Усі відгуки мають ті самі атрибути — тоді після «Завантажити дані» в адмінку потраплять усі.
<figure class="review"> <blockquote fld-area="Quote">They remember my order after one visit.</blockquote>
Що важливо
- Порядок відгуків клієнт змінює, перетягуючи рядки, а зайвий видаляє — блок не зламається.
- Опис фото (
alt) береться з медіатеки WordPress, а не з верстки.
Типові помилки
Журнал збирання — вкладка «Логи» вашого проєкту на themeforge.pro; ті самі зауваження показує безплатна перевірка розмітки.
<figure class="review">
<blockquote fld-area="Quote">The best flat white.</blockquote>
<figcaption fld-text="Quote">Maria, regular</figcaption>
</figure>Одна назва у двох різних полів — цитати й підпису: збирання повідомляє про збіг назв, і в адмінці лишається одне поле на дві ролі.
<figure class="review">
<blockquote fld-area="Quote">The best flat white.</blockquote>
<figcaption fld-text="Guest name">Maria, regular</figcaption>
</figure>Кожне поле має власну назву.