Drupal - Displaying related nodes content into a page like in e-commerce.

There may be requirement when you need to link the contents from different nodes to a specific node. For example, you may want to allow user a facility that they can set the related content from different nodes in a page like we do in ecommerce portal where we configure related products.

This can be achieved in drupal 8 in following steps:

  1. the a field of type content
  2. select the node type you want to link with
  3. select how many related node you want to configure in this newly created field
  4. and save then.

 

Now you would see field in which you can add related nodes in current nodes while editing the current node.

related noes

And you can render the created field like this in twig file.

<div class="col-md-12 heading-main text-center">
          <h2>Related Courses</h2>
        </div>

        {% for item in node.field_related_courses %}

          <div class="col-sm-6 col-md-4">
            <div class="content">
              <div class="programs_img" ><a href="{{ path('entity.node.canonical', {'node': item.entity.id}) }}"><img style="max-height: 219px;overflow: hidden" src="{{ file_url(item.entity.field_course_overview_image.entity.uri.value) }}"
                                                                                                                      alt=""></a></div>
              <div class="programs_cnt">
                <h4><a href="{{ path('entity.node.canonical', {'node': item.entity.id}) }}">{{ item.entity.title.value }} <br>
                   {# <span> {{ item.entity.field_duration_months_.value }}</span>#}</a></h4>
                <p>{{item.entity.field_course_summary.value[:150] ~ '...'}}</p>
              </div>
              <div class="programs_link"><a href="{{ path('entity.node.canonical', {'node': item.entity.id}) }}">Learn More</a></div>
            </div>

          </div>
        {% endfor %}

 

 

Tags