Utilisation du type de champ ModalSelect Form dans Joomla 5 pour simplifier la recherche du bon produit, parmi des milliers, en filtrant dans une fenêtre modale en utilisant la catégorie, le fabricant et la recherche lors du développement d'une extension.

Introduction

Dans le processus de travail avec les clients, il y a des taches de différents niveaux : quelqu'un a besoin d'un site Web simple de 5 à 6 pages. Quelqu'un a besoin d'un large catalogue de produits ou d'une boutique en ligne avec des intégrations avec des systèmes tiers utilisant l'API REST. Quelqu'un d'autre a besoin de fonctionnalités non standard pour lesquelles il n'existe aucune solution populaire disponible.

Joomla est bon pour le développement et vous permet de créer du code facile à maintenir. Si l'exigence suit le noyau du CMS, alors elle a une réponse pour tous ces cas.

Pour mener à bien un grand projet, nous devons le diviser en taches plus petites, et je veux parler de la résolution de l'une de ces taches dans cet article.

Données initiales

Les clients ont déjà créé un catalogue de produits sur l'un des composants populaires de la boutique en ligne pour Joomla (JoomShopping). Ils peuvent sélectionner les paramètres du produit, le mettre dans le panier et effectuer un achat. Tout est comme d'habitude. Cependant, vous devez maintenant ajouter la possibilité de créer une présentation graphique pour les produits. Par exemple, votre produit est une tasse ou un T-shirt. Et avant d'acheter, vous pouvez vous rendre chez le concepteur du produit, télécharger votre logo ou votre photo, rédiger un texte et cette mise en page est jointe à la commande dans la boutique en ligne. Après paiement, la mise en page passe directement à la production, où l'image et le texte sont appliqués sur votre mug et envoyés à l'adresse.

étant donné que la mise en ?uvre de cette fonctionnalité prend beaucoup de temps, elle est créée en tant que composant distinct du concepteur de produit. Et des plugins de fournisseurs de données seront déjà créés, vous permettant de travailler avec l'un ou l'autre composant e-commerce.

L'une des petites taches appliquées consiste à créer des liens entre les produits du composant boutique en ligne et les produits du composant concepteur de produits. Cela devrait être pratique et intuitif pour les gestionnaires de contenu qui travailleront sur le contenu à l'avenir. Par conséquent, il ne suffit pas de créer un champ de texte où sera indiqué le numéro d'identification du produit souhaité. Il peut n'y avoir que quelques dizaines de produits dans une boutique en ligne, et choisir un produit à communiquer n'est alors pas très difficile. S'il existe des milliers de produits, la fonctionnalité de recherche et de filtrage des produits par paramètres est importante. Si vous pouvez filtrer la liste des produits par catégorie, fabricant, ou la trouver par nom parmi des centaines d'autres, votre travail sera beaucoup plus rapide et plus facile.

Voir la vidéo

Ce champ est très similaire au travail des plugins de boutons d'édition (groupe editors-xtd), où les données à sélectionner sont affichées dans la fenêtre modale : un lien vers l'article, un short code pour le module, etc.

Un peu de théorie

Dans le panneau d'administration de Joomla, différents champs doivent être remplis avec des données provenant d'autres composants?: spécifiez l'article, l'élément de menu, le contact, le produit, etc. Généralement, ces champs sont con?us comme une liste déroulante d'options de sélection. , ils peuvent être con?us comme input type="text" avec une liste de données, mais il existe également des champs pratiques affichant une liste des entités souhaitées, avec filtrage, recherche et pagination. Non seulement les sources au sein du site (divers composants, plugins) peuvent faire office de source de données, mais également les services tiers disponibles via l'API REST : CRM, services de livraison, bases de données externes, autres sites Joomla, etc.

Nous avons tous vu ces champs en action lors de la sélection d'un article dans un élément de menu tel que "Articles - Article unique", "Contacts - Contact unique", ou lors de la création d'un alias de l'élément de menu - "Liens système - Menu Alias ??de l'article". Rappelons cependant à quoi ils ressemblent.

