0

Всем привет. Делаю учебный проект на Laravel, опыта пока немного, нужен совет с решением задачи.

У меня есть вью categories:

@section('content')
<section class="section-category">
  <div class="container-lg">
    <div class="row">
      @foreach($categories as $category)
        <div class="col-lg-2 col-md-4 col-sm-6">
            <a href="/{{ $category->url }}" class="btn btn-lg btn-success catbtn" type="button">
              <img class="catbtnimg" src="/img/categories/{{ $category->img }}">
            </a>
            <h6 class="text-center text-success">{{ $category->name }}</h6>
        </div>
      @endforeach
    </div>
  </div>
</section>
<section class="section">
  @foreach($categories as $products)
  <div class="container">
      <div class="row">
        @foreach($products->products as $item)
        <div class="col-lg-3 col-md-3 col-sm-6 col-6">
          <div class="card mb-5">
            <img class="card-img-top" src="/img/products/{{ $item->cardImage->path }}" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title  text-center">{{ $item->name }}</h5>
              <div class="prch"><span class="card-text">{{ $item->price }}</span><span class="card-text"><i class="{{ $item->is_available_icon }}"></i>{{ $item->is_available_text }}</span></div><br>
              <div class="prch second">
              <span><i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i></span>
              <span class="card-text feedback">10 отзывов</span>
              </div>
            </div><!--end card-body-->
            <div class="card-footer"></div>
            <div class="text-center"><i class="fa fa-handshake"></i><span class="reg">Оформило 10 человек</span><br>
            <a href="#" class="btn btn-success mt-2 mb-1">Оформить сейчас!</a>
            </div>
          </div><!--end card-->
        </div>
        @endforeach
      </div><!--end row-->
  </div><!--end container-->
  @endforeach
  <div class="jumbotron homejumb">
    <div class="container">
        <h1 class="text-center mt-3 mb-5">Почему мы?</h1>
        <div class="mainadv">
              <div class="mainadv-item"><img class="adv" src="/img/svg/gifts-solid.svg">
              <h5 class="mt-3">Большой ассортимент</h5></div>
              <div class="mainadv-item"><img class="adv" src="/img/svg/file-contract-solid.svg">
              <h5 class="mt-3">Выгодные условия</h5></div>
              <div class="mainadv-item"><img class="adv" src="/img/svg/medal-solid.svg">
              <h5 class="mt-3">Высокое качество</h5></div>
        </div><!--end advblock-->
      </div><!--end container-->
  </div><!--end jumbotron-->
</section>
@endsection

Так же есть модели Product:

class Product extends Model
{
  public function productImage()
  {
      return $this->hasMany(ProductImage::class);
  }
  public function cardImage()
  {
      return $this->hasOne(ProductImage::class)->where('position', 1);
  }
  public function category()
  {
      return $this->belongsTo(Category::class);
  }
    use HasFactory;
}

и Category:

class Category extends Model
{
  public function products()
  {
      return $this->hasMany(Product::class);
  }
}

Как сделать так, чтобы при нажатии на Категорию, выходил товар принадлежащий только этой категории, а изначально его видно не было.

Пока все выглядит так :

введите сюда описание изображения

Добавил всего есть 4 записи в БД, их как раз и видно на картинке, они должны будут отобразиться, только когда пользователь нажмет на Крупная бытовая техника и т.д.

Заранее спасибо!

2 ответа 2

1

Регистрируйте отдельный роут для AJAX запроса, в который будут передавать id категории, а получать в ответе товары, которые принадлежат этой категории. Ответом будет view с товарами, дальше просто на фронте её вставляете в нужное место через elem.innerHTML = response (elem - родительский элемент для товаров, response - содержимое AJAX ответа).

2
  • Интересный вариант, спасибо, но все таки как то через модели и отношения можно это сделать, наверное. На ютубе видел как один человек делал через отношения, но у него немного попроще проект, у него отдельная вью для категорий и отдельная для товаров относящихся к этим категориям. Я немного сложноватый способ взял, где товар и категория на одной вью (подсмотрел на одном инет-магазе и понравилось, хотелось бы научиться сделать так же, отступать и делать проще вариант что то не хочется)
    – Hi_TecH
    29 окт 2020 в 9:08
  • @Hi_TecH так у вас и будет через отношения, получите категорию а из неё отобразите продукты
    – Walfter
    29 окт 2020 в 9:20
1

Ещё как вариант без ajax просто сделать один общий шаблон, и отдельный роутинг

@section('content')
<section class="section-category">
  <div class="container-lg">
    <div class="row">
      @foreach($categories as $category)
        <div class="col-lg-2 col-md-4 col-sm-6">
            <a href="{{ route('categories.index', $category) }}" class="btn btn-lg btn-success catbtn" type="button">
              <img class="catbtnimg" src="/img/categories/{{ $category->img }}">
            </a>
            <h6 class="text-center text-success">{{ $category->name }}</h6>
        </div>
      @endforeach
    </div>
  </div>
</section>
<section class="section">
  <div class="container">
      <div class="row">
        @foreach($products as $item)
        <div class="col-lg-3 col-md-3 col-sm-6 col-6">
          <div class="card mb-5">
            <img class="card-img-top" src="/img/products/{{ $item->cardImage->path }}" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title  text-center">{{ $item->category->name }}</h5>
              <div class="prch"><span class="card-text">{{ $item->price }}</span><span class="card-text"><i class="{{ $item->is_available_icon }}"></i>{{ $item->is_available_text }}</span></div><br>
              <div class="prch second">
              <span><i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i></span>
              <span class="card-text feedback">10 отзывов</span>
              </div>
            </div><!--end card-body-->
            <div class="card-footer"></div>
            <div class="text-center"><i class="fa fa-handshake"></i><span class="reg">Оформило 10 человек</span><br>
            <a href="#" class="btn btn-success mt-2 mb-1">Оформить сейчас!</a>
            </div>
          </div><!--end card-->
        </div>
        @endforeach
      </div><!--end row-->
  </div><!--end container-->
  <div class="jumbotron homejumb">
    <div class="container">
        <h1 class="text-center mt-3 mb-5">Почему мы?</h1>
        <div class="mainadv">
              <div class="mainadv-item"><img class="adv" src="/img/svg/gifts-solid.svg">
              <h5 class="mt-3">Большой ассортимент</h5></div>
              <div class="mainadv-item"><img class="adv" src="/img/svg/file-contract-solid.svg">
              <h5 class="mt-3">Выгодные условия</h5></div>
              <div class="mainadv-item"><img class="adv" src="/img/svg/medal-solid.svg">
              <h5 class="mt-3">Высокое качество</h5></div>
        </div><!--end advblock-->
      </div><!--end container-->
  </div><!--end jumbotron-->
</section>
@endsection

И примерно такой метод в контроллере

public function index(Category $category = null)
{
    $products = !is_null($category) ? $category->products : Product::all();
    $categories = Category::all();
    return view('template', compact('categories', 'products'));
}

Ну и роут соответствующий

Route::get('/category/{category?}', [CategoryController::class, 'index'])->name('categories.index');

P.S.: Что бы у вас категория искалась по другому полю добавьте в модель категории

public function getRouteKeyName()
{
    return 'url';
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.