Outils pour utilisateurs

Outils du site


Panneau latéral

devguide:howto:tuto_product_scaffolding:override_editors

Étape 3 : Surcharger les formulaires backoffice

Les trois nouvelles propriétés sont maintenant définies. Reste à les rendre éditables en backoffice. Cette tâche est très simple et ne nécessite aucune connaissance de XUL. Pour gagner un peu de temps, je vais uniquement traiter le formulaire d'édition du produit simple (simpleproduct) - je pourrais faire de même pour les déclinaisons (declinedprodut), etc…

Surcharge du formulaire d'édition (override)

Le formulaire d'édition du produit simple est défini dans le dossier suivant modules/catalog/forms/editor/simpleproduct/properties.xml. La structure XML du fichier est simple à comprendre :

<?xml version="1.0" encoding="UTF-8"?>
<panel>
	<section labeli18n="modules.catalog.bo.general.General">
		<field name="label" />
		<field name="codeReference" />
		<field name="description" />
		<field name="visual" allowfile="true" mediafoldername="Inbox" />
		<field name="brand" />
		<field name="shelf" moduleselector="catalog" allow="[modules_catalog_shelf]" required="true" />
	</section>
	<section labeli18n="modules.catalog.bo.general.Validity-dates" class="toggle" hidden="true">
		<field name="startpublicationdate" />
		<field name="endpublicationdate" />
	</section>
	<section labeli18n="modules.catalog.bo.general.Additionnal-information" class="toggle" hidden="true">
		<field name="additionnalVisual" allowfile="true" mediafoldername="Inbox"/>
		<field name="pictogram" allowfile="true" mediafoldername="Inbox" />
		<field name="complementary" type="productSuggestion" allow="[modules_catalog_product]" moduleselector="catalog" dialog="productselector"/>
		<field name="similar" type="productSuggestion" allow="[modules_catalog_product]" moduleselector="catalog" dialog="productselector"/>
		<field name="upsell" type="productSuggestion" allow="[modules_catalog_product]" moduleselector="catalog" dialog="productselector"/>
		<field name="shippingModeId" type="document" moduleselector="shipping" allow="modules_shipping_mode" />
	</section>
	<section labeli18n="modules.catalog.bo.general.Referencing" class="toggle" hidden="true">
		<field name="pageTitle" class="with-counter" rows="2" />
		<field name="pageDescription" class="with-counter" rows="2" />
		<field name="pageKeywords" class="with-counter" rows="2" />
	</section>
	<section labeli18n="modules.catalog.bo.general.ExtendedAttributes" class="toggle" hidden="true">
		<fieldinput name="attributesJSON" type="attributeslist"/>
	</section>
	<xul>
		<javascript>
<!-- code javascript qui n'est pas pertinent dans ce didacticiel -->
		</javascript>
	</xul>
</panel>
  • On y définit l'organisation en sections (les balises <section />) des champs de la fiche produit éditables en backoffice (les balises <field />)
  • On y règle l'affichage et le comportement précis de ces champs du formulaire à l'aide d'attributs sur les balises <field />
  • Et finalement, on y implémente le code JavaScript qui permet la liaison dynamique entre les champs si nécessaire (la section <xul />)

Comme un grand nombre de fichiers XML dans RBS Change, il peut être surchargé si l'on reproduit sa position dans l'arborescence du module dans le dossier override du projet. Je vais donc copier le fichier properties.xml et le placer dans le dossier override/modules/catalog/forms/editor/simpleproduct/. Je propose de placer les trois propriétés dans une section dédiée. Il me suffit donc d'insérer une nouvelle section dans le fichier surchargé comme ci-dessous :

<?xml version="1.0" encoding="UTF-8"?>
<panel>
	<section labeli18n="modules.catalog.bo.general.General">
		<field name="label" />
		<field name="codeReference" />
		<field name="description" />
		<field name="visual" allowfile="true" mediafoldername="Inbox" />
		<field name="brand" />
		<field name="shelf" moduleselector="catalog" allow="[modules_catalog_shelf]" required="true" />
	</section>
<!-- début de section rajoutée dans la surcharge -->
	<section labeli18n="modules.project.bo.general.My-infos" class="toggle">
		<field name="size" />
		<field name="material" hidehelp="true"/>
		<field name="webonly" hidehelp="true"/>
	</section>
