I can use the if statement to filter the data. Not show data according to condition if $users, $businesses and $user_psb two thing not equal to null show first condition data and else show second condition and all other not check.
Here Is My code
<!--begin::Progress-->
{{-- First Condition --}}
#if ($users != null && $businesses != null && $user_psb != null)
<div class="d-flex align-items-center w-200px w-sm-300px flex-column mt-3">
<div class="d-flex justify-content-between w-100 mt-auto mb-2">
<span class="fw-bold fs-6 text-gray-400">Profile Completion</span>
<span class="fw-bolder fs-6">100%</span>
</div>
<div class="h-5px mx-3 w-100 bg-light mb-3">
<div class="bg-success rounded h-5px" role="progressbar" style="width:100%;"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
{{-- Scond Condition --}}
#elseif($users != null && $user_psb != null)
<div class="d-flex align-items-center w-200px w-sm-300px flex-column mt-3">
<div class="d-flex justify-content-between w-100 mt-auto mb-2">
<span class="fw-bold fs-6 text-gray-400">Profile Completion</span>
<span class="fw-bolder fs-6">60%</span>
</div>
<div class="h-5px mx-3 w-100 bg-light mb-3">
<div class="bg-warning rounded h-5px" role="progressbar" style="width:60%;"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
{{-- Third Condition --}}
#elseif($users != null && $businesses != null)
<div class="d-flex align-items-center w-200px w-sm-300px flex-column mt-3">
<div class="d-flex justify-content-between w-100 mt-auto mb-2">
<span class="fw-bold fs-6 text-gray-400">Profile Completion</span>
<span class="fw-bolder fs-6">80%</span>
</div>
<div class="h-5px mx-3 w-100 bg-light mb-3">
<div class="bg-primary rounded h-5px" role="progressbar" style="width:80%;"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
#else
<div class="d-flex align-items-center w-200px w-sm-300px flex-column mt-3">
<div class="d-flex justify-content-between w-100 mt-auto mb-2">
<span class="fw-bold fs-6 text-gray-400">Profile Completion</span>
<span class="fw-bolder fs-6">40%</span>
</div>
<div class="h-5px mx-3 w-100 bg-light mb-3">
<div class="bg-danger rounded h-5px" role="progressbar" style="width: 40%;"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
#endif
<!--end::Progress-->
How can I show data according to my condition?
You can use this :
#if($users != null)
#if($businesses != null && $user_psb != null)
// write code snippets
#elseif($user_psb != null)
// write code snippets
#elseif($businesses != null)
// write code snippets
#else
// write code snippets
#endif
#endif
Related
Good afternoon, how to display post data by category in laravel livewire? here I want to try to display post by category data in the following way but it still doesn't work:
web.php
Route::get('category/{category:slug}',[FrontController::class, 'category'])->name('category');
FrontController.php
public $search;
public function category(Category $category)
{
$categories = Category::all();
$general = General::find(1);
$locale = App::currentLocale();
$category_id = $category->id;
$search = request("search");
$posts = Post::where([
['lang',$locale],
['category_id',$category_id],
['status','PUBLISH'],
])->latest()->paginate(12);
if ($this->search !== null) {
$posts = Post::where([
['title','like', '%' . $this->search . '%'],
['lang',$locale],
['category_id',$category_id],
['status','PUBLISH'],
])->latest()->paginate(12);
}
// dd($category_id);
$tags = Tag::all();
$top = Post::where('status','PUBLISH')->orderBy('views','desc')->limit(5)->get();
return view ('front.category',compact('categories','category_id','general','locale','posts','tags','top'));
}
category.blade.php
#extends('layouts.front')
#section('content')
<main id="main">
<section class="post-category">
<div class="container-fluid">
<div class="row mt-3">
<div class="col-lg-3 col-md-12 col-sm-12 d-none d-lg-block">
<div class="sticky-top" style="top: 90px;">
<div class="card mb-3 rounded-3">
<div class="card-body">
<a href="#" target="_blank" rel="noreferrer">
<img src="{{ asset('front/img/ads.png') }}" alt="..." height="300" width="279" class="card-img-top" />
</a>
</div>
</div>
<div class="d-flex flex-column mb-3 bg-light shadow bg-body rounded">
<div class="card-header bg-primary bg-gradient text-white fw-bold fs-5">
{{ __('sentence.category') }}
</div>
<ul class="list-group list-group-flush">
#foreach ($categories as $category)
<li class="list-group-item d-flex justify-content-between align-items-center">
{{ $category->name }}
</li>
#endforeach
</ul>
</div>
<div class="d-flex flex-column bg-light bg-body shadow-lg rounded-3">
<div class="card-header bg-primary bg-gradient text-white fw-bold fs-5">
Tags
</div>
<div class="p-3 overflow-auto" style="max-height: 42vh">
<div class="nav tag-cloud">
#foreach ($tags as $tag)
{{ $tag->name }}
#endforeach
</div>
</div>
</div>
</div>
</div>
<input type="hidden" name="category_id" value="{{ $category_id }}">
<livewire:category-index>
<div class="col-lg-3 col-md-12 col-sm-12">
<div class="sticky-top" style="top: 90px;">
<div class="card rounded-3 shadow-lg mb-3">
<div class="card-body">
<img src="{{ asset('front/img/ads1.png') }}" height="117" width="279" class="card-img-top" alt="...">
</div>
</div>
<div class="bg-light shadow bg-body rounded-3 mb-3">
<div class="card-header bg-primary bg-gradient text-white fw-bold fs-5">
{{ __('sentence.top_article') }}
</div>
<ul class="list-group list-group-flush mb-2">
#foreach ($top as $top)
<li class="list-group-item">
{{ $top->title }}
<div class="d-flex justify-content-between mt-3">
<small class="text-muted">{{ Carbon\Carbon::parse($top->created_at)->format("d F, Y") }}</small>
<small class="text-muted">{{ $top->views }} views </small>
</div>
</li>
#endforeach
</ul>
</div>
<div class="d-flex flex-column mb-3 bg-light shadow bg-body rounded d-lg-none d-xl-none">
<div class="card-header bg-primary bg-gradient text-white fw-bold fs-5">
{{ __('sentence.category') }}
</div>
<ul class="list-group list-group-flush">
#foreach ($categories as $category)
<li class="list-group-item d-flex justify-content-between align-items-center">
{{ $category->name }}
</li>
#endforeach
</ul>
</div>
<div class="d-flex flex-column bg-light bg-body shadow-lg rounded-3 d-lg-none d-xl-none">
<div class="card-header bg-primary bg-gradient text-white fw-bold fs-5">
{{ __('sentence.tag') }}
</div>
<div class="p-3 overflow-auto" style="max-height: 42vh">
<div class="nav tag-cloud">
#foreach ($tags as $tag)
{{ $tag->name }}
#endforeach
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
#endsection
#push('scripts')
#livewireScripts
<script type="text/javascript">
window.onscroll = function (ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
window.livewire.emit('category-index');
}
};
</script>
<script>
document.getElementById('load-more').onclick = function() {
window.livewire.emit('category-index');
};
</script>
#endpush
livewire\CategoryIndex.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\{Category, Post};
use Illuminate\Support\Facades\App;
class CategoryIndex extends Component
{
public $limitPerPage = 10;
public $search;
protected $listeners = [
'category-index' => 'CategoryIndex'
];
protected $updatesQueryString = [
['search' => ['except' => '']],
];
public function CategoryIndex()
{
$this->limitPerPage = $this->limitPerPage + 6;
}
public function render()
{
$locale = App::currentLocale();
$category_id = request('category_id');
$posts = Post::where([
['lang',$locale],
['category_id',$category_id],
['status','PUBLISH'],
])->latest()->paginate($this->limitPerPage);
if ($this->search !== null) {
$posts = Post::where([
['title','like', '%' . $this->search . '%'],
['lang',$locale],
['category_id',$category_id],
['status','PUBLISH'],
])->latest()->paginate($this->limitPerPage);
}
$this->emit('postStore');
dd($category_id);
return view('livewire.category-index', ['posts' => $posts]);
}
}
livewire\category-index.blade.php
<div class="col-lg-6 col-md-12 col-sm-12">
<div id="section-title" class="section-title p-1 pt-3">
<h2 class="text-center fw-bold">{{ trans('sentence.recent_posts')}}</h2>
</div>
<div class="form-group has-search mb-3">
<span class="bi bi-search form-control-feedback"></span>
<input type="text" wire:model="search" class="form-control" placeholder="{{ __('sentence.search_form') }}">
</div>
#foreach ($posts as $data)
<div class="card bg-light shadow bg-body rounded-3 mb-2">
<div class="card-header bg-primary text-white d-flex justify-content-between">
<small>by {{$data->admin->name}}</small>
<small>{{ Carbon\Carbon::parse($data->created_at)->format("d F, Y") }}</small>
</div>
<div class="card-body">
<h2 class="card-title">
{{ $data->title }}
</h2>
<div class="card-footer bg-body d-flex justify-content-between align-items-center pb-0 px-0">
<div class="d-flex my-1">
#foreach ($data->tags as $tag)
{{ $tag->name }}
#endforeach
</div>
</div>
</div>
</div>
#endforeach
#if ($posts->count() == 0)
<div class="alert alert-danger" role="alert">
Data not found!
</div>
#endif
#if($posts->count() >= 10)
<div class="text-center d-md-none d-lg-none d-xl-none">
<button id="load-more" class="btn btn-primary my-3">
Load More
</button>
</div>
#endif
</div>
If I add($category_id); in FrontController.php the id of that category appears, but if I try to dd in livewire\CategoryIndex.php it shows null. what is the correct way to display posts by category? thank you
Livewire components work slightly differently to blade views, they do not automatically inherit variables from their parents.
What you need to do is pass your category_id to the Livewire component.
class CategoryIndex extends Component
{
public $categoryId;
}
<livewire:category-index :categoryId="$category_id" />
I am a total amateur on Laravel and I am trying to find a way to display by default a specific category with it's services instead of showing ALL the services for alla the categories that exist.
<section class="categories sp-80-50 bg-dull">
<div class="container">
<div class="row">
<div class="col-12">
<div class="all-title">
<p>#lang('front.categoriesTitle')</p>
<h3 class="sec-title">
#lang('front.categories')
</h3>
</div>
</div>
</div>
<div id="categories" class="row justify-content-center">
#foreach ($categories as $category)
#if($category->services->count() > 0)
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 mb-30 categories-list" data-category-id="{{ $category->id }}">
<div class="ctg-item" style="background-image:url('{{ $category->category_image_url }}')">
<a href="javascript:;">
<div class="icon-box">
<i class="flaticon-fork"></i>
</div>
<div class="content-box">
<h5 class="mb-0">
{{ ucwords($category->name) }}
</h5>
</div>
</a>
</div>
</div>
#endif
#endforeach
</div>
</div>
</section> */
<section class="listings sp-80 bg-w">
<div class="container">
<div class="row">
<div class="col-12">
<div class="all-title">
<p> #lang('front.servicesTitle') </p>
<h3 class="sec-title">
#lang('front.services')
</h3>
</div>
</div>
</div>
<div id="services" class="row">
#foreach ($services as $service)
<div class="col-lg-3 col-md-6 col-12 mb-30 services-list service-category-{{ $service->category_id }}">
<div class="listing-item">
<div class="img-holder" style="background-image: url('{{ $service->service_image_url }}')">
<div class="category-name">
<i class="flaticon-fork mr-1"></i>{{ ucwords($service->category->name) }}
</div>
</div>``
and
var categories = `
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 mb-30 categories-list">
</div>`;
response.categories.forEach(category => {
if (category.services.length > 0) {
var url = category.category_image_url;
categories += `
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-4 col-12 mb-30 categories-list" data-category-id="${category.id}">
<div class="ctg-item" style="background-image:url('${url}')">
<a href="javascript:;">
<div class="icon-box">
<i class="flaticon-fork"></i>
</div>
<div class="content-box">
<h5 class="mb-0">
${category.name}
</h5>
</div>
</a>
</div>
</div>`
}
});
$('#categories').html(categories);
var services = '';
if (response.services.length > 0) {
response.services.forEach(service => {
services += `
<div class="col-lg-3 col-md-6 col-12 mb-30 services-list service-category-${service.category_id}">
<div class="listing-item">
<div class="img-holder" style="background-image: url('${ service.service_image_url }')">
<div class="category-name">
<i class="flaticon-fork mr-1"></i>${service.category.name}
</div>
<div class="time-remaining">
<i class="fa fa-clock-o mr-2"></i>
<span>έως ${service.time} ${makeSingular(service.time, service.time_type)}</span>
</div>
</div>
You can access the webpage at https://click-away.store
I need to set the default Services view for the 1st Button Category.
Sorry if my question is silly or the solution is simple but I couldn't find out what to do!
Your error is that you never loop over the category's services.
You check if there are any services, but you never loop over them. So, within the #if you should do that.
#foreach ($categories as $category)
#if($category->services->count() > 0)
#foreach($category->services as $service)
// your code
#endforeach
#endif
#endforeach
Page Controller
$Sport_Post = \App\Post::All()->Where('category_id','=',3)->first();
$Sport_Posts = \App\Post::All()->Where('category_id','=',3)->skip(1);
return view('welcome', compact('Sport_Post','Sport_Posts'));
Code of page
#forelse($Sport_Post as $post)
<div id="content-number-1" class="col-12 col-md-8 col-lg-8 home-post1 content-number-1">
<div class=""><img class="content-one-img content-img-chapter" src="{{$post->image}}"></div>
<div class="content-text-img p-3"><p><a class="m-0 underImage aTagsHover" style="font-size: 20px" href="/inside/{{$post->id}}">{{$post->title}}</a><br><span class="date-font"><i class="fa fa-clock-o" aria-hidden="true"></i>{{$post->created_at}}</span><span class="underBusiness"><br>{{$post->short_desc}}</span></p></div>
</div>
#empty
<div id="content-number-1" class="col-12 col-md-8 col-lg-8 home-post1 content-number-1">
<div class="content-one-img content-img-chapter"></div>
<div class="content-text-img p-3"><p><a class="m-0 underImage aTagsHover" style="font-size: 20px" href="#">No post</a><br><span class="date-font"><i class="fa fa-clock-o" aria-hidden="true"></i>No time</span><span class="underBusiness"><br>No post</span></p></div>
</div>
#endforelse
The error starts in src="{{$post->image}}">; What's wrong ? How to fix it
modify your code like below
in controller
$Sport_Post = \App\Post::Where('category_id','=',3)->first();
in blade file no need of for loop because $Sport_Post is a single object not a collection so modify blade code as below:
#if(isset($Sport_Post))
<div id="content-number-1" class="col-12 col-md-8 col-lg-8 home-post1 content-number-1">
<div class=""><img class="content-one-img content-img-chapter" src="{{$Sport_Post->image}}"></div>
<div class="content-text-img p-3"><p><a class="m-0 underImage aTagsHover" style="font-size: 20px" href="/inside/{{$Sport_Post->id}}">{{$Sport_Post->title}}</a><br><span class="date-font"><i class="fa fa-clock-o" aria-hidden="true"></i>{{$Sport_Post->created_at}}</span><span class="underBusiness"><br>{{$Sport_Post->short_desc}}</span></p></div>
</div>
#else
<div id="content-number-1" class="col-12 col-md-8 col-lg-8 home-post1 content-number-1">
<div class="content-one-img content-img-chapter"></div>
<div class="content-text-img p-3"><p><a class="m-0 underImage aTagsHover" style="font-size: 20px" href="#">No post</a><br><span class="date-font"><i class="fa fa-clock-o" aria-hidden="true"></i>No time</span><span class="underBusiness"><br>No post</span></p></div>
</div>
#endif
There is no need of All() change your code with following
$Sport_Post = \App\Post::Where('category_id','=',3)->first();
This query will fetch a single record from the database so you don't need for each loop.
now if you still getting the error Trying to get property of non-object
then convert the $Sport_Post variable to object or try to access the value as array
The VSCode set an erro in a HTML line with PHP code:
style="width: <?php echo $percent;?>%"
The erro is:
semi-colon expected
Because %" is not recognize.
The complete code:
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-info shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">Progress</div>
<div class="row no-gutters align-items-center">
<div class="col-auto">
<div class="h5 mb-0 mr-3 font-weight-bold text-gray-800"><?php echo $percent;?>%</div>
</div>
<div class="col">
<div class="progress progress-sm mr-2">
<div class="progress-bar bg-info" role="progressbar" style="width: <?php echo $percent;?>%" aria-valuenow="<?php echo $percent;?>" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="col-auto">
<i class="fas fa-tasks fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
I don't see any declaration of the value of $percentage.
You don't need to put ; when calling the php variables inside html tag.
sample:
$percentage = 50;
<p><? echo $percentage ?> </p>
You can add quotes to isolate the 'value' of width :
style="width: '<?php echo $percent;?>%'"
Or like said in you error message, add a semi-colon inside style (but outside php, just after the %) :
style="width: <?php echo $percent ?>%;"
I am using Laravel 5.8 and in my controller I am showing 4 elements with paginate():
public function index()
{
$proyects = Proyect::latest()->paginate(4);
return view('proyect.index', compact('proyects'));
}
In the view the 4 elements are in a single row but I would like to show 2 elements for each row.
<div class="row">
<div class="col-10 col-lg-12 col-md-6">
<div class="card-deck">
#forelse($proyects as $proyect)
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ $proyect->title }}</h5>
<h6 class="card-subtitle mb-2 text-muted">
{{ $proyect->descripcion }}</h6>
<p class="card-text">You can use the cap image as an
overlay for the body</p>
<a href="{{ route('proyect.show', $proyect) }}"
class="card-link">Ver mas</a>
</div>
<div class="card-footer">
<small class="text-muted">
{{ $proyect->created_at->diffForHumans() }}</small>
</div>
</div>
#empty
<li> Empty </li>
#endforelse
</div>
</div>
How to show 2 items per row instead of all items in a row?
public function index()
{
$proyects = Proyect::latest()->paginate(10);
return view('proyect.index', compact('proyects'));
}
array_chunk is a php function ca splice your array.
#forelse(array_chunk($proyects->all(),2) as $rows)
<div class="row">
#foreach($rows as $proyect)
<div class="col-10 col-lg-12 col-md-6">
<div class="card-deck">
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ $proyect->title }}</h5>
<h6 class="card-subtitle mb-2 text-muted">{{ $proyect->descripcion }}</h6>
<p class="card-text">You can use the cap image as overlay for the body</p>
Ver mas
</div>
<div class="card-footer">
<small class="text-muted">{{ $proyect->created_at->diffForHumans() }}</small>
</div>
</div>
</div>
</div>
#endforeach
</div>
#empty
<div>Empty ...</div>
#endforelse
May be this is your solution:
<div class="row">
#forelse($proyects as $proyect)
<div class="col-6 col-lg-6 col-md-6">
<div class="card-deck">
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ $proyect->title }}</h5>
<h6 class="card-subtitle mb-2 text-muted">
{{ $proyect->descripcion }}</h6>
<p class="card-text">You can use the cap image as an
overlay for the body</p>
<a href="{{ route('proyect.show', $proyect) }}"
class="card-link">Ver mas</a>
</div>
<div class="card-footer">
<small class="text-muted">
{{ $proyect->created_at->diffForHumans() }}</small>
</div>
</div>
#empty
<li> Empty </li>
</div>
#endforelse
</div>