Един от начините да популяризирате нови продукти или да съобщите на клиентите за нова продажба е да покажете банер на страницата на уебсайта си с тази информация. Тази статия ще разгледа как да добавите три вида банери към приложението, създадено с Next.js. Тези типове се определят от позицията им на страницата: в центъра, отдолу и отгоре. За да направите банерите динамични, съдържанието и персонализирането за тях могат да бъдат извлечени от CMS. В моя случай това е ButterCMS, но може да бъде всяка друга CMS по ваш избор.
Това са екранните снимки на това как може да изглежда банерът в крайна сметка:
Демото може да бъде намерено тук.
Конфигурация на банер
Получените банери ще бъдат доста прости, но с помощта на CMS могат да бъдат толкова сложни, колкото искате. Банерът ще има следните елементи:
- заглавие
- текстово съобщение
- бутон или връзка с призив за действие
- бутон за скриване на банера
За да позволи гъвкаво персонализиране на банерите, CMS трябва да съдържа тези данни:
- заглавие
- текст — трябва да поддържа HTML тагове
- текст на етикета на бутона
- бутон връзка
- цвят на фона на бутона
- ширина на банера — персонализиране за центриран банер
- максимална ширина на банера — персонализиране за центриран банер
- височина на банера
- максимална височина на банера
- цвят на фона на банера
- вид или позиция на банера — център, отгоре, отдолу
Конфигурацията на банера в ButterCMS може да се види тук.
Как можем да определим кои страници какъв банер имат? Ако съдържанието на страницата вече е част от CMS, тогава можем просто да добавим свойство към страницата, което ще бъде препратка към някой от създадените банери в CMS. Друго възможно решение може да бъде извличането на конкретен банер чрез неговото свойство (т.е. добавяне на уникално име към конфигурацията на банер).
Повечето от стиловете на банерите ще бъдат разработени с tailwindcss.
Компоненти
Ще създадем интелигентен компонент, който ще избере кой тип банер трябва да бъде изобразен на страницата и три тъпи компонента за всеки тип банер.
Нека създадем компонент за центрирания банер. Създайте файл center-banner.js с това съдържание:
Използваме dangerouslySetInnerHTML за текст на банер, тъй като може да има някои HTML тагове. Добавихме prose клас към този div елемент. Какво прави? Той позволява този HTML код от CMS да бъде стилизиран по същия начин като другите елементи на страницата. Това се прави с помощта на пакета @tailwindcss/typography. За да инсталирате, изпълнете тази команда:
npm @tailwindcss/typography
И след това актуализирайте файла tailwind.config.js:
module.exports = {
...
plugins: [require("@tailwindcss/typography")],
};
Банерите обикновено имат бутони за затваряне, за да скрият банера. В шаблона на този компонент щракването върху бутона за затваряне задейства функцията closeButtonClicked, която е проп от нашия интелигентен компонент, който ще създадем по-късно.
За да поберем съдържанието на банера в мобилните екрани, ще направим банера с пълна ширина и пълна височина, като добавим този CSS код:
Тъй като width, max-width, height и max-height са дефинирани в CMS, ние използваме вградени стилове. Така че, за да ги заменим във файла със стилове, използваме !important.
Този банер може да има някои подобрения. Например, бутонът за призив за действие ще бъде показан дори ако етикетът на бутона не е зададен в CMS. Стойностите по подразбиране за размерите на банерите също могат да бъдат организирани по-добре.
Компонентът за долния банер е много подобен. Създайте файл bottom-banner.js:
Стойностите по подразбиране са различни и компонентът има по-малко подпори, тъй като този банер трябва да има 100% ширина.
Компонентът за горния банер е същият като за долния банер, но използва друг клас за позициониране на банера в горната част. Създайте нов файл top-banner.js с това съдържание:
За да поберем съдържание на мобилно устройство и за двата типа банери, ние използваме този CSS код:
Сега е време да създадете интелигентния компонент. Създайте нов файл banner.js. Този компонент трябва да се погрижи за изобразяването на правилния компонент за типа банер и логиката на показване/скриване на банера:
Използваме кука useState за показване/скриване на банера. Имайте предвид, че задаваме closeButtonClicked prop като closeButtonClicked={() => setDisplayBanner(false)}, за да скрием банера.
Сега банерът може да се показва на страницата, като добавите този елемент към шаблона на страницата:
// banner is a variable with all banner configuration properties
<Banner banner={banner}></Banner>
Уверете се, че този елемент се показва само ако банерът съществува. Едно възможно решение за това е да се създаде нова променлива:
const hasBanner = banner && Object.keys(banner).length > 0
и за изобразяване на банерния компонент по този начин:
{hasBanner && (
<Banner banner={banner}></Banner>
)}
Резюме
Създадохме динамичен банер с персонализация. Цялото съдържание, позицията на банера и размерите могат да бъдат определени в CMS. За да разгледате интегрирането на този компонент за банер в приложението Next.js с ButterCMS, вижте това хранилище на GitHub:
