Вот что я получил, на WordPress, использующем подписки woocommerce, пользователи имеют возможность отказаться от подписки через свою подписку через страницу своего аккаунта.Прямо сейчас, когда они нажимают кнопку «Отмена», они просто отменяют свою подписку без какого-либо подтверждения или повторного рассмотрения.Я хочу, чтобы они нажимали кнопку «Отмена» и вызывали модуль обратной связи с несколькими переключателями.Как только они выбирают опцию переключателя, он отображает кнопку отмены, а затем, когда они нажимают кнопку отмены, он делает две вещи: 1) отправляет электронное письмо администратору с выбранной опцией переключателя и 2) отменяет свою подписку.
Я просмотрел весь интернет, пытаясь выяснить это, и я не могу заставить его работать.Я чувствую, что я действительно близко, но не могу понять, как запустить оба действия.Я могу запустить одно или другое действие, но не оба.Я запускаю все это на локальном хосте с использованием Bitnami, и я также не очень знаком с Javascript и Ajax, которые, как я знаю, придется запустить.Большую часть кода, приведенного ниже, я получил из Интернета, поэтому извините, если он анализируется вместе.
Я также пытался отправить электронное письмо, когда пользователь нажимает переключатель, а затем кнопку отмены простодействия, но я столкнулся с проблемой, когда страница будет обновляться каждый раз, когда они нажимают на переключатель.Теперь, если бы я мог получить электронное письмо для отправки, а не обновить страницу, этот способ работал бы, однако это менее желательный способ.:)
Итак, любая помощь будет высоко ценится!:)
Ниже приведен код, который у меня сейчас есть:
PHP для отправки по электронной почте
if(isset($_POST['radio'])){
$user_info = get_userdata(1);
$email = $user_info->user_email;
$to = "example@gmail.com";
$from = "donotreply@example.org";
$subject = "Subscription Cancelled";
$message = "Reason for unsubscribing: " . $_POST['radio'] . "\nName: " .
$user_info->last_name . ", " . $user_info->first_name . "\nUser Email: ". $email;
$headers = "From:" . $from;
wp_mail($to,$subject,$message,$headers);
}
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
function show1() {
document.getElementById('button').style.display = 'inline-block';
}
function show2() {
document.getElementById('button').style.display = 'inline-block';
}
window.addEventListener("DOMContentLoaded", function() {
var form = document.getElementById("contact");
document.getElementById("submit_button").addEventListener("click", function() {
form.submit();
});
});
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(101, 101, 101, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1em 1.5em;
width: 95%;
max-width: 510px;
}
.modal-content #button {
margin-top: 15px;
text-align: right;
}
.modal-content span.radio {
width: 100%;
display: block;
padding: 5px 0;
}
.close-button {
top: 2px;
position: absolute;
right: 10px;
font-size: 1.4em;
cursor: pointer;
color: #949494;
font-weight: 600;
}
.close-button:hover {
color: #333333;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.reveal-if-active {
opacity: 0;
max-height: 0;
overflow: hidden;
font-size: 16px;
transform: scale(0.8);
transition: 0.5s;
}
label {
display: block;
margin: 0 0 3px 0;
}
input[type="text"] {
width: 100%;
}
.modal-content ul {
margin-left: 0;
}
.modal-content ul li {
display: block;
position: relative;
float: left;
width: 100%;
}
.modal-content ul li input[type=radio] {
position: absolute;
visibility: hidden;
}
.modal-content ul li label {
display: block;
position: relative;
font-weight: 300;
font-size: 1em;
padding: 10px 25px;
margin: 5px auto;
cursor: pointer;
-webkit-transition: all 0.25s linear;
background: #f5f5f5;
border-left: 3px solid #949494;
}
.modal-content ul li .check {
display: block;
position: absolute;
border: 2px solid #AAAAAA;
border-radius: 100%;
height: 12px;
width: 12px;
top: 21px;
left: 10px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
.modal-content ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 4px;
width: 4px;
top: 2px;
left: 2px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
.modal-content input[type=radio]:checked~.check {
border: 2px solid #428bca;
}
.modal-content input[type=radio]:checked~.check::before {
background: #428bca;
}
.hide {
display: none;
}
.form {
margin-bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="trigger button cancel">Cancel Subscription</a>
<div class="modal">
<div class="modal-content">
<form id="contact" action="" method="post">
<span class="close-button">×</span>
<h3>Title</h3>
<p>Description:</p>
<ul>
<li>
<input type="radio" name="radio" id="option1" value="option 2" onclick="show1();" /><label for="option1">Option 1</label>
<div class="check"></div>
</li>
<li>
<input type="radio" name="radio" id="option2" value="option 2" onclick="show2();" /><label for="option2">Option 2</label>
<div class="check"></div>
</li>
</ul>
<div id="button" class="hide">
<a id="submit_button" onclick="document.getElementById('contact').submit();" href="<?php echo esc_url($action['url']); ?>" class="unsubscribe-button button cancel">Submit and Cancel Subscription 2</a>
</div>
</form>
</div>
</div>