How to make ajax pagination for products in a specific category?

  • 0
    I really need help, now I'm opening product categories via ajax and pagination of all products via ajax works, how can I fix the code so that pagination for products of this category works when I go to a category? Using this code, when you open a certain category of products and click on any page, pagination is triggered for ALL products, and not for products of the open category ... Thank you for any help ...
    Product controller:
    public function index(Request $request)
    {  
        $title_category = 'Продукты из всех категорий';
        $categories = Category::all();
    
        if (isset($request->cat) && ($request->cat > 0))
            $products = Product::with('category')->where("category_id", "=", "$request->cat")->orderBy('id', 'desc')->paginate(3);
        else
            $products = Product::orderBy('id', 'desc')->paginate(3);
        return view('index', compact('categories', 'products', 'title_category'));
    }
    public function ajax_pagination(Request $request)
    {
     if($request->ajax())
         {  
            $title_category = 'ajax_pagination';
            $categories = Category::all();
            $products = Product::orderBy('id', 'desc')->paginate(3);
            return view('ajaxCatAndProd_data', compact('categories','products','title_category'))->render();
         }
    }
    public function ajax_category(Request $request) {
         if($request->ajax())
         {  
            $categories = Category::all();
            $products = Product::with('category')->where("category_id", "=", "$request->cat")->orderBy('id', 'desc')->paginate(3);
            switch ($request->cat) {
                case 1:
                    $title_category = 'Аксессуары';
                    break;
                case 2:
                    $title_category = 'Портфолио';
                    break;
                case 3:
                    $title_category = 'Люди';
                    break;
                case 4:
                    $title_category = 'Спорт';
                    break;
                case 5:
                    $title_category = 'Бесплатные';
                    break;
                case 6:
                    $title_category = 'Природа';
                    break;
                case 7:
                    $title_category = 'Разное';
                    break;
                default:
                    $title_category = 'Все';
            }
    
            return view('ajaxCatAndProd_data', compact('products','categories', 'title_category'))->render();
            
         }
    }
    public function ajax_allcategory(Request $request) {
         if($request->ajax())
         {  
            $title_category = 'ajax_allcategory';
            $categories = Category::all();
            $products = Product::orderBy('id', 'desc')->paginate(3);
            return view('ajaxCatAndProd_data', compact('products','categories', 'title_category'))->render();
         }
    }

    View:
    @foreach($categories as $category)
            <ul class="category">
                <li class="widjet-item">
                    <a class="widget-cat widget-link" href="{{url("products")}}?cat={{$category->id}}">{{$category->title}}</a>
                </li>
            </ul>
            @endforeach
        </div>
    </div>
    
    <!-- right column products card -->
    <div class="col-md-9">
        {{ $products->appends(request()->input())->links() }}
        <div class="row">
            @foreach($products as $product)
            <div class="col-md-4 col-sm-6 col-12 d-flex">
                <div class="product-card d-flex">
                    <div class="prod_card__group">
                        <div class="prod-card__group-up">
                            <div class="gallerys">
                                <a href="{{ URL::to('/') }}/product_images/{{ $product->image }}"><img src="{{ URL::to('/') }}/product_images/{{ $product->image }}" alt="{{ $product->alt_attribute }}" class="img-fluid"/></a>
                            </div>
                            <div class="content-card">
                                <h3><a href="#" class="content-card_title">{{ $product->title }}</a></h3>
                                <p>Описание: {{ $product->preview_description }}</p>
                                <p>Цена: <strike>{{ $product->old_price }}</strike>|<strong>{{ $product->new_price }} руб.</strong></p>
                            </div>
                        </div>

    main.js ajax scripts
    // Аякс скрипт пагинации
     $(document).on('click', '.pagination a', function(event){
      event.preventDefault(); 
      var page = $(this).attr('href').split('page=')[1];
      ajax_pagination(page);
     });
    
     function ajax_pagination(page)
     {
      $.ajax({
       url:"/ajax_pagination?page="+page,
       success:function(data)
       {
        $('#table_data').html(data);
       }
      });
     }
    
    // Аякс скрипт для категорий
     $(document).on('click', '.category a', function(event){
      event.preventDefault(); 
      var cat = $(this).attr('href').split('cat=')[1];
      ajax_category(cat);
     });
    
     function ajax_category(cat)
     {
      $.ajax({
       url:"/ajax_category?cat="+cat,
       success:function(data)
       {
        $('#table_data').html(data);
       }
      });
     }
    JavaScript Anonymous, Sep 17, 2020

  • 1 Answers
  • 0
    so pass one more parameter to the request, with a code, id or category name (xs by what you define it there) and use this parameter in the selection of products
    Elliot Small

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!