Меню

1С УПРАВЛЕНИЕ ТОРГОВЛЕЙ И ИНТЕРНЕТ-МАГАЗИН БИТРИКС

23 Октября 2017

Урок 1. Знакомство с CSS-фреймворком Fundadion для верстки Битрикс магазина

Приветствую читателей моих статей. Мы начинаем первый урок изучения разработки под Битрикс. Мои уроки будут касаться больше именно программирования на API CMS Bitrix. Напомню, что в течении серии уроков мы создадим интернет-магазин на Битрикс с нуля, который я назвал StartShop. И начнем мы с выбора шаблона для нашего магазина. Шаблон нужен обязательно адаптивный и на коком-нибудь модном CSS-фреймворке.


Выбор шаблона (CSS Foundation)

А начнем мы с выбора шаблона верстки которую будем внедрять в шаблон Битрикса. Основное требование современного сайта - это адаптивный дизайн. И конечно шаблон мы будем сразу брать адаптивный. И еще современная тенденция сайтостроения - это использование всевозможных CSS-фреймворков. И мы тоже не будем отставать.
В качестве CSS-фреймворка мы возьмем ZURB Foundation. Почему его, а не более популярный Bootstrap, просто Foundation мне больше нравится. Мне кажется там более понятная сетка, отличная документация и примеры, есть набор готовых версток различных меню. И даже примеры шаблонов для разных сайтов.

Foundation_smal


И не нужно переживать с каким фремворком вы начинаете знакомится. Я например сначала освоил bootstrap. Верстка моего сайта сделана на bootstrap. Но потом мне захотелось посмотреть какие ещё есть css-фремворки, а их достаточно много. В итоге мне очень понравился Foundation по этому я и буду создавать магазин именно на нем. А главное у него есть набор готовых шаблонов, которые можно взять, как основу своей верстки. Для обучения это то, что нужно.

fundation tamplates

Вот они готовые шаблоны. По клику на изображение вы перейдете на сайт, где можно скачать шаблон. Вас попросят заполнить email и вышлют шаблон на почту. Точнее архив со всеми шаблонами сразу. Никакой рекламы мне от них не приходило.
Я выделил, какие шаблоны мы будем использовать. Это Ecommerce Homepage, как основной шаблон и Product Page, как шаблон детальной страницы товара.
Единственная беда в том, что шаблоны сделаны на предыдущей версии Foundation. Раньше использовался для верстки адаптивной сетки такой же подход как в бутсрап, теперь же в 6-ой версии фундейшен используется более современный подход сетка XY Grid.

XY Grid

Но суть верстки не изменилась. Главное понять основы и тогда вам уже будет без разницы какой фреймворк использовать, просто будите смотреть в документации названия css классов, примеры их использования и применять в своих проектах.
Я же для своего курса переведу данные шаблоны на новый формат (для это достаточно сделать групповую замены классов .row и .column на .grid-x и .cell соответственно). И делов... Ещё в отличие от оригинальных шаблонов я удалю лишние элементы, чтобы сделать шаблон более простым. Да и главное я внедрю вместо простого меню навигационную панель, очень современно и удобно будет.


Наша верстка на CSS Foundation

Вот так будет выглядеть наша верстка, каркас нашего интернет магазина.

Шаблон eshop fundation

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

Шаблон product fundation

Этих двух макетов будет вполне достаточно чтобы сверстать минимальный интернет магазин. Конечно ещё потребуется ряд вспомогательных шаблонов (меню, навигации, страницы поиска, меню разделов), но их мы придумаем походу.
В итоге у нас будет 3 страницы, которые нужно будет сверстать отдельно через компоненты Битрикс:
  1. Главная страница, на которой будет выведен слайдер и лучшие товары магазина, через специальный фильтр.
  2. Страница каталога, со списком всех товаров.
  3. Карточка товара.
Неизменными элементами, которые попадут в шаблон будут панель меню и подвал с текстом и небольшим меню.
По этой ссылке можно скачать архив с шаблоном fundation.

От автора:
Ну что, начало положено! Не пропустите продолжения подписывайтесь. Свои вопросы не стесняйтесь пишите в комментариях, буду стараться отвечать.
И можно уже сразу переходить к следующему уроку Установка Битрикс.

Количество показов: 156
Кем создан (имя): (admin) Администратор

Комментарии

Подписатmся на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
06.11.2017 | Антон

опечатка В итоге у нас будет 3 страницы, коорые нужно будет сверстать отдельно через компоненты Битрикс: Главная страница, на которой будет выведен слайдер и лечшие товары магазина, через специальный фильтр.

Комментировать
Подписатmся на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
Закрыть
06.11.2017 | Администратор

Спасибо.

Комментировать
Подписатmся на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
Закрыть
31.10.2017 | Жанна

Добрый вечер! Уроки понятны. Не хочется чтобы прерывались. Нужно создать сайт интернет-магазин цветов - интерактивный сайт с каталогом, в котором представляются товары и услуги, а также корзина для формирования заказа. Буду ждать продолжения. Как подписаться на продолжение, через комментарии?

Комментировать
Подписатmся на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
Закрыть
01.11.2017 | Администратор

Подписка есть в правой колонке. Вижу вы уже нашли. Новая статья уже готова, сегодня или завтра выпущу.

Комментировать
Подписатmся на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
Закрыть


Возврат к списку