My Nude Nymph - Интернет Магазин Купальников

https://mynudenymph.com

Это интернет магазин одежды написанный на Opencart + React.js + компоненты Laravel

Моя роль: Full Stack Web Developer

Чему я научился работая над данным проектом?

• Самое важное - научился правильно подходить к решению задач.

• React.js, обучился и в последствии писал код на нем для решения задач

• JavaScript. Сильно подтянул свои знания, изучил стандарты ES6+. Написал

свой плагин для вертикального progress bar`а (страница плагина https://github.com/lUc1xx/progress-bar)

• PHP - подтянул свои знания

• Архитектура БЭМ, использовал ее при написании Front`а

• MVC, углубленно изучил, на которой и устроен Opencart

• Обучился писать сложные запросы в базу данных

• Opencart, изучил практически полностью данную систему

• API - научился понимать и работать

• VPS, DNS. Научился настраивать сервера, разворачивать на них git, понял

как работает apache, nginx. Понял как работают DNS сервера

• Gulp. Научился создавать более сложные задачи под свои нужды, настраивать для работы с JS, препроцессорами SASS/SCSS

• Писать хорошую, читаемую документацию

• SASS/SCSS, изучил вложенность, миксины, переменные, и писал на нем в дальнейшем весь front

• Работать с photoshop, figma, avacode

• Git, многому обучился, понял тонкости ветвлений, мерджа и насколько Git упрощает разработку

• Научился работать с Laravel компонентами, для работы с миграциями, базой данных и т.д

• Dadata, научился работать с данным сервисом (гранулярные подсказки для адресов)

• Email письма, верстал и узнал все тонкости (различия между почтовыми

сервисами), в последствии нашел и внедрил npm пакет email-builder для

упрощения и ускорения верстки email писем

• Хорошо изучил swiper slider и slick slider

• Обучился писать более сложные ajax запросы, обновления данных после запроса, изменение стейтов

• По ходу разработки front части изучил много тонкостей браузеров, научился писать кроссбраузерный код

• Подтянул свои знания в области оптимизации сайта, понял как писать и

для чего нужна семантическая верстка, на какие моменты стоит обращать

внимания при оптимизации сайта

• Познакомился с lazy loading (отложенная загрузка изображений).Понял как исправить с резким скачком

страницы перед загрузкой - подставлять заглушку в формате BASE64

• Устанавливать SSL сертификаты

• Научился делать сложные анимации на JS + CSS

• Работать с яндекс метрикой и google аналитикой

• Настраивать facebook pixel

Какие интересные задачи решал(и), не полный список.

1. Генерация скидочных промокодов при регистрации пользователей

Описание:

Нужно было после регистрации пользователей создавать промокод.

1. Указывать тип промокода (фикс. или процент)

2. Указывать скидку в основной валюте и дополнительных, которые могли дополняться со временем

3. Указывать от какой суммы должен действовать промокод, + так же в других валютах

4. Указывать предоставляет ли промокод бесплатную доставку

5. Все это должно было редактироваться через административную панель

Решение:

1. Вывели настройки генерации купонов в административную панель, можно было выбирать тип купона (фикс. или процент),

задавать сумму.

2. Добавили мультивалютность, из таблицы с валютами брали все существующие

и работающие валюты, и для каждой валюты создавалось отдельное поле для

ввода суммы (если сумма не задавалась, шел пересчет по курсу)

3. После успешной регистрации, в соответствии с настройками из административной панели создавались записи в базу данных

Во первых, записывался купон в основной валюте (рубли) для пользователя по его ID

Во вторых, для купонов в других валютах была создана отдельная таблица с

полями: ID пользователя, код валюты и значением, как раз туда мы и

записывали купоны других валют, значение подставлялось из настроек.

Проблему с определением типа купона, решили путем добавления в базу данных тип купоны (Либо F - фиксированный, либо P - процент)

Промокод мог предоставлять бесплатную доставку, для этого в БД добавили

отдельное поле, в котором и указывалось, применяет ли промокод

бесплатную доставку

Оставалась единственная задача, добавить сумму от которой может действовать промокод, допустим от 5000р.

Естественно, должна была быть поддержка и мультивалютности

Для этого в основной таблице добавили поле total для записи суммы от которой

действовал промокод. Для других валют создали отдельную таблицу в БД

куда записывали ID промокода, код валюты и значение. Если значение не

было указано в настройках, шел пересчет по курсу

2. Вкл/выкл опций

В данной системе Opencart, основной сущностью была 'Опций'

Т.е у товара были варианты опций, цвет + размер

Для каждой опции задавались свои значения(цена в разных валютах, изображения и т.д)

Нужно было добавить возможность отключений опций как выборочно, так и полностью отключить один (например определенный цвет)

Решение

1. Для выборочного отключения опций, в таблицу где хранилась привязка

опций к товару, добавили поле для указания отображения. В

административной панели вывели управление данным свойством и записывали в

бд.

2. Для отключения одной опции полностью, в основной таблице где хранились только опции, так же было добавлено поле для указания

отображения.

Соответсвенно на этапе получения опций товара, в запросе указывали что значение поля отображения должно быть вкл.

Был один нюанс, могло быть так что в основной таблице опция выключена, а в привязке к товарам включена.

Для этого была добавлена проверка, сначала отображение опции проверялось в

основной таблице, затем, уже в таблице привязки. Если одна из этих

таблиц возвращала отрицательный ответ, опция не показывалась.

3. Создание страниц и отдельных view для них

В системе Opencart нет возможности добавлениях отдельных страниц и view файла для них.

Вместо этого в административной панели был редактор, значение из которого подставлялось в один view файл.

Нужно было добавить возможность указания отдельного view файла + отдельных language файлов

Решение:

Для каждой сущности страницы было добавлено поле 'путь до view/language файлов', которое записывалось в базу

Соответственно, нужно было указать путь до view шаблона + до language файлов

В контроллере который отвечал за отображение страниц, мы подставляли

данное значение из БД, чтобы контроллер понял какой view файл ему

отображать. Если данного значения не было, подставлялся дефолтный view

template.