#8 Посадка верстки на Wordpress | Корзина на JavaScript

No video

#8 Посадка верстки на Wordpress | Корзина на JavaScript

Рет қаралды 8,854

Күн бұрын

Делаем свою тему на Wordpress. В уроке сделаем корзину на JavaScript. Для сохранения корзины будем использовать localstorage.
/* Материалы урока */
Стартовый и конечные шаблоны для корзины: drive.google.c...
Код урока: github.com/Dmi...
Макет: drive.google.c...
Верстка: drive.google.c...
База данных и папка wordpress c темой из урока: drive.google.c...
/* Команды урока */
Запуск browser-sync: browser-sync start --proxy "localhost/pizzatime" --files "**/*" --no-notify
/* Ссылки урока */
Генерация пользовательских событий: learn.javascri...
Меня зовут Дмитрий Бердников, я веб-разработчик. На этом канале буду делиться знаниями по веб-разработке.
/* Соц. сети */
Мой ВК - berdnik...
#wordpress

Пікірлер: 101

@andreasshev5748 4 ай бұрын

Спасибо! Всех вам благ!

@samurai-csgo Жыл бұрын

Жаль перестали выпускать ролики. Аналогов подачи материала, особенно по посадке на Wordpress, вообще нет. До сих пор в работе использую полученные от Вас знания.

@MaksssHome 3 жыл бұрын

Дмитрий Очень тебя ждём)

@user-up6es3nr6s 3 жыл бұрын

Спасибо! Вернусь)

@jackdoe1312 4 жыл бұрын

Отличный урок, все подробно расписано

@user-ji9nk6ef3i 4 жыл бұрын

Спасибо за урок делаю себе сайт на вордпрес по твоим урокам)

@user-up6es3nr6s 4 жыл бұрын

Таймкоды: 3:20 Пишем JavaScript 13:58 Добавление в корзину 21:37 Удаление из корзины 25:03 Разбираем LocalStorage 30:38 Увеличение количества товара 34:22 Уменьшение количества товара 36:36 Считаем итоговую стоимость корзины 40:48 Считаем количество элементов корзины 42:36 Изменяем атрибуты товаров 46:25 Смотрим данные из POST запроса формы 48:04 Проверяем есть ли элементы в корзине 50:50 Привязываем корзину к Wordpress 52:10 Кнопка корзины 58:35 Переносим логику на товары wordpress 1:11:07 Сброс корзины

@memasizm 4 жыл бұрын

Спасибо за курс. Жаль давно нет уроков...

@user-up6es3nr6s 4 жыл бұрын

Я запишу еще курсы. Нужно со временем разобраться

@user-ez6yz9eg2n 3 жыл бұрын

Бро, почему канал забросил? Классный контент и голос приятный, по началу у всех с подписотой туго идет, дальше лучше

@user-up6es3nr6s 3 жыл бұрын

Привет! В плане канала ушел в долгую прокрастинацию. Сейчас работаю над новыми материалами для видео

@ioi2999 3 жыл бұрын

Круто, очень жду новых видео!!!

@Skif0007 3 жыл бұрын

профессионал, единственное что приходит в голову

@imrerosenich2348 3 жыл бұрын

Замечательный урок. Все работает при посадке на вордпресс только с вашим контентом. Перенес - все рабочее. При добавлении товара: 1. картинки не конвертируются в webp. 2. Цена в корзине NaN, хотя ваши товары работают.

@user-up6es3nr6s 3 жыл бұрын

Привет! 1) Плагин поставлен? 2) Цена NaN в моем коде или при его изменении?

@imrerosenich2348 3 жыл бұрын

@@user-up6es3nr6s да плагин стоит NaN при добавлении нового товара, код не менялся

@user-up6es3nr6s 3 жыл бұрын

@@imrerosenich2348 Могу код посмотреть на github, как добавляется новый товар. Если все работает, а с новым товаром не работает, значит неправильно добавляется новый товар. Насчет webp, есть вероятность, что на локальном сервере какая-то проблема. Можно попробовать на хостинге это повторить

@AR-mx2sj 4 жыл бұрын

Скорее бы новый курс

@user-up6es3nr6s 4 жыл бұрын

