4.6 KiB

Raw Permalink Blame History

🚀 WhatsApp Integration - Quick Start Guide

Apa yang Sudah Diintegrasikan?

✅ API WhatsApp - Endpoint untuk mengarahkan ke WhatsApp
✅ Car Detail Page - Tombol "Chat via WhatsApp" pada halaman detail mobil
✅ Database Fields - Kolom untuk nomor telepon penjual dan username
✅ JavaScript Handling - Script untuk membuka WhatsApp dengan pesan otomatis

Step 1: Jalankan Migrations

php artisan migrate

Ini akan menambahkan 2 kolom baru:

phone_number di tabel user
seller_username di tabel categories

Step 2: Update User Phone Numbers

Pastikan setiap penjual memiliki nomor telepon. Buka database atau gunakan Tinker:

php artisan tinker

// Update seller dengan nomor telepon
$user = User::find('username_penjual');
$user->update(['phone_number' => '081234567890']);

// Atau bulk update
User::where('role', 'seller')->update(['phone_number' => '081234567890']);

Step 3: Tentukan Seller untuk Setiap Mobil

Ketika menambah/edit mobil di admin panel, masukkan seller_username dari user yang menjual mobil tersebut.

Format Field Input:

Nama Mobil: Toyota Avanza 2015
Harga: 120000000
Tahun: 2015
Penjual: john_seller  ← Username dari tabel user
Gambar: [upload image]

Step 4: Test di Frontend

Buka halaman detail mobil: /mobil-bekas/{car-id}
Scroll ke bagian kanan (price section)
Klik tombol "💬 Chat via WhatsApp"
Secara otomatis akan membuka WhatsApp dengan pesan:

Halo, saya tertarik dengan kendaraan bekas - [Nama Mobil]. Apakah masih tersedia?

API Endpoints (Dokumentasi Lengkap)

1. Dapatkan Link WhatsApp (Return JSON)

GET /api/chat/whatsapp/{username}/{categoryId}

Contoh:

GET /api/chat/whatsapp/john_seller/5

Response:

{
    "success": true,
    "data": {
        "whatsapp_link": "https://wa.me/6281234567890?text=...",
        "seller_username": "john_seller",
        "phone_number": "+6281234567890"
    }
}

2. Redirect Langsung ke WhatsApp

GET /api/contact/whatsapp/{username}/{categoryId}

Contoh:

GET /api/contact/whatsapp/john_seller/5

Secara otomatis membuka WhatsApp tanpa response JSON

3. Dapatkan Daftar Semua Penjual

GET /api/chat/sellers

Response:

{
    "success": true,
    "data": [
        {
            "username": "john_seller",
            "email": "john@example.com",
            "phone_number": "+6281234567890"
        }
    ]
}

Integrasi Custom (Frontend)

Jika ingin membuat tombol WhatsApp di tempat lain:

Option 1: Link Langsung

<a href="/api/contact/whatsapp/username_penjual/car_id">
    Hubungi via WhatsApp
</a>

Option 2: Button dengan JavaScript

<button onclick="contactSellerViaWhatsApp('username_penjual', 'car_id')">
    Chat via WhatsApp
</button>

Fungsi sudah tersedia di car-detail.blade.php.

Option 3: Custom Handler

// Dapatkan link dari API
async function getWhatsAppLink(username, categoryId) {
    const response = await fetch(`/api/chat/whatsapp/${username}/${categoryId}`);
    const data = await response.json();
    
    if (data.success) {
        window.open(data.data.whatsapp_link, '_blank');
    }
}

Troubleshooting

❌ "Informasi penjual tidak tersedia"

Penyebab: seller_username tidak diset pada kategori/mobil
Solusi: Edit mobil dan masukkan seller_username yang valid

❌ "Nomor telepon penjual tidak tersedia"

Penyebab: User tidak memiliki phone_number
Solusi: Update field phone_number untuk user tersebut

❌ WhatsApp tidak terbuka

Penyebab:

Browser block popup
WhatsApp tidak terinstall/login
Format nomor tidak valid

Solusi:

Gunakan format: 08xxxxxxxxxx atau +628xxxxxxxxxx
Pastikan WhatsApp Web sudah login
Coba di browser lain atau incognito mode

❌ Error 404 pada API

Penyebab: User tidak ditemukan
Solusi: Pastikan username benar dan user ada di database

Database Schema

User Table (New Fields)

ALTER TABLE user ADD COLUMN phone_number VARCHAR(255) NULL;

Categories Table (New Fields)

ALTER TABLE categories ADD COLUMN seller_username VARCHAR(255) NULL;
ALTER TABLE categories ADD INDEX idx_seller_username (seller_username);

Notes

✅ Nomor telepon otomatis diformat ke format WhatsApp (62xxxxxxxxxx)
✅ Pesan otomatis disesuaikan dengan nama mobil
✅ Responsive design untuk mobile
✅ Error handling untuk missing data
✅ Support untuk berbagai format nomor telepon

Dokumentasi Lengkap

Lihat: WHATSAPP_API_DOCUMENTATION.md

4.6 KiB Raw Permalink Blame History