Building components

8. Creating the Movie Card Collection component

If we look at the project's prototype, we are using a collection of movie cards to display movies in different categories (i.e. Action, Horror, Comedy, etc.).

There are two parts to creating the list. First we need to create a collection of movie cards where we simply grab a given number of cards and style them the same way shown in the prototype. Second, we create a list which would filter cards per movie type and include the type title on each collection. Although we could accomplish this with a single component, we are planning on building this list with Drupal Views and as you will see, it is best if we split this process in two parts.

Creating the movie card collection

Let's start with our usual process of creating some files and adding the respective code to each file.

  1. Inside nitflex_dev_theme/src/components/ create a new directory called movie-card-collection

  2. Inside the movie-card-collection directory create these files: movie-card-collection.json, movie-card-collection.scss, and movie-card-collection.twig

  3. Inside movie-card-collection.json copy the following code:

    {
 "items": [
   {
     "cover_image": "<img src=\"/sites/default/files/action-3.jpg\" alt=\"\" />",
     "heading": {
       "title": "Mattis Magna Mollis Pellentesque",
       "url": "#",
       "heading_level": 4,
       "classes": "movie-card__heading"
     },
     "average_rating": "3",
     "mpaa_rating": "G",
     "synopsis": "Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna."
   },
   {
     "cover_image": "<img src=\"/sites/default/files/action-3.jpg\" alt=\"\" />",
     "heading": {
       "title": "Bibendum Euismod Mollis Quam Egestas",
       "url": "#",
       "heading_level": 4,
       "classes": "movie-card__heading"
     },
     "average_rating": "2",
     "mpaa_rating": "PG",
     "synopsis": "Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit."
   },
   {
     "cover_image": "<img src=\"/sites/default/files/action-3.jpg\" alt=\"\" />",
     "heading": {
       "title": "Egestas Fusce Euismod Elit Condimentum",
       "url": "#",
       "heading_level": 4,
       "classes": "movie-card__heading"
     },
     "average_rating": "5",
     "mpaa_rating": "R",
     "synopsis": "Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue."
   },
   {
     "cover_image": "<img src=\"/sites/default/files/action-3.jpg\" alt=\"\" />",
     "heading": {
       "title": "Commodo Nibh Justo Sollicitudin Fermentum",
       "url": "#",
       "heading_level": 4,
       "classes": "movie-card__heading"
     },
     "average_rating": "4",
     "mpaa_rating": "PG-13",
     "synopsis": "Maecenas faucibus mollis interdum.Donec ullamcorper nulla non metus auctor fringilla."
   },
   {
     "cover_image": "<img src=\"/sites/default/files/action-3.jpg\" alt=\"\" />",
     "heading": {
       "title": "Condimentum Nibh Nullam Fringilla",
       "url": "#",
       "heading_level": 4,
       "classes": "movie-card__heading"
     },
     "average_rating": "4",
     "mpaa_rating": "PG",
     "synopsis": "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit."
   }
 ]
}
    • Here we are creating an array called items. The array contains multiple items each of which has the fields found in a movie card (heading, sypnosys, cover_image, etc.).

  4. Inside movie-card-collection.twig copy the following code:

    
 {{ attach_library('nitflex_dev_theme/movie-card-collection') }}

 <div class="movie-card-collection
   {{- attributes ? ' ' ~ attributes.class -}}"
   {{- attributes ? attributes|without(class) -}}>
   {% block collection %}
     {% for item in items %}
       {% include '@nitflex_dev_theme/movie-card/movie-card.twig' with {
         cover_image: item.cover_image,
         heading: item.heading,
         mpaa_rating: item.mpaa_rating,
         average_rating: item.average_rating,
         synopsis: item.synopsis
       }
     %}
     {% endfor %}
   {% endblock %}
 </div>

    • Important: Create the movie-card-collection library.

    • We are now introducing the concept of Twig Blocks, {% block collection %} so we are able to alter how content is rendered when we integrate this component with Drupal.

    • Inside the block, we loop through the items array and for each item we loop through we include a movie-crad component. This means we will end up with as many cards as items in the items array.

    Twig blocks

    Twig blocks, not the same as Drupal blocks, are a great way to extend twig templates. It can be confusing at first given that all of our lives as Drupal developers we have worked with blocks. However, as Jacine Luisi from Chapter Three puts it in her great article about Twig Concepts in Drupal 8 themes, Twig blocks are more like Drupal regions.

  5. Now paste the component's styles below into movie-card-collection.scss:

    // Movie Card Collection
//
// This is the movie card collection component which represents a grouping
// of movie cards.
//
// Markup: movie-card-collection.twig
//
// Classes: kss-full-width
//
// Style guide: Components.Movie Card Collection

// Import site utilities.
@import '../../global/utils/init';

.movie-card-collection {
 padding: 20px 0;

 @include breakpoint($bp-sm) {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
 }

 .movie-card {
   margin: 0 auto 10px;
   width: 100%;

   @include breakpoint($bp-sm) {
     justify-content: center;
     width: calc(50% - 5px);
   }

   @include breakpoint($bp-lg) {
     justify-content: space-between;
     margin: 0;
     width: calc(20% - 5px);
   }
 }
}

Compiling the styleguide

Now that we have writen all the necessary code to build the Movie Card Collection component, it's time to see the component in the styleguide. Let's compile our project first.

  • From the theme's root (/themes/custom/nitflex_dev_theme), run the following command:
    lando npm run build

Viewing the Movie Card Collection component

Open your drupal site and point to the URL below

http://nitflex.lndo.site:8000/themes/custom/nitflex_dev_theme/dist/style-guide/index.html

Depending on your setup, you may not need to enter ":8000". Also if you did not use the provided Lando setup, ensure you are using your own custom URL.

Under the Components category you should see the new Movie Card Collection component.

Previous exercise: Building the Featured Movie component

Next exercise: Building the Movie List component

results matching ""

    No results matching ""