Раздел 1. Стартовый.
- Урок 1.1. Три способа создать интернет-магазин.
В этом уроке мы подробно обсудим три способа создания интернет-магазин своими силами. Это нужно для того, чтобы у вас было четкое понимание, каким путем мы идем и какие плюсы и минусы есть у этого пути.
- Урок 1.2. Регистрируем домен для вашего магазина.
В этом видео вы научитесь регистрировать доменное имя для своего сайта. И хотя изначально мы его использовать не будем, потому что всю разработку будем вести на тестовом домене, в будущем это поможет нам мгновенно переключиться на основной домен.
- Урок 1.3. Регистрация в системе InSales.
В этом уроке мы сначала обсудим, как лучше всего изучать данный курс, чтобы получить от него максимум результата. После этого я покажу вам, как зарегистрироваться в системе InSales и получить дополнительные 14 дней бесплатного использования системы, что позволит вам почти целый месяц учиться работе с этой системой совершенно бесплатно.
- Урок 1.4. Знакомство с интерфейсом.
В этом уроке вы подготовите свой браузер для удобной работы. Кроме этого вы познакомитесь с администраторской зоной вашего интернет-магазина.
- Урок 1.5. Работа с товарами.
В этом уроке вы научитесь добавлять новый товар в ваш интернет-магазин. Вы узнаете, где брать тестовые товары для периода обучения. Каждый товар относится хотя бы к одной категории. Вы разберетесь, почему некоторые категории отображаются тусклым серым цветом и как их можно использовать для своей пользы. Также из этого урока вы узнаете почему важно правильно заполнять параметры товара при добавлении его в магазин.
- Урок 1.6. Модификации товара.
Часто один и тот же товар в вашем магазине может иметь разные вариации. Например, вы продаете детское автокресло и оно есть в двух цветовых вариантах — красное и черное. По сути, это два разных физических товара. Но как их добавить на сайт? Как отдельные товары или как один, но с разными вариациями? Или добавить как отдельные, но внутри сделать выбор модификации. Ответ на этот вопрос вы найдете в данном уроке.
- Урок 1.7. Сопутствующие и аналогичные товары.
Скорее всего, вы уже видели в разных интернет-магазинах такой момент, что под тем товаром, который вы смотрите выводятся сопутствующие и аналогичные товары. Этот прием позволяет увеличить продажи. Например, если вы выбираете автокресло, то внизу страницы товара это может выглядеть так.
- Урок 1.8. Массовые действия с товарами.
Когда у вас в магазине десятки, сотни или тысячи товаров и вам надо срочно поднять цену всех этих товаров на 10%, то ручной вариант здесь явно не подойдет. Поэтому ваша задача научиться массово применять различные действия к товарам, чтобы экономить свое время. Этим мы и займемся в этом уроке.
- Урок 1.9. Как выводить товары на главную страницу.
В этом уроке вы узнаете один очень важный принцип, который позволит вам выводить определенные товары в нужном месте сайта. Это может быть главная страница, это может быть страница акции или распродажи. Главное понимать принцип, а его вы узнаете в этом уроке.
- Урок 1.10. Настройка страниц магазина.
На сайте любого интернет-магазина должны быть обязательные страницы. Как минимум, это страницы: «О компании», «Оплата и доставка» и т.д. О том как эти страницы создавать в рамках InSales, вы узнаете из этого урока.
- Урок 1.11. Настройка навигационного меню магазина.
В предыдущем уроке мы с вами учились создавать страницы, но пока что все страницы, которые мы создали, нигде не отображаются. Цель этого урока научиться выводить ссылки на созданные страницы в навигационном меню. На сайте может быть несколько навигационных меню. При этом одна и та же страница может входить сразу в несколько навигационных меню, которые у вас есть.
Раздел 2. Устройство шаблона и базовые конструкции.
- Урок 2.1. Три причины сделать уникальный дизайн вашего магазина.
Мы открываем серию уроков, которые посвящены внедрению нового дизайна для вашего интернет-магазина. Здесь мы поговорим о том, почему вообще важно использовать уникальный и качественный дизайн вашего интернет-магазина.
- Урок 2.2. Инструментарий, который вам понадобится для работы.
В этом уроке мы с вами поговорим о тех инструментах, которые вам понадобятся для полноценной работы по изменению дизайна вашего интернет-магазина. Также вы узнаете о том, где заказывать уникальный дизайн для вашего интернет-магазина.
- Урок 2.3. Знания, которые вам понадобятся для работы.
Начиная с этого урока мы с вами будем много работать с кодом нашего интернет-магазина. Чтобы полноценно применить новый дизайн, мы будем много работать с шаблонами магазина, которые по большей части состоят из HTML и CSS кода. Поэтому если у вас нет понимания этих простых технологий, то перед тем как идти дальше, я рекомендую вам их изучить хотя бы на базовом уровне. Также было бы здорово уметь пользоваться программой Adobe Photoshop. Материалы для обучения прилагаются (HTML, CSS, Photoshop).
- Урок 2.4. Знакомство со вкладкой «Дизайн».
В этом уроке мы начинаем изучение вкладки «Дизайн». Как вы скорее всего знаете, в системе InSales есть ряд встроенных тем оформления, на которые вы можете быстро переключить свой магазин. Здесь мы поговорим, как это делается. Кроме этого мы с вами разберем, какие два варианта по доработке дизайна у нас есть. А также изучим те возможности, которые позволят нам отслеживать все внесенные в тему оформления изменения, а также возвращаться назад благодаря точкам восстановления.
- Урок 2.5. Устройство шаблона.
Один из главных уроков курса. Здесь вы изучите устройство шаблона в системе InSales. Это понимание позволит вам легко дорабатывать интернет-магазин под себя как в плане дизайна так и в плане добавления новых и удаления ненужных элементов. В этом уроке мы «по косточкам» разберем главный шаблон нашего интернет-магазина.
В этом уроке вы изучите главный блок шаблона — блок контента. Если вы внимательно посмотрите на сайт, то увидите что все блоки сайта более-менее постоянны, а вот блок контента постоянно меняется. Важно понять, как он устроен, чтобы иметь возможность управлять выводом информации в этот блок.
В этом уроке вы изучите сниппеты. Сниппеты — это, как правило, небольшие кусочки кода, которые выводятся в разных местах шаблона. Если понять как они устроены, то можно легко менять место вывода различных элементов страницы, чем мы и будем успешно пользоваться на протяжении многих последующих уроков. Поэтому очень важно внимательно изучить этот урок.
- Урок 2.8. Переменные и объекты.
Любой шаблон — это просто каркас, который при генерации страницы наполняется данными. Но все страницы разные и выводиться на них должна разная информация. Как же этого добиться? А достигается это за счет переменных, которые через специальные конструкции добавляются в разные места шаблона, а при генерации страницы на их место подставляются разные данные. Все это вы будете изучать в этом уроке. Будет интересно.
- Урок 2.9. Фильтры переменных.
Иногда недостаточно просто вывести переменную, т.к. стандартный формат ее вывода нам не подходит. Например, если просто вывести переменную цены, то у нас выведутся только цифры. А как быть если нам надо вывести не только цифры, но еще и знак валюты? В этом случае на помощь приходят фильтры, которые позволяют воздействовать на вывод переменных и видоизменять их тем или иным способом. Еще один пример — вывод даты. Дату можно вывести в самых разных форматах: 20.01.16, 20 января 2016, 20/01/2016 т.д. Так вот, переменная выводит дату, а фильтр говорит, в каком формате её выводить. Все это вы изучите в этом уроке.
- Урок 2.10. Условие if-else.
В этом уроке вы изучите еще один важный момент, который позволяет выводить информацию на странице только при соблюдении определенных условий. Из этого урока вы поймете, почему шаблон у нас вроде как один, но почему-то какие-то его элементы выводятся всегда, а какие-то появляются только иногда. Этот урок очень важен, изучайте его внимательно.
- Урок 2.11. Конструкция unless.
В этом уроке мы с вами изучим конструкцию unless. Мы ее практически не будем использовать на практике, но она может попадаться вам в коде, поэтому чтобы вы знали для чего она нужна, мы изучим ее на практическом примере.
В этом уроке вы изучите еще одну важную конструкцию, которую мы будем много использовать в дальнейших уроках. Эта конструкция позволяет перебирать в цикле элементы объекта. Например, вы не можете просто вывести все товары, обратившись к переменной, вам нужно запустить цикл, в каждой итерации которого будет выводиться по одному товару, пока не будут выведены все. О том, как это делать в теории, вы узнаете в этом уроке.
- Урок 2.13. Создаем наш первый цикл.
Здесь вы уже перейдете от теории циклов к практике и выведите свой первый цикл из товаров определенной категории.
- Урок 2.14. Вложенный цикл.
В продолжении к простым циклам, которые мы изучили за предыдущие два урока, в этом уроке мы изучим вариант, когда нам нужно использовать один цикл внутри другого. Может быть это звучит сложно, но как вы увидите в уроке, все это на самом деле просто, если понимать суть.
Раздел 3. Смена дизайна магазина.
- Урок 3.1 Меняем главный шрифт шаблона.
Наконец-то, вся подготовительная работа позади, можно переходить к изменению дизайна. Первое, что мы с вами сделаем — поменяем основной шрифт нашего интернет-магазина. Подключать его будем через google fonts.
- Урок 3.2. Меняем фоновое изображение шаблона.
Здесь, как понятно из названия, мы сменим главную фоновую картинку вашего интернет-магазина.
- Урок 3.3. Настраиваем цвет текста и базовый размер шрифта.
В этом уроке мы отключим воздействие настроек темы оформления на цвет и размер шрифта. Пропишем все это напрямую в таблицу стилей style.css
Начинаем движение сверху вниз и приводим элементы дизайна к образцу. В этом уроке займемся базовым изменением верхнего меню.
- Урок 3.5. Три доработки верхнего меню.
В этом уроке мы будем по мелочи доводить верхнее меню до ума. Поиграемся с отступами, стилями ссылок и шрифтом.
- Урок 3.6. Доработка блока поиска.
Как следует из названия, в этом уроке мы приведем блок поиска, который расположен в верхней панели сайта в соответствие с дизайном. Ничего сложного, просто допишем нужные стили.
- Урок 3.7. Доработка иконки корзины в верхнем меню.
На скриншоте вы можете видеть, что рядом с блоком поиска у нас выводится иконка корзины. Над ней мы и будем работать в рамках этого урока, т.к. в исходном варианте, она выглядела совершенно по-другому.
- Урок 3.8. Шапка сайта. Часть 1.
В этом уроке мы с вами начнем работу над видоизменением шапки нашего магазина. Здесь мы подготовим контейнер и поставим на его фон картинку.
- Урок 3.9. Шапка сайта. Часть 2.
В данном уроке мы с вами закончим работу, начатую в предыдущем шаге. Здесь уже добавим логотип и ссылку входа в личный кабинет.
- Урок 3.10. Список категорий.
Этот урок мы с вами посвятим доработке списка категорий. Для начала мы разберемся, как устроен этот блок с точки зрения кода, а затем внесем необходимые коррективы, чтобы блок отображался так, как он есть в образце.
- Урок 3.11. Доработка меню категорий.
В этом уроке мы доведем до конца работу, начатую в предыдущем шаге, чтобы привести меню категорий в надлежащий вид.
Здесь вы научитесь не только менять картинки слайдера, но и менять его размеры и местоположение. Посмотрите ниже картинки «Было/Стало» и сразу все поймете.
- Урок 3.13. Кнопки переключения слайдов.
В этом коротком уроке вы приведете иконки переключения слайдов к тому виду, который есть в нашем дизайне, а также перенесете их в левый верхний угол слайдера.
В данном уроке мы превратим стандартные мелкие, невзрачные заголовки на крупные и цветные. Большая часть работы будет происходить в главном файле таблиц стилей шаблона.
- Урок 3.15. Карточка товара. Часть 1.
В данном уроке мы начнем работу над карточкой товара. Поменяем стиль названия товара, уберем лишние элементы.
- Урок 3.16. Карточка товара. Часть 2.
В этом уроке мы закончим доработку карточки конкретного товара и приведем в порядок формат цены и блока количества заказываемого товара.
- Урок 3.17. Блок информации под товарами.
В этом простом уроке мы приведем в порядок текст главной страницы, который выводится под списком товаров.
- Урок 3.18. Блоки «Акции», «Спецпредложения», «Распродажа».
В нижней части нашего шаблона есть три блока: «Спецпредложения», «Акции», «Распродажа». В базовом шаблоне они смотрятся не лучшим образом, поэтому на протяжении этого урока мы будем видоизменять этот блок и приводить его к правильному виду.
- Урок 3.19. Вывод зачеркнутой цены в блоке «Распродажа».
Зачеркнутая старая цена магически действует на многих покупателей, поэтому надо этот прием обязательно использовать на сайте интернет-магазина. В этом уроке мы будем делать так, что если у вас для товара задана старая цена, то она выводится в карточке товара красным перечеркнутым шрифтом.
- Урок 3.20. Футер. Создаем основу.
Футер — самый нижний блок сайта, который еще называют подвалом. В исходном шаблоне футер у нас сильно отличается от того, что у нас есть в итоговом шаблоне, поэтому, начиная с данного урока, мы будем делать новый футер с нуля. В этом уроке мы сделаем каркас.
- Урок 3.21. Футер. Добавляем меню.
Продолжаем доработку футера. Здесь добавим меню, которое по сути дублирует меню из верхней части сайта.
- Урок 3.22 Футер. Блок поиска
В этом уроке мы с вами добавим в футер блок поиска. Опять же не будем изобретать велосипед, а просто возьмем блок поиска из верхней части сайта и доработаем его в плане стилей.
- Урок 3.23. Футер. Пунктирная линия.
Этот короткий урок посвящен добавлению пунктирной линии по всей ширине блока футера, которая отделяет блок меню от всех остальных элементов.
- Урок 3.24. Футер. Телефоны и иконки соцсетей.
Здесь продолжим доработку футера и создадим блоки для вывода телефонов и иконок социальных сетей.
- Урок 3.25. Футер. Блок платежных систем.
В этом коротком уроке мы доведем до ума блок платежных систем. Это простой контейнер, на фон которого мы поставим изображение, подготовленное нами в фотошопе.
- Урок 3.26. Футер. Блок копирайта.
Последний урок из серии доработки футера. Здесь реализуем блок копирайтов. Вот что у нас в итоге получится:
- Урок 3.27. Дизайн товара, по которому есть акция.
В этом уроке мы с вами доработаем карточку товара, для которого у нас настроена акция. Здесь мы плотно поработаем со сниппетом, который отвечает за вывод товаров.
- Урок 3.28. Добавляем три блока в сайдбар.
Если вы посмотрите на итоговый дизайн нашего магазина, то заметите в левом сайдбаре три блока: «Быстрая доставка», «Бонусная программа», «Подарочная упаковка». Именно эти три блока мы и будем добавлять в рамках урока.
- Урок 3.29. Дорабатываем дизайн трех блоков в сайдбаре.
В этом уроке мы доработаем дизайн блоков, добавленных в предыдущем уроке.
- Урок 3.30. Доработка блока корзины в сайдбаре.
В левом сайдбаре кроме трех информационных блоков у нас есть блок корзины, который нуждается в доработке. Им-то мы и займемся в данном уроке.
- Урок 3.31. Хлебные крошки. Часть 1.
Хлебные крошки (breadcrumbs) — элемент навигации, который показывает посетителю сайта, где он сейчас находится в общей структуре, и позволяет ему быстро переходить в другие разделы сайта. В этом уроке мы начнем доработку этого важного блока и перенесем его из одного места шаблона в другое.
- Урок 3.32. Хлебные крошки. Часть 2.
В предыдущем уроке мы успешно перенесли хлебные крошки в нужное место нашего шаблона, а в этом уроке мы доработаем дизайн этого блока. Вот что у нас в итоге получится:
- Урок 3.33. Страница категории. Добавляем зазор.
Этим уроком мы открываем серию уроков по доработке страницы категории товаров. Конкретно в этом уроке мы разберемся с устройством данной страницы и внесем первые доработки.
- Урок 3.34. Страница категории. Блок подкатегорий.
В этом уроке мы полностью переработаем блок подкатегорий. Поменяем фон, уберем лишние тени, добавим нижнее подчеркивание каждому пункту меню.
- Урок 3.35. Страница категории. Система сортировки. Часть 1.
Система сортировки товаров — важная составляющая любого интернет-магазина. Она позволяет потенциальному клиенту отсеять все лишние товары и выбирать только среди тех товаров, которые подходят ему по своим характеристикам. В этом уроке мы начнем процесс доводки до ума штатной системы сортировки.
- Урок 3.36. Страница категории. Система сортировки. Часть 2.
В этом уроке мы перенесем систему сортировки товаров из верхней части страницы категории в левый сайдбар. Там она смотрится намного логичнее.
- Урок 3.37 Страница категории. Удаляем разделитель
В исходном шаблоне у нас есть странный черный разделитель, который выводится на некоторых страницах. В этом уроке мы будем от него избавляться.
- Урок 3.38. Страница категории. Финальные доработки.
В этом уроке мы доделаем все мелкие недочеты, которые еще остались на странице категории товара.
- Урок 3.39. Страница товара. Свойства товара.
Мы добрались до страницы конкретного товара и начинаем доводить ее до ума. Изменений на первый взгляд немного, но на самом деле есть над чем поработать, поэтому урок за уроком будем приводить эту страницу в порядок. Начнем с удаления лишних рамок и отступов.
- Урок 3.40. Страница товара. Модификации товаров.
Этот урок мы посвятим доработке блока с выводом модификаций товара. Там четыре элемента, над которыми нужно поработать.
- Урок 3.41. Страница товара. Блок количества.
Здесь мы поработаем над тремя элементами, которые выводятся под ценой товара. Это блок количества заказываемого товара, сама кнопка заказа и текст.
- Урок 3.42. Страница товара. Блок «Поделиться».
В этом уроке мы будем добавлять в карточку товара блок «Поделиться», через который посетители сайта смогут делиться страницей товара со своими друзьями в различных социальных сетях.
- Урок 3.43. Страница товара. Заголовки.
В этом уроке мы с вами доведем до ума заголовки страницы конкретного товара и начнем работу над блоком отзывов.
- Урок 3.44. Страница товара. Дизайн отзывов. Часть 1.
Отзывы — важная часть любого интернет-магазина, поэтому стоит уделить особое внимание их дизайну. В этом уроке мы начнем приводить их в порядок.
- Урок 3.45. Страница товара. Дизайн отзывов. Часть 2.
В этом уроке мы доделаем все оставшиеся недочеты и приведем отзывы в соответствие с нашим дизайном. Вот что мы получим в итоге.
- Урок 3.46. Страница товара. Внешний вид старой цены.
В этом уроке мы доработаем дизайн такого варианта страницы товара, когда он имеет старую цену.
- Урок 3.47. Страница корзины.
В этом уроке мы будем приводить в порядок страницу корзины. Она простая, и не требует больших доработок, поэтому урок будет коротким и простым.
- Урок 3.48. Страница поиска.
Поиск — важный инструмент, используя который, посетители вашего сайта будут искать нужные им товары. Поэтому важно сделать так, чтобы страница с результатами поиска была простой и понятной.
- Урок 3.49. Страница входа в личный кабинет.
В этом уроке нас ждет первая страница, которую нельзя редактировать напрямую через видоизменение шаблона, как это мы делали во всех предыдущих случаях. Придется идти обходным путем, чем мы и займемся в этом уроке.
- Урок 3.50. Страница оформления заказа.
В этом уроке мы займемся второй страницей, которая не поддается прямому редактированию — это страница оформления заказа. Здесь пойдем тем же путем, что и в предыдущем уроке, и доведем эту страницу до ума.
- Урок 3.51. Модальное окно и кнопка добавления отзывов.
В этом уроке мы доработаем модальное окошко, которое появляется после добавления товара в корзину. Также в этом уроке доработаем кнопку добавления отзыва.
- Урок 3.52. Дизайн страницы 404.
У любого сайта должна быть страница, куда попадает человек в случае если запрошенная им страница не существует. Обычно она называется страницей 404, потому что именно таков номер ошибки сервера при запросе несуществующей страницы. Дизайном этой страницы мы и займемся в этом уроке.
- Урок 3.53. Три варианта, если товар закончился.
Что делать с товаром, который закончился на складе? Вариант 1 — временно скрыть его в интернет-магазине, Вариант 2 — показывать товар, но заблокировать кнопку заказа, Вариант 3 — показывать товар, но вместо кнопки «Купить», выводить кнопку «Под заказ». Все эти варианты можно реализовать в платформе InSales, и в этом уроке мы, во-первых, разберемся с тем, как это делается, а во-вторых, доведем до ума внешний вид всех вариантов.
- Урок 3.54. Выводим остаток товара на складе.
Во многих интернет-магазинах кроме простого вывода информации о том, что товар в наличии, надо указывать остаток товара на складе. Базово такой функции в нашем шаблоне нет, но это не значит, что это нельзя вывести в принципе. Благодаря определенным конструкциям это вполне реально, и в данном уроке мы изучим, как это делается.
- Урок 3.55. Меняем favicon на свою.
Раздел 4. Оплата, доставка, домен, аналитика.
- Урок 4.1. Настраиваем способы доставки.
- Урок 4.2. Настройка способов оплаты.
- Урок 4.3. Проверяем связь способов доставки со способами оплаты.
- Урок 4.4. Выделяем названия способов оплаты и доставки.
- Урок 4.5. Переключаем сайт на основной домен.
- Урок 4.6. Подключаем системы аналитики.
Раздел 5. Администраторская часть магазина.
- Урок 5.1. Базовые вкладки.
- Урок 5.6. Выводим записи блога.
- Урок 5.7. Скидки и бонусы.
- Урок 5.8. Приложения.
- Урок 5.10. Создание новых шаблонов.
- Урок 5.11. Настройки. Базовые моменты.
- Урок 5.12. Настройки оформления заказа. Часть 1.
- Урок 5.13. Настройки оформления заказа. Часть 2.
- Урок 5.14. Настройки оформления заказа. Часть 3.
- Урок 5.15. Создание мультиязычной версии магазина.
- Урок 5.16. Проверка сайта магазина в других браузерах.
