Блог

Я уже показал все продукты, и теперь я хочу показать продукты, связанные с категорией. В моем портфолио у меня есть список категорий, если я нажму на эту категорию, я хочу увидеть товары, связанные с этой категорией. Я только изучаю laravel, может кто-нибудь мне помочь..

Контроллер:

 public function index($slug)
{
        $category_id = ProductCategory::where('slug', $slug)->first()->id;
    
        $data = [
    
            'productcategory' => ProductCategory::with('product')->where('parent_id', $category_id)->get(),
    
        ];
    
        return view('wallpapers', $data);
    }
    
    public function store(Request $request)
    {
        $products = Product::with('productColorGallary')->where('status', 1)->get();
       
        $data = [
 
            'product' => $products
   
        ];
    
        return response()->json($data, 200);
    }
  

Модель продукта:

 class Product extends Model
{

    protected $table = "products";
    protected $guarded = ['id'];

    public function productColorGallary()
    {
        return $this->hasOne('AppProductColorGallary', 'product_id', 'id');
    }

    public function productCategory()
    {
        return $this->belongsToMany('AppProductCategory', 'product_category', 'product_id', 'mf_product_category_id');
    }


}
  

Модель категории продукта:

 class ProductCategory extends Model
{
    protected $table = "mf_product_categories";
    protected $guarded = ['id'];
    public function product()
    {
        return $this->belongsToMany('AppProduct', 'product_category', 'mf_product_category_id', 'product_id');
    }
}
  

Разметка для просмотра HTML:

 <ul class='visible-links nav nav-tabs' role="tablist">
      @foreach($productcategory   as   $productcategories)
      <li >
        <a class="tab-a active-a" data-id="tab1" data-toggle="tab" id="productcategory" href="{{$productcategories->id}}" role="tab" href="#1a" data-toggle="tab">{{$productcategories->name}}
        </a>
      </li>
      @endforeach
    </ul>
    <ul class='hidden-links hidden'>
    </ul>
  </nav>
  <div class="tab-content">
    <div  class="tab tab-active" data-id="tab1">
      <div class="row" id="product">

      </div>
    </div>
    <!--end of tab one-->
  

Скрипт jQuery:

 $("#productcategory").click(()=>{

let url = "{{route('products.store')}}";
let path = '{{config('wall_master_furishing.file_url')}}';
axios.get(url, {
params:{
    productcategory: $("#productcategory").val(),
}
}).then((res)=>{
let product =res.data.product;
// console.log(product);
product.forEach(element => {
$('#product').append(
`
<div class="col-md-4 col-sm-6 col-6">
  <div class="wallprodCard">
    <div class="prodcardImage">
      <img src="${path}${element.product_color_gallary.featured_image}" alt="">
      <a class="prodcardFancy" href="${path}${element.product_color_gallary.featured_image}" data-fancybox="images" data-caption="Flooring">
        <i class="fa fa-search-plus">
        </i>
      </a>
    </div>
    <div class="prodcardDescp">
      <a href="{{url('')}}/wallpaper-details">
        <h4 class="prodcardtitle">${element.name}
        </h4>
      </a>
      <p class="text">${element.description}
      </p>
    </div>
  </div>
</div>
`);
});

});