Реализован следующий функционал для корзины на 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.

#избранное

Всем привет✋
Перенес текущий функционал на 1С.
Результат работы можете посмотреть в видео https://youtu.be/qa32y2XTNho

Дальше в планах реализовать ещё несколько интересных фишек для этого приложения.

Не забывайте, что у канала есть чат t.iss.one/ovmst_chat. Там выкладываю промежуточные результаты и пишу о проблемах с которыми сталкиваюсь.

#mobile1C

Практика. Перенос верстки на JavaScript.

После изучения статьи "[mobile] Переносим HTML интерфейс на 1С"
(https://infostart.ru/1c/articles/1319458/) рекомендую попрактиковаться.
Для этого предлагаю пройти воркшоп "Икеа" на JS, где готовую верстку перенесете на JS. Подходит для новичков.

Изучите на практике переменные, типы данных, операторы, условные конструкции, циклы, функции, DOM, event события мыши и браузера, fetch(get/post), localStorage, модульность (import/export), ES6

1️⃣ День 1. https://www.youtube.com/watch?v=VBuaryMyN9A&download=dm
Получение необходимы элементов со страницы. Реализация меню с категориями и подкатегориями.
Генерация header, footer и меню.
2️⃣ День 2. https://www.youtube.com/watch?v=xGiuH8nj0S0&feature=emb_logo&ab_channel=GloAcademy
Реализация модулей для удобства (import/export). Получение товаров с сервера:
по каталогам, поиск, корзина, лист желаний, один товар.
3️⃣ День 3. https://www.youtube.com/watch?v=qt6fVPPN6ic&download=dm&ab_channel=GloAcademy
Вывод актуального каталога и подкаталога. Отрисовка карточек товаров.
4️⃣ День 4. https://www.youtube.com/watch?v=xAEEfCKN3qs&t=1474s&ab_channel=GloAcademy
Продолжение 3 дня. Использование localStorage
5️⃣ День 5. https://www.youtube.com/watch?v=L4Qxu7xgxfw&t=700s&ab_channel=GloAcademy
Реализация корзины. Изменение количества, пересчет суммы. Отправка заказа.

Через неделю сделаю еще одну заключительную подборку по данной теме.

Лайфхак: устанавливайте скорость воспроизведения x2

#избранное