Послуги

  • Сайти
  • Контент
  • Просування
  • Бітрікс24
  • Додатки
Усі послуги Оплата
Бітрікс24
Усі послуги Оплата

Пошук

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

Сайт-каталог виробника систем безпеки

Про проєкт і завдання

Український виробник систем контролю й управління доступом Trinix звернувся до нас із завданням розробити корпоративний сайт-каталог, який згодом мав вирости до інтернет-магазину. Ми отримали готовий дизайн і запропонували безпрограшне рішення — WordPress + WooCommerce. Цей технологічний тандем вдало поєднує контент і комерцію, в чому ми неодноразово переконалися на власному досвіді. Як ми впоралися цього разу, читайте в нашому кейсі.

Banner

Верстка

В реалізації проєкту наш фронтенд-розробник використав мову:

  • гіпертекстової розмітки HTML 5, аби сформувати каркас сайту;
  • CSS, аби оформити стилі сторінок за дизайном макета;
  • JavaScript, аби «оживити» сторінки за умови будь-якої взаємодії з користувачем.

Із додаткових JavaScript-інструментів була застосована бібліотека scroll-lock, яка блокує скролінг сторінок при відкриванні будь-яких модальних вікон на сайті. Ця бібліотека, на відміну від аналогічної бібліотеки overflow:hidden, дружить із мобільним браузером Safari на iOS-пристроях iPhone.

Окрім того, в розробці був застосований SCSS — синтаксис препроцесора Sass, який прискорює написання коду на CSS.

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

Тому не проминемо також згадати про Gulp — збирач вебпроєктів, який прискорив розробку на JavaScript завдяки автоматизації рутинних процесів.

Кросбраузерність

Відображення сайту в усіх, навіть застарілих браузерах — особливо важлива властивість будь-якого інтернет-магазину. Для того, щоб сайт був доступний для користувачів, ми модернізували код JavaScript за допомогою транскомпілятора Babel.js, який перетворює новий синтаксис у старий стандарт ECMAScript 2015+.

Програмінг

WooCommerce

Корпоративний сайт Trinix невдовзі планує перейти до розряду інтернет-магазинів, тому ми відразу заклали в адмінку WordPress найпопулярніший у світі комерційний плагін WooCommerce. Тож каталог на сайті, який поки що несе інформативний характер, зможе продавати та масштабуватися, коли клієнт цього забажає.

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

Також ми оснастили сайт зручним пошуком. Так, якщо у відповідне поле ввести хоча б 3 символи, сайт пропонує перші можливі результати:

Картка товару

Таби «Характеристики», «Опис», «Інструкції» та «Відео» відображуються на сайті за умови заповнення цих блоків контентом.

Ми реалізували можливість автоматичного виведення характеристик товару як у прев’ю на сторінці категорії, так і на сторінці товару праворуч від фото (і це без необхідності ручного дублювання характеристик в адмінці):

01

/ 02

При заповненні ціни товару в адмінці вона автоматично виводиться на сайті. Якщо ж ціна не зазначена, то клік на текст «Ціну уточнюйте» викликає поп-ап «Задати питання»:

Також ми реалізували функцію завантаження інструкцій до товару в однойменному табі:

01

/ 02

Двостороння синхронізація, реалізована розробниками, дозволяє виводити на картку не тільки файли-інструкції, а й статті «Блогу», що відповідають цьому товару:

Таб «Відео» містить ролик із YouTube, вбудований на сайт за допомогою iframe:

Інтеграція з 1С

За допомогою плагіну WooCommerce — 1C — Data Exchange ми синхронізували каталог на сайті з програмою 1С. Цей інструмент забезпечує швидкий обмін даними між бухгалтерською платформою та сайтом, наприклад, вивантаження замовлень, завантаження та оновлення товарів і цін абощо.

Додаткові плагіни

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

  • ACF (Advanced Custom Fields) — для додавання полів вводу до адміністративної панелі WordPress;
  • CF7 (Contact Form 7) — для створення контактних форм;
  • Premmerce Product Filter for WooCommerce — для фільтрації товарів;
  • WPC Smart Compare for WooCommerce (Premium) — для порівняння товарів;
  • Elementor — для розміщення та оформлення статей;
  • Yoast — для SEO-оптимізації сайту.

Для захисту сайту від спаму була підключена технологія reCaptcha 3 через інтеграцію з плагіном CF7. Окрім того, розробники подбали про можливість додавати на Google-карту мітки з описом, що на сторінці «Контакти».

01

/ 03

Фішки інтернет-магазину

Небанальне порівняння товарів

Ми реалізували нестандартну для WordPress і WooCommerce функцію порівняння товарів. Ця зручна фіча допомагає тим користувачам, які розглядають одразу декілька товарів різних категорій (наприклад, акумулятори, кабелі та охоронні прилади). Завдяки горизонтальному фільтру їх можна відсортувати в один клік і порівняти між собою в рамках окремої категорії:

Додати товар в «Порівняння» можна з картки товару, з категорії товару та зі слайдерів виведення товарів. При додаванні товару іконка стає активною як у картці, так і в хедері сайту без перезавантаження сторінки.

Блог з нестандартними фільтрами

Блог усе ще залишається найдієвішим інструментом для SEO-просування інтернет-магазину, адже чим вища відвідуваність сайту, тим більша ймовірність отримати замовлення.

З погляду розробки блог сайту Trinix дещо нестандартний як для платформи WordPress. Він має більш розвинений фільтр у порівнянні зі стандартним фільтром WooCommerce, що дозволяє швидко відсортувати статті за рубриками в реальному часі:

Крім того, статті «Блогу» можна легко поширювати в соцмережах і месенджерах:

Результати

Команда Webnauts вкотре видала успішний інтернет-магазин на WordPress: «натягнула» готовий дизайн на движок, інтегрувала програму 1С і подбала про коректне відображення сайту навіть у застарілих браузерах. Ба більше: вийшла за рамки платформи та реалізувала декілька фішок, невластивих WooCommerce, а саме функцію порівняння товарів за категоріями та зручний фільтр статей «Блогу» за рубриками.

Комментарии

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Потрібен інтернет-магазин на WordPress або будь-якій іншій платформі?

Досвідченішої команди годі й шукати! Розкажіть про свою бізнес-ідею та почнемо втілювати її вже сьогодні.

Над проєктом працювали

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x