The Views: Create a card-like component to display a product.

Watch the video course on Creating a Buy & Sell website using Laravel 8.

Continuing the development from where we left in the last lesson, here we shall create the UI to display the individual products on the product list. We shall create a card-like UI where we shall display an image of the product, a title, a description, and the price of the product. When the user clicks on a product of the list we shall display the details on a new page.
Instead of using the raw CSS styles, we shall use the CSS framework named Tailwind CSS to style the elements of the pages. Laravel Breeze uses Tailwind CSS and as we have installed it to implement authentication, so Tailwind CSS is also installed and is ready to use. Verify that by taking a look at the webpack.mix.js file , require(‘tailwindcss’) has to be passed to this function postCss(), enclosed in an array. And here it is already being passed.

-The app.css file inside the resources/css directory too, contains the imports necessary for Tailwind to work.

Step 1: Now we have to add the link to our stylesheet to the page. Add this line to the head section of the page.
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
asset() is a helper function that generates the URL for the asset.

Step 2: And we also have to compile the CSS, for that run the command npm run dev on the terminal (ensure you are inside the project directory on the terminal ).

This compiles the Tailwind CSS written inside the app.css of the resources folder to pain CSS and keeps it inside the public folder.

Step 3: Make the background of the page a little gray. Now come back to products.blade.php, and let’s try to make the background of the page a little gray. But, how to change the background color of an HTML element using Tailwindcss? – We have to add a class. Now, which class? Let find out. – Go to Tailwindcss documentation https://tailwindcss.com/docs – Scroll down the left panel menu to find the Backgrounds section, and click on Background Color. Here you will find some predefined classes to control an element’s background color. Let’s copy bg-gray-50 and add it to the body of the page.

Step 4: Compile the styles. Now if you are expecting the changes to appear after reloading the page, then you are wrong?
– Whenever we make changes to the CSS we have to compile it again, so run npm run dev on the terminal. But wait! if you don’t want to keep running this command every time you change something, there is a better option for you
– run this command once instead npm run watch it will keep watching the relevant files for changes and automatically start the compilation process whenever it detects a change. Now reloading the page we’ll notice that the background color changes.

Step 5: Now, add a new div inside the for-loop for the product card.
Inside this div –

Now reload the page and you’ll see the image and the texts, repeated 10 times.

Step 6: Now, let’s add some styles to these elements. Let’s start with the container div for the product.
-First, let’s add some margin using Tailwindcss class m-4, you find the margin-related classes in the section called spacing in Tailwindcss documentation.
-Add bg-white to make the card background white.
-Add rounded make the corners round
-Let’s also add some shadow: add the class shadow

<div class="m-4 bg-white rounded shadow">
<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60"/>
<div >Headphone</div>
<div >Excellent quality Headphone at a low price</div>
<div >$20</div>

Now, as we have run the command npm run watch, it will automatically compile the CSS when we make changes and save the code, and a Laravel Mix – Compilation Successful notification will appear on the screen. Once we get the notification we can reload the page to see the changes. So let’s reload the page.

Step 7: Let’s add some more styles. Now it looks better, but not like the way we want. Let’s add some more styles.

-First lets organize the cards in multiple columns. For that enclose the for-loop inside a new div , a container for all the products. Add the class grid to organize the children of this div in a grid structure. Also add grid-cols-4 to specify that we want the grid to have 4 columns. You can find these grid related classes on the Flexbox and Grid section of the Tailwindcss documentation (https://tailwindcss.com/docs/grid-template-columns).

<h1> Welcome to BnS </h1>
      <div class="grid grid-cols-4">
        @for($i = 0; $i < 10; $i++)
          <div class="m-4 bg-white rounded shadow">
            <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60"/>
            <div >Headphone</div>
            <div >Excellent quality Headphone at a low price</div>
            <div >$20</div>
          </div>
        @endfor
      </div>

Reload the page on the browser and you’ll feel good, we are approaching towards to goal.

-Now, the top corners of the image are not rounded though the parent div has rounded corners. This does not look good, and fixing this is easy. Add the class overflow-hidden to the parent div….. and the sharp corners at the top disappeared.

-Let’s wrap the title and the description by a new div, and add some padding to this div using the class p-4. ****You can take a look at the different padding and other spacing-related classes in the SPACING section of the document https://tailwindcss.com/docs/padding.

-Now let’s make the title a little smaller using the class text-sm, and a little bold using font-semibold.

-We shall make the description text smaller than the title text, and there is a class called text-xs for that. Also let’s make this description text a little grayish using text-gray-500.

-Now let’s add a border to the top of the div for the price to separate it from the above information. Add the class border-t. Also, add px-4 for horizontal padding and py-2 for vertical padding. Let’s also make this text bold and a little smaller using these two classes font-bold, text-sm respectively.

<h1> Welcome to BnS </h1>
      <div class="grid grid-cols-4">
        @for($i = 0; $i < 10; $i++)
          <div class=" m-4 bg-white rounded shadow overflow-hidden">
            <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60"/>
            <div class="p-4">
              <div class="font-semibold text-sm">Headphone</div>
              <div class="text-xs text-gray-500">Excellent quality Headphone at a low price</div>
            </div>
            <div class=" border-t px-4 py-2 font-bold text-sm">$20</div>
          </div>
        @endfor
      </div>

– It looks good, but the space between two cards seems to be a bit more, right! Let’s check if reducing the space makes it look any better. First, remove the margin from the product div, we shall add some gap to the grid itself. So add gap-4, also add p-4 to add overall padding around the products container. Now reload the page – and it looks beautiful.

The complete code:

<html>
    <head>
        <title>Buy and Sell</title>
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    </head>
    <body class="bg-gray-50">
      <h1> Welcome to BnS </h1>
      <div class="grid grid-cols-4 gap-4 p-4">
        @for($i = 0; $i < 10; $i++)
          <div class="bg-white rounded shadow overflow-hidden">
            <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60"/>
            <div class="p-4">
              <div class="font-semibold text-sm">Headphone</div>
              <div class="text-xs text-gray-500">Excellent quality Headphone at a low price</div>
            </div>
            <div class=" border-t px-4 py-2 font-bold text-sm">$20</div>
          </div>
        @endfor
      </div>
    </body>
</html>

Leave a Reply

Your email address will not be published.