Опытному специалисту понадобится не более полутора часов на его выполнение.
Для выполнения тестового задания вам пригодится документация по шаблонизатору Liquid
https://help.shopify.com/en/themes/liquid
Для ускорения работы, предлагаем использовать шпаргалку по Liquid
https://www.shopify.com/partners/shopify-cheat-sheet
Задание:
- Создать тестовый магазин на Shopify на бесплатном пробном периоде (free trial);
- После создания магазина установить в него в качестве основной бесплатную тему Dawn;
- Добавить 5 тестовых товаров, задать им произвольную цену (Price) и старую цену (Compare at price), которая должна быть больше цены Price (для вывода скидки). В карточке редактирования товара в админке указать количество (Quantity) каждому товару от 3 до 7, каждому товару добавить произвольное изображение примерно одинаковых пропорций с остальными. Объединить их в коллекцию Collection One;
- Добавить ещё 5 тестовых товаров, задать им произвольную цену (Price) и старую цену (Compare at price), которая должна быть больше цены Price (для вывода скидки). В карточке редактирования товара в админке указать количество (Quantity) каждому товару от 3 до 7, каждому товару добавить произвольное изображение примерно одинаковых пропорций с остальными. Объединить их в коллекцию Collection Two;
- Зайти в редактирование кода темы;
- Создать новую секцию "test-products-sliders-tabs" в коде темы, в которой сделать блок с двумя табами\вкладками (одна вкладка скрыта, другая открыта, переключаются при клике по названию вкладок), в каждой из которых должен быть слайдер товаров из каждой из двух ранее созданных коллекций (одна коллекция для одного слайдера и другая коллекция для другого) с выводом 4 товаров в ряд на десктопной версии сайта и с 2 товарами в ряд на экранах шириной меньше 749px (через max-width:749px в стилях) (остальные оставшиеся из 10 появляются при прокрутке стрелочек слайдера). Название вкладок соответствует названию двух коллекций;
- У каждого товара должна выводиться основная фотография товара, его название, цена и старая цена (она должна быть меньше основной по размеру шрифта и зачёркнутой), а также две кнопки "В корзину" (добавляет этот товар в корзину с переходом в неё или без перехода, главное, чтобы добавлял) и "Подробнее" (при клике на эту кнопку переходим на страницу товара);
- Оба слайдера должны иметь бесконечную прокрутку;
- Функционал слайдеров подключить, настроить и инициализировать с помощью Slick Slide https://kenwheeler.github.io/slick/
- Застилизовать\оформить эти табы и слайдеры с использованием темно-фиолетового, черного, серого, белого и оранжевого цветов;
- Вывести эту секцию с табами слайдеров товаров на главную страницу магазина;
- Убрать остальные секции основной области контента главной страницы сайта, оставив между основным меню и футером только слайдер товаров;
- Добавить в каждой из двух созданных коллекций 4 товарам тег "EXTRA", добавить в каждом слайдере вывод оранжевой плашки\значка с текстом "EXTRA" поверх фотографии товара в правом верхнем углу каждому товару, имеющему такой тег;
- Добавьте блок по макету из фигмы (мобильная + десктоп)
- Укажите пароль к витрине магазина в форме сдачи задания.
ВНИМАНИЕ Для выполнения задания не надо оплачивать тариф Shopify или иных сервисов.
Ответ присылайте, пожалуйста, в виде ссылки на товар в созданном вами магазине.