Une fenêtre modale de sélection d'articles.

Une fenêtre modale de sélection de contact unique.

Les opportunités du champ de sélection modal dans Joomla

Regardons de plus près ces champs - ce qu'ils vous permettent exactement de faire. Quelque part au fond de nous, nous comprenons que le travail principal de ce champ est d'obtenir l'identifiant de l'entité sélectionnée et de mettre cet identifiant dans un champ de texte. Mais sur l'écran, nous voyons autre chose : au lieu d'un numéro d'identification, nous voyons le titre de l'article ou du contact. C'est agréable et pratique. Vous n'avez pas besoin de mémoriser le nom de l'article portant l'identifiant 1452704. De plus, la vidéo montre clairement que si le champ a déjà une valeur, le bouton ? effacer ? appara?t. Il réinitialise la valeur du champ et permet de cliquer à nouveau sur le bouton "sélectionner".

Dans certains cas, nous avons la possibilité de créer un type d'entité sélectionné - article, contact, etc. directement en train de créer un élément de menu. Ce bouton fonctionne en tenant compte de l'ACL - séparation des droits d'accès dans Joomla.

Imaginez que vous construisez un site Web et que vous créez une page ? Contacts ?. Si vous n'avez pas un tas de succursales d'entreprise avec une structure complexe, alors ceci n'est qu'un article Joomla habituel dans la catégorie "Non classé". Et il dispose déjà de tous les contacts sous forme de texte ou de variables. Dans les temps anciens, vous deviez d'abord créer l'article, puis accéder aux éléments de menu et créer un élément de menu pour celui-ci. Vous n'êtes pas obligé de faire ?a maintenant.

Et si le champ a déjà une valeur, alors dans certains cas, il est possible de modifier l'entité sélectionnée (article, élément de menu, etc.) dès le processus de création d'un élément de menu.

Ainsi, en utilisant le champ de sélection dans la fenêtre modale, nous pouvons?:

• sélectionner
• créer
• modifier
• effacer

Voici ce qui est devant mes yeux. Mais dans les profondeurs de Joomla, il existe également un curieux paramètre urlCheckin qui permet d'envoyer la valeur sélectionnée à l'url spécifiée dans le champ. Il convient de noter que cette fonctionnalité de Joomla se développe progressivement depuis assez longtemps. Cependant, un type de champ universel distinct pouvant être utilisé selon vos besoins n'est apparu que dans Joomla 5. Il n'existe même pas dans Joomla 4.

Comment sont disposés les champs du constructeur Form de l'interface du panneau d'administration Joomla??

Auparavant, ce constructeur s'appelait JForm. Je suppose que tous mes lecteurs n'ont pas entre les mains un outil de développement tel qu'un IDE - un environnement de développement - à la PHP Storm ou VS Code, je vais donc essayer de donner des directives supplémentaires pour naviguer dans la base de code.

Dans Joomla, la logique est séparée de la vue (la sortie HTML réelle), nous allons donc l'explorer à plusieurs endroits en même temps.

La logique est la classe Form

Logic est la classe Form. Dans Joomla 5, les fichiers de la classe Form se trouvent dans libraries/src/Form. Nous examinons ces fichiers afin de comprendre la logique elle-même, ce qui arrive aux données et comment les utiliser.

