Membuat Sales Pop Laravel dengan AlpineJS

0 Komentar
Membuat Sales Pop Laravel dengan AlpineJS

Salah satu cara meningkatkan kepercayaan calon pembeli adalah dengan “Social Proof”, dan Sales Proof adalah salah satu metoded untuk menonjolkan social proof kepada calon pelanggan kita.

Apa itu sales pop?

Sales pop adalah pop-up kecil yang tampil umumnya di pojok bawah website dengan posisi fixed. contohnya seperti ini

Data yang ditampilkan berganti-ganti, biasanya diambil secara random dengan batas waktu tertentu misalnya data satu bulan terakhir.

Oke langsung saja kita mulai.

Disini kami menggunakan tailwindcss untuk styling nya, dan pastinya menggunakan library javascript alpinejs.

Step 1 : Buat format html nya

<div  x-data="salesProof">
    <div  x-show="show" 
          class="fixed bottom-5 left-5 max-w-md z-50 h-20 w-auto">
        <div class="w-full rounded-lg bg-white shadow-md flex items-center px-3 py-1 space-x-2">
            <div class="w-12 h-12 bg-indigo-600 rounded-full bg-cover bg-center bg-no-repeat"     :style="'background-image: url(\'' + user?.photo_url + '\');'"></div>
            <div class="flex-grow leading-none">
                <div class="font-bold line-clamp-1 mb-0.5" x-text="user.name">H****</div>
                <div class="text-xs text-gray-600" x-text="user.order">Order paket 1 tahun</div>
                <div class="text-xs text-gray-600" x-text="user.order_date"></div>

            </div>
            <div class="w-6"></div>
        </div>
    </div>
</div>

Keterangan Kode

  1. x-data="salesProof" adalah alpine component salespop

2. x-show="show" ini untuk menampilkan dan menyembunyikan sales pop

3. :style="background-url.... untuk menampilkan avatar atau user profile

4. x-text="user.name" , x-text="user.order" dan x-text="user.register" adalah text yang akan tampil nantinya

Step 2 : Kita buat directive function untuk component saleesProof

  Alpine.data('salesProof', function () {
   // kode nya nanti disini
  })

Kemudian kita definisikan default value nya

    Alpine.data('salesProof', function () {
        return {
            user: {
                name:'Someone in Aceh',
                order_date:'1 jam yang lalu',
                order:'baru saja bergabung'
            },
            show: false,
            init() {
               
            },
            async getUser() {
              
            }
        }
    });

Kita ambil data dengan menggunakan getUser, namun sebelumnya kita perlu Controller dan route API atau Ajax route terlebih dahulu:

Step 3 : Buat Route dan Controller getUser

php artisan make:controller AjaxSalesProofController
<?php
namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use App\Models\Order;
use Illuminate\Http\Request;

class AjaxSalesProofController extends Controller
{

    public function getUser()
    {
       $response = [
            'success' => false,
            'data' => null
        ];
             $order = Order::query()->with(['user','product'])->inRandomOrder()->first();
             if($order){
                $response['success'] = true;
                $user = $order->user;
                $user->order_date = $order->created_at->diffForHumans();
                $user->photo_url = 'https://ui-avatars.com/api/?name='.str_replace('*','',$user->name).'&background=random';
                $user->order = $order->product->name;
$response['data'] = $user;
             }

    }

Route

Route::get('/ajax/sales-proof',[\App\Http\Controllers\AjaxSalesProofController::class,'getUser']);

Step 4 : Kita selesaikan alpine componen nya

....
....
      async getUser() {
              await window.axios.get('/ajax/sales-proof')
                    .then(res => {
                        if (res.data.success) {
                            this.user = res.data.data;
                            this.show = true;
                        }
                    })  
            }

Step 5 : Buat Interval sales pop-nya

 init() {
                setInterval(async () => {
                    await this.getUser()

                }, 10000);

                setInterval(async () => {
                    this.show = false

                }, 5000);

            },

Maka kode lengkap javascriptnya seperti ini

 Alpine.data('salesProof', function () {
        return {
            user: {
                name:'Someone in Aceh',
                order_date:'1 jam yang lalu',
                 order:'baru saja bergabung'
            },
            show: false,
            init() {
                setInterval(async () => {
                    await this.getUser();
                }, 10000);

                setInterval(async () => {
                    this.show = false;
                }, 5000);

            },
            async getUser() {
                await window.axios.get('/ajax/sales-proof')
                    .then(res => {
                        if (res.data.success) {
                            this.user = res.data.data;
                            this.show = true;
                        }
                    })

            }
        }
    });

Anda bisa mengembangkan lebih lanjut lagi dengan ide-ide keren lainya. misalnya membatasi sales pop tampil berapa kali dalam satu kali session, atau range date data order yang diambil dll.

Semoga bermanfaat, dam salam koding selalu

Catatan:

Library terkait

  1. Laravel
  2. AlpineJS
  3. Axios
Weekly email summary

Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.

Berikan Komentar
Email anda tidak akan ditampilkan. Field yang wajib diisi ditandai dengan *
*