Функционал в карточке товара "Намекнуть на подарок"
---
## Функционал "Намекнуть о подарке" для InSales
Реализация интерактивной кнопки на карточке товара для отправки email-подсказок о желаемых подарках.
---
### Описание функционала
**"Намекнуть о подарке"** — это виджет для карточки товара, позволяющий посетителям отправить информацию о понравившемся товаре друзьям или родственникам по электронной почте.
**Как это работает:**
1. Покупатель нажимает кнопку **"Намекнуть о подарке"** на странице товара
2. Открывается модальное окно с формой для ввода email получателя
3. После отправки формы получатель получает письмо с:
- Названием товара
- Ценой
- Изображением
- Ссылкой на товар
---
### Требования для установки
| Компонент | Требование |
|:----------|:-----------|
| Платформа | InSales |
| Доступ | Редактирование темы оформления |
| Внешний сервис | SendGrid, Mailgun или аналог для отправки email |
| API ключ | Для выбранного email-сервиса |
---
### Шаг 1. Создание сниппета для кнопки
Создание файла hint_gift_button.liquid
**Путь создания:**
```
Админ-панель InSales → Дизайн → Редактор темы → Сниппеты → Создать новый
```
**Название файла:** `hint_gift_button.liquid`
**Содержимое файла:**
```html
Намекнуть о подарке
E-mail получателя
Ваше имя (необязательно)
Отправить намек
```
---
### Шаг 2. Подключение сниппета к карточке товара
Редактирование файла product.liquid
**Путь к файлу:**
```
Админ-панель InSales → Дизайн → Редактор темы → Шаблоны → product.liquid
```
**Где разместить код:**
Добавьте следующую строку после блока с кнопкой "Купить" или в конце блока с информацией о товаре:
```liquid
{% include 'hint_gift_button' %}
```
**Пример размещения:**
```liquid
Купить
{% include 'hint_gift_button' %}
```
---
### Шаг 3. Создание JavaScript-функционала
Создание файла hint_gift.js
**Путь создания:**
```
Админ-панель InSales → Дизайн → Редактор темы → Ресурсы → Создать новый файл
```
**Название файла:** `hint_gift.js`
**Базовое содержимое:**
```javascript
document.addEventListener('DOMContentLoaded', function() {
const hintGiftButton = document.getElementById('hint-gift-button');
const hintGiftModal = document.getElementById('hint-gift-modal');
const hintGiftForm = document.getElementById('hint-gift-form');
const closeButton = hintGiftModal.querySelector('.close');
// Открытие модального окна
hintGiftButton.addEventListener('click', function() {
hintGiftModal.style.display = 'block';
});
// Закрытие модального окна
closeButton.addEventListener('click', function() {
hintGiftModal.style.display = 'none';
});
// Закрытие при клике вне окна
window.addEventListener('click', function(event) {
if (event.target === hintGiftModal) {
hintGiftModal.style.display = 'none';
}
});
// Обработка отправки формы
hintGiftForm.addEventListener('submit', function(event) {
event.preventDefault();
const recipientEmail = document.getElementById('recipient-email').value;
const senderName = document.getElementById('sender-name').value || 'Анонимный доброжелатель';
if (!recipientEmail) {
alert('Пожалуйста, введите e-mail получателя');
return;
}
// Сбор данных о товаре
const productData = {
name: '{{ product.title }}',
price: '{{ product.price | money_with_currency }}',
url: '{{ shop.url }}{{ product.url }}',
image: '{{ product.first_image.src | product_img_url: "large" }}',
senderName: senderName
};
sendHintEmail(recipientEmail, productData);
});
function sendHintEmail(recipientEmail, productData) {
// Функция будет реализована на следующем шаге
console.log('Отправка письма:', recipientEmail, productData);
}
});
```
---
### Шаг 4. Подключение скрипта к теме
Редактирование файла scripts.liquid или theme.liquid
**Путь к файлу:**
```
Админ-панель InSales → Дизайн → Редактор темы → Шаблоны → scripts.liquid
```
**Добавьте в конец файла:**
```liquid
{{ 'hint_gift.js' | asset_url | script_tag }}
```
**Альтернативный вариант** (если файла scripts.liquid нет):
Добавьте в файл `theme.liquid` перед закрывающим тегом ``:
```liquid
```
---
### Шаг 5. Настройка отправки email через SendGrid
Регистрация и получение API ключа
1. Зарегистрируйтесь на [SendGrid](https://sendgrid.com/)
2. Перейдите в **Settings → API Keys**
3. Создайте новый API ключ с правами **Mail Send → Full Access**
4. Сохраните ключ в безопасном месте
> **Important:** API ключ показывается только один раз при создании. Сохраните его немедленно.
Реализация функции sendHintEmail
**Замените функцию `sendHintEmail` в файле `hint_gift.js`:**
```javascript
function sendHintEmail(recipientEmail, productData) {
const apiKey = 'YOUR_SENDGRID_API_KEY'; // Замените на ваш API-ключ
const fromEmail = 'noreply@your-store.com'; // Email вашего магазина
const fromName = 'Ваш магазин'; // Название магазина
const emailSubject = `🎁 Намек на подарок: ${productData.name}`;
const emailBody = `
Вам намекнули на подарок! 🎁
Пользователь ${productData.senderName} считает, что вам может понравиться:
Это письмо отправлено через функцию "Намекнуть о подарке" на сайте нашего магазина.
`;
// Показываем индикатор загрузки
const submitButton = document.querySelector('#hint-gift-form button[type="submit"]');
const originalText = submitButton.textContent;
submitButton.textContent = 'Отправка...';
submitButton.disabled = true;
fetch('https://api.sendgrid.com/v3/mail/send', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify({
personalizations: [
{
to: [{ email: recipientEmail }],
subject: emailSubject
}
],
from: {
email: fromEmail,
name: fromName
},
content: [
{
type: 'text/html',
value: emailBody
}
]
})
})
.then(response => {
submitButton.textContent = originalText;
submitButton.disabled = false;
if (response.ok) {
alert('✅ Намек успешно отправлен!');
hintGiftModal.style.display = 'none';
hintGiftForm.reset();
} else {
return response.json().then(data => {
console.error('Ошибка SendGrid:', data);
throw new Error('Ошибка отправки');
});
}
})
.catch(error => {
submitButton.textContent = originalText;
submitButton.disabled = false;
console.error('Ошибка при отправке намека:', error);
alert('❌ Ошибка при отправке намека. Пожалуйста, попробуйте еще раз');
});
}
```
> **Important:** Замените следующие значения:
> - `YOUR_SENDGRID_API_KEY` → ваш реальный API ключ SendGrid
> - `noreply@your-store.com` → email вашего магазина
> - `Ваш магазин` → название вашего магазина
---
### Альтернативные сервисы для отправки email
Использование Mailgun
**Регистрация:**
1. Зарегистрируйтесь на [Mailgun](https://www.mailgun.com/)
2. Получите API ключ в разделе **Settings → API Keys**
3. Настройте домен для отправки
**Пример кода для Mailgun:**
```javascript
function sendHintEmail(recipientEmail, productData) {
const apiKey = 'YOUR_MAILGUN_API_KEY';
const domain = 'your-domain.com';
const formData = new FormData();
formData.append('from', `Ваш магазин `);
formData.append('to', recipientEmail);
formData.append('subject', `🎁 Намек на подарок: ${productData.name}`);
formData.append('html', `
Вам намекнули на подарок от ${productData.senderName}:
Цена: ${productData.price}
`);
fetch(`https://api.mailgun.net/v3/${domain}/messages`, {
method: 'POST',
headers: {
'Authorization': 'Basic ' + btoa('api:' + apiKey)
},
body: formData
})
.then(response => response.json())
.then(data => {
alert('✅ Намек успешно отправлен!');
hintGiftModal.style.display = 'none';
})
.catch(error => {
console.error('Ошибка:', error);
alert('❌ Ошибка при отправке');
});
}
```
Использование встроенной почты InSales (через бэкенд)
> **Note:** Для использования встроенной почты InSales потребуется создание серверной части (webhook или приложение).
**Альтернативный подход:**
1. Создайте webhook-обработчик на своем сервере
2. В JavaScript отправляйте данные на ваш webhook
3. На сервере используйте InSales API для отправки email
**Преимущества:**
- API ключи не хранятся в клиентском коде
- Больше контроля над логикой отправки
- Возможность сохранения истории намеков
---
### Стилизация и кастомизация
Настройка внешнего вида кнопки
**Добавьте CSS в файл стилей темы:**
```css
#hint-gift-button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 12px 24px;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
margin-top: 10px;
}
#hint-gift-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
#hint-gift-button::before {
content: "🎁 ";
}
```
Настройка модального окна
**Улучшенные стили для модального окна:**
```css
#hint-gift-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
#hint-gift-modal .modal-dialog {
background: white;
border-radius: 12px;
max-width: 500px;
width: 90%;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
#hint-gift-modal .modal-header {
border-bottom: 1px solid #e9ecef;
padding: 20px;
}
#hint-gift-modal .modal-body {
padding: 20px;
}
#hint-gift-modal .form-group {
margin-bottom: 15px;
}
#hint-gift-modal label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: #333;
}
#hint-gift-modal input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
}
#hint-gift-modal input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
```
---
### Расширенные возможности
#### Дополнительные улучшения функционала
**Рекомендуемые доработки:**
- [ ] Добавление поля для персонального сообщения от отправителя
- [ ] Возможность отправки нескольким получателям
- [ ] Отслеживание статистики отправленных намеков
- [ ] Интеграция с Google Analytics для отслеживания конверсий
- [ ] Добавление капчи для защиты от спама
- [ ] Сохранение истории намеков в профиле пользователя
- [ ] Создание красивых email-шаблонов с брендингом магазина
---
### Тестирование функционала
#### Чек-лист перед запуском
- [ ] Создан и подключен сниппет `hint_gift_button.liquid`
- [ ] Сниппет добавлен в шаблон `product.liquid`
- [ ] Создан и подключен файл `hint_gift.js`
- [ ] Получен API ключ от SendGrid (или другого сервиса)
- [ ] API ключ и email отправителя указаны в коде
- [ ] Проверена работа кнопки на тестовых страницах товаров
- [ ] Проверена отправка email на тестовый адрес
- [ ] Письмо корректно отображается на различных устройствах
- [ ] Добавлены стили для адаптивности (мобильные устройства)
- [ ] Проверена работа в разных браузерах
#### Процесс тестирования
**Шаг 1. Функциональное тестирование**
```
1. Откройте любую страницу товара
2. Нажмите кнопку "Намекнуть о подарке"
3. Проверьте открытие модального окна
4. Введите тестовый email
5. Отправьте форму
6. Проверьте получение письма
```
**Шаг 2. Проверка письма**
```
1. Откройте полученное письмо
2. Проверьте корректность отображения:
- Название товара
- Изображение товара
- Цена
- Ссылка на товар
3. Проверьте переход по ссылке на товар
```
---
### Устранение типичных проблем
| Проблема | Возможная причина | Решение |
|:---------|:------------------|:--------|
| Кнопка не отображается | Сниппет не подключен | Проверьте наличие `{% include 'hint_gift_button' %}` в product.liquid |
| Модальное окно не открывается | JavaScript не загружен | Проверьте подключение hint_gift.js в scripts.liquid |
| Письмо не отправляется | Неверный API ключ | Проверьте API ключ SendGrid |
| Ошибка CORS | Неправильная конфигурация API | Убедитесь, что используете правильный endpoint API |
| Некорректные данные в письме | Ошибка в Liquid переменных | Проверьте корректность liquid-тегов в JavaScript |
| Письмо попадает в спам | Не настроен SPF/DKIM | Настройте аутентификацию домена в SendGrid |
---
### Безопасность и best practices
#### Рекомендации по безопасности
> **Important:** Следуйте этим рекомендациям для обеспечения безопасности функционала.
**Критические моменты:**
1. **Защита API ключа:**
- Не храните API ключ в клиентском коде для продакшена
- Используйте серверный прокси для отправки email
- Рассмотрите использование переменных окружения
2. **Защита от спама:**
- Добавьте reCAPTCHA или другую защиту от ботов
- Ограничьте количество отправок с одного IP
- Добавьте throttling (задержку между отправками)
3. **Валидация данных:**
```javascript
// Пример валидации email
function isValidEmail(email) {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return regex.test(email);
}
if (!isValidEmail(recipientEmail)) {
alert('Пожалуйста, введите корректный email');
return;
}
```
4. **Логирование:**
- Логируйте все отправки для анализа
- Отслеживайте подозрительную активность
- Создайте систему блокировки злоупотреблений
---
### Аналитика и метрики
#### Отслеживание эффективности
**Рекомендуемые метрики:**
| Метрика | Описание | Как отслеживать |
|:--------|:---------|:----------------|
| Клики на кнопку | Количество нажатий | Google Analytics Event |
| Отправлено намеков | Успешные отправки | Счетчик в базе данных |
| Conversion rate | % получателей, совершивших покупку | UTM-метки в ссылках |
| Популярные товары | Какие товары чаще всего отправляют | Статистика по product_id |
**Пример интеграции с Google Analytics:**
```javascript
// Добавьте в функцию после успешной отправки
if (typeof gtag !== 'undefined') {
gtag('event', 'hint_sent', {
'event_category': 'Gift Hint',
'event_label': productData.name,
'value': productData.price
});
}
```
---
### Техническая поддержка
> **Important:** При возникновении сложностей с интеграцией обращайтесь к специалистам.
**Ресурсы для помощи:**
- [Документация InSales](https://www.insales.ru/help)
- [Документация SendGrid API](https://docs.sendgrid.com/api-reference/mail-send/mail-send)
- [Справочник по Liquid](https://shopify.github.io/liquid/)
- Техническая поддержка **WS24.pro** для профессиональной настройки API интеграций
**Контакты для консультации:**
Обратитесь к специалистам WS24.pro для:
- Настройки серверной части для безопасной отправки email
- Кастомизации дизайна под ваш бренд
- Интеграции с CRM-системами
- Добавления расширенной аналитики
---
> **Note:** Этот функционал значительно повышает вовлеченность пользователей и может увеличить конверсию за счет "социального шоппинга". Регулярно анализируйте метрики и оптимизируйте user experience на основе полученных данных.