add Add to cart button on product page

public/js/product.js

+function setAddToCardEventListener() {
+    document.querySelector('.js-btn-add-to-basket').addEventListener('click', function(e) {
+        const actionUrl = this.dataset.action;
+
+        axios.post(actionUrl)
+            .then(function (response) {
+                const cartAmountElem = document.querySelector('.amount-in-cart');
+                cartAmountElem.textContent = response.data;
+            })
+            .catch(function (error) {
+                console.log(error);
+                alert('Sorry, error, we are just learning how to code');
+            });
+    });
+}
+
+setAddToCardEventListener();

resources/views/product/product.blade.php

@@ -3,18 +3,23 @@
 @section('content')
         <section class="product-info">
             <div class="container">
-                <div>
-                    <img src="/img/{{$product->type}}.jpg" alt="{{$product->reference}}">
-                </div>
-                <p>{{$product->reference}}</p>
-                <p>{{$product->description_long}}</p>
-                <p>Price {{$product->price}} EUR</p>
                 <div>
                     <a {{--href="/product/{{ $product->id }}/edit"
                         href="{{ route('product.edit', $product) }}--}}
-                        href="{{ $product->editPath() }}"
+                       href="{{ $product->editPath() }}"
                     >Edit product</a>
                 </div>
+                <div>
+                    <img src="/img/{{$product->type}}.jpg" alt="{{$product->reference}}">
+                </div>
+                <h2>{{$product->reference}}</h2>
+                <p>{{$product->description_long}}</p>
+                <p class="text-danger font-weight-bold">Price {{$product->price}} EUR</p>
+
+                <button class="js-btn-add-to-basket btn btn-info text-white"
+                        data-action="{{ route('cart.addToCart', $product) }}"
+                >Add to basket</button>
+
 {{--                <form method="POST" action="{{ $product->path() }}">--}}
 {{--                    @csrf--}}
 {{--                    @method('DELETE')--}}
@@ -24,3 +29,7 @@
             </div>
         </section>
 @endsection
+
+@section('script')
+    <script src="/js/product.js" defer></script>
+@endsection