Создание интернет-магазина на WooCommerce с нуля. 26. Оформление заказа
HTML-код
- Опубликовано: 7 май 2024
- Продолжаем создание интернет-магазина WooCommerce и разработку собственной темы WordPress. В этом уроке мы начнем реализацию страницы оформления заказа.
В предлагаемом цикле уроков мы будем создавать интернет-магазин на CMS WordPress с использованием плагина WooCommerce. При этом мы не будем использовать готовые темы, а будем создавать собственную тему для WooCommerce с нуля.
Из данных уроков вы узнаете о том, как создавать пользовательские темы для WooCommerce с собственным дизайном. В качестве верстки мы будем использовать шаблон, который создали в цикле уроков "Адаптивная верстка интернет-магазина на Bootstrap 5" - • Адаптивная верстка инт...
Исходники к уроку - github.com/matroskin978/wooes...
==========================================
Мои курсы на Udemy
Не получается приобрести курс или нужна скидка - обращайтесь. Решим :)
Курс "PHP 8. ООП. Создание собственного PHP MVC фреймворка":
www.udemy.com/course/php-8-fr...
Курс по созданию интернет-магазина и веб-приложений в Telegram - www.udemy.com/course/telegram...
Курс по созданию собственного шаблона интернет-магазина для OpenCart 3 - www.udemy.com/course/opencart...
Курс по PHP - www.udemy.com/course/php-8-ua...
СУБД MySQL и язык запросов SQL. Теория и практика - www.udemy.com/course/mysql-sq...
Большое спасибо за урок, с нетерпением жду продолжения, следующих уроков!
Пожалуйста)
Спасибо!
Честно сказать, в ютубе роликов про woo для wordpress я находил немного, и некоторые курсы выходили этак лет 5 назад. Не знаю, может я плохо находил.
Просто для меня проще порой визуально воспринимать информацию, нежели опираться на материал книжный. Но в книгах и документациях, плюс если взять нейронку chat-gpt, там обычно более полно преподноситься информация.
Я ваш канал, кстати, нашел осенью 23 года по роликам плагина woo. У вас грамотно подаётся материал, хочется отметить=)
Благодарю ☺
Я пока только скачиваю твои ролики по этой теме, продолжай
Дякую за нове відео!
Здравствуйте. Как раз то что Вы объяснили и Помогло))) Шорткод.
Здравствуйте!
Ага, я так и предполагал 🙂Спасибо 😉
Здравствуйте,Андрей.Спасибо за новое видео.Может вы знаете,где можно ещё подробнее узнать о вордпресс и вукомерс?Как учились вы,может есть какие-то хорошие документации и тд?И сколько еще планируется уроков по этой теме?
Здравствуйте, Лев! Пожалуйста ;)
Подробнее можно узнать в документации. Но она, по сути, представляет из себя набор статей без какого-то структурирования. Поэтому хорошего полного и структурированного материала я не встречал, увы.
Еще планирую не более 10 уроков. Скорее, меньше. Осталось завершить оформление заказа. После этого личный кабинет и локализация. Собственно, и все.
Андрей, не подскажите ли, какие-нибудь cheatsheets или инфографику для создания более полного представления об устройстве woocommerce? Ну, типа, назначения и связи шаблонов, глоссарий функций, схема таблиц бд и т.д., но в удобном для комфортного потребления мозгом, виде )
Спасибо, за вашу работу!
Мне кажется такой нет. Тем более, в удобном виде)
За спасибо - спасибо 🙂
Здравствуйте, хочу выразить вам благодарность за ваши видео.Такого подробного разбора по этой теме не нашёл ни у кого.Хотел бы спросить вас про настройку личного кабинета,видел в комментариях,что такой ролик планируется,но ,как я понял, ещё не скоро.Если это настраивается по шаблонам,может у вас есть какие-нибудь, которыми вы могли бы поделиться👉👈?Или может их можно где-нибудь найти?Мне главное сделать так,чтобы по почте можно было посмотреть свои заказы
Здравствуйте! Пожалуйста)
До личного кабинета осталось немного. Следующий урок - закончим оформление заказа, скорее всего. А после этого будет уже личный кабинет. Шаблонов сверстанных личного кабинета у меня нет, к сожалению, поэтому будем писать что-то налету)
@@matroskin978 тогда с нетерпением жду ваших уроков.Спасибо
Мои курсы на Udemy
Не получается приобрести курс или нужна скидка - обращайтесь. Решим :)
Курс "PHP 8. ООП. Создание собственного PHP MVC фреймворка":
www.udemy.com/course/php-8-framework/?referralCode=1D29D8356C893C7889B3
Курс по созданию интернет-магазина и веб-приложений в Telegram - www.udemy.com/course/telegram-bots-web-apps/?referralCode=A574DFE059CF9FF4E002
Курс по созданию собственного шаблона интернет-магазина для OpenCart 3 - www.udemy.com/course/opencart-3/?referralCode=96BAF7C78DF57D6A90CA
Курс по PHP - www.udemy.com/course/php-8-ua/?referralCode=4DAAEA9CF6ADF447D879
СУБД MySQL и язык запросов SQL. Теория и практика - www.udemy.com/course/mysql-sql/?referralCode=B6655F05D32032D80C0B
Спасибо за урок, уже смотрю!
Проблем в том что в новых версия Woo там сразу Woo предлогает готовый блок корзины для Gutenberg а не шорткод, такая штука сейчас и с "Оформление заказа" там сразу по умолчанию стоит блок "Оформление заказа" а не шорткода
Для меня при работе с проектом на WooCommerce самое сложное под дизайн подогнать "Оформление заказа" если с корзиной проблем нету то с "Оформление заказа" там такой головняк
Пожалуйста)
Новые версии плагина не смотрел, поэтому не подскажу. Но в комментах пишут, что можно переключиться на классический вид. Я думал, что речь о редакторе, но возможно и нет. Попробуйте в этом случае использовать шорткод.
@@matroskin978 да, там надо переключаться на классику, иначе не удается править представление
шорткод все исправляет
Андрей на 25.34 вы сказали что поставите на паузу и что то там доработаете по стилям а потом вернувшись к уроку у вас уже стилизованная страница получилась а у нас после того как заливаем ваши исходники с гитхаб такой структуры нет , есть левая правые колонки но нет белых полей пунктирной линии и 27-й урок из за этого не меняется ничего , может что то не так по стилям ?
Ну а на 27:57 я и комментирую написанные стили. В исходниках эти стили есть. Поскольку, кроме вас, никто не написал о проблеме со стилями, то полагаю, корректнее сказать, что не "у нас после того как заливаем ваши исходники с гитхаб такой структуры нет", а все же у вас))
Поэтому предлагаю еще раз проверить ваши стили и сравнить их со стилями исходников. В файле assets/css/main.css стили формы начинаются со строки 1172.
Если стили в теме есть, тогда, возможно, страница закэшировалась. Очистите кэш или используйте комбинацию Ctrl + F5. Или проверьте в другом браузере.
Также в комментариях к уроку писали, что в новых версиях изменилась корзины и чекаут на блочные. Чтобы следовать за мной по уроку нужно либо переключить вид на классический, либо использовать шорткод. Просмотрите комментарии к этому уроку и попробуйте.
Класное видео , а такой вопрос допустим товаров до 5000 тысяч вы бы какую cms использовали опенкарт , или вукомерс и примерно какие конфигурации хостинга?
Спасибо)
Можно использовать хоть OpenCart, хоть WooCommerce. Обе справятся с таким количеством товаров.
По WooCommerce есть вот такое исследование с замерами - www.imagecms.net/blog/obzory/many-products-can-woocommerce-handle
У меня вопрос: можно ли сделать так, чтобы заказы, которые сделал клиент, приходили в WhatsApp?
Если у WhatsApp есть соответствующий API, тогда возможно. Для этого придется писать код, который будет взаимодействовать с этим API.
Сейчас в вордпрессе идёт новая корзина, которая не редактируется. Поэтому нужно заменить шорткод на классическую корзину.
За уроки безусловно спасибо и лайк. Но не могу удержаться, чтобы не высказать свое личное отношение к wordpress. Когда я впервые его увидел, будучи неопытным разработчиком, ничего кроме отвращения эта система не вызвала. Но тогда я списывал это на неопытность. Прошло более 10 лет, есть опыт работы с десятком cms, фреймворков, разработка своих cms, фреймвроков на разных языках, но wordpress по прежнему вызывает огромное отторжение и тошноту. Это не crms,а набор нелепицы и костылей, отсутствие какой либо парадигмы, миллион условностей (по неймингу, по расположению файлов, по названию шаблонов), такое чувство что писал систему ребенок, а потом просто изза популярности пришлось ее расширять и накладывать одни костыли поверх других. Даже джумла, которая по степени "отвращения" стоит на втором месте все таки куда более продуманная и структурированная система.
Нет ничего идеального. В любой системе будут как свои плюсы, так и минусы. Код WP далек от идеала и, скорее всего, так сложилось исторически: WP появился еще во времена PHP 4. Но к неоспоримым плюсам WP можно отнести его удобство и понятность для пользователей системы, скорость разработки типовых (и не только) сайтов. По сути тему для типового новостного сайта с уникальным дизайном (при наличии верстки) можно разработать за день. Плюс огромное количество плагинов, которые позволяют решить процентов 99 возможных задач по расширению функционала. Поэтому плюсов для меня однозначно больше, чем минусов. Да и минусы условны. Ну не следует код стандартам, ну должен я назвать файл именно так, а не иначе... ну и пусть. Лично для меня это особой проблемы не представляет. Наверное, во мне недостаточно перфекционизма)))
@@matroskin978 Безусловно, идеального нет ничего. И ваши доводы верны, но правда, только в том случае если задача - разработать сайт с нуля. Тоесть вот у вас чистый вордпресс и нужно сделать сайт, не имеющих строгого и уникального ТЗ, а просто навнятное - нужен новостной блог. Тогда да. Но если вам на обслуживание и доработку приходит сайт на wordpress разработанный кем-то 5 лет назад и заказчик просит "все там изменить" но при этом не делая новый сайт, то работа с таким сайтом превращается в ад. Код невозможно контролировать или прогнозировать, вспомните как вам в одном из уроков чтобы добавить просто тег DIV на страницу пришлось в файле functions делать подключение каких то хуков, передавать им колбеки и все это чтобы на странице появился div. Ну не безумие ли это. Поэтому если задача - быстро сделать сайт и забыть про него - то наверное вы правы, но именно по этому в интернете лежат миллионы сайтов на wordpress которыми заказчки недовольны, но никто не хочет браться за их доработку, потому что сделать новый сайт проще, чем пытаться разобраться в коде wordpress написанном кем-то 5 лет назад. Обилие плагинов, на мой взгляд наоборот минус, по крайней мере для разработчика, поскольку плагины как правило очень низкого качества, плюс у этих плагинов кроме проблем с кодом php есть куча проблем и на уровне javascript, изза чего в коде странцы оказывается подключенными 5 версий jquery, которые конфликтуют друг с другом и так далее. Не дай бог вы работает не просто на себя, а в компании, которая оказывает комплекс услуг, в том числе и по сео. К вам приходит на поддержку, переработку и продвижение сайт на wordpress, сеошники делают анализ и говорот - такое продвигать нельзя, все плохо оптимизировано, js скрипты долго грузятся и так далее. И это тупик, потому что заказчику нужны все эти 150 плагинов, которые ему наставили, а сеошники говорят что изза некачественности этих плагинов продвигать сайт нельзя. ИВывод - вордпрес хорош только если задача быстро наделать какой-то гадости, которую сможет принять заказчик и сразу же о нем забыть и искать нового заказчика. Но даже для такого я выбрал бы modx, как прекрасную альтеранативу и уже куда более серьезных подход к написанию кода.
@@matroskin978 Безусловно, идеального нет ничего. И ваши доводы верны, но правда, только в том случае если задача - разработать сайт с нуля. Тоесть вот у вас чистый вордпресс и нужно сделать сайт, не имеющих строгого и уникального ТЗ, а просто навнятное - нужен новостной блог. Тогда да. Но если вам на обслуживание и доработку приходит сайт на wordpress разработанный кем-то 5 лет назад и заказчик просит "все там изменить" но при этом не делая новый сайт, то работа с таким сайтом превращается в ад. Код невозможно контролировать или прогнозировать, вспомните как вам в одном из уроков чтобы добавить просто тег DIV на страницу пришлось в файле functions делать подключение каких то хуков, передавать им колбеки и все это чтобы на странице появился div. Ну не безумие ли это. Поэтому если задача - быстро сделать сайт и забыть про него - то наверное вы правы, но именно по этому в интернете лежат миллионы сайтов на wordpress которыми заказчки недовольны, но никто не хочет браться за их доработку, потому что сделать новый сайт проще, чем пытаться разобраться в коде wordpress написанном кем-то 5 лет назад. Обилие плагинов, на мой взгляд наоборот минус, по крайней мере для разработчика, поскольку плагины как правило очень низкого качества, плюс у этих плагинов кроме проблем с кодом php есть куча проблем и на уровне javascript, изза чего в коде странцы оказывается подключенными 5 версий jquery, которые конфликтуют друг с другом и так далее. Не дай бог вы работает не просто на себя, а в компании, которая оказывает комплекс услуг, в том числе и по сео. К вам приходит на поддержку, переработку и продвижение сайт на wordpress, сеошники делают анализ и говорот - такое продвигать нельзя, все плохо оптимизировано, js скрипты долго грузятся и так далее. И это тупик, потому что заказчику нужны все эти 150 плагинов, которые ему наставили, а сеошники говорят что изза некачественности этих плагинов продвигать сайт нельзя. Вывод - вордпрес хорош только если задача быстро наделать какой-то гадости, которую сможет принять заказчик и сразу же о нем забыть и искать нового заказчика. Но даже для такого я выбрал бы modx, как прекрасную альтеранативу и уже куда более серьезный подход к написанию кода.
Ну так здесь выход ведь прост - не берите в работу чужие проекты))) Вести своих клиентов на WP, делать им изначально оптимизированный сайт. И тогда не будет проблем с доработкой.
Я вот, к слову, недавно взялся за проект, для которого нужно было сделать редизайн. Сайт на WP, сделан был на купленной теме и десятках плагинов. Браться не хотел, честно говоря. Но рискнул. Сделал. И клиент доволен остался) Написал свою тему для сайта, поскольку переделывать старую было бы себе дороже. Так что разные ситуации бывают ;)
Андрей, разрыв между выходами серий долгий, поэтому и теряется интерес, либо все ждут, когда уж до конца добьется магазин, тогда уже все и наверстать, либо, как и я переключился на опенкарт и поиздевался над ним, благо вашими уроками, там все понятно и не так заморочено, как в ВП. Понятно, что вы параллельно ведёте несколько проектов, но думаю, за несколькими зайцами гнаться, как то не очень сказывается на продвижении. Если бы 1-2 проекта довести до конца, и идти последовательно дальше, то, как мне кажется, был бы лучший результат... Но опять же, хозяин - барин, и вы преследуете другие цели, и не мне соваться со своими советами
Все почти так, но... чуть-чуть не так)) На самом деле я первые уроки выкладывал регулярно и с небольшим разрывом по времени. Например, за август 2023 года я выложил 10 уроков в серии. Не поленился посмотреть даты:
1 - 03.08.23
2 - 06.08.23
3 - 07.08.23
4 - 08.08.23
5 - 16.08.23
6 - 18.08.23
7 - 21.08.23
8 - 23.08.23
9 - 24.08.23
10 -30.08.23
А вот дальше пошли паузы. И пошли они именно потому, что я начал терять интерес к серии. А интерес терялся именно потому, что обратной реакции становилось все меньше. Поэтому я и начинал какую-то другую серию уроков. Вот она прямая зависимость)) Частота выхода уроков зависит от реакции на каждый предыдущий, а не наоборот.
@@matroskin978 подозреваю, что часть первых уроков не особо нужна была для таких как я, поэтому я ждал этого урока оформления, и предыдущих, чтоб за 2-3 дня слабать магаз, но так как терпелка плохо работает, переключился на опенкарт, но там меня не устраивает модуль оформления и сео
@@matroskin978скорее всего, все ждут концовки проекта и одним махом все сделать, ибо результат хочется видеть сейчас и сразу, а перерывы 2-3 дня не способствуют этому, забывается материал и вьезжать в ВП трудновато
Ну, тут немного на самом деле осталось. Оформление доработать, личный кабинет и локализация. По сути все из основного.
P.S. В следующий раз нужно начинать курс с конца, которого все так ждут)))
@@matroskin978 тоже вариант
Не по теме урока вопрос. Можно ускорить до зелёной зоны распространённые шаблоны вордпресса без плавгинов ( типа Рокет и подобных). Может посоветуете что посмотреть на эту тему?
Можно. Очевидно, придется делать все то же самое, что делают подобные плагины. Что посмотреть - не подскажу. Но использование плагинов для подобной цели - вполне нормальная практика.
@@matroskin978 Тоько реально работающих единицы... и они платные )