Infinite scrolling to reviews was added

Vilgefortzz · May 1, 2017 · be85757 · be85757
1 parent dd9f48f
commit be85757
Show file tree

Hide file tree

Showing 16 changed files with 167 additions and 76 deletions.
diff --git a/app/Http/Controllers/ProductController.php b/app/Http/Controllers/ProductController.php
@@ -9,18 +9,19 @@
 
 class ProductController extends Controller
 {
-    public function show(Product $product){
+    public function showReviews(Product $product){
 
-        // Get all reviews for this product
-        $reviews = $product->reviews;
+        // Get all reviews for this product and sort reviews by date from the newest one
+        $reviews = Review::where('product_id', $product->id)->orderBy('created_at', 'desc')->paginate(2);
 
         // Check if has user already given a review to this product
         if (Auth::check()){
+
             $isGiven = $reviews->contains('user_id', Auth::user()->id);
+
             return view('product_details', compact('product', 'isGiven', 'reviews'));
         }
 
         return view('product_details', compact('product', 'reviews'));
-
     }
 }
diff --git a/app/Http/Controllers/SubcategoryController.php b/app/Http/Controllers/SubcategoryController.php
@@ -13,7 +13,7 @@ public function showAllProducts(Subcategory $subcategory, Request $request){
 
         $categories = Category::all();
         $category = $subcategory->category;
-        $products = Product::where('subcategory_id', $subcategory->id)->paginate(30);
+        $products = Product::where('subcategory_id', $subcategory->id)->paginate(3);
 
         if ($request->ajax()) {
             return view('products.products_list', compact('products'))->render();

diff --git a/database/factories/ModelFactory.php b/database/factories/ModelFactory.php
@@ -47,3 +47,12 @@
         'price' => $faker->randomFloat(2, 150, 900)
     ];
 });
+
+$factory->define(App\Review::class, function (Faker\Generator $faker) {
+
+    return [
+        'product_id' => 1,
+        'user_id' => rand(1, 10),
+        'review' => $faker->text(500),
+    ];
+});
diff --git a/database/seeds/DatabaseSeeder.php b/database/seeds/DatabaseSeeder.php
@@ -15,5 +15,6 @@ public function run()
         $this->call(CategoriesTableSeeder::class);
         $this->call(SubcategoriesTableSeeder::class);
         $this->call(ProductsTableSeeder::class);
+        //$this->call(ReviewsTableSeeder::class);
     }
 }
