Dostlar Merhaba, filament admin panelin de bir sepet oluşturmak isterseniz bunu normalde sağlamıyorlar ama custom page ile bunu yapabiliyorsunuz
bir kaç püf nokta vereyim belki ileride işinize yarar
Öncelikle bir custom page oluşturuyoruz
php artisan make:filament-page SortUsers --resource=UserResource --type=custom
Bu oluşturduğunuz Normal menüden türetiliyor bilginiz olsun. Resource'u kaynak verebilirsiniz
Daha sonra bu resource için de ki getPages kısmına sepetinizin linkini ekleyin
public static function getPages(): array
{
return [
'index' => Pages\ListCompanyCreates::route('/'),
'create' => Pages\CreateCompanyCreate::route('/create'),
'edit' => Pages\EditCompanyCreate::route('/{record}/edit'),
'sort' => Pages\CompanyRes::route('/basket'),
];
}
Resource view filament altında bir blade dosyası oluşacak onun içine de dilediğiniz gibi sepetinizi oluşturabilir normal controller'dan da ödeme işlemlerinizi gerçekleştirebilirsiniz
Sepet html tasarımım benim
<x-filament-panels::page>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
.payment-info {
background: blue;
padding: 10px;
border-radius: 6px;
color: #fff;
font-weight: bold;
}
.product-details {
padding: 10px;
}
body {
background: #eee;
}
.cart {
background: #fff;
}
.p-about {
font-size: 12px;
}
.table-shadow {
-webkit-box-shadow: 5px 5px 15px -2px rgba(0,0,0,0.42);
box-shadow: 5px 5px 15px -2px rgba(0,0,0,0.42);
}
.type {
font-weight: 400;
font-size: 10px;
}
label.radio {
cursor: pointer;
}
label.radio input {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
pointer-events: none;
}
label.radio span {
padding: 1px 12px;
border: 2px solid #ada9a9;
display: inline-block;
color: #8f37aa;
border-radius: 3px;
text-transform: uppercase;
font-size: 11px;
font-weight: 300;
}
label.radio input:checked + span {
border-color: #fff;
background-color: blue;
color: #fff;
}
.credit-inputs {
background: rgb(102,102,221);
color: #fff !important;
border-color: rgb(102,102,221);
}
.credit-inputs::placeholder {
color: #fff;
font-size: 13px;
}
.credit-card-label {
font-size: 9px;
font-weight: 300;
}
.form-control.credit-inputs:focus {
background: rgb(102,102,221);
border: rgb(102,102,221);
}
.line {
border-bottom: 1px solid rgb(102,102,221);
}
.information span {
font-size: 12px;
font-weight: 500;
}
.information {
margin-bottom: 5px;
}
.items {
-webkit-box-shadow: 5px 5px 4px -1px rgba(0,0,0,0.25);
box-shadow: 5px 5px 4px -1px rgba(0, 0, 0, 0.08);
}
.spec {
font-size: 11px;
}
body {
font-family: 'Varela Round', sans-serif;
}
.modal-confirm {
color: #636363;
width: 400px;
}
.modal-confirm .modal-content {
padding: 20px;
border-radius: 5px;
border: none;
text-align: center;
font-size: 14px;
}
.modal-confirm .modal-header {
border-bottom: none;
position: relative;
}
.modal-confirm h4 {
text-align: center;
font-size: 26px;
margin: 30px 0 -10px;
}
.modal-confirm .close {
position: absolute;
top: -5px;
right: -2px;
}
.modal-confirm .modal-body {
color: #999;
}
.modal-confirm .modal-footer {
border: none;
text-align: center;
border-radius: 5px;
font-size: 13px;
padding: 10px 15px 25px;
}
.modal-confirm .modal-footer a {
color: #999;
}
.modal-confirm .icon-box {
width: 80px;
height: 80px;
margin: 0 auto;
border-radius: 50%;
z-index: 9;
text-align: center;
border: 3px solid #f15e5e;
}
.modal-confirm .icon-box i {
color: #f15e5e;
font-size: 46px;
display: inline-block;
margin-top: 13px;
}
.modal-confirm .btn, .modal-confirm .btn:active {
color: #fff;
border-radius: 4px;
background: #60c7c1;
text-decoration: none;
transition: all 0.4s;
line-height: normal;
min-width: 120px;
border: none;
min-height: 40px;
border-radius: 3px;
margin: 0 5px;
}
.modal-confirm .btn-secondary {
background: #c1c1c1;
}
.modal-confirm .btn-secondary:hover, .modal-confirm .btn-secondary:focus {
background: #a8a8a8;
}
.modal-confirm .btn-danger {
background: #f15e5e;
}
.modal-confirm .btn-danger:hover, .modal-confirm .btn-danger:focus {
background: #ee3535;
}
.trigger-btn {
display: inline-block;
margin: 100px auto;
}
</style>
@auth
@php
$user = auth()->user();
$basketCount = $user->basket ? $user->basket()->count() : 0;
@endphp
@endauth
@auth
@php
$user = auth()->user();
$basketItems = $user->basket()->get();
$totalPrice = 0;
foreach ($basketItems as $item) {
$totalPrice += $item->price;
}
@endphp
@endauth
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-confirm">
<div class="modal-content">
<div class="modal-header flex-column">
<div class="icon-box">
<i class="material-icons"></i>
</div>
<h4 class="modal-title w-100">Emin misin?</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Sepeti gerçekten boşaltmak istiyor musunuz ?</p>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Iptal</button>
<button type="button" class="btn btn-danger">Sil</button>
</div>
</div>
</div>
</div>
<div class="container mt-5 p-3 rounded cart">
<div class="row no-gutters">
<div class="col-md-8">
<div class="product-details mr-2">
<div class="d-flex flex-row align-items-center"><i class="fa fa-long-arrow-left"></i><span class="ml-2">Continue Shopping</span></div>
<hr>
<h6 class="mb-0">Shopping cart</h6>
<div class="d-flex justify-content-between"><span>You have {{ $basketCount }} items in your cart</span>
<div class="d-flex flex-row align-items-center"><span class="text-black-50">Sort by:</span>
<div class="price ml-2"><span class="mr-1">price</span><i class="fa fa-angle-down"></i></div>
</div>
</div>
<div class="d-flex justify-content-between align-items-center mt-3 p-2 items rounded">
<div class="d-flex flex-row"><img class="rounded" src="https://assets.swappie.com/cdn-cgi/image/width=600,height=600,fit=contain,format=auto/swappie-iphone-11-pro-max-silver.png?v=46" width="40">
<div class="ml-2"><span class="font-weight-bold d-block">Iphone 11 pro</span><span class="spec">256GB, Navy Blue</span></div>
</div>
<div class="d-flex flex-row align-items-center"><span class="d-block">2</span><span class="d-block ml-5 font-weight-bold">{{ $totalPrice }} ₺ </span>
<a href="#myModal" class="trigger-btn" data-toggle="modal"> Ürün Sil</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="payment-info">
<div class="d-flex justify-content-between align-items-center"><span>Kart Detayları</span></div><span class="type d-block mt-3 mb-1">Kart Tipi</span><label class="radio"> <input type="radio" name="card" value="payment" checked> <span><img width="30" src="https://img.icons8.com/color/48/000000/mastercard.png"/></span> </label>
<label class="radio"> <input type="radio" name="card" value="payment"> <span><img width="30" src="https://img.icons8.com/officel/48/000000/visa.png"/></span> </label>
<div><label class="credit-card-label">Ad Soyad</label><input type="text" class="form-control credit-inputs" placeholder="Name"></div>
<div><label class="credit-card-label">Kart Numarası</label><input type="text" class="form-control credit-inputs" placeholder="0000 0000 0000 0000"></div>
<div class="row">
<div class="col-md-6"><label class="credit-card-label">Son Kullanma Tarihi</label><input type="text" class="form-control credit-inputs" placeholder="12/24"></div>
<div class="col-md-6"><label class="credit-card-label">CVV</label><input type="text" class="form-control credit-inputs" placeholder="342"></div>
</div>
<hr class="line">
<div class="d-flex justify-content-between information"><span>Subtotal</span><span>$3000.00</span></div>
<div class="d-flex justify-content-between information"><span>Shipping</span><span>$20.00</span></div>
<div class="d-flex justify-content-between information"><span>Total(Incl. taxes)</span><span>$3020.00</span></div><button class="btn btn-primary btn-block d-flex justify-content-between mt-3" type="button"><span>$3020.00</span><span>Ödeme Yap<i class="fa fa-long-arrow-right ml-1"></i></span></button></div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#confirmDeleteModal').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id');
$("#confirmDelete").attr("data-id", id);
});
$('#confirmDelete').on('click', function(){
var id = $(this).data('id');
// Burada silme işlemi için AJAX isteğini gönderebilirsiniz.
// Örneğin:
// $.ajax({
// url: '/products/delete/' + id,
// method: 'DELETE',
// success: function(response){
// // Silme başarılı olduysa yapılacak işlemler
// }
// });
// Bu örnekte sadece konsolda id'yi yazdırıyoruz
console.log("Ürün silindi, id: " + id);
$('#confirmDeleteModal').modal('hide');
});
});
</script>
</x-filament-panels::page>
Ek olarak menünün yanına da bunu koymak isteyebilirsiniz İsminizin yazdığı yere
Tasarım biraz değişti tabi de eski bir tasarımdan resim ekliyorum
https://i.hizliresim.com/o012v59.png
Sağ üst tarafa eklemeyi de göstereceğim version 3 için Providers->filament->AdminPanelProvider içerisinde ki $panel kısmına
->renderHook(
'panels::topbar.end',
fn () => view('customFooter'),
)
bu kısmı ekleyin. view kısmı da resource içinde ki view altına bu tırnak içinde ismini dilediğiniz şekilde değiştirip yazdığınız blade şablonunu koyabilirsiniz. onu da paylaşıyorum
Ek olarak hookları başka bir yere koymak isterseniz buradan ulaşabilirsiniz
https://filamentphp.com/docs/3.x/support/render-hooks
<style>
a.flex-container {
/* Bu stil sadece .flex-container sınıfına sahip olan <a> etiketleri için geçerli olacak */
padding: 2px !important;
position: relative !important;
}
a.flex-container .icon {
position: relative !important;
z-index: 1 !important;
width: 30px !important;
}
a.flex-container span {
display: block !important;
position: absolute !important;
width: 20px !important;
height: 20px !important;
line-height: 20px !important;
background-color: orange !important;
text-align: center !important;
overflow: hidden !important;
border-radius: 100px !important;
right: -4px !important;
bottom: -2px !important;
z-index: 2 !important;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<a href="/admin/company-creates/sort" class="flex-container">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 icon" style="height: 40px">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/>
</svg>
@auth
@php
$user = auth()->user();
$basketCount = $user->basket ? $user->basket()->count() : 0;
@endphp
<span>{{ $basketCount }}</span>
@endauth
</a>