0

I am trying to create a Drupal 8 module that implements a Curator IO widget, so I created a block plugin with its own custom configuration.

public function blockForm($form, FormStateInterface $form_state) {
  $form['curator_io_settings'] = array(
    '#type' => 'fieldset',
    '#title' => t('Curator IO Settings'),
    '#collapsible' => TRUE,
    '#collapsed' => FALSE,
  );

  $form['curator_io_settings']['feed_id'] = [
    '#type' => 'textfield',
    '#title' => $this->t('Enter your unique Feed Id'),
    '#default_value' => $this->configuration['feed_id'],
    '#maxlength' => 256,
    '#size' => 64,
    '#description' => t('Set your unique feed id found at curator io'),
  ];

  return $form;
}

I attached my library from the build method and passed a variable so I can work with it in jQuery.

public function build() {
  $build = [
    '#theme' => 'curatorio_io',
    '#attached' => [
      'library' => [
        'curatorio/curatorio_assets',
      ],
      'drupalSettings' => [
        'curatorio' => [
          'feed_id' => $this->configuration['feed_id'],
        ]
      ]
    ],
  ];

  return $build;
}

I am getting this variable value in JavaScript using the following code.

(function ($, Drupal, drupalSettings) {
  'use strict';
  Drupal.behaviors.curatorio = {
    attach: function (context, settings) {
      console.log(drupalSettings.curatorio);
    }
  }
};

It is working fine for one instance of the block.

When I add 2 or more instances of this block, only the first block works. I can understand that no matter how many instance I create for this block, the JavaScript will always get included once, so how do I pass multiple values for feed_id to the JavaScript behavior?

  • 1
    Rather than adding your feed_id into the drupal settings could you instead return a <div> or something with a data attribute with the feed_id in your theme functon? e.g. <div data-feed-id="abc"></div> and then change your javascript to fetch that data attribute? – Leigh Oct 9 at 15:48
  • The JS library will only be attached once, but you should be able to add multiple entries to drupalSettings. Don't reuse/overwrite your feed_id variable, instead push (append) multiple unique entries (keys) info the curatioio array. – Hudri Oct 9 at 16:09
0

So as Leigh suggested I send this data values into a twig file

  public function build() {

    $build = [
      '#theme' => 'curatorio_io',
      '#id' => uniqid(),
      '#feed_id' => $this->configuration['feed_id'],
      '#widget_type' => $this->configuration['widget_type'],
      '#attached' => [
        'library' => [
          'curatorio/curatorio_assets',
        ],
      ],
    ];

    return $build;
  }

Now in my twig file, I put those values into data attributes

<div class ="curator-feed"  id = "{{ id }}" data-feed-id = "{{ feed_id }}"  data-widget-type = "{{ widget_type }}" >

</div>

and in js I attached my JS logic to get attribute value and attach Plugin into it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.