Создайте сайт электронной коммерции с нуля

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

Строительные блоки Фонда Библиотека кодированных пользовательских компонентов разработана, чтобы облегчить достичь конечного продукта быстрее. В отличие от шаблонов, строительные блоки не диктуют, как ваш сайт должен выглядеть или быть структурированным. Они просто предоставляют вам инструменты для создания собственного собственного вида и намного быстрее.

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

Начиная

Первое, что нам нужно сделать, это создать среду для создания сайта. Для этого учебника вам нужно сначала скачать Node.js. Как только это установлено, вы захотите установить Foundation CLI, используя команду NPM установить -G фундамент-CLI Отказ

Теперь, когда у вас есть фонд, установленные в вашей системе, давайте запустим новый проект Foundation, используя командный фонд New Ecommerce-сайт. В списке, который следует, выберите первый вариант, «Веб-сайт (Foundation для сайтов)», введите на нашем имени проекта «Ecommerce-сайт», а затем выберите «ZURB Template». Это запускает фонд шаблон и сервер разработки, чтобы мы могли легко начать строить наш сайт. Пробег Начнем NPM В терминале для запуска проекта.

Далее давайте посмотрим за код нашего нового проекта, открыв его в текстовом редакторе. Здесь вы найдете проб страницу в «SRC / Pages / index.html», содержащие некоторые шаблоны шаблона по умолчанию. Мы собираемся удалить весь код здесь.

Примечание редактора: Ищете дизайн веб-сайта электронной коммерции для вашего бизнеса? Если вы ищете информацию, чтобы помочь вам выбрать вам подходящую вам, используйте вопросник ниже, чтобы предоставить вам информацию от различных поставщиков бесплатно:

Установка комплекта

Прежде чем мы писать любой код, мы собираемся потянуть на комплект электронной коммерции Фонда с CLI Foundation. Отправляйтесь к вашему терминалу и используйте наборы наборов фонда команд.

Если эта команда не работает, дважды проверьте, что CLI Foundation обновляется до 2.2.3. Чтобы проверить, какую версию вы находитесь, запустите Фонд -V. в вашем терминале. Если вам нужно обновить, просто удалите CLI с NPM Uninstall -G Foundation-CLI и переустановить его с NPM установить -G фундамент-CLI Отказ

Это только скачало все строительные блоки внутри нашего комплекта электронной коммерции! В любое время вы устанавливаете строительный блок, он появится в SRC / Partials / Строительные блоки Отказ Вы будете знать, что ваш комплект установлен правильно, если все строительные блоки были автоматически импортированы в ваш app.cscss. файл.

Некоторые из этих строительных блоков включают в себя значки из шрифта Awesome, поэтому вы захотите либо вручную устанавливать их, либо добавлять их CDN к & lt; head & gt; вашего сайта. Чтобы сделать это, перейдите к SRC / макеты / default.html и добавить & lt; link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" Rel = "stylesheet" & gt; между & lt; head & gt; Теги.

Леса на сайт

Давайте доберемся до строительства! С помощью нашего комплекта эти следующие пары шагов будут чувствовать себя немного похоже на игру с Lego: в своих собственных проектах вы можете использовать все их, или вы можете использовать просто выбор. Не стесняйтесь смешивать и совпадать с строительными блоками для достижения макета электронной коммерции мечты.

Для этого учебника первые два блока мы начнем с головы и героя Promo. Для этого мы собираемся использовать частичный механизм руля. В нашем пустом файле index.html давайте бросим в частиц {{& gt; ecommerce-header}} и {{& gt; Ecommerce-Promo-Hero}} Отказ Благодаря этим двум строительным блокам наша страница посадки электронной коммерции уже выглядит на полпути.

Далее мы добавим в некоторые карточки продукта под нашим сечением героя. Чтобы использовать строительный блок карты, мы будем использовать блок-сетку Foundation, чтобы карты были равномерно в сети. Это также облегчает изменение макета этих карт позже.

Давайте начнем с & lt; class = "Строка Small-UP-2 Среднесредне-5" & gt; Отказ Внутри этого Div, брось в десять столбцов с картой продукта внутри каждого столбца & lt; class = "колонна" & gt; {{& gt; ecommerce-product-карта}}}}}}} & lt; / div & gt; Отказ

Мы хотим дать нашим клиентам способ добраться до большего количества наших продуктов, поэтому давайте добавим кнопку выноска под нашими картами продуктов. Сначала нам нужно создать наши & lt; div class = "ряд столбец текстового центра" & gt; Так что наша кнопка будет сосредоточена на странице. Далее мы будем использовать компонент кнопки Foundation, чтобы создать нашу выноску. Добавить & lt; Кнопка класса = "кнопка" & gt; магазин всех продуктов & lt; / button & gt; внутри .строка столбец Отказ

Страница чувствует себя почти полной сейчас, но давайте также добавим заголовок между нашим героем и картами продуктов, чтобы дать немного контекста. Под героем добавьте & lt; class = "ряд колонна" & gt; Содержать наш заголовок & lt; h1 & gt; новейшие прибытия & lt; / h1 & gt; Отказ

Большинство домашних страниц электронной коммерции имеют более рекламный контент ниже своих продуктов. Давайте использовать строительный блок {{& gt; Ecommerce-Hero-Slider-Small}} здесь. Чтобы помешать слайдере охватить ширину страницы, мы обернуем его & lt; class = "ряд колонна" & gt; Отказ

