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:
  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.

Drupal Multiple fields example

A more refined image

Drupal Multiple fields example

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