Доработал компоненту SlideBlock.js для реализации модальных окон. В проекте с ее помощью реализовал добавление товара в сравнение. https://youtu.be/PLeggjwMIzc

#верстка #javascript

Реализован следующий функционал для корзины на JavaScript:
1) Подсказка для пользователя в виде модального окна (SlideBlock.js)
2) Смещение карточек в корзине для доп. действий с помощью тач событий (TouchBlock.js)
Все компоненты реализованы самостоятельно.
https://youtu.be/VVCVbbOt_YA

#верстка #javascript

Осталось реализовать из этого списка 3 и 11 пункт и второй этап разработки можно будет считать завершенным

В проект добавлен следующий функционал:
1) Анимация поиска при активации
2) Свое стилизованное поле выбора (select)
3) Реализован лоадер (loader) при загрузки больших страниц и при загрузке карточек с товарами в списке
4) Отложенная загрузка (lazy load) для загрузки изображений в списке товаров и с его же помощью реализована порционная загрузка товаров (по 10 шт.)
https://youtu.be/vzZ1t0YG_tE

#верстка #javascript

Разрабатываю функционал слайдера на базе функционала реализованного для сдвига карточек в корзине

#верстка #javascript

Плагины , которые я использую для VS Code:
Live Server - для автоматического обновления страницы при изменении
Beautify css/sass/scss/less - для форматирования
ESLint - для форматирования js
Russian Language Pack for Visual Studio Code - для русского языка
Git Graph - для удобного отображения изменений/веток
Git History Diff - для просмотра истории изменений
Less IntelliSense - упращает работу при использование предпроцессора less для css

Оформление:
indent-rainbow - оформление табов
Material Icon Theme - иконки файлов/папок
Material Theme - темы

#избранное

https://youtu.be/R-5Yp8lxsvE
На базе собственной компоненты TouchBlock.js, которая была разработана при реализации функционала для корзины (https://youtu.be/VVCVbbOt_YA), добавлен функционал слайдера.
TouchBlock.js:
►GitHub: https://github.com/leobrn/TouchBlock
►Демо: https://leobrn.github.io/TouchBlock/

#верстка #javascript

В завершение второго этапа разработки добавлена валидация формы, компонента для маски полей ввода на примере номера телефона. Третьим этапом идет перенос функционала на 1С.
https://youtu.be/uxUvlnqXytU

#верстка #javascript

Материалы к статье [mobile] Переносим HTML интерфейс на 1С (https://infostart.ru/public/1319458/ ):
1) mobile1c_adapt_1c: https://yadi.sk/d/teOzmOwyRdHZcg
2) mobile1c_adapt_js: https://yadi.sk/d/kumZG_L3SxYFRQ
3) Видео со сравнением: https://youtu.be/66BHGBY73C0
4) Исходники верстки https://github.com/leobrn/mobile1c-adapt
5) Демо верстки https:https://leobrn.github.io/mobile1c-adapt/

Поддержите статью и бесплатный контент поставив плюс на сайте

#избранное

Всем привет. Подведем итоги опроса.

Начинаем с разработки списка задач(HTML/CSS/JS) с переносом на 1С (скоро выложу интерфейс).

После продолжим тему статьи "Переносим HTML интерфейс". Разработаем корзину, нашел интересный
пример (приложение Leroy Merlin). Нестандартный выбор количества, выбор доп.действий через доп.меню.
В учебном примере будет только корзина. Данные корзины будут заполняться при старте приложения.
Функционал:очистка корзины, выбор количества, доп.меню с доп действиями, оформление заказа.
При оформление заказа будет создаваться документ в МП 1С и очищаться корзина.

Всем хорошей пятницы!🍻 Спасибо, что подписались🙏

Всем привет! Как и обещал , показываю промежуточный результат https://youtu.be/NGWUmrthzjw.

Дайте, пожалуйста, обратную связь в комментариях по наработкам.

#верстка #javascript

Карта изучения JavaScript https://miro.com/app/board/o9J_lfZRBE8=/
Добавляйте в избранное ⭐️

По 1C: TODO. На этой неделе планируется перенос текущего функционала на 1С.
Как это будет выглядеть, увидим позже по результату.

Параллельно изучаю курс "JavaScript. Стань Senior Frontend Разработчиком" Владилена Минина. В нем разрабатывается упрощенный аналог excel.
Просмотрена половина курса, многое принято на заметку.
После просмотра были переписаны многие участки кода и менялась структура проекта 1C: TODO.

#избранное