Integration of Frontend Code into Laravel Backend - Layout Issues | Laravel | Page 1

#

and this is another page called products.blade.php

                @foreach ($product->relatedProducts->take(3) as $item)
                <div class="col-lg-4 col-md-6 text-center">
                        <div class="single-product-item">
                            <div class="product-image">
                                <a href="{{ route('product.show', $item->id) }}"><img src="{{ asset($item->imgpath) }}" alt=""></a>
                            </div>
                            <h3>{{ $item->name }}</h3>
                            <p class="product-price"> {{ $item->price }}$ </p>
                            <a href="{{ route('cart') }}" class="cart-btn"><i class="fas fa-shopping-cart"></i> Add to Cart</a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <!-- end more products -->```

#

so the idea is in the shop.blade.php there are an items with name and price and image so when the user click on any item it will redirect him to the products.blade.php with more specific information about the item that he select it

#

the issue is when i type http://127.0.0.1:8000/products it gaves me all the products that in the shop.blade.php but when i select and item it looks like this http://127.0.0.1:8000/products/1

#

and also the output looks really bad

and for more inofrmation this is an img with the before the backend and what the page should look like

#

Before

#

after

#Integration of Frontend Code into Laravel Backend - Layout Issues