Побудуйте місце електронної комерції з нуля

Електронна комерція стала настільки популярною в останні роки, тепер це важко уявити майбутнє без нього. Сила Інтернету здійснила підключення до клієнтів вітерцями для підприємств та брендів, а також електронна комерція, найпростіший спосіб доставляти продукцію до своєї аудиторії.

Блоки будівельних блоків Фонду складається з кодованих компонентів інтерфейсу, призначені для того, щоб полегшити досягнення кінцевого продукту швидше. На відміну від шаблонів, будівельні блоки не диктують, як ваш сайт повинен виглядати або бути структурованим. Вони просто надають вам інструменти для створення власного митного вигляду і відчувати себе набагато швидше.

У цьому підручнику ви дізнаєтеся, як побудувати статичний веб-сайт електронної комерції з нуля за допомогою комплекту електронної комерції, курсова колекція будівельних блоків, призначених для того, щоб допомогти вам побудувати конкретні види веб-сайтів. Хоча це каркас - це прототип, будівельні блоки, які ми використовуємо, і макет, який ми закінчуємо, можна застосувати до будь-якої системи.

Починаємо

Перше, що нам потрібно зробити, це створити середовище для створення сайту. Для цього навчального посібника вам доведеться спочатку завантажити Node.js. Після того, як це встановлено, ви хочете встановити основу CLI, використовуючи команду NPM install -g foundation-cli .

Тепер, коли у вас є фундамент, встановлена ​​у вашій системі, давайте запустити новий фондовий проект, використовуючи основу команди Новий електронний сайт. У наступному списку виберіть Перший варіант, "Веб-сайт (фундамент для сайтів)", введіть назву нашого проекту "ECommerce-Site", а потім виберіть "Шаблон Zurb". Це запустить шаблон фундаменту та сервер розвитку, щоб ми могли легко почати будівництво нашого веб-сайту. Запустити npm починається У терміналі запускати проект.

Далі давайте подивимося за кодом нашого нового проекту, відкривши його в текстовому редакторі. Тут ви знайдете зразок сторінки у "SRC / pages / index.html", що містить деякий шаблон шаблону за замовчуванням. Ми збираємося видалити весь код тут.

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

Встановлення комплекту

Перш ніж написати будь-який код, ми збираємося потягнути в комплект електронної комерції Foundation з Cli Foundation. Голова до вашого терміналу та використовуйте набори командного фонду встановлення електронної комерції.

Якщо ця команда не працює, двічі перевірте, чи ваш фундамент CLI оновлюється до 2.2.3. Щоб перевірити, яка версія ви переживаєте Фонд -В у вашому терміналі. Якщо вам потрібно оновити, просто видаліть CLI NPM видалення -G foundation-cli і перевстановіть його NPM install -g foundation-cli .

Це просто завантажило всі будівельні блоки всередині нашого комплекту електронної комерції! Будь-коли ви встановлюєте будівельний блок, він буде з'явитися в SRC / часткові / будівельні блоки . Ви будете знати, що ваш комплект встановлений правильно, якщо всі будівельні блоки були автоматично імпортовані у ваш app.scss файл.

Деякі з цих будівельних блоків включають значки від шрифту Awesome, тому ви хочете, щоб вручну встановити їх або додати їх CDN до & lt; head & gt; вашого сайту. Для цього перейдіть до src / макети / default.html і додати & lt; link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/cs/font-awesome.css" Rel = "styleSheet" & gt; між & lt; head & gt; теги.

Ліси на місці

Давайте потрапити до будівництва! Завдяки нашому комплекті, ці наступні пару кроків відчуватимуть трохи, як грати з LEGO: у своїх власних проектах ви можете вибрати використання всіх з них, або ви можете використовувати лише вибір. Не соромтеся змішувати і відповідати будівельним блокам, щоб досягти макета електронної комерції Dream.

