В карточке товара можно добавить кнопку "Намекнуть о подарке", при нажатии появляется попап с запросом почты, кому намекнуть посредством отправки письма с данными о товаре и с именем отправителя. Чтобы реализовать функционал "Намекнуть о подарке" на платформе Insales, вам потребуется выполнить следующие действия:
1. Создайте новый сниппет в вашей теме магазина Insales. Назовите его "hint_gift_button.liquid".
В этом сниппете добавьте следующий код:
<button id="hint-gift-button" class="btn btn-primary">Намекнуть о подарке</button>
<div id="hint-gift-modal" class="modal" tabindex="-1" role="dialog" style="display: none;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Намекнуть о подарке</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="hint-gift-form">
<div class="form-group">
<label for="recipient-email">E-mail получателя</label>
<input type="email" class="form-control" id="recipient-email" placeholder="Введите e-mail">
</div>
<button type="submit" class="btn btn-primary">Отправить намек</button>
</form>
</div>
</div>
</div>
</div>
2. Включите сниппет в файл "product.liquid" вашей темы. Вставьте следующий код после блока, который отображает информацию о товаре:
{% include 'hint_gift_button' %}
3. Создайте новый скриптовый файл в папке "javascripts" вашей темы и назовите его "hint_gift.js". В этом файле добавьте следующий код:
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');
hintGiftButton.addEventListener('click', function() {
hintGiftModal.style.display = 'block';
});
hintGiftForm.addEventListener('submit', function(event) {
event.preventDefault();
const recipientEmail = document.getElementById('recipient-email').value;
if (!recipientEmail) {
alert('Пожалуйста, введите e-mail получателя');
return;
}
const productData = {
name: '{{ product.title }}',
price: '{{ product.price | money_with_currency }}',
url: '{{ product.url }}',
image: '{{ product.first_image.src | url: '400x400' }}'
};
sendHintEmail(recipientEmail, productData);
});
function sendHintEmail(recipientEmail, productData) {
// Здесь должен быть код для отправки e-mail с данными о товаре.
// Вы можете использовать сторонний сервис, такой как SendGrid, Mailgun или другой сервис для отправки писем.
}
});
4. Включите созданный скрипт в файл "scripts.liquid" вашей темы. Вставьте следующий код в конец файла "scripts.liquid":
{{ 'hint_gift.js' | asset_url | script_tag }}
5. Теперь вам нужно настроить отправку e-mail с данными о товаре. В файле "hint_gift.js" найдите функцию sendHintEmail и замените комментарий кодом, который отправляет e-mail с помощью выбранного вами стороннего сервиса, например, SendGrid, Mailgun или другого сервиса для отправки писем. Ниже приведен пример кода для отправки письма с помощью SendGrid API:
function sendHintEmail(recipientEmail, productData) {
const apiKey = 'YOUR_SENDGRID_API_KEY'; // Замените на ваш API-ключ SendGrid
const fromEmail = 'your@email.com'; // Замените на ваш e-mail или e-mail магазина
const emailSubject = `Намек на подарок: ${productData.name}`;
const emailBody = `
<p>Вам намекнули на следующий подарок:</p>
<h3><a href="${productData.url}">${productData.name}</a></h3>
<p>Цена: ${productData.price}</p>
<p><img src="${productData.image}" alt="${productData.name}" /></p>
`;
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 },
content: [
{
type: 'text/html',
value: emailBody
}
]
})
})
.then(response => {
if (response.ok) {
alert('Намек успешно отправлен');
hintGiftModal.style.display = 'none';
} else {
alert('Ошибка при отправке намека. Пожалуйста, попробуйте еще раз');
}
})
.catch(error => {
console.error('Ошибка при отправке намека:', error);
alert('Ошибка при отправке намека. Пожалуйста, попробуйте еще раз');
});
}
Не забудьте заменить 'YOUR_SENDGRID_API_KEY' на ваш действительный API-ключ от SendGrid и your@email.com на ваш e-mail или e-mail магазина.
После завершения всех этих шагов функционал "Намекнуть о подарке" будет реализован в вашем магазине на платформе Insales. Кнопка "Намекнуть о подарке" появится на карточке товара, и при нажатии на неё откроется попап окно с запросом e-mail получателя намека. После отправки намека пользователю будет показано сообщение об успешной отправке или ошибка.
Важно помнить, что подключение требует соблюдения определенных правил и рекомендаций, а также технических требований. При возникновении трудностей или вопросов рекомендуется обращаться за помощью к специалистам сервиса WS24 по API интеграциям.
