Drupal 8 - Advanced Usage of the Paragraphs Module

Introduction

In my previous article, I explained How to have set of fields and single Add More button.

In this post, we will see how we can have nested set of fields and we can have a single Add More button for that subset.

Nested Subset and Single Add More button

Let me set context of this article flow. We will discuss following:

Create a content type having fields:

• Title
• Body
• Image for the article
• Product Details Set (Multiple allowed)

Each Product Details will have following fields:

• Title
• Description of product
• Sub-Product Details (Multiple Allowed)

Each Sub-Product Details will have following fields:

• Image
• ASIN code of product

In simpler terms, we will have a content type for a product, in which we can do following:

• Should be able to add multiple products
• For each product, we should be able to add multiple images and respective website

Solution

Lets have a look at the step by step guide:

1. Create a Paragraph Type This is for our Sub-Product details

   • Goto: /admin/structure/paragraphs_type
   • Click on Add Paragraph Type
   • Give a name like Sub-Products
   • Click on Manage fields
   • Add following fields:
     • Product Image
     • ASIN Code of product
     Note: Each of above field is configured to have single value, not multiple. See Using Field Groups for better looking fields

2. Create another paragraph Type This is for our Product Details

   • Goto: /admin/structure/paragraphs_type
   • Click on Add Paragraph Type
   • Give a name like Products
   • Click on Manage fields
   • Add following fields:
     • Product Title (Text plain)
     • Description of Product (Text Long)
     • Add Paragraph (Under Entity reference), and select above created Paragraph (Product Sub-Details)
     • Above field is set to have Multiple Values.
     See Using Field Groups for better looking fields

3. Now, create actual Content Type This the actual node for our Product.

   • Create content type, give a name
   • Add following fields
     • Title will comes by default
     • Description field (Text long) This will be an introduction of article
     • Image (For setting main image of article)
     • Now, add Paragraph (From Entity Reference), and select above created Paragraph type: Product Details
     • Set it to have Multiple Values.

Final Look

Lets look at the interested section only.

A more refined image

If you are using Field Groups module, you can have more fun with setting different options for displaying fieldsets.