Для цього підручника, перші два блоки, з яких ми почнемо, - це заголовок та промо-герой. Для цього ми збираємося використовувати частковий механізм керма. У нашому порожньому файлі index.html, давайте кидаємо часткове {{& gt; ecommerce-header}} і {{& gt; ecommerce-promo-hero}} . Завдяки цим двома будівельними блоками, наша цілеспрямована сторінка електронної комерції вже виглядає приблизно на півдорозі.

Далі ми кинемо в деяких картах продуктів нижче нашого героя. Щоб скористатися блоком будівельного карток, ми будемо використовувати блок фундаменту, щоб картки сидять рівномірно в сітці. Це також полегшить змінити макет цих карт пізніше.

Почнемо з & lt; div class = "show small-up-2 medium-up-5" & gt; . Всередині цього div, киньте в десять стовпців з картою продукту всередині кожного стовпця & lt; div class = "стовпчик" & gt; {{& gt; ecommerce-product-card}} & lt; / div & gt; .

Ми хочемо надати нашим клієнтам спосіб дістатися до більшої кількості наших продуктів, тому давайте додати кнопку виклику під нашими картками продуктів. Спочатку нам потрібно створити нашу & lt; div class = "text-центр рядків" & gt; Так що наша кнопка буде центрована на сторінці. Далі ми використаємо компонент кнопки Foundation для створення нашого виклику. Додати & lt; кнопка класу = "кнопка" & gt; магазин всіх продуктів & lt; / кнопка & gt; всередині .row.column .

Сторінка відчуває себе майже завершено зараз, але давайте додати заголовок між нашим героєм та картами продуктів, щоб дати трохи контексту. Під героєм додайте a & lt; div class = "колонка рядка" & gt; містити наш заголовок & lt; h1 & gt; новітні прибуття & lt; / h1 & gt; .

Більшість домашніх сторінок електронної комерції мають більш промо-вміст нижче їх продуктів. Будемо використовувати будівельний блок {{& gt; ecommerce-hero-slider-small}} Тут. Щоб запобігти поширенню ширини сторінки, ми будемо обертатися навколо & lt; div class = "колонка рядка" & gt; .

Оскільки сайти електронної комерції, як правило, складаються з багатьох сторінок, більшість з них вимагатимуть мега-нижній колонтитул з великою кількістю посилань, щоб обробляти гучність сторінок. Наш комплект електронної комерції поставляється з нижній колонтитул для цього регіону. Щоб загорнути це ліси, давайте падаємо в {{& gt; ECommerce-Footer}} У самому дні нашого HTML.

Перевірити на чутливість

У ці дні важко отримати будь-який сайт, щоб отримати без мобільних пристроїв. Це особливо стосується сайтів електронної комерції. Тепер, коли інтернет-магазини стало нормою, ми не хочемо втрачати цей відсоток користувачів, які роблять це через свої мобільні телефони.

Після нашого девіз мобільного-першого, будівельні блоки фундаменту будуються, щоб бути природним. Швидка перевірка на меншому екрані показує, що наш сайт все ще виглядає досить добре.

Однак, коли ми натискаємо на меню гамбургера, наше полотно не було належним чином підключено. Ця частина отримує трохи складно, але не хвилюйтеся! Ми розриваємося, що відбувається в цьому меню Off-Canvas, а потім пройдіть, як підключити його.

Якщо ви подивитеся на файл eCommerce-header.html, ви помітите, що цей заголовок має вбудований в ній. Отже, чому це не працювало? Коли ми натиснули на меню гамбургера, єдине, що було "штовханим", був заголовок. Решта сторінки залишалася з урахуванням, викликаючи деякий дивний перекриття.

Це тому, що цей заголовок був побудований, щоб працювати самостійно, але насправді вона повинна працювати з усією сторінкою. Іншими словами, він повинен натиснути весь вміст на сторінці, коли меню Off-Canvas буде спрацьовує, а не просто меню заголовка. Цей ексексуальний заголовок був написаний таким чином, тому що встановлення поза-полотна вимагає занурення до вашого src / макети / default.html Сторінка, яка знаходиться поза межами досяжності будівельного блоку.

