Shopify store + Integration of CRM - Klavio/ Gorgias

Створити функціональний Shopify магазин з інтеграціями основних e-commerce сервісів. Завдання демонструє реальний робочий процес нашої компанії.

Час виконання: 4-6 годин
 Дедлайн: 3-5 робочих днів від отримання

Мета Завдання

Оцінити твої навички в:

• Роботі з Shopify платформою

• Frontend розробці (JavaScript, верстка)

• Backend розробці (Node.js, API)

• Інтеграціях з третіми сервісами

• Документуванні коду

Частина 1: Shopify Магазин (Frontend)

Завдання:

Створити базовий Shopify магазин для продажу одягу (тестовий).

Що потрібно зробити:

1. Налаштування магазину

• Зареєструвати безкоштовний Shopify Trial (14 днів)

• Обрати та встановити будь-який безкоштовний theme

• Налаштувати базову інформацію магазину

2. Додати товари

• Створити мінімум 5 товарів (можна вигадані):

  • Назва, опис, ціна

  • Хоча б 1 зображення на товар

  • Варіанти (sizes: S, M, L)

  • Інвентар (stock quantity)

3. Кастомізація Theme

Внести зміни в обраний шаблон:

a) Головна сторінка:

• Додати custom banner з текстом "Welcome to Our Store"

• Секція з featured products (3-4 товари)

• Newsletter signup форма (поки без backend)

b) Картка товару:

• Додати кнопку "Add to Wishlist" (тільки UI, функціонал не обов'язковий)

• Показувати індикатор наявності товару ("In Stock" / "Low Stock" / "Out of Stock")

c) Кошик:

• Додати promotional banner "Free shipping on orders over $50"

4. JavaScript функціонал

Реалізувати одну з цих функцій (на вибір):

Варіант A - Quick View:

При кліку на кнопку "Quick View" на картці товару:

- Відкрити modal з інформацією про товар

- Показати назву, ціну, головне фото

- Кнопка "Add to Cart" в modal

Варіант B - Dynamic Cart:

Оновлювати кошик без перезавантаження сторінки:

- Після додавання товару показати mini-cart sidebar

- Відобразити кількість товарів та загальну суму

- Можливість видалити товар з mini-cart

Очікуваний результат:

• Робочий Shopify магазин (посилання на preview)

• Кастомізований theme з вашими змінами

• Працюючий JavaScript функціонал

• Чистий, коментований код

Частина 2: Backend Інтеграція (Node.js)

Завдання:

Створити Node.js застосунок для інтеграції Shopify з зовнішнім сервісом.

Сценарій:

Коли в магазині створюється нове замовлення, потрібно:

1. Отримати webhook від Shopify

2. Обробити дані замовлення

3. Відправити інформацію в зовнішню систему (mock API)

4. Залогувати результат

Технічні вимоги:

1. Налаштування проєкту

Структура:

shopify-integration/

├── server.js (або index.js)

├── config/

│   └── shopify.js

├── routes/

│   └── webhooks.js

├── services/

│   └── orderService.js

├── utils/

│   └── logger.js

├── package.json

└── README.md

2. Реалізувати webhook endpoint

POST /webhooks/orders/create

Що має робити:

javascript

1. Приймати webhook від Shopify

2. Верифікувати HMAC signature (безпека)

3. Парсити дані замовлення

4. Валідувати структуру даних

5. Викликати orderService для обробки

6. Повертати 200 OK response

3. Order Service

Створити сервіс, який:

javascript

// Приклад структури

async function processOrder(orderData) {

  // 1. Витягнути важливі дані:

  const orderInfo = {

    orderId: orderData.id,

    customerEmail: orderData.email,

    totalPrice: orderData.total_price,

    items: orderData.line_items.map(item => ({

      name: item.name,

      quantity: item.quantity,

      price: item.price

    }))

  };

  // 2. Відправити в "Klaviyo" (mock)

  await sendToKlaviyo(orderInfo);

  // 3. Відправити в "Gorgias" (mock)

  await sendToGorgias(orderInfo);

  // 4. Залогувати успіх

  logger.info('Order processed successfully');

}

4. Mock інтеграції

Створити функції-заглушки для API calls:

javascript

// Не потрібно реальне підключення до Klaviyo/Gorgias

// Достатньо імітувати HTTP request

async function sendToKlaviyo(data) {

  // Mock POST request

  console.log('Sending to Klaviyo:', data);

  // Симулювати затримку

  await new Promise(resolve => setTimeout(resolve, 100));

  // Повернути mock response

  return { success: true, service: 'Klaviyo' };

}

