Option personnalisée

Créer une option personnalisée

La création d'une option personnalisée commence par l'éxecution de la commande suivante :

php dobby make:customize:field MyCustomField

Le fichier sera alors créé dans le dossier app/Customize avec le nom MyCustomField.php.

Gérer le rendu

Dans la class de votre option, vous pouvez gérer le rendu via la méthode render_content.

C'est ici que vous pourrez créer vos champs et comportements de l'option personnalisée.

attention

Sauf la création d'option très spécifique, il n'est pas utile de modifier le constructeur et la méthode register

React Component

Vous pouvez créer un composant React et l'utiliser dans votre option personnalisée. Pour cela, une fois votre composant créer dans le dossier assets/src/Customize/MyCustomField/main.jsx avec la base si dessous.

Lorsque vous gérer votre option personnalisé avec React, vous devrez utiliser ma fonction triggerInput du hook useInput pour mettre à jour la valeur de l'option.

Il est important de laisser un input type hidden dans la class MyCustomField.php pour que la valeur de l'option soit correctement sauvegardée.

import { useInput } from "@/src/Hooks/useInput";
import { useEffect } from "react";
import { createRoot } from "react-dom/client";

const App = ({ id, label, value }) => {
    const triggerInput = useInput(id);

    const handleChange = (e) => {
        triggerInput((input) => (input.value = e.target.value));
    };

    return (
        <>
            <input type="text" value={value} onChange={handleChange} />
        </>
    );
};

const roots = document.querySelectorAll(".my-custom-field");
if (roots) {
    roots.forEach((root) => {
        const rootElement = createRoot(root);
        const attributes = root.dataset;
        rootElement.render(<App {...attributes} />);
    });
}

Helper disponible

La class utilise par défaut le trait FieldHelper qui permet d'injecter des méthodes utilitaires afin de simplifier l'intégration de l'option.

La création d'une option personnalisée devant respecter certaines normes, grâce à la méthode getId vous pourrez récupérer l'id de l'option facilement.

getId

string ID de l'option

getSettingLink

string Retourne l'attribut data-customize-setting-link

getDefaultAttributes

string Retourne les attributs souvent utilisés pour la création d'un champ, notamment l'id, le name et le setting-link