Программа для генерации картинок с товарами (инфографики) для маркетплейсов по шаблону.
Нужно подготовить:
-
Папку с фотографиями;
-
Заполненный эксель-файл;
-
Папку, в которой появятся созданные картинки.
Далее, нужно запустить программу со следующими аргументами:
Аргумент | Описание |
---|---|
-t, --template <name> | Название шаблона (можно посмотреть в папках html или template) |
-e, --excel <path> | Эксель-файл с описанием картинок |
-p, --photos <path> | Папка с фотографиями |
-r, --result <path> | Папка, в которую будет помещён результат |
node main.js -t wood -e ./wood.xlsx -p ./photos -r ./result
Для начала, нужно представить, как будет выглядеть макет, сколько картинок будет на один товар, какая информация будет на этих картинках и т.д. То есть, максимально подробно описать шаблон. Лучше всего в виде макета в фигме, чтобы не пришлось дизайнить в процессе вёрстки HTML.
Например, был придуман такой макет для наборов деревянных ёлочных игрушек:
Пусть шаблон называется wood
и разрешение картинки равно 1800×2400 пикселей.
Далее, нужно описать структуру эксель-файла с параметрами, необходимыми шаблону. Его будут заполнять пользователи.
Эксель-файл нашего шаблона:
Всё, начиная со столбца E
, является путями к фотографиям. При запуске программы пользователь укажет путь к папке с фотографиями, корнем считается она.
Дальше, нужно будет создать HTML-шаблон и написать класс, задачей которого будет передача информации из эксель-файла в веб-страницу.
Файловая структура шаблона выглядит так:
wood.xlsx
— пример шаблона, в коде никак не используется. Остальные файлы необходимы, подробности о них далее.
В папке template
нужно создать папку с названием шаблона, в нашем случае, wood
.
В папке template/wood
создать папку html
, в которой обязательно должен быть файл index.html
.
В папке будет автоматически создаваться временная папка temp
, в которую скопируются все фотографии из папки, указанной пользователем. Поэтому, путь к фото в index.html
следует указывать с temp/
в начале. Не надо называть так свою папку, потому что temp
автоматически удаляется.
Необходимые параметры для шаблона должны приниматься через GET-параметры. Например, в нашем шаблоне есть следующие параметры:
Название | Описание |
---|---|
name | Наименование товара |
collection | Коллекция, к которой принадлежит товар |
quantity | Количество товаров в упаковке |
box | Вид коробки |
photo | Путь к фото |
icon | Иконка на «ленточке». Необязательно. |
text | Текст на «ленточке» |
Значит, адрес страницы будет выглядеть примерно так:
.../wood/html/index.html?name=Имя&collection=Коллекция...
В папке template/wood
, создать файл index.ts
.
Начать стоит с типов, так как их описать проще всего. Будут использоваться два типа: тип для входных параметров HTML-шаблона и тип, описывающий товар. Обычно, один товар представляет собой информацию из строки в эксель-файле.
Тип входных параметров HTML-шаблона:
type WoodHtmlProps = {
name: string
collection: string
quantity: string
box: 'Фанерная' | 'Картонная' | 'Фанерный домик'
photo: string
icon?: 'paintbrush' | 'leaf' | 'tree' | 'check' | 'gift' | 'shield'
text: string
}
Тип для строк эксель-таблицы:
type WoodProduct = {
name: string
collection: string
quantity: string
box: 'Фанерная' | 'Картонная' | 'Фанерный домик'
photos: {
onBox: string
insideBox: string
front: string
back: string
frontWithRuler: string
backWithRuler: string
box: string
boxWithShavings: string
onTree: string
}
}
Далее, в этом файле создать экспортируемый по умолчанию класс, наследуемый от Template
. При наследовании нужно передать в Template два типа, описанных выше. Далее, в нём надо будет прописать значения абстрактных свойств и реализовать два метода: parseExcel()
и processProduct()
.
Так будет выглядеть наш класс:
export default class WoodTemplate extends Template<WoodProduct, WoodHtmlProps> {
name = 'wood'
width = 1800
height = 2400
products: WoodProduct[] = []
autoNumbering = true
override async parseExcel(): Promise<WoodProduct[]> {
// Реализация
}
override async processProduct(product: WoodProduct) {
// Реализация
}
}
Со свойствами всё достаточно просто.
name
должен совпадать с названием папки с шаблоном.
width
и height
определяют размер окна в котором будет открываться HTML-шаблон.
products
это массив товаров, полученных из эксель-файла.
autoNumbering
включает автоматическую нумерацию выходных файлов. В конец имени каждого файла будет добавлен порядковый номер. Для каждого товара нумерация начинается сначала.
Далее, нужно реализовать два метода.
Метод parseExcel()
должен превратить данные из эксель-файла в массив объектов типа WoodProduct
и вернуть его. Для парсинга эксель-файла автоматически создаётся объект класса Excel.Workbook
из пакета exceljs
. Он доступен через this.workbook
. Файл, указанный пользователем, автоматически прочитается в этот объект.
Для генерации картинок нужно реализовать функцию processProduct()
. Чтобы создать картинку, нужно вызвать метод this.queueProduct()
, который принимает на вход объект типа WoodHtmlProps
и имя файла.
Сигнатура метода queueProduct()
:
queueProduct(htmlProps: WoodHtmlProps, filename: string)
Пример использования queueProduct()
:
this.queueProduct({
name: product.name,
collection: product.collection,
quantity: product.quantity,
box: product.box,
photo: product.photos.onBox,
icon: 'gift',
text: 'Идеально для подарка'
}, `${product.name}`)
Подробности реализации методов parseExcel()
и processProduct()
можно посмотреть в template/wood/index.ts
.