0

I have a link that displays a modal window.

When I click on it, it is marked in the title of the modal window "Array".

How to customize the title ?

Here is my Drupal module :

/src/Plugin/Commerce/CheckoutPane/MarketplaceTermsAndConditions.php :

<?php

namespace Drupal\commerce_marketplace_terms_and_conditions\Plugin\Commerce\CheckoutPane;

use Drupal\Component\Serialization\Json;
use Drupal\Core\Form\FormStateInterface;
use Drupal\commerce_checkout\Plugin\Commerce\CheckoutPane\CheckoutPaneBase;
use Drupal\commerce_checkout\Plugin\Commerce\CheckoutPane\CheckoutPaneInterface;
use Drupal\Core\Link;
use Drupal\Core\Url;

/**
 * Provides the completion message pane.
 *
 * @CommerceCheckoutPane(
 *   id = "marketplace_terms_and_conditions",
 *   label = @Translation("Marketplace Terms and Conditions"),
 *   default_step = "review",
 * )
 */
class MarketplaceTermsAndConditions extends CheckoutPaneBase implements CheckoutPaneInterface {

  /**
   * {@inheritdoc}
   */
  public function buildPaneForm(array $pane_form, FormStateInterface $form_state, array &$complete_form) {
    $store_name = $this->order->getStore()->getName();
    $store_id = $this->order->getStoreId();
    $pane_form['#attached']['library'][] = 'core/drupal.dialog.ajax';
    $attributes = [
      'attributes' => [
        'class' => 'use-ajax',
        'data-dialog-type' => 'modal',
        'data-dialog-options' => Json::encode([
          'width' => auto,
        ]),
      ],
    ];
    $link = Link::fromTextAndUrl(
      $this->t('terms and conditions of the store "@store_name"', ['@store_name' => $store_name]),
      Url::fromUri("internal:/store/$store_id/cgv", $attributes)
    )->toString();
    $pane_form['marketplace_terms_and_conditions'] = [
      '#type' => 'checkbox',
      '#default_value' => FALSE,
      '#title' => $this->t('I have read and accept @terms.', ['@terms' => $link]),
      '#required' => TRUE,
      '#weight' => $this->getWeight(),
    ];
    return $pane_form;
  }

}

commerce_marketplace_terms_and_conditions.info.yml :

name: Commerce Marketplace Terms and Conditions
description: Commerce checkout pane with a checkbox linked to your custom Marketplace Terms and Conditions page.
type: module
core: 8.x
package: Commerce (contrib)
dependencies:
  - commerce:commerce_checkout

commerce_marketplace_terms_and_conditions.module :

<?php

/**
 * @file
 * Commerce marketplace terms and conditions.
 */

Here is the screenshot of the current modal window :

enter image description here

553aa08930
  • 33
  • 7

2 Answers2

1

I am using Drupal 8.8.4.

You can use CSS by adding a class to the modal as described here by Berend de Boer.

Then use the class to hide the modal title element and the CSS ::before selector to add a custom title.

This takes advantage of two existing Drupal core classes .ui-dialog-title and ui.dialog-titlebar.

Admittedly, it is not considered best practice to mix content & styling. But this was a simple, immediate, and reliable solution as compared to what I've been able to find on this Drupal bug so far.

HTML

`<a class="use-ajax" data-dialog-options="{&quot;width&quot;:400, &quot;dialogClass&quot;: &quot;your-modal-class&quot;}" data-dialog-type="dialog" href="/your-awesome-modal">Tap here to see my awesome modal</a>`

CSS

.your-modal-class .ui-dialog-title {
  display: none;   /*To hide "Array" in title of modal, a known Drupal bug*/
}
.your-modal-class .ui-dialog-titlebar::before {
  content: "Your Title Here";
}
charles
  • 11
  • 2
0

Simply write the title you want to have for that window inside the t() function.

Meera
  • 170
  • 7