En bref, le constructeur Form re?oit du XML avec une description des champs. lit les données (type de champ, classe de champ personnalisée à partir de l'attribut addfieldprefix, le cas échéant, etc.), charge la classe de champ requise à l'aide de FormHelper. Si le champ a des règles pour filtrer les données de sortie - la classe FormRule est utilisée - rappelez-vous les champs Joomla de type filelist, où vous pouvez spécifier les paramètres de filtrage et sélectionner, par exemple, uniquement les fichiers php ou uniquement les fichiers css.

Les

Les fichiers de classe de champ du formulaire Joomla se trouvent dans libraries/src/Form/Field. Il y en a, pour le moins, beaucoup. C'est le matériau de construction du panneau d'administration, et parfois aussi du frontend.

Les fichiers de classe décrivent les propriétés de classe telles que $type, $layout et d'autres nécessaires au fonctionnement. La plupart des champs ont des méthodes getInput() - renvoie en fait la sortie HTML du champ, getLayoutData() - prétraite les données du champ avant de les envoyer au rendu, getLabel() - travaille avec l'étiquette du champ, etc.

On rappelle que les classes field héritent de la classe parent FormField. Dans le fichier de classe libraries/src/Form/FormField.php sont décrits les attributs possibles du champ, qui peuvent être utilisés dans la description en XML. Ils ont une brève description de ce que c'est et pourquoi.

Les classes enfants (héritiers) ont la capacité de travailler avec les méthodes de la classe parent et, si nécessaire, de la remplacer.

Vue (sortie HTML, mise en page) d'un champ dans Joomla 5

Chaque classe de champ a une sortie HTML. Dans MVC classique, la vue fonctionne immédiatement avec la sortie des données, mais dans Joomla, il existe une couche supplémentaire - Mise en page, qui vous permet de remplacer les mises en page - l'une des fonctionnalités les plus importantes de ce CMS. Les mises en page de base sont devrait être situé dans le dossier layouts à la racine du site. Ils transmettent un tableau de $displayData avec toutes les données re?ues de la méthode getLayoutData(). Nous spécifions quelle disposition de sortie utiliser dans la propriété de classe $layout.

<?php
/**
 * Name of the layout being used to render the field
 *
 * @var    string
 * @since  3.7
 */
protected $layout = 'joomla.form.field.email';

Ce type d'enregistrement est assez courant. Dans Joomla, layout est un chemin d'accès séparé par des points vers le fichier de mise en page à partir du dossier layouts à la racine du site. Autrement dit, l'entrée $layout = 'joomla.form.field.email' signifie que les mises en page seront utilisées lors du rendu du champ layouts/joomla/form/field/email.php.

<?php 
use Joomla\CMS\Layout\LayoutHelper;

$displayData = [
                'src' => $this->item->image,
                'alt' => $this->item->name,
               ];

echo LayoutHelper::render(
                        'joomla.html.image',
                         $displayData
                    );

De même, cet exemple utilisera la mise en page layouts/joomla/html/image.php. Certaines mises en page peuvent être remplacées dans le dossier html des modèles de site et du panneau d'administration.

En conséquence, si nous voulons voir exactement quelles données arrivent finalement à la mise en page et comment elles sont affichées, accédez au fichier de mise en page et regardez.

Création d'un champ de sélection de données dans la fenêtre Modal Select de Joomla 5

Revenons maintenant à la tache principale de l'article.

Il est important pour nous d'étudier des exemples (Joomla 5.0.1 au moment de la rédaction de cet article)?:

• la classe principale du champ est libraries/src/Form/Field/ModalSelectField.php
• le champ de sélection modal de l'article Joomla - administrator/components/com_content/src/Field/Modal/ArticleField.php
• Champ de sélection modal du type de menu - administrator/components/com_menus/src/Field/MenutypeField.php
• Champ de sélection modale de l'élément de menu - administrator/components/com_menus/src/Field/MenutypeField.php
• mise en page de sortie - layouts/joomla/form/field/modal-select.php

Le champ de sélection modal de contact unique de com_contacts au moment de la rédaction de cet article n'a pas encore été converti en un champ de type universel et se trouve simplement dans (dans Joomla 5.0.2, au moment de la rédaction de cet article) administrateur /components/com_contact/src/Field/Modal/ContactField.php. Il hérite directement de FormField, pas de ModalSelectField.

L'algorithme d'actions pour ajouter votre propre champ est le suivant :

• créez un formulaire XML avec notre champ dans un fichier XML ou par programme en utilisant SimpleXMLElement.
• Si nous travaillons à la volée alors, en utilisant le plugin pour l'événement onContentPrepareForm, nous ajoutons des formulaires XML au formulaire souhaité (cochez $form->getName() avant cela)
• Création d'une classe de terrain.
• Si nécessaire, nous créons notre propre sortie HTML (mise en page) du champ. Nous laisserons cela hors du cadre de cet article. Et ?a marche. ## Champ XML La chose la plus importante dans ce code est l'attribut addfieldprefix, qui signifie l'espace de noms de votre classe de champ. Le nom de la classe est formé à partir de addfieldprefix "" tapez "Field". Dans ce cas, la classe du champ sera JoomlaPluginWtproductbuilderProviderjoomshoppingFieldProductlistField.

<?php
/**
 * Name of the layout being used to render the field
 *
 * @var    string
 * @since  3.7
 */
protected $layout = 'joomla.form.field.email';

Sortie HTML (mise en page) du champ

Pour que tout ce qui se passe en PHP soit clair, vous devez d'abord regarder la disposition de la sortie du champ. Il se trouve dans le fichier layouts/joomla/form/field/modal-select.php. En fait, 2 champs de saisie sont affichés - l'un visible, l'autre invisible. Le titre de l'article, du contact ou du produit sélectionné est saisi dans le champ visible sous la forme d'un espace réservé - le paramètre $valueTitle. Et le second est son identifiant - $value. Si nous n'avons encore rien sélectionné, il devrait y avoir une phrase dans le champ comme ? sélectionner un article ? ou ? sélectionner un produit ?. Il s'agit d'une constante de langage que l'on met dans l'attribut hunt du champ XML ou dans la méthode setup() de la classe field.

Tous les paramètres disponibles pour la mise en page de sortie (c'est-à-dire ceux qui peuvent être utilisés par programme ou dans un fichier XML)?:

<?php
/**
 * Name of the layout being used to render the field
 *
 * @var    string
 * @since  3.7
 */
protected $layout = 'joomla.form.field.email';

Classe de champ PHP

La classe field, comme vous l'avez peut-être deviné, est dans mon plugin. Le chemin vers cela plugins/wtproductbuilder/providerjoomshopping/src/Field/ProductlistField.php. J'ai pris comme base le champ de sélection d'article modal unique et je l'ai repensé pour l'adapter à mes besoins - en choisissant un produit dans la boutique en ligne JoomShopping. Nous étendons la classe parent ModalSelectField avec notre propre classe.

Mes taches incluent uniquement la sélection de produits, l'édition et la création ne le sont pas, donc dans le texte de l'article nous parlons uniquement de la sélection de produits. La classe PHP est petite, je vais la donner dans son intégralité et la commenter.

<?php 
use Joomla\CMS\Layout\LayoutHelper;

$displayData = [
                'src' => $this->item->image,
                'alt' => $this->item->name,
               ];

echo LayoutHelper::render(
                        'joomla.html.image',
                         $displayData
                    );

Séparément, la méthode getValueTitle() a été introduite, qui affiche le nom de l'entité sélectionnée (nom du produit, titre de l'article, etc.) dans les cas où elles ont déjà été sélectionnées et enregistrées. C'est-à-dire que nous sommes allés modifier l'élément de menu, nous ne touchons pas au champ, mais nous voulons voir le titre de l'article/le nom du produit compréhensible pour les gens, et pas seulement un identifiant. Cette méthode affiche le titre souhaité.

<field
      type="productlist"
      name="product_id"
      addfieldprefix="Joomla\Plugin\Wtproductbuilder\Providerjoomshopping\Field"
      label="Field label"
      hint="Field placeholder"
      />

Dans certains champs où des fonctionnalités plus complexes sont requises - associations multilingues, etc. - il existe d'autres méthodes dans la classe field qui remplacent les méthodes de base de la classe FormField?:

• setLayoutData() est une méthode de prétraitement des données avant de restituer réellement le champ
• getRenderer() - paramètres supplémentaires pour le rendu etc.

Dans notre cas, ce besoin n'existe pas, nous ne les utilisons donc pas.

Sortie HTML du contenu de la fenêtre modale

Lorsque vous cliquez sur le bouton "sélectionner", une fenêtre modale Bootstrap s'ouvre, dans laquelle une liste de produits s'ouvre dans l'