<!-- fin de section rajoutée dans la surcharge -->
	<section labeli18n="modules.catalog.bo.general.Validity-dates" class="toggle" hidden="true">
		<field name="startpublicationdate" />
		<field name="endpublicationdate" />
	</section>
	<section labeli18n="modules.catalog.bo.general.Additionnal-information" class="toggle" hidden="true">
		<field name="additionnalVisual" allowfile="true" mediafoldername="Inbox"/>
		<field name="pictogram" allowfile="true" mediafoldername="Inbox" />
		<field name="complementary" type="productSuggestion" allow="[modules_catalog_product]" moduleselector="catalog" dialog="productselector"/>
		<field name="similar" type="productSuggestion" allow="[modules_catalog_product]" moduleselector="catalog" dialog="productselector"/>
		<field name="upsell" type="productSuggestion" allow="[modules_catalog_product]" moduleselector="catalog" dialog="productselector"/>
		<field name="shippingModeId" type="document" moduleselector="shipping" allow="modules_shipping_mode" />
	</section>
	<section labeli18n="modules.catalog.bo.general.Referencing" class="toggle" hidden="true">
		<field name="pageTitle" class="with-counter" rows="2" />
		<field name="pageDescription" class="with-counter" rows="2" />
		<field name="pageKeywords" class="with-counter" rows="2" />
	</section>
	<section labeli18n="modules.catalog.bo.general.ExtendedAttributes" class="toggle" hidden="true">
		<fieldinput name="attributesJSON" type="attributeslist"/>
	</section>
	<xul>
		<javascript>
<!-- code javascript qui n'est pas pertinent dans ce didacticiel -->	
		</javascript>
	</xul>
</panel>

J'ai utilisé une clé de localisation dans l'attribut labeli18n pour définir le libellé de la section ainsi qu'une classe toggle qui va rendre la section repliable dans l'interface backoffice.

Saisie des clés de localisation

L'injection du document product a généré un fichier dédié à l'internationalisation des noms des propriétés rajoutées par l'injection. Dans le dossier override/modules/catalog/i18/document/product, j'ai complété le fichier fr_FR.xml de la sorte :

<?xml version="1.0" encoding="utf-8"?>
<i18n baseKey="m.catalog.document.product" lcid="fr_FR">
  <key id="document-name">product</key>
  <key id="size">taille</key>
  <key id="size-help">taille du produit</key>
  <key id="material">matière</key>
  <key id="webonly">exclusivité web</key>
</i18n>

Je n'ai pas renseigné toutes les clés qui terminant par -help car j'ai choisi de masquer l'aide backoffice sur les champs webonly et material. Je valide ces modifications en exécutant la commande compile-locales sur le module catalog :

bash$ php framework/bin/change.php  compile-locales catalog
== Compile locales ==
catalog module locales compiled
== Clear webapp cache ==
Webapp cache directory cleared
 
== Clear template cache ==
Template cache directory cleared
 
=> Locales successfully compiled

J'ai aussi complété le fichier modules/project/i18n/bo/general/fr_FR.xml pour y rajouter le titre de ma section :

<?xml version="1.0" encoding="utf-8"?>
<i18n baseKey="m.project.bo.general" lcid="fr_FR">
  <key id="module-name">project</key>
  <key id="system-folder-name">project</key>
  <key id="my-infos">Mes propriétés</key>
</i18n>

Je valide ces modifications toujours en exécutant la commande compile-locales mais sur le module project cette fois-ci. Un rechargement du backoffice puis l'ouverture d'un formulaire d'édition d'un produit simple m'amènent au formulaire suivant :

Me voilà prêt à saisir mes données !

Bonus : ajout d'une contrainte sur la taille

On peut vouloir qu'une taille soit définie pour le produit et il serait de bon ton d'imposer la saisie d'une taille en backoffice. C'est en fait très simple : il suffit d'appliquer cette contrainte sur la définition XML de la propriété size dans le fichier modules/project/persistentdocument/product.xml :

<?xml version="1.0" encoding="utf-8"?>
<document xmlns="http://www.rbs.fr/schema/change-document/1.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.rbs.fr/schema/change-document/1.0 http://www.rbschange.fr/static/schema/change-document/3.5.xsd "
	model-version="3.5" extend="modules_catalog/product" inject="true">
	<properties>
		<add name="size" type="String">
                        <!-- une taille doit être définie -->
			<constraints>minSize:1</constraints>
		</add>
		<add name="material" type="String" from-list="modules_project/materiallist" />
		<add name="webonly" type="Boolean" default-value="false"/>
	</properties>
	<serializedproperties>
	</serializedproperties>
</document>

Je valide ces modifications en exécutant la commande compile-documents suivi d'un rechargement de l'interface backoffce (noté qu'un “clear-webapp-cache” ne fait pas de mal dans ce cas ;-) ) et le tour est joué !

Conclusion (provisoire)

En quelques minutes, j'ai pu à l'aide de l'API RBS Change rajouter des propriétés à mes produits et les rendre éditables en backoffice. Il me suffit maintenant de les exploiter dans mon site, comme par exemple dans le détail de la fiche produit ou son forme de facettes Solr. Je peux aussi les utiliser dans des filtres backoffice, ou comme axe de déclinaisons…la suite au prochain numéro.

Poser une question à propos de ce guide sur le forum

devguide/howto/tuto_product_scaffolding/override_editors.txt · Dernière modification: 2017/01/19 14:54 (modification externe)