ТЕХЗАДАНИЕ НА ДОРАБОТКУ САЙТА
ссылка на сайт
ВСТУПЛЕНИЕ.
Я решила сделать сайт по продаже различных продуктов ( футболки, постеры на стену, кружки.) на американский рынок. Бизнес модель - Печать по требованию( Print On Demand - сокращенно POD). Посетители выбирают товар с определенным дизайном и заказ перенаправляется в POD сервис. Там его печатают и отсылают покупателю.
Сайт создан на платформе конструкторов интернет-магазинов Shopify. Для улучшения внешнего облика магазина была куплена “тема”- wokee-v-1-8-1. С ее помощью определяются цвета, шрифты, расположения блоков.
На сайт также я установила два основных приложения:
а) Teeinblue - это приложение позволяет покупателю самому выбирать какие элементы дизайна он хочет видеть на своем продукте. С помощью меню этого приложения покупатель может, например, написать свое имя или другой текст, выбрать тот или иной графический элемент. И посмотреть конечное превью что получилось и заказать себе этот товар. То есть приложение позволяет максимально персонализировать продукт под того или иного клиента.
б) Loox - Photo Reviews - это приложение позволяет покупателям отправлять отзывы с фото. Покупатель получает уведомление на емэйл с предложением отправить отзыв о товаре.
Мое техзадание будет связано с корректировкой отображения этих приложений на сайте.
➤Вот эта основная тема сайта wokee-v-1-8-1 в админке магазина Shopify↓↓↓
➤Вот эти приложения (Teeinblue, Loox - Photo Reviews в админке магазина Shopify↓↓↓
1. Teeinblue - персонализатор продуктов
Карточку товара с описанием я создаю в этом приложении. Связываю художественную работу или принт (Artwork) c продуктом ( product base). Artwork я настраиваю как конструктор, чтобы покупатель выбирал элементы дизайна. Рroduct base подгружаю из связанного с приложением POD сервиса.
Приложение подгружает на сайт карточку товара с описанием, и свой блок с “Previw” и “Add to Cart”, заменяя блоки, которые предоставляет основная тема сайта ( wokee-v-1-8-1). Соответственно, в “General settings” приложения Teeinblue я настроила цвета кнопок и прочее, чтобы совпадало с основными цветами сайта, заданными темой wokee-v-1-8-1.
✪ В ЧЕМ ПРОБЛЕМА: Моя основная тема магазина “wokee-v-1-8-1” дублирует в карточке товара цену, цвет товара, размер товара. Мне удалось отключить описание товара в основной теме, чтобы оно не дублировалось. ( Хотя я и отключила основные галочки, связанные с товаром в wokee-v-1-8-1, но все равно информация задваивается.) То есть на сайте все отражается в двойном виде.↓↓↓
➤Нужно, чтобы отражалось так ↓↓↓
✔После названия товара должен идти блок со звездочками★★★★★ -это количество отзывов о товаре. Подробнее про то, как я хотела бы поправить встраивание виджета с отзывами, будет рассказано ниже. Мне очень нравится, как реализована эта идея на сайте: personalfury.com
✅ ЗАДАНИЕ1: Нужно сделать так, чтобы информация о продукте показывалась только из приложения Teeinblue. И убрать информацию о продукте, которую показывает wokee-v-1-8-1.
2. Wokee-v-1-8-1 предоставляет возможность размещать “Trust Badje” ( иконки доверия) после блока “ADD TO CART”. Я бы хотела их оставить и не выключать. Но они сильно сползли вниз и сейчас находятся под описанием товара. Если это возможно, нужно поместить Trust Badje между “ADD to CART” чек-боксом “ □ I supply correct personalization information and I agree with Shop Policies before hitting "Add to Cart”
✅ ЗАДАНИЕ2: Переместить блок Trust Badje. Должно получиться так↓↓↓
3. Описание продукта у меня будет достаточно большое- так как я буду подробно описывть как заказывать и прочее. (На данных скриншотах у меня маленькое описание, я его просто разместила для примера.) Я бы хотела, чтобы только часть описания открывалась по умолчанию. Остальная часть открывалась бы, если нажать на надпись “ Learn more about this item”
➤Вот как это должно выглядеть↓↓↓
После того, как описание развернули, его можно свернуть, нажав “Less”
➤Вот как это должно выглядеть↓↓↓
✅ ЗАДАНИЕ3: В Teeinblue усовершенствовать вывод на сайте описание товара, которое является большим по обьему текста. Например: сделать по умочанию вывод 500 символов.
- ( Какое именно количество символов нужно определить опытным путем- комфортное для восприятия).
- Остальное описание будет показываться после нажатия Learn more about this item. Цвет Learn more about this item #2879fe Cворачиваться назад описание будет путем нажатия Less- Цвет #2879fe
✔Подобная идея со сворачиванием-разворачиванием описания реализована на сайте Etsy- ссылка
✎ВОПРОС: не ухудшит ли данное преобразование стабильность приложения? Если есть такой риск, то можно от него отказаться.
4. Далее за описанием должны идти отзывы. Для этого я загрузила приложение Loox - Photo Reviews. На данный момент приложение встраивает свой виджет (блок) куда-то вниз.
➤Вот как это выглядит сейчас↓↓↓
➤Я хочу сделать так ( когда открываем карточку товара) ↓↓↓
➤когда товары на главной странице, должно выглядеть так↓↓↓
ПРИМЕР МАГАЗИНА, У КОТОРОГО ЭТО РЕАЛИЗОВАНО: ССЫЛКА
➤Как найти инструкцию от Loox - Photo Reviews.↓↓↓
✅ ЗАДАНИЕ4: Нужно разместить отзывы, чтобы они отражались под Описанием и названием товара, когда мы открываем карточку товара. И чтобы отзывы отражались под названием товара на страницах сайта.
5. После того, как мы заказали товар на сайте, на почту покупателя приходит письмо-подтверждение с номером и деталями заказа, а так же ПРЕВЬЮ самого товара.
✪ В ЧЕМ ПРОБЛЕМА: ПРЕВЬЮ товара отображаемое в письме - это превью того изображения, которое я разместила в карточке товара. Но дело в том, что покупатель, заполняя персонализированный блок Teeinblue, изменяет внешний вид товара ( добавляет свое имя и прочее). А ему приходит подтверждение со стандартным изображением, будто он ничего не изменял. Я проверила это - создала пробный товар TEST PRODUCT за 1$ и купила его.
➤Вот как это выглядит↓↓↓
В Teeinblue, знают про эту проблему и у них есть подробная инструкция, как это исправить. Нужно вставить их код в Add to cart, там где находится HTML.
Инструкция находится на сайте приложения Ссылка:
https://support.teeinblue.com/portal/en/kb/articles/how-to-set-up-render-design-images
➤Скриншот ↓↓↓
Мне нужно настроить следующие пункты:
- Показать дизайн в корзине
- Показать дизайн в электронном письме с подтверждением
✅ ЗАДАНИЕ5: Нужно настроить корректное отображение дизайна в корзине и в электронном письме, подтверждающим заказ.
6. В приложении Teeinblue есть так называемый “кастомизатор”- табличка, с помощью которой покупатель выбирает себе ту или иную опцию. Пишет имя, какой-то текст или выбирает то или иное изображение. Я хочу внести небольшую правку в этот кастомизатор.
- Например, покупатель пишет свой текст или имя. В админке я устанавливаю максимально допустимое количество символов, включая пробелы, чтобы покупатель не смог напечатать больше положенного.
- В интерфэйсе кастомизатора это отражается как надпись снизу: Maximum up to ( число) caracters. Но нет опции обратного отсчета символов, что не удобно, потому что мы не понимаем, сколько мы уже напечатали, а сколько осталось. ↓↓↓
✔ Идея с обратным отсчетом символов отлично реализована на сайте: ССЫЛКА
Например, (11\17) означает, что мы ввели 11 символов включая пробелы из 17 возможных. (26\36) соответственно означает, что мы ввели 26 символов (с пробелами) из 36.
✅ ЗАДАНИЕ6: Сделать “виджет” обратного отсчета символов, когда речь идет о печатании текста.
- Первая цифра - количество символов, включая пробелы, которое мы уже ввели.
- Вторая цифра - это максимально возможное количество символов для данной строки. Максимально возможное количество символов я задаю в админке, исходя из дизайна продукта.
✎ВОПРОС: Может ли данное преобразование нарушить стабильность моего приложения Teeinblue? Если может, то можно этот пункт пропустить.
✅ ЗАДАНИЕ 7: На главной странице уменьшить расстояние от логотипа до баннера ( только в мобильной версии сайта)↓↓↓
ЗАКЛЮЧЕНИЕ:
Основные цвета сайта:
- голубой #2879FE
- голубо-синий (цвет зависания) #2930FA
- оранжевый #FFB507
- светло-фиолетовый (футер) #F7F8FA
- черный #191919
- серый #777777
- красный (error) #F8353E
➤Коды HTML находятся здесь↓↓↓
Доступ к админке сайта предоставляется по электронной почте.
Google Drive
