Table of contents
Step 1 : Buat format html nya
Step 2 : Kita buat directive function untuk component saleesProof
Step 3 : Buat Route dan Controller getUser
Step 4 : Kita selesaikan alpine componen nya
Step 5 : Buat Interval sales pop-nya

Membuat Sales Pop Laravel dengan AlpineJS

Hadie Danker
4 bulan yang lalu
Web Development
Membuat Sales Pop Laravel dengan AlpineJS
Table of contents
Step 1 : Buat format html nya
Step 2 : Kita buat directive function untuk component saleesProof
Step 3 : Buat Route dan Controller getUser
Step 4 : Kita selesaikan alpine componen nya
Step 5 : Buat Interval sales pop-nya

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

html
1
<div x-data="salesProof">
2
<div x-show="show"
3
class="fixed bottom-5 left-5 max-w-md z-50 h-20 w-auto">
4
<div class="w-full rounded-lg bg-white shadow-md flex items-center px-3 py-1 space-x-2">
5
<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>
6
<div class="flex-grow leading-none">
7
<div class="font-bold line-clamp-1 mb-0.5" x-text="user.name">H****</div>
8
<div class="text-xs text-gray-600" x-text="user.order">Order paket 1 tahun</div>
9
<div class="text-xs text-gray-600" x-text="user.order_date"></div>
10
11
</div>
12
<div class="w-6"></div>
13
</div>
14
</div>
15
</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

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

Kemudian kita definisikan default value nya

js
1
Alpine.data('salesProof', function () {
2
return {
3
user: {
4
name:'Someone in Aceh',
5
order_date:'1 jam yang lalu',
6
order:'baru saja bergabung'
7
},
8
show: false,
9
init() {
10
11
},
12
async getUser() {
13
14
}
15
}
16
});

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

1
php artisan make:controller AjaxSalesProofController
php
1
<?php
2
namespace App\Http\Controllers;
3
4
use App\Http\Controllers\Controller;
5
use App\Models\Order;
6
use Illuminate\Http\Request;
7
8
class AjaxSalesProofController extends Controller
9
{
10
11
public function getUser()
12
{
13
$response = [
14
'success' => false,
15
'data' => null
16
];
17
$order = Order::query()->with(['user','product'])->inRandomOrder()->first();
18
if($order){
19
$response['success'] = true;
20
$user = $order->user;
21
$user->order_date = $order->created_at->diffForHumans();
22
$user->photo_url = 'https://ui-avatars.com/api/?name='.str_replace('*','',$user->name).'&background=random';
23
$user->order = $order->product->name;
24
$response['data'] = $user;
25
}
26
27
}

PHP

Copy

Route

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

Step 4 : Kita selesaikan alpine componen nya

js
1
....
2
....
3
async getUser() {
4
await window.axios.get('/ajax/sales-proof')
5
.then(res => {
6
if (res.data.success) {
7
this.user = res.data.data;
8
this.show = true;
9
}
10
})
11
}

Step 5 : Buat Interval sales pop-nya

js
1
init() {
2
setInterval(async () => {
3
await this.getUser()
4
5
}, 10000);
6
7
setInterval(async () => {
8
this.show = false
9
10
}, 5000);
11
12
},

Maka kode lengkap javascriptnya seperti ini

js
1
Alpine.data('salesProof', function () {
2
return {
3
user: {
4
name:'Someone in Aceh',
5
order_date:'1 jam yang lalu',
6
order:'baru saja bergabung'
7
},
8
show: false,
9
init() {
10
setInterval(async () => {
11
await this.getUser();
12
}, 10000);
13
14
setInterval(async () => {
15
this.show = false;
16
}, 5000);
17
18
},
19
async getUser() {
20
await window.axios.get('/ajax/sales-proof')
21
.then(res => {
22
if (res.data.success) {
23
this.user = res.data.data;
24
this.show = true;
25
}
26
})
27
28
}
29
}
30
});

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

Ajax
Laravel
LiveWire