Membuat Sales Pop Laravel dengan AlpineJS

Hadie Danker
2 bulan yang lalu
Web Development
Membuat Sales Pop Laravel dengan AlpineJS
{"compiledSource":"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = Object.assign({\n p: \"p\",\n h2: \"h2\",\n img: \"img\",\n h3: \"h3\",\n pre: \"pre\",\n code: \"code\",\n ol: \"ol\",\n li: \"li\",\n a: \"a\"\n }, _provideComponents(), props.components);\n return _jsxs(_Fragment, {\n children: [_jsx(_components.p, {\n children: \"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.\"\n }), \"\\n\", _jsx(_components.h2, {\n id: \"apa-itu-sales-pop\",\n children: \"Apa itu sales pop?\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Sales pop adalah pop-up kecil yang tampil umumnya di pojok bawah website dengan posisi fixed. contohnya seperti ini\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.img, {\n src: \"https://api.dankedev.com/assets/articles/membuat-sales-pop-laravel-dengan-alpinejs.webp\",\n alt: \"\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Data yang ditampilkan berganti-ganti, biasanya diambil secara random dengan batas waktu tertentu misalnya data satu bulan terakhir.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Oke langsung saja kita mulai.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Disini kami menggunakan tailwindcss untuk styling nya, dan pastinya menggunakan library javascript alpinejs.\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"step-1--buat-format-html-nya\",\n children: \"Step 1 : Buat format html nya\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-html\",\n children: \" <div x-data=\\\"salesProof\\\">\\r\\n <div x-show=\\\"show\\\" \\r\\n class=\\\"fixed bottom-5 left-5 max-w-md z-50 h-20 w-auto\\\">\\r\\n <div class=\\\"w-full rounded-lg bg-white shadow-md flex items-center px-3 py-1 space-x-2\\\">\\r\\n <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>\\r\\n <div class=\\\"flex-grow leading-none\\\">\\r\\n <div class=\\\"font-bold line-clamp-1 mb-0.5\\\" x-text=\\\"user.name\\\">H****</div>\\r\\n <div class=\\\"text-xs text-gray-600\\\" x-text=\\\"user.order\\\">Order paket 1 tahun</div>\\r\\n <div class=\\\"text-xs text-gray-600\\\" x-text=\\\"user.order_date\\\"></div>\\r\\n \\r\\n </div>\\r\\n <div class=\\\"w-6\\\"></div>\\r\\n </div>\\r\\n </div>\\r\\n </div>\\n\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Keterangan Kode\"\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.code, {\n children: \"x-data=\\\"salesProof\\\"\"\n }), \" adalah alpine component salespop\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"2. \", _jsx(_components.code, {\n children: \"x-show=\\\"show\\\"\"\n }), \" ini untuk menampilkan dan menyembunyikan sales pop\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"3. \", _jsx(_components.code, {\n children: \":style=\\\"background-url....\"\n }), \" untuk menampilkan avatar atau user profile\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"4. \", _jsx(_components.code, {\n children: \"x-text=\\\"user.name\\\"\"\n }), \" , \", _jsx(_components.code, {\n children: \"x-text=\\\"user.order\\\"\"\n }), \" dan \", _jsx(_components.code, {\n children: \"x-text=\\\"user.register\\\"\"\n }), \" adalah text yang akan tampil nantinya\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"step-2--kita-buat-directive-function-untuk-component-saleesproof\",\n children: \"Step 2 : Kita buat directive function untuk component saleesProof\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-javascript\",\n children: \" Alpine.data('salesProof', function () {\\r\\n // kode nya nanti disini\\r\\n })\\n\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Kemudian kita definisikan default value nya\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-javascript\",\n children: \"Alpine.data('salesProof', function () {\\r\\n return {\\r\\n user: {\\r\\n name:'Someone in Aceh',\\r\\n order_date:'1 jam yang lalu',\\r\\n order:'baru saja bergabung'\\r\\n },\\r\\n show: false,\\r\\n init() {\\r\\n \\r\\n },\\r\\n async getUser() {\\r\\n \\r\\n }\\r\\n }\\r\\n });\\r\\n \\n\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Kita ambil data dengan menggunakan getUser, namun sebelumnya kita perlu Controller dan route API atau Ajax route terlebih dahulu:\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"step-3--buat-route-dan-controller-getuser\",\n children: \"Step 3 : Buat Route dan Controller getUser\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-bash\",\n children: \"php artisan make:controller AjaxSalesProofController\\n\"\n })\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-php\",\n children: \"<?php\\r\\n namespace App\\\\Http\\\\Controllers;\\r\\n \\r\\n use App\\\\Http\\\\Controllers\\\\Controller;\\r\\n use App\\\\Models\\\\Order;\\r\\n use Illuminate\\\\Http\\\\Request;\\r\\n \\r\\n class AjaxSalesProofController extends Controller\\r\\n {\\r\\n \\r\\n public function getUser()\\r\\n {\\r\\n $response = [\\r\\n 'success' => false,\\r\\n 'data' => null\\r\\n ];\\r\\n $order = Order::query()->with(['user','product'])->inRandomOrder()->first();\\r\\n if($order){\\r\\n $response['success'] = true;\\r\\n $user = $order->user;\\r\\n $user->order_date = $order->created_at->diffForHumans();\\r\\n $user->photo_url = 'https://ui-avatars.com/api/?name='.str_replace('*','',$user->name).'&background=random';\\r\\n $user->order = $order->product->name;\\r\\n $response['data'] = $user;\\r\\n }\\r\\n \\r\\n }\\r\\n \\r\\n\\n\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"PHP\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Copy\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Route\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-php\",\n children: \" Route::get('/ajax/sales-proof',[\\\\App\\\\Http\\\\Controllers\\\\AjaxSalesProofController::class,'getUser']);\\n\"\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"step-4--kita-selesaikan-alpine-componen-nya\",\n children: \"Step 4 : Kita selesaikan alpine componen nya\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-javascript\",\n children: \" ....\\r\\n ....\\r\\n async getUser() {\\r\\n await window.axios.get('/ajax/sales-proof')\\r\\n .then(res => {\\r\\n if (res.data.success) {\\r\\n this.user = res.data.data;\\r\\n this.show = true;\\r\\n }\\r\\n }) \\r\\n }\\r\\n\\n\"\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"step-5--buat-interval-sales-pop-nya\",\n children: \"Step 5 : Buat Interval sales pop-nya\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-javascript\",\n children: \"init() {\\r\\n setInterval(async () => {\\r\\n await this.getUser()\\r\\n \\r\\n }, 10000);\\r\\n \\r\\n setInterval(async () => {\\r\\n this.show = false\\r\\n \\r\\n }, 5000);\\r\\n \\r\\n },\\r\\n\\n\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Maka kode lengkap javascriptnya seperti ini\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-javascript\",\n children: \" Alpine.data('salesProof', function () {\\r\\n return {\\r\\n user: {\\r\\n name:'Someone in Aceh',\\r\\n order_date:'1 jam yang lalu',\\r\\n order:'baru saja bergabung'\\r\\n },\\r\\n show: false,\\r\\n init() {\\r\\n setInterval(async () => {\\r\\n await this.getUser();\\r\\n }, 10000);\\r\\n \\r\\n setInterval(async () => {\\r\\n this.show = false;\\r\\n }, 5000);\\r\\n \\r\\n },\\r\\n async getUser() {\\r\\n await window.axios.get('/ajax/sales-proof')\\r\\n .then(res => {\\r\\n if (res.data.success) {\\r\\n this.user = res.data.data;\\r\\n this.show = true;\\r\\n }\\r\\n })\\r\\n \\r\\n }\\r\\n }\\r\\n });\\r\\n\\n\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"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.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Semoga bermanfaat, dam salam koding selalu\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Catatan:\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Library terkait\"\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://laravel.com/\",\n children: \"Laravel\"\n })\n }), \"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://alpinejs.dev/start-here\",\n children: \"AlpineJS\"\n })\n }), \"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://axios-http.com/docs/intro\",\n children: \"Axios\"\n })\n }), \"\\n\"]\n })]\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n children: _jsx(_createMdxContent, props)\n })) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}}

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