I have the following code, but it has a small issue. What it does is send me an email with the feedback from the rating. This email is sent correctly when the rating is 4 or 5 stars.
javascript
Copiar
if (rating >= 1 && rating <= 3) {
subject = `Alert - You Have a Low Product Rating 200000${vtValue}`;
body = `You have a new product rating\n\nRating: ${rating}\nProduct: ${mluValue}\nComments: ${feedback}\nSale: 200000${vtValue}`;
} else if (rating >= 4 && rating <= 5) {
subject = `You Have a Good Product Rating 200000${vtValue}`;
body = `You have a new product rating\n\nRating: ${rating}\nProduct: ${mluValue}\nSale: 200000${vtValue}`;
}
However, when the rating is between 1 and 3 stars, I encounter an issue where it doesn't work as it should and I receive an empty email. It doesn't use the correct subject or body.
_subject
body
Submitted 05:14 PM - 06 March 2024
I have tried different solutions, but I can't make it work when the rating is between 1 and 3 stars.
Here it's the code:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Universal Importaciones</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <!-- Agregar Font Awesome para íconos de estrella -->
<style>
body {
font-family: 'Montserrat', sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: #006bd6; /* Fondo azul */
color: #FFFFFF; /* Texto blanco */
}
h1, h2, h3 {
margin: 10px;
}
#votacion {
margin-top: 50px;
}
.stars {
display: flex;
justify-content: center;
flex-direction: row-reverse; /* Cambiar la dirección de las estrellas */
margin-bottom: 20px;
}
.stars input[type="radio"] {
display: none;
}
.stars label {
font-size: 5em;
color: #ddd;
cursor: pointer;
transition: color 0.3s;
}
.stars label:hover,
.stars input[type="radio"]:checked ~ label,
.stars input[type="radio"]:hover ~ label {
color: #ffd700; /* Color de estrella seleccionada */
}
#feedback-box {
margin-bottom: 20px;
}
#feedback-box textarea {
width: 80%;
max-width: 600px;
margin: 0 auto;
border-radius: 5px; /* Redondear bordes de la textarea */
padding: 10px;
}
#feedback-box button {
margin-top: 10px;
background-color: #ff03a7; /* Color del botón */
color: #FFFFFF; /* Texto blanco */
font-size: 14px; /* Tamaño del texto */
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px; /* Redondear bordes del botón */
}
#mensaje-final {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #FFFFFF;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 9999;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}
#footer p {
margin: 5px;
}
#footer a {
color: #fff;
text-decoration: none;
font-size: 1.2em;
margin: 0 10px;
}
#footer a:hover {
text-decoration: underline;
}
#footer .icons {
display: flex;
justify-content: center;
margin-top: 10px;
}
@media only screen and (max-width: 600px) {
.stars label {
font-size: 3.5em;
}
#feedback-box textarea {
width: 90%;
}
}
</style>
</head>
<body>
<img src="https://www.universalimportaciones.uy/assets/uni-logo-vert-trim-0f197ea90854816ad0f09338fb14b035b3165db7eaf7f2c9b5e5802c4bbf1403.png" alt="Logo de Universal Importaciones" style="width: 200px; height: auto; margin-top: 20px;">
<div id="votacion">
<h2>¿Cómo Calificarías tu Experiencia de Compra con Nosotros?</h2>
<div class="stars">
<input type="radio" name="rating" value="5" id="star5"><label for="star5"></label>
<input type="radio" name="rating" value="4" id="star4"><label for="star4"></label>
<input type="radio" name="rating" value="3" id="star3"><label for="star3"></label>
<input type="radio" name="rating" value="2" id="star2"><label for="star2"></label>
<input type="radio" name="rating" value="1" id="star1"><label for="star1"></label>
</div>
</div>
<div id="feedback-box" style="display: none;">
<h3>¿Cuéntanos qué le faltó al producto para tener una Mejor Calificación?</h3>
<textarea id="feedback" rows="4" cols="50"></textarea><br>
<button onclick="enviarFeedback()">Enviar</button>
</div>
<div id="mensaje-final" style="display: none;">
<p style="color: black;">Agradecemos tu respuesta, estamos en la búsqueda de mejorar tu experiencia de compra y tus comentarios son muy importantes para nosotros.</p>
</div>
<div id="footer">
<p><i class="fas fa-arrow-alt-circle-down"></i> Tienes Alguna Duda o Consulta? Contáctanos</p>
<div class="icons">
<style>
.whatsapp-link {
color: lime;
}
</style>
<a href="https://wa.me/59892478000" class="whatsapp-link"><i class="fab fa-whatsapp" style="color: lime;"></i> WhatsApp</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script> <!-- Agregar script de Font Awesome -->
<script>
const stars = document.querySelectorAll('.stars input[type="radio"]');
const feedbackBox = document.getElementById('feedback-box');
const mensajeFinal = document.getElementById('mensaje-final');
stars.forEach(star => {
star.addEventListener('click', function() {
const ratingValue = this.value;
const params = new URLSearchParams(window.location.search);
const mluValue = params.get('mlu');
const vtValue = params.get('vt');
if (ratingValue <= 3) {
feedbackBox.style.display = 'block';
} else {
window.open(`https://reviews.mercadolibre.com.uy/review/MLU${mluValue}?origin=my-reviews-pending&rating=${ratingValue}`);
enviarFeedback(ratingValue, mluValue, vtValue);
}
});
star.addEventListener('mouseover', function() {
const rating = parseInt(this.value);
for (let i = 0; i < stars.length; i++) {
if (i < rating) {
stars[i].nextElementSibling.style.color = '#ffd700';
} else {
stars[i].nextElementSibling.style.color = '#ddd';
}
}
});
});
function enviarFeedback(rating, mluValue, vtValue) {
const feedback = document.getElementById('feedback').value;
let subject = '';
let body = '';
if (rating >= 1 && rating <= 3) {
subject = `Alerta - Tienes una Baja Calificación de Producto 200000${vtValue}`;
body = `Tienes una nueva calificación de Producto\n\nCalificación: ${rating}\nProducto: ${mluValue}\nComentarios: ${feedback}\nVenta: 200000${vtValue}`;
} else if (rating >= 4 && rating <= 5) {
subject = `Tienes una Buena Calificación de Producto 200000${vtValue}`;
body = `Tienes una nueva calificación de Producto\n\nCalificación: ${rating}\nProducto: ${mluValue}\nVenta: 200000${vtValue}`;
}
const form = document.createElement('form');
form.setAttribute('action', 'https://formspree.io/mdoqdkbl');
form.setAttribute('method', 'POST');
const emailInput = document.createElement('input');
emailInput.setAttribute('type', 'hidden');
emailInput.setAttribute('name', 'Email');
emailInput.setAttribute('value', '[email protected]');
const subjectInput = document.createElement('input');
subjectInput.setAttribute('type', 'hidden');
subjectInput.setAttribute('name', '_subject');
subjectInput.setAttribute('value', subject);
const bodyInput = document.createElement('input');
bodyInput.setAttribute('type', 'hidden');
bodyInput.setAttribute('name', 'Body');
bodyInput.setAttribute('value', body);
form.appendChild(emailInput);
form.appendChild(subjectInput);
form.appendChild(bodyInput);
document.body.appendChild(form);
form.submit();
mensajeFinal.style.display = 'block';
}
</script>
</body>
</html>
Thanks to freedomn-m The sendFeedback was undefined