Поскольку сайты электронной коммерции обычно состоят из многих страниц, большинство потребуют мега-нижнего колонтитула с большим количеством ссылок для обработки объема страниц. Наш комплект электронной коммерции поставляется с нижним колонтитулом для этого случая использования. Завернуть этот эшафот, давайте падаем в {{& gt; ecommerce-footer}} В самом нижней части нашего HTML.

Проверьте на отзывчивость

В наши дни все трудно пройти от мобильного телефона. Это особенно верно для сайтов электронной коммерции. Теперь, когда интернет-магазины стали нормой, мы не хотим потерять этот процент пользователей, которые делают это через свои мобильные телефоны.

Следуя нашему девизу Mobile-First, строительные блоки Фонда создаются, чтобы естественным образом отзывчивыми. Быстрая проверка на небольшом экране показывает, что наш сайт все еще выглядит довольно хорошо.

Однако, когда мы нажимаем на меню гамбургера, наш OFF-Canvas не был должным образом подключен. Эта часть становится немного сложной, но не волнуйся! Мы сломаемся тем, что происходит в этом меню Off-Canvas, а затем прогуляться по тому, как подключить его.

Если вы посмотрите в файл Ecommerce-header.html, вы заметите, что этот заголовок встроен в нее на холсте. Итак, почему это не работало? Когда мы нажимали на меню гамбургера, единственное, что «толкнуло», был заголовками. Остальная часть страницы осталась ввиду, вызывая некоторые странные перекрытия.

Это потому, что этот заголовок был построен для работы самостоятельно, но на самом деле ему нужно работать со всей страницей. Другими словами, ему необходимо протолкнуть все содержимое на странице, когда меню OFF-CANVAS запущено, а не только меню заголовка. Этот заголовок электронной коммерции был написан так, как это, поскольку настройка вне холста требует дайвинга в ваш SRC / макеты / default.html Страница, которая находится за пределами досягаемости строительного блока.

Чтобы исправить это, все, что нам нужно сделать, это взять все внутри & lt; div class = "Off-Canvas Ecommerce-Header-Off-Canvas влево-левый« ID = »Ecommerce-Header" Data-Canvas & GT; и переместить его в SRC / макеты / default.html Отказ Далее мы собираемся обернуть {{& gt; тело}} нашего сайта внутри & lt; class = "OFF-Canvas-content" Data-canvas-content & GT; Отказ Это будет подтолкнуть тело нашего сайта, когда запускается Off-Canvas.

Теперь, когда мы нажимаем на наш гамбургер, весь сайт движется для меню Off-Canvas! Тело нашего default.html.html. Страница должна выглядеть так:

& lt; body & gt;
  & lt; div class = "Off-Canvas Ecommerce-Header-Off-Canvas влево-левый« ID = »Ecommerce-Header" Data-Canvas & GT;
& lt; Кнопка Class = "Кнопка" Кнопка "ARIA-MALK =" Закрыть MENU "Тип =" Кнопка "Data-Blace & GT;
  & lt; spant aria hidden = "true" & gt; & amp; времена; & lt; / span & gt;
& lt; / button & gt;
& lt; ul class = "Вертикальное меню" и GT;
  & lit; li class = "main-nav-link" & gt; & lt; href = "категории .html" & gt; категория 1 & li; / a & gt;
  & lt; li class = "main-nav-link" & gt; & lt; href = "#" & gt; категория 2 & lt; / li & gt;
  & lt; li class = "Main-Nav-link" & lt; href = "what.html" & gt; категория 3 & li; / a & gt;
  & lit; li class = "main-nav-link" & lt; href = "build.html" & gt; категория 4 & lit; / a & gt;
  & lt; li class = "Main-nav-link" & gt; & lt; href = "#" & gt; категория 5 & lt; / li & gt;
& lt; / ul & gt;
& lt; hr & gt;

& lt; ul class = "вертикальный меню" & gt;
  & lit; li & gt; & lt; href = "#" & gt; help; / li & gt;
  & lt; li & gt; & lt; href = "#" & gt; статус заказа & lt; / li & gt;
  & lt; li & gt; & lt; href = "#" & gt; контакт & lt; / a & gt;
  & lt; li & gt; & lt; href = "#" и GT; мой аккаунт & lt; / a & gt;
& lt; / ul & gt;
  & lt; / div & gt;

  & lt; class = "OFF-Canvas-content" Data-canvas-content & GT;
{{& gt; тело}}
  & lt; / div & gt;
  & lt; скрипт src = "{{root}} atacets / js / app.js" & gt; & lt; / script & gt;
& lt; / body & gt; 

Вывод

Мы показали вам, как прыгать начать свой сайт электронной коммерции с помощью набора Ecommerce Foundation, но не останавливайся там! Существует более 100 строительных блоков, которые могут быть использованы, чтобы помочь улучшить ваши страницы. В считанные минуты мы легали на месте статического сайта электронной коммерции с строительными блоками. Это не спасает вам много времени, что теперь вы можете использовать для слоя в визуальных показателях и стиле на сайте, чтобы соответствовать вашему бренду.

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

Эта статья изначально появилась в Чистый журнал Выпуск 266. Купить его здесь Отказ

Статьи по Теме:

• Построить пользователь на основе карты с фундаментом
• 10 красивых новых сайтов электронной коммерции, которые вы должны увидеть
• Как улучшить производительность сайтов электронной коммерции