Следующий запишу по верстке многостраничного сайта со сборкой проекта на gulp. + в будущем отдельно посажу этот сайт на wordpress

@user-er4bm4hk6w 3 жыл бұрын

Дмитрий приветствую, ты все так и запустил свой канал... зачем, почему) У тебя оч круто получается! Не все так объясняют как ты, но даже у них подписота растет. Возобнови свою деятельность ПЛИИИЗ!!! Расскажи про галп, сделай прикольный марафончик по верстке!!! Не бросай нас бро!

@user-up6es3nr6s 3 жыл бұрын

Привет! Сделаю. Следующие уроки будут по многостраничному сайту, начну с настройки gulp

@user-er4bm4hk6w 3 жыл бұрын

@@user-up6es3nr6s КЛАСС!!!! ЖДЕМ!!!

@valerykhilinski6477 2 жыл бұрын

Замечательный контент!!! Надеюсь Вы скоро начнёте записывать новый материал) Маленький вопросик)Вы закончили вуз по программированию или учили все самостоятельно?

@user-up6es3nr6s 2 жыл бұрын

Привет! Самостоятельно

@mister_robot01 4 жыл бұрын

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

@user-up6es3nr6s 4 жыл бұрын

Привет! По оплате не планировал делать уроки, может в будущем

@user-qy5oc1ql7l 3 жыл бұрын

да,оплату было бы круто!но и так видосы супер!!!

@danilavolik 2 жыл бұрын

Всем привет! Ребята, подскажите, дошел до 8 урока. Все делаю, как на видео. Но, когда заливаю новые изображения и создаю свои Категории и Товары, изображения не отображаются на сайте в добавленных товарах. Их просто не видно. Перезаливал фото, делал переиндексацию в плагине Converter for Media - ничего не помогает.

@user-ux4jn9ez7o 3 ай бұрын

Видео топ! Но есть нюанс: если пользователь сам изменит в цену в коде и нажмет отправить- то в корзине будет его цена… есть идеи по реализации?

@xOceanSpirit 2 ай бұрын

Есть. Брать цену с бэка, а не фронта перед отправкой заказа.

@veaceslavpascaru7294 4 жыл бұрын

Класс. Спасибо большое. А как внедрить все это в Wordpress тоже покажешь?

@user-up6es3nr6s 4 жыл бұрын

Да, в таймкоде указал 50:50 Привязываем корзину к Wordpress

@DM-pf1fi 4 жыл бұрын

Круто, я ваш новый подписчик) кстати а не могли бы вы сказать, какую тему в редакторе используете?

@user-up6es3nr6s 4 жыл бұрын

Привет! monokai

@jackdoe1312 4 жыл бұрын

Дима привет, давно что-то тебя нет. Front-end"у пора бы уже приучаться к работе с Gulp, Jade, Sass (для минимизации кода, ускорения написания вёрстки, автоформату изображений в более современный WEBP). Если у тебя есть желание, сделай циклы видео по этим программам.

@user-up6es3nr6s 4 жыл бұрын

Привет, обязательно сделаю. Запишу курс этим летом к концу июля, начало августа.

@jackdoe1312 4 жыл бұрын

@@user-up6es3nr6s Спасибо тебе за твой труд.

@trvcz5085 3 жыл бұрын

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

@user-up6es3nr6s 3 жыл бұрын

Привет! Как идея прикольная, но в планах нету такого реализовывать, может в будущем. Для ИМ, если делать что-то сложное, то лучше подключить woocommerce

@trvcz5085 3 жыл бұрын

@@user-up6es3nr6s тогда подскажи куда смотреть чтобы это реализовать, на php я все это написать смогу, как к вп привязать? у меня магазин на 15 товаров, тяжеленный вукоммерс не хочется юзать

@user-up6es3nr6s 3 жыл бұрын