Виправити це, все, що нам потрібно зробити, це зайняти все всередині & lt; div class = "Off-Canvas Ecommerce-Header-Off-Canvas позиція-ліва" ID = "ecommerce-заголовок" Data-Off-Canvas & GT; і перемістіть його в src / макети / default.html . Далі ми збираємося обертати {{& gt; тіло}} нашого сайту всередині a & lt; div class = "off-canvas-content" data-off-canvas-content & gt; . Це буде підштовхнути тіло нашого сайту, коли окрім полотна.

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

& lt; body & gt;
  & lt; div class = "Off-Canvas Ecommerce-Header-Off-Canvas позиція-ліва" ID = "ecommerce-заголовок" Data-Off-Canvas & GT;
& lt; кнопка Class = "Close-Button" Aria-Label = "Закрити меню" Type = "кнопка" Data-Close & GT;
  & lt; span aria-hidden = "true" & gt; & amp; times; & lt; / span & gt;
& lt; / кнопка & gt;
& lt; ul class = "вертикальне меню" & gt;
  & lt; li class = "main-nav-link" & gt; & lt; href = "категорії.html" & gt; категорія 1 & lt; / a & gt; & lt; / li & gt;
  & lt; li class = "main-nav-link" & gt; & lt; href = "#" & gt; категорія 2 & lt; / a & gt; & lt; / li & gt;
  & lt; li class = "main-nav-link" & gt; & lt; href = "чому.html" & gt; категорія 3 & lt; / a & gt; & lt; / li & gt;
  & lt; li class = "main-nav-link" & gt; & lt; href = "build.html" & gt; категорія 4 & lt; / a & gt; & lt; / li & gt;
  & lt; li class = "main-nav-link" & gt; & lt; a href = "#" & gt; категорія 5 & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; hr & gt;

& lt; ul class = "Меню вертикальне" & gt;
  & lt; li & gt; & lt; href = "#" & gt; допомога & lt; / a & gt; & lt; / li & gt;
  & lt; li & gt; & lt; href = "#" & gt; статус замовлення & lt; / a & gt; & lt; / li & gt;
  & lt; li & gt; & lt; href = "#" & gt; зв'язатися & lt; / a & gt; & lt; / li & gt;
  & lt; li & gt; & lt; href = "#" & gt; мій обліковий запис & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
  & lt; / div & gt;

  & lt; div class = "off-canvas-content" data-off-canvas-content & gt;
{{& gt; тіло}}
  & lt; / div & gt;
  & lt; script src = "{{root}} активи / js / app.js" & gt; & lt; / script & gt;
& lt; / body & gt; 

Висновок

Ми показали вам, як стрибати-запустити свій сайт електронної комерції з комплект електронної комерції Foundation, але не зупиняйтеся там! Є понад 100 будівельних блоків, які можуть бути використані для покращення ваших сторінок. За лічені хвилини ми стягуємо статичну ділянку електронної комерції з будівельними блоками. Це економить вам багато часу, що тепер ви можете використовувати для шарів у візуальних та стиль сайті, щоб відповідати вашому бренду.

Навіть якщо ви приймаєте це далі та використовуєте систему задньої частини, різного часткового механізму або іншим способом отримання даних на сайт, даний робочий процес з будівельними блоками дійсно заощадить час і, отже, гроші. Будівельні блоки Фонду - це чудовий спосіб почати роботу, оскільки вони повинні бути продовжені, вписуються у ваші існуючі стилі, а також використовуватись у будь-якій системі додатків.

Ця стаття спочатку з'явилася чистий журнал випуск 266. Купуйте його тут .

Пов'язані статті:

• Створіть картковий інтерфейс з фундаментом
• 10 красивих нових сайтів електронної комерції ви повинні побачити
• Як підвищити продуктивність сайтів електронної комерції