usite-sas-bic/whatsapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: soporte de imagen dinámica en plantillas WhatsApp

Browse Source 
- Detecta header_type=IMAGE en get_template_details.php
- send_message (individual): muestra input de imagen si la plantilla lo requiere,
  sube a upload_media.php y envía header_image_url al backend
- broadcast (masivo): igual, con upload previo al envío
- api/send_message.php: acepta header_image_url y lo pasa como headerParameters
  [type:image, image:{link:URL}] a WhatsAppService::sendTemplateMessage()
- api/send_broadcast.php: igual para cada destinatario del masivo
- Preview en tiempo real de la imagen seleccionada en ambos formularios
This commit is contained in:
Lizandro Guarnizo
2026-03-13 13:24:22 -05:00
parent 027c8a6f26
commit e081dc739a
4 changed files with 148 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+42 -10
View File
@@ -1977,22 +1977,53 @@ try {
console.log('📋 Variables:', template.variables);
const variablesContainer = document.getElementById('broadcast-template-variables');
// Detectar header de imagen
const hasImageHeader = (template.header_type || '').toUpperCase() === 'IMAGE';
let html = '';
if (hasImageHeader) {
html += `
<div class="mb-3 border rounded p-2 bg-light" id="bc-image-header-section">
<label class="form-label fw-bold text-primary"><i class="fas fa-image me-1"></i> Imagen del encabezado</label>
<p class="text-muted small mb-2">Esta plantilla requiere una imagen de encabezado dinámica. Súbela aquí.</p>
<input type="file" class="form-control" id="broadcast-template-image" accept="image/jpeg,image/png,image/webp" required>
<div id="bc-image-preview" class="mt-2" style="display:none">
<img id="bc-image-thumb" src="" style="max-height:100px;border-radius:6px;" class="border">
</div>
</div>
`;
setTimeout(() => {
const imgInput = document.getElementById('broadcast-template-image');
if (imgInput) imgInput.addEventListener('change', function() {
const file = this.files[0];
if (file) {
const reader = new FileReader();
reader.onload = e => {
document.getElementById('bc-image-thumb').src = e.target.result;
document.getElementById('bc-image-preview').style.display = 'block';
};
reader.readAsDataURL(file);
}
});
}, 50);
}
if (template.variables && template.variables.length > 0) {
console.log(`✅ Se encontraron ${template.variables.length} variables`);
let html = '<label class="form-label fw-bold"><i class="fas fa-edit"></i> Variables de la Plantilla</label>';
html += `<label class="form-label fw-bold${hasImageHeader ? ' mt-2' : ''}"><i class="fas fa-edit"></i> Variables de la Plantilla</label>`;
template.variables.forEach((variable, index) => {
console.log(`Variable ${index}:`, variable);
const placeholder = variable.example || `Valor para Variable ${variable.index}`;
const label = variable.label || `Variable ${variable.index}`;
html += `
<div class="mb-2">
<label class="form-label small">${label}</label>
<input
type="text"
class="form-control broadcast-template-var"
<input
type="text"
class="form-control broadcast-template-var"
data-var="${variable.index}"
data-placeholder="${variable.placeholder}"
placeholder="${placeholder}"
@@ -2001,15 +2032,16 @@ try {
</div>
`;
});
console.log('📝 HTML generado para variables:', html);
variablesContainer.innerHTML = html;
variablesContainer.style.display = 'block';
console.log('✅ Variables container mostrado');
} else {
if (!hasImageHeader) html += '<p class="text-muted small">Esta plantilla no tiene variables de texto</p>';
console.log('⚠️ Template sin variables');
variablesContainer.innerHTML = '<p class="text-muted small">Esta plantilla no tiene variables</p>';
variablesContainer.style.display = 'block';
variablesContainer.innerHTML = html;
variablesContainer.style.display = (hasImageHeader || html) ? 'block' : 'none';
}
updateBroadcastPreview();