@@trvcz5085 Ты можешь создать отдельную роль для пользователей, например, в эту сторону копать wp-kama.ru/function/add_role Регистрация и авторизация в wp есть и без плагинов, просто загугли как это делается. Затем самое сложное, так сходу не знаю решения, нужно тестировать. При создании пользователя можно с помощью carbon_fields заносить его в админ панель, например, через theme_options. Типо как создаем комплексные поля, но не через админку их заполняем, а при создании пользователя, можно через ajax. Добавить нужные поля этому пользователю, и когда он будет что-то покупать в поле покупки будут заноситься эти товары. Затем сделать отдельную страницу, как личный кабинет, где будет браться id пользователя и выводиться его купленные товары. У меня динамически получилось реализовать комментарии через carbon_fields, а значит это должно сработать. У товара создал комплексное поле в carbon_fields. Эти комментарии можно добавлять через админку, так как у каждого товара появилось поле комментарии. И я сделал форму на фронтенде для товара, если ее заполнить, то этот комментарий заносится через ajax в комментарий товара. + я поставил чекбокс для модерирования. То есть комментарий заносится, но только администратор ставит галочку. Это тебе как идея, которую можно развить

@trvcz5085 3 жыл бұрын

@@user-up6es3nr6s ух, звучит сложно, но попробую разобраться, спасибо!

@user-lc3jq3qq9x 4 жыл бұрын

сделал верно, описал не совсем верно localstorage хрнаит только стринг, поэтому и вызвало toString JSON.stringify приводит object к json который и и есть стринг... так же get/setItem не обязательны можно работать с localStorage как с объектом просто подставляя ключи

@user-up6es3nr6s 4 жыл бұрын

Да, не так объяснил. Сложно связать мысли, но я буду над этим работать

@vitalb7907 3 жыл бұрын

Планируется еще уроки в данном плейлисте? или это был последний?)

@user-up6es3nr6s 3 жыл бұрын

Привет! В данном плейлисте это последний урок, дальше новый курс сделаю

@vitalb7907 3 жыл бұрын

@@user-up6es3nr6s ждем :)

@evgeniidianov164 3 жыл бұрын

Когда новый контент!?!?!??!))))) ОЧЕНБ ЖДЁМ!

@user-up6es3nr6s 3 жыл бұрын

Привет! Я затянул, но уже макет готов. Сам его сверстаю, посажу на вп и после этого буду записывать уроки. Хочется сделать качественно) Дизайн нового проекта paste.pics/ac212486437fc842ddcd72f3593b3a07

@MaksssHome 3 жыл бұрын

@@user-up6es3nr6s Привет! Побольше js-фич)! Спасибо большое)

@memasizm 3 жыл бұрын

@@user-up6es3nr6s было бы интересно посмотреть на создание и посадку этого макета.. Или планы изменились?

@user-up6es3nr6s 3 жыл бұрын

@@memasizm скорее всего этот макет буду использовать, верстку точно запишу. Но я больше во фронтенд углубляться начал.

@soundmegabitspace1433 3 жыл бұрын

Интересно понять как будет работать запросы то есть на почту будет письмо приходить о заказе в этом проекте я так понял запрос на почту идет ? с корзиной все круто а запросы это php то есть в этом проекте все работает с запросами я даже вижу ты переименовывал классы когда переносил корзину, а почту в php свою если укажу как в одном файле будет ли работать ?

@user-up6es3nr6s 3 жыл бұрын

Привет! Немного не понял. Если на хостинге поддерживается отправка почты через php и почта как-то связана с доменом сайта, то заявки будут приходить на нее.

@soundmegabitspace1433 3 жыл бұрын

Фронтендер ок спасибо )

@MaksssHome 4 жыл бұрын

Привет!А как можно реализовать чтобы при нажатие на заказать появлялись кнопка увеличить число и уменьшить, как сделано в корзине ,Дмитрий

@user-up6es3nr6s 4 жыл бұрын

Привет! Можно там где кнопка Заказать добавить кнопки увеличить или уменьшить и изначально их скрыть. После того как пользователь нажал на кнопку заказать, показывать эти кнопки. Если пользователь нажал на минус, когда товар был в одном количестве, то заново показывать кнопку Заказать.

@apbreloated8902 3 жыл бұрын

На 22:18 минуте откуда взялся класс js-cart-item и атрибут data-product-id если их в начале не было в коде в корзине ? или где то я туплю ??

@user-up6es3nr6s 3 жыл бұрын

Привет! Это было в заготовке, на гитхабе лежат исходники github.com/DmitryBerdnikov/javascript-practice/tree/master/cart

@apbreloated8902 3 жыл бұрын