diff --git a/database/seeds/ReviewsTableSeeder.php b/database/seeds/ReviewsTableSeeder.php
@@ -0,0 +1,17 @@
+<?php
+
+use App\Review;
+use Illuminate\Database\Seeder;
+
+class ReviewsTableSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        factory(Review::class, 40)->create();
+    }
+}
diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/js/app.js b/public/js/app.js
@@ -11279,6 +11279,7 @@ $(document).ready(function () {
     });
 
     $('#give_review_this_page').on('click', function () {
+
         if ($('#write_review').length != 0) {
             $('html, body').animate({
                 scrollTop: $('#write_review').offset().top - 170
@@ -11298,6 +11299,7 @@ $(document).ready(function () {
     });
 
     if (sessionStorage.length > 0) {
+
         if ($('#write_review').length != 0) {
             $('html, body').animate({
                 scrollTop: $('#write_review').offset().top - 170

diff --git a/public/js/jscroll/jquery.jscroll.min.js b/public/js/jscroll/jquery.jscroll.min.js
diff --git a/public/js/pagination_ajax.js → public/js/pagination_products_ajax.js b/public/js/pagination_ajax.js → public/js/pagination_products_ajax.js
@@ -50,6 +50,13 @@ function getProducts(url) {
 
             // Add listeners
 
+            // Again to animate when redirect to page with details
+
+            $('.give_review').on('click', function () {
+
+                sessionStorage.setItem('hash', 'write_review');
+            });
+
             // Again to paginate
 
             $('.pagination a').on('click', function (e) {
@@ -64,7 +71,7 @@ function getProducts(url) {
             $('.add_to_cart').on('click', function (e) {
                 e.preventDefault();
 
-                var url = $(this).attr("href");
+                var url = $(this).attr('href');
 
                 $.ajax({
                     type: 'POST',
@@ -93,7 +100,7 @@ function getProducts(url) {
             $('.remove_from_cart').on('click', function (e) {
                 e.preventDefault();
 
-                var url = $(this).attr("href");
+                var url = $(this).attr('href');
 
                 $.ajax({
                     type: 'DELETE',

diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
@@ -65,6 +65,7 @@ $(document).ready(function() {
     });
 
     $('#give_review_this_page').on('click', function() {
+
         if($('#write_review').length != 0) {
             $('html, body').animate({
                 scrollTop: $('#write_review').offset().top - 170
@@ -85,6 +86,7 @@ $(document).ready(function() {
     });
 
     if (sessionStorage.length > 0){
+
         if($('#write_review').length != 0) {
             $('html, body').animate({
                 scrollTop: $('#write_review').offset().top - 170

diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
@@ -317,8 +317,18 @@ body{
   text-align: center;
 }
 
-.pagination > li >a, .pagination>li>span {
+.pagination > li > a, .pagination > li > span {
   border: none;
   border-radius: 50%;
-  margin: 0 5px;
+  color: black;
+}
+
+.pagination > .active > a,
+.pagination > .active > a:focus,
+.pagination > .active > a:hover,
+.pagination > .active > span,
+.pagination > .active > span:focus,
+.pagination > .active > span:hover {
+  background-color: #b4b37a;
+  border-color: black;
 }
diff --git a/resources/views/product_details.blade.php b/resources/views/product_details.blade.php
@@ -2,6 +2,8 @@
 
 @section('content')
 
+    <input type="hidden" name="start_from" id="start_from" value="1">
+
     <div class="container container-fix">
         <div class="row">
             <div class="col-md-10 col-lg-offset-1">
@@ -71,7 +73,7 @@
                 {{--Header!!--}}
                 <h1 class="text-center" style="margin-bottom: 50px"><span class="glyphicon glyphicon-comment"></span><b>Reviews</b></h1>
 
-                <div id="reviews">
+                <div id="reviews_section">
                     {{--Autheniticated users can give reviews--}}
                     @if(Auth::check())
                         @if(!$isGiven)
@@ -121,31 +123,15 @@
 
                     <hr>
 
-                    {{-- All reviews connected with this product--}}
+                    <div id="reviews">
 
-                    @foreach($reviews as $review)
-                        <div class="row">
-                            <div class="col-sm-2">
-                                <div class="thumbnail">
-                                    <i>{{$review->user->name}}</i>
-                                </div>
-                            </div>
+                        {{--All reviews connected with this product--}}
+                        @include('reviews.reviews_list')
+
+                    </div>
 
-                            <div class="col-sm-8">
-                                <div class="panel panel-review panel-default">
-                                    <div class="panel-heading panel-heading-review">
-                                        <span class="glyphicon glyphicon-time"></span><span class="text-muted"><u><b>{{$review->created_at->toDateString()}}</b></u></span>
-                                    </div>
-                                    <div class="panel-body">
-                                        {{$review->review}}
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    @endforeach
                 </div>
             </div>
-
         </div>
     </div>
 
@@ -154,4 +140,21 @@
     <script src="{{ asset('js/add_to_cart_ajax.js') }}"></script>
     <script src="{{ asset('js/delete_from_cart_view_products_ajax.js') }}"></script>
 
+    {{-- jscroll --}}
+    <script src="{{ asset('js/jscroll/jquery.jscroll.min.js') }}"></script>
+
+    <script type="text/javascript">
+        $('ul.pagination').hide();
+
+        $('.infinite-scroll').jscroll({
+            autoTrigger: true,
+            padding: 0,
+            nextSelector: '.pagination li.active + li a',
+            contentSelector: 'div.infinite-scroll',
+            callback: function () {
+                $('ul.pagination').remove();
+            }
+        });
+    </script>
+
 @endsection
diff --git a/resources/views/products/products_list.blade.php b/resources/views/products/products_list.blade.php
@@ -1,53 +1,50 @@
 {{-- Pagination links --}}
 {{ $products->links() }}
 
-<div id="load" style="position: relative;">
-    @foreach($products as $product)
+@foreach($products as $product)
+    <div class="item col-xs-4 col-lg-4">
+        <div class="thumbnail">
+            <img class="group list-group-image" src="{{$product->image}}" width="200" height="200"/>
+            <div class="caption">
+                <h2 class="group inner list-group-item-heading">
+                    <b>
+                        {{$product->name}}
+                        <a href="{{ url('/products/'.$product->id) }}" style="font-size: 12px">
+                            <span class="glyphicon glyphicon-triangle-right"></span>See details
+                        </a>
+                    </b>
+                </h2>
 
-        <div class="item col-xs-4 col-lg-4">
-            <div class="thumbnail">
-                <img class="group list-group-image" src="/images/{{$product->image}}" width="200" height="200"/>
-                <div class="caption">
-                    <h2 class="group inner list-group-item-heading">
-                        <b>
-                            {{$product->name}}
-                            <a href="{{ url('/products/'.$product->id) }}" style="font-size: 12px">
-                                <span class="glyphicon glyphicon-triangle-right"></span>See details
-                            </a>
-                        </b>
-                    </h2>
+                <div class="row" style="margin-top: 50px">
+                    <div class="col-xs-12 col-md-4 group_div">
+                        <p><b>Buy now:</b></p>
+                        <p class="lead_sub"><b>{{$product->price}}$</b></p>
+                    </div>
+                    <div class="col-xs-12 col-md-6 group_div">
+                        <a id="add_{{$product->id}}" class="add_to_cart" href="{{ url('/cart/add/'.$product->id) }}">
+                            <div id="add_to_cart_btn{{$product->id}}">
+                                <span class="glyphicon glyphicon-shopping-cart"></span><b>Add to cart</b>
+                            </div>
+                        </a>
 
-                    <div class="row" style="margin-top: 50px">
-                        <div class="col-xs-12 col-md-4 group_div">
-                            <p><b>Buy now:</b></p>
-                            <p class="lead_sub"><b>{{$product->price}}$</b></p>
-                        </div>
-                        <div class="col-xs-12 col-md-6 group_div">
-                            <a id="add_{{$product->id}}" class="add_to_cart" href="{{ url('/cart/add/'.$product->id) }}">
-                                <div id="add_to_cart_btn{{$product->id}}">
-                                    <span class="glyphicon glyphicon-shopping-cart"></span><b>Add to cart</b>
-                                </div>
-                            </a>
+                        {{-- Hidden link - dynamically change--}}
+                        <a id="remove_{{$product->id}}" class="remove_from_cart" href="{{ url('/cart/delete/'.$product->id) }}" hidden>
+                            <div id="remove_from_cart_btn{{$product->id}}">
+                                <span class="glyphicon glyphicon-remove"></span><b>Remove</b>
+                            </div>
+                        </a>
 
-                            {{-- Hidden link - dynamically change--}}
-                            <a id="remove_{{$product->id}}" class="remove_from_cart" href="{{ url('/cart/delete/'.$product->id) }}" hidden>
-                                <div id="remove_from_cart_btn{{$product->id}}">
-                                    <span class="glyphicon glyphicon-remove"></span><b>Remove</b>
+                        {{--For autheniticated users--}}
+                        @if(Auth::check())
+                            <a class="give_review" href="{{ url('/products/'.$product->id) }}">
+                                <div id="give_review_btn">
+                                    <span class="glyphicon glyphicon-comment"></span><b>Give a review</b>
                                 </div>
                             </a>
-
-                            {{--For autheniticated users--}}
-                            @if(Auth::check())
-                                <a class="give_review" href="{{ url('/products/'.$product->id) }}">
-                                    <div id="give_review_btn">
-                                        <span class="glyphicon glyphicon-comment"></span><b>Give a review</b>
-                                    </div>
-                                </a>
-                            @endif
-                        </div>
+                        @endif
                     </div>
                 </div>
             </div>
         </div>
-    @endforeach
-</div>
+    </div>
+@endforeach
diff --git a/resources/views/reviews/reviews_list.blade.php b/resources/views/reviews/reviews_list.blade.php
@@ -0,0 +1,20 @@
+<div class="infinite-scroll">
+    @foreach($reviews as $review)
+        <div class="row">
+            <div class="col-sm-8">
+                <div class="panel panel-review panel-default">
+                    <div class="panel-heading panel-heading-review">
+                        <span class="glyphicon glyphicon-user"></span><span class="text-muted" style="margin-right: 10px"><u><b>{{$review->user->name}}</b></u></span>
+                        <span class="glyphicon glyphicon-time"></span><span class="text-muted"><u><b>{{$review->created_at->toDateString()}}</b></u></span>
+                    </div>
+                    <div class="panel-body">
+                        {{$review->review}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    @endforeach
+
+    {{ $reviews->links() }}
+
+</div>
diff --git a/resources/views/subcategories/subcategory_products.blade.php b/resources/views/subcategories/subcategory_products.blade.php
@@ -62,7 +62,7 @@
 
     <script src="{{ asset('js/add_to_cart_ajax.js') }}"></script>
     <script src="{{ asset('js/delete_from_cart_view_products_ajax.js') }}"></script>
-    <script src="{{ asset('js/pagination_ajax.js') }}"></script>
+    <script src="{{ asset('js/pagination_products_ajax.js') }}"></script>
 
     {{-- Change view (grid, list)--}}
     <script src="{{ asset('js/change_view.js') }}"></script>

diff --git a/routes/web.php b/routes/web.php
@@ -55,7 +55,7 @@
  */
 Route::group(['prefix' => 'products'], function () {
 
-    Route::get('/{product}', 'ProductController@show');
+    Route::get('/{product}', 'ProductController@showReviews');
 });
 
 Route::get('/subcategories/{subcategory}/products', 'SubcategoryController@showAllProducts');