php - 尝试在前端 Laravel 6 中设置默认类别视图
问题描述
我完全是 Laravel 的业余爱好者,我正在尝试找到一种方法来默认显示特定类别及其服务,而不是显示所有现有类别的所有服务。
<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>``
和
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>
您可以在https://click-away.store访问网页
我需要为第一个按钮类别设置默认服务视图。
抱歉,如果我的问题很愚蠢或解决方案很简单,但我不知道该怎么做!
解决方案
您的错误是您永远不会遍历该类别的服务。
您检查是否有任何服务,但您永远不会遍历它们。所以,在@if
你应该这样做。
@foreach ($categories as $category)
@if($category->services->count() > 0)
@foreach($category->services as $service)
// your code
@endforeach
@endif
@endforeach
推荐阅读
- angular - 如何应用样式属性角度自动完成
- python - 有什么方法可以将 dbfs(databricks)路径中的 csv 文件分配给 pyspark 中的变量?
- android - 从底部禁用背景视图
- android - 应用程序崩溃有时在 Fabrics java.lang.RuntimeException 中出现错误:无法恢复活动
- c - 将指针数组设置为 NULL 的标准方法是什么?
- typescript - 声明模块内的多个接口
- botframework - AdaptiveCard C#中的Botframework循环
- excel - 检查单词匹配的功能
- r - R Dismo包:maxent结果的测试AUC和评估()函数的差异
- excel - 从 Excel VBA 打开 PowerPoint