首页 > 解决方案 > 尝试在前端 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访问网页

我需要为第一个按钮类别设置默认服务视图。

抱歉,如果我的问题很愚蠢或解决方案很简单,但我不知道该怎么做!

标签: phplaravel

解决方案


您的错误是您永远不会遍历该类别的服务。

您检查是否有任何服务,但您永远不会遍历它们。所以,在@if你应该这样做。

@foreach ($categories as $category)
    @if($category->services->count() > 0)
        @foreach($category->services as $service)
         // your code
        @endforeach
    @endif
@endforeach

推荐阅读