Quiero enviar un pedido a través de WhatsApp; estoy usando laravel y livewire. Tengo un componente y una vista del mismo componente, ambos en livewire.
Este es mi componente de livewire:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Cart;
class CheckoutComponent extends Component
{
public $name;
public $phone;
public $cartItems;
public $cartTotal;
public function render()
{
// Assign the products to $this->cartItems
$this->cartItems = Cart::instance('cart')->content();
// Assign the cart total to $this->cartTotal
$this->cartTotal = Cart::instance('cart')->subtotal();
return view('livewire.checkout-component');
}
public function sendOrderByWhatsApp()
{
// Lógica para construir el mensaje de WhatsApp
$mensajeWhatsApp = "Hola, mi nombre es {$this->name} y quiero realizar una compra con los siguientes productos:";
foreach ($this->cartItems as $item) {
// Accede a las claves del array de manera segura
$productName = $item['name'] ?? '';
$quantity = $item['qty'] ?? '';
$price = $item['price'] ?? '';
$subtotal = $item['subtotal'] ?? '';
$image = isset($item['model']['image']) ? asset('assets/imgs/products') . '/' . $item['model']['image'] : '';
// Agrega la información al mensaje de WhatsApp
$mensajeWhatsApp .= "\n{$productName} - Cantidad: {$quantity} - Precio unitario: {$price} - Precio total: {$subtotal} - Imagen: {$image}";
}
// Agrega el total del carrito al mensaje
$mensajeWhatsApp .= "\nTotal: {$this->cartTotal}";
// Número de teléfono para el enlace de WhatsApp (reemplaza con tu número real)
$phoneNumber = '4471157701';
// Enlace de WhatsApp con el número de teléfono y mensaje
$whatsAppLink = "https://wa.me/{$phoneNumber}?text=" . urlencode($mensajeWhatsApp);
// Muestra un mensaje de éxito a través de Livewire
session()->flash('success_message', 'Tu pedido ha sido enviado con éxito!');
// Emite un evento de Livewire para abrir el enlace de WhatsApp
$this->dispatchBrowserEvent('openWhatsApp', [
'whatsAppLink' => $whatsAppLink,
]);
// Limpia el formulario
$this->name = '';
$this->phone = '';
// Clear the cart (if needed)
Cart::instance('cart')->destroy();
}
}
y esta es mi vista de livewire:
<div>
<main class="main">
<div class="page-header breadcrumb-wrap">
<div class="container">
<div class="breadcrumb">
<a href="/" rel="nofollow" style="color: rgb(255, 255, 255);">Inicio</a>
<span style="color: rgb(255, 255, 255);">Tu carrito</span>
<span style="color: rgb(255, 255, 255);">Tu compra</span>
</div>
</div>
</div>
<section class="mt-50 mb-50">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="mb-25">
<h4>Datos del Comprador:</h4>
<form wire:submit.prevent="procesarCompra">
<div class="form-group">
<input wire:model="name" type="text" required="" name="fname"
placeholder="Nombre Completo">
</div>
<div class="form-group">
<input wire:model="phone" required="" type="text" name="phone"
placeholder="Número de celular">
</div>
</form>
</div>
</div>
<div class="col-md-6">
<div class="order_review">
<div class="mb-20">
<h4>Tu Orden</h4>
</div>
<div class="table-responsive order_table text-center">
<table class="table">
<thead>
<tr>
<th colspan="2">Imagen</th>
<th colspan="2">Producto</th>
<th colspan="2">Código</th>
<th colspan="6">Total</th>
</tr>
</thead>
<tbody>
@if($cartItems)
@foreach ($cartItems as $item)
<tr>
<!-- Mostrar la información del carrito -->
<td colspan="2" class="image product-thumbnail"><img
src="{{ asset('assets/imgs/products')}}/{{$item->model->image}}"
alt=""></td>
<td colspan="2">
<h5><a href="#">{{$item->model->name}}</a></h5>
<span class="product-qty">{{$item->qty}}</span>
</td>
<td colspan="2" class="SKU">{{$item->model->SKU}}</td>
<td colspan="6">${{$item->subtotal}}</td>
</tr>
@endforeach
<tr>
<th colspan="2" scope="row">Total</th>
<td colspan="6" class="product-subtotal">${{ Cart::subtotal() }}</td>
</tr>
@else
<tr>
<td colspan="9">No hay productos en el carrito.</td>
</tr>
@endif
</tbody>
</table>
</div>
<a href="#" wire:click.prevent="sendOrderByWhatsApp" class="btn whatsapp-btn">
<i class="fi-rs-box-alt mr-10"></i>Realizar Pedido vía WhatsApp
</a>
@section('scripts')
@parent
<script>
document.addEventListener('livewire:load', function () {
Livewire.on('openWhatsApp', (parameters) => {
var whatsAppLink = parameters.whatsAppLink;
// Abre el enlace de WhatsApp en una nueva ventana
window.open(whatsAppLink, '_blank');
// Muestra un mensaje de éxito al usuario (puedes personalizar esto)
alert('Tu pedido ha sido enviado con éxito!');
});
});
</script>
@endsection
</div>
</div>
</div>
</div>
</section>
</main>
</div>
Necesito que envíe el pedido a través de WhatsApp con los datos que tiene la vista. No envía nada y no muestra el mensaje de que el pedido se envió.