async function sendToGorgias(data) {

  // Аналогічно для Gorgias

  console.log('Sending to Gorgias:', data);

  await new Promise(resolve => setTimeout(resolve, 100));

  return { success: true, service: 'Gorgias' };

}

5. Error Handling

Обробити можливі помилки:

• Невалідний webhook signature

• Помилки парсингу JSON

• Помилки відправки в зовнішні сервіси

• Network timeouts

6. Логування

Використати будь-який logger (Winston, Pino, або console):

javascript

// Логувати:

- Отримання webhook

- Успішну обробку

- Помилки з деталями

- Час обробки

Очікуваний результат:

• Node.js застосунок з коментарями

• Працюючий webhook endpoint

• Mock інтеграції з Klaviyo та Gorgias

• Error handling

• README з інструкціями запуску

Частина 3: Демонстрація Integration Flow (опціонально, але великий плюс)

Завдання:

Показати, як би використав Gadget.dev для реальної інтеграції.

Що зробити:

Варіант A - Документація: Написати покроковий план (без коду):

1. Як би налаштував з'єднання Shopify → Gadget

2. Які тригери використав би (наприклад, "New Order")

3. Які дії виконував би в Klaviyo

4. Як обробляв би помилки

5. Які дані синхронізував би

Варіант B - Скріншоти/Відео:

• Зареєструватися на Gadget.dev (безкоштовний trial)

• Створити просту інтеграцію (хоча б початок)

• Зробити скріншоти налаштувань

• Пояснити логіку в README

Що здати?

1. Shopify Магазин:

• Посилання на preview магазину (публічне)

• Код кастомізацій (JavaScript, Liquid files)

  • Можна ZIP архів або GitHub repo

• Скріншоти основних сторінок

2. Node.js Backend:

• GitHub репозиторій (публічний або private з доступом)

• README.md з інструкціями:

  • Як встановити (npm install)

  • Як запустити (npm start)

  • Як тестувати webhook (приклад curl command)

  • Структура проєкту

  • Використані технології

3. Документація:

• SOLUTION.md файл з поясненнями:

  • Які рішення прийняв і чому

  • З якими складнощами зіткнувся

  • Що б покращив, маючи більше часу

  • Досвід з подібними задачами (якщо є)

4. Опціонально:

• Відео (2-3 хв) з демонстрацією

• Gadget.dev plan/screenshots

• Unit tests для Node.js коду

Критерії Оцінювання

Frontend (Shopify):

• Магазин виглядає професійно

• Кастомізації інтегровані в theme

• JavaScript код чистий та працює

• Responsive design

• Увага до деталей (UX)

Вага: 30%

Backend (Node.js):

• Код структурований та читабельний

• Правильна обробка webhooks

• Error handling присутній

• Асинхронність реалізована правильно

• Логування налаштоване

Вага: 40%

Документація:

• README зрозумілий

• Інструкції працюють

• Код закоментований

• SOLUTION.md відповідає на питання

Вага: 20%

Додатково:

• Креативність у рішеннях

• Використання best practices

• Git commits (якщо є історія)

• Gadget.dev частина

Вага: 10%

Технічні Вимоги

Обов'язково:

• Node.js: v16+ або v18+

• JavaScript: ES6+ (async/await, arrow functions)

• Framework: Express.js (рекомендовано) або будь-який інший

• Package manager: npm або yarn

Дозволено використати:

• Будь-які npm пакети (але обґрунтуй вибір в README)

• TypeScript (якщо зручно)

• Будь-які testing frameworks

• Environment variables (.env файл)

Заборонено:

• Копіювати готові рішення з інтернету

• Використовувати no-code tools замість коду (окрім Gadget частини)

Підказки

Shopify Development:

• Документація: https://shopify.dev/docs

• Liquid: https://shopify.github.io/liquid/

• Theme customization: редагуй через Admin → Online Store → Themes → Customize

Webhooks:

• Shopify webhooks: https://shopify.dev/docs/api/admin-rest/2024-01/resources/webhook

• Для локального тестування: ngrok або localtunnel

• Приклад HMAC verification: https://shopify.dev/docs/apps/auth/hmac-validation

Node.js:

• Express guide: https://expressjs.com/

• Обробка webhooks: body-parser middleware

• Environment variables: dotenv package

Gadget.dev:

• Документація: https://docs.gadget.dev

• Безкоштовний trial для тестування

Якщо Виникли Питання

Немає доступу до Shopify? → Можна створити безкоштовний Development Store

Не можу налаштувати webhooks локально? → Використай ngrok: ngrok http 3000

Не знайомий з Gadget.dev? → Ця частина опціональна, зроби хоча б план на папері

Щось не працює? → Задокументуй проблему в SOLUTION.md

Не вистачає часу на все? → Зроби мінімум з Частини 1 та 2, але якісно