@@user-up6es3nr6s понял, спасибо 👍просто я под свою корзину пытался подстроить )

@user-ew2gm4tx6e 3 жыл бұрын

Дмитрий здравствуйте! Почему нет новых выпусков?

@user-up6es3nr6s 3 жыл бұрын

Привет! Прокрастинация + перфекционизм. Для следующего курса сделал дизайн и остановился, но обязательно продолжу.

@user-ew2gm4tx6e 3 жыл бұрын

Каналу можно как-то помочь?

@user-up6es3nr6s 3 жыл бұрын

@@user-ew2gm4tx6e Спасибо! Но, пока что помощь не нужна

@valerykhilinski6477 2 жыл бұрын

А можешь подсказать по поводу реализации сортировки? Допустим если отсортировать все по цене. Спасибо)

@user-up6es3nr6s 2 жыл бұрын

Привет! Если на уровне js, то достаточно просто нужно использовать sort Если на уровне wp, тут сложнее. Надо искать в эту сторону wordpress.org/support/topic/order-articles-posts-by-custom-field/

@soundmegabitspace1433 4 жыл бұрын

Загрузка по адресу «file:///C:/Users/user/Desktop/free-psd/js/cart.js» не удалась. Что за ошибка в консоли?все правильно же

@soundmegabitspace1433 4 жыл бұрын

и товар добавить не могу

@user-up6es3nr6s 4 жыл бұрын

@@soundmegabitspace1433 Это такая ошибка? Прям так и написано? Если сайт на wordpress, то путь не верный до файла скрипта

@soundmegabitspace1433 4 жыл бұрын

Фронтендер а если не на Wordpress то как исправить ситуацию чтобы функционал корзины работал ?

@user-up6es3nr6s 4 жыл бұрын

@@soundmegabitspace1433 Сам файл не загрузился? Нужно путь правильно написать до файла. Если с этим есть трудности, то по идее в уроке должно быть очень сложно для понимания, и лучше идти с азов

@soundmegabitspace1433 4 жыл бұрын

Фронтендер то есть мне лучше с начала начать делать а потом уже добавить корзину и указать путь верно ?

@andreinechaev7214 4 жыл бұрын

Сделайте пожалуйста видео по верстке многостраничного сайта с гитом, вебпаком и препроцессорами.

@user-up6es3nr6s 4 жыл бұрын

Привет! Следующий курс будет с галпом, в будущем может сделаю с вебпаком

@diasoralbekov6465 3 жыл бұрын

Отличное видео ! Подскажи пожалуйста , что делать если у меня отдельная страница корзины. Как это сделать?

@user-up6es3nr6s 3 жыл бұрын

Привет! Выводить в корзине с помощью js. Нужно сохранить товары в localstorage и вывести их в корзине на отдельной странице. Но если нужно что-то посерьезнее, то можно посмотреть в сторону wordpress woocommerce

@valerykhilinski6477 2 жыл бұрын

а если в каталоге с товаром добавить иинпут с количеством, как его обработать?

@user-up6es3nr6s 2 жыл бұрын

Привет! Можно через ajax, как пример wp-kama.ru/id_2018/ajax-v-wordpress.html

@valerykhilinski6477 2 жыл бұрын

Здравтвуйте! кстати, а комментарии для сайта не знаете как написать?

@user-up6es3nr6s 2 жыл бұрын

Здравствуй! Как сделать форму для отправки комментариев, и показать список всех комментариев? Даже не знаю как ответить на этот вопрос, нужно уметь отправлять данные на сервер, сохранять и получать их, чтобы отобразить

@user-ei5bj5vx5z 3 жыл бұрын

Урок отличный. Как долго вы учите JS, а самое главное где вы его учили ?

@user-up6es3nr6s 3 жыл бұрын

Привет! Примерно 3 года, учу абсолютно везде, перечитал и пересмотрел много контента. Но могу порекомендовать только 1) learn.javascript.ru/ 2) hexlet

@user-ei5bj5vx5z 3 жыл бұрын

@@user-up6es3nr6s спасибо, понял )

@Mamikonars 3 жыл бұрын

@@user-up6es3nr6s а WordPress только по вп-каме учили? В ютубе много уроков пересмотрел. В основном шлак. Только тут хорошо все показано и еще на парочке каналов..