Функционал в карточке товара "Намекнуть на подарок"
---
## Функционал "Намекнуть о подарке" для 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} считает, что вам может понравиться: