Datatype : Multi-option2 -- Options multiples 2

Date de publication: le mardi 5 juin 2007 à 22h43
Dernière modification: par Pascal BOYER le dimanche 20 février 2011 à 17h58

27/08/2010 12:53

Summary / Résumé

Allows option selections (supports enabling/disabling of options, images, nested option sets and dependencies). [Webshop]
Permet plusieurs méthodes de sélection d'options (supporte l'activation/désactivation des options, les images, les groupes d'options imbriquées et les dépendances). (datatype spécifique au système d'e-commerce).

Properties / Propriétés

Description

Note: "This datatype is a replacement for the deprecated "Multi-option" datatype. Refer to the 3.10 upgrading manuals for information about how to convert the data.
Note: Ce datatype remplace le datatype Multi-option devenu obsolète. Référez-vous à la documentation eZ Publish : mise à jour vers les versions 3.10 pour savoir comment convertir les données.

This datatype makes it possible to create multiple and distinctive groups of multi-options for each content object. The multi-options can be nested (there is a limit, see below). For each option, you can specify an additional price, an image, whether the option should be the default selection and if it should be possible to select it (sometimes you wish to force the selection of a set of options without providing a default selection for the user; in that case, the first option can be set to something like "Make a choice"). In addition, this datatype makes it possible to set up rules for allowing/disallowing certain combinations of options.
Ce datatype permet de créer, pour chaque objet de contenu, plusieurs groupes distincts d'options multiples pouvant être imbriquées (voir ci-dessous pour les limites). Vous pouvez, pour chaque option, spécifier un prix supplémentaire, associer une image, définir si l'option doit être la sélection par défaut et si elle peut être sélectionnée (vous souhaiterez parfois obliger l'utilisateur à sélectionner un groupe d'options sans lui proposer de sélection par défaut: auquel cas la première option sera de la forme «Faites un choix»). Ce datatype permet par ailleurs de définir des règles pour autoriser/interdire certaines combinaisons d'options.

All configuration is done at the object level. This provides great flexibility. Every object using the "Multi-option2" datatype can be different since there is no class-level configuration to be followed. In other words, if you need to represent different types of products, you can just create a simple and generic "Product" class that uses this datatype. The products (objects) themselves can be of completely different types with different traits (options). For example, you can create an object representing a computer with different options (memory, processor, etc.). At the same time, you can create another object that represents a couch; again with different options (color, finish, size, softness, etc.) and so on. All options, additional prices, rules / dependencies and so on can be defined at the object level.
L'intégralité de la configuration étant réalisée au niveau de l'objet, cela procure une grande flexibilité. Chaque objet utilisant le datatype Multi-option2 peut être unique puisqu'aucune configuration n'est réalisée au niveau de la classe. En d'autres termes, pour présenter différents types de produits il suffit de créer une classe Produit générique contenant ce datatype. Les produits (les objets instanciés) pourront être de types complètement différents et posséder des caractéristiques (des options) elles aussi très différentes. Vous pouvez créer par exemple un objet représentant un ordinateur contenant diverses options (mémoire, processeur, etc...) et dans le même temps créer un autre objet représentant un canapé proposant également plusieurs options (couleur, finition, taille, dureté, etc.) et ainsi de suite. Toutes les options, les prix supplémentaires, les règles/dépendances, etc. peuvent être définis au niveau de l'objet.

The capabilities and practical usage of this datatype will be explained using an example of cars being sold through the webshop. Note that there will only be one car object. However, the options, rules and so on will make it possible to sell different versions (custom configurations) of the product. The price of the car will vary depending on the selected options. Note that some options will be default while others must be selected (the user will not be allowed to continue until a selection is made). In addition, some combination of options will not be allowed. Note that this particular feature requires JavaScript support in the browser because the validation will be done on-the-fly while the user is tweaking the options. However, there is a fallback mechanism for non-JavaScript clients. It will take care of the validation when the product is added to the basket. In this case, the product will not be added to the basket as long as an invalid set of selections is provided.
Les possibilités et l'utilisation de ce datatype seront expliquées et illustrées par l'exemple de voitures vendues via un site d'e-commerce. Retenez qu'il n'y aura qu'un seul objet voiture. Pourtant, les options, les règles, etc. permettront de vendre différentes versions (options personnalisées) du produit et le prix du véhicule variera en fonction des options choisies. Retenez également que certaines options seront proposées par défaut quand d'autres devront faire l'objet d'un choix (l'utilisateur ne pouvant poursuivre qu'une fois la sélection faite). Par ailleurs, certaines combinaisons d'options seront interdites. Souvenez-vous que cette fonctionnalité nécessite que le support de JavaScript soit activé dans votre navigateur car la validation sera réalisée à la volée au fur et à mesure de la sélection des options par l'utilisateur. Il existe cependant un mécanisme de repli pour les navigateurs ne supportant pas JavaScript. Ce mécanisme prendra en charge la validation au moment où le produit sera ajouté au panier. Cependant, le produit ne pourra y être placé tant que des sélections invalides seront réalisées.

The product (car) in this example will have three different traits: body, color and seats. We will use three multi-options called "Body", "Color" and "Seats" to represent the possible combinations/variations.
Dans cet exemple, le produit voiture comportera trois caractéristiques différentes: carrosserie, couleurs et sièges. Nous utiliserons donc trois options multiples, nommées «Carrosserie», «Couleurs» et «Sièges», pour réaliser l'ensemble des combinaisons/variantes possibles.

The following table shows the available options for this example.
Le tableau ci-dessous présente les options disponibles de notre exemple:

Each option can be assigned a short text and an additional price. It is also possible to add images for options. In the example above, images can be used to demonstrate the colors that the vehicle is available in and/or show how the different bodies look like. An option can be disabled. Disabling an option will make it non-selectable when the object is viewed. For each multi-option, it is possible to specify a default selection. If a disabled option is chosen as the default selection, users will be forced to select one of the enabled options instead. The following table shows how the default and disabled options are set for the example described above.
Chaque option peut être liée à un texte court et à un prix supplémentaire (surcoût). Il est également possible d'associer une image à chacune d'elles. Dans notre exemple, les images peuvent servir à illustrer les couleurs disponibles et/ou à présenter les différentes carrosseries. Une option peut être désactivée, auquel cas elle n'est plus accessible lorsque le produit est affiché. Il est possible, pour chaque option multiple, de spécifier une sélection par défaut et lorsqu'une option désactivée est définie en tant que sélection par défaut alors les utilisateurs sont obligés de choisir une option disponible. Le tableau ci-après montre comment sont définies, pour notre exemple, les options sélectionnées par défaut et/ou désactivées:

As the table shows, the default choice for body style is "Sedan", the default color is red. The "Seats" multi-option contains a new option called "Make your choice", which will be selected by default. Since this option is disabled, the user will have to select either "Cloth" or "Leather" in order to buy a car ("Make your choice" will be treated as an invalid selection).
Comme le montre le tableau, le choix de carrosserie par défaut est Berline et la couleur par défaut est le rouge. L'option multiple Sièges contient à présent une nouvelle option Faites votre choix sélectionnée par défaut. Cette option étant désactivée, l'utilisateur devra sélectionner Tissu ou Cuir pour acheter le véhicule (Faites votre choix sera traitée comme sélection invalide).

This datatype supports hierarchical organization of the multi-options for each content object. This means that it is possible to create new multi-options beneath existing ones, thus allowing the site administrator to build complex multi-level structures. In the car example, two new multi-options called "Bumpers" and "Mirrors" added beneath the "Color" multi-option could represent the available colors of bumpers and mirrors (the "Color" multi-option represents available body colors). The following table shows the resulting two-level structure.
Ce datatype supporte, pour chaque objet de contenu, l'organisation hiérarchique des options multiples. Ce qui signifie qu'il est possible de créer de nouvelles options multiples sous des options existantes autorisant ainsi l'administrateur du site à construire des structures multi-niveaux complexes. Dans notre exemple de vente de voiture, deux nouvelles options multiples, Pare-chocs et Rétroviseurs, ajoutées sous l'option multiple Couleurs, peuvent représentées les couleurs possibles pour le pare-chocs et les rétroviseurs (l'option multiple Couleurs représente les couleurs de carrosserie disponibles). Le tableau qui suit présente la structure à deux niveaux qui en résulte:

It is possible to specify dependency rules for options located in nested groups. Let's say that for example red cars can not have their bumpers painted in the same color as the body. This situation can be described using the following table where each column corresponds to one of the options of the outer group ("Color"), while the options of the nested group ("Bumpers") are represented by the rows.
Il est possible de spécifier des règles de dépendance pour les options placées dans des groupes imbriqués. Supposons par exemple que les voitures rouge ne puissent être vendues avec un pare-chocs de la couleur de la carrosserie. Ce cas de figure peut être alors décrit par le tableau ci-après où chaque colonne correspond à l'une des options du groupe externe (Couleurs) alors que les options du groupe imbriqué (Pare-chocs) sont représentées par les lignes:

In a similar way, the following table demonstrates the dependency rules between the "Color" and "Mirrors" groups of options.
De la même manière, le présent tableau illustre les règles de dépendances entre les groupes d'options Couleurs et Rétroviseurs.

As the table shows, silver mirrors are not available for black cars and red cars can not have non-painted mirrors. If the dependency rules are specified as shown in the tables above, the system will make the specified options of the inner groups disabled depending on the options that are selected in the outer group. This is achieved by making use of JavaScript in the resulting HTML and thus the client browser must support JavaScript for it to work. If JavaScript is not supported, the interface will allow invalid selections while the visitor/customer plays around with the different options. However, the product will not be added to the basket as long as an invalid set of selections is provided. As previously mentioned, the combination of options will be validated when the user attempts to add the object to the shopping basket.
Comme le montre le tableau, les rétroviseurs argent se sont pas disponibles pour les voitures noires et les véhicules rouges ne seront pas vendus avec des rétroviseurs non peints. Si les règles de dépendance sont définies comme l'indiquent les tableaux ci-dessus alors le système fera dépendre les options spécifiées des groupes internes désactivés des options sélectionnées dans le groupe externe. Ceci étant réalisé par l'emploi de JavaScript dans le code HTML résultant, il devient nécessaire que le navigateur client supporte JavaScript. Dans le cas contraire, l'interface autorisera des sélections non valides de la part du visiteur/client mais le produit ne pourra cependant être ajouté au panier tant que de telles sélections seront choisies. Comme nous le mentionnions précédemment, les combinaisons d'options seront validées lorsque l'utilisateur essaiera d'ajouter l'objet à son panier.

This datatype supports grouping of multi-options. A multi-option located at the top level of the structure always belongs to a group. Multi-options located beneath it (second level, third level and so on) will be considered to be in the same group. The following table shows the situation with two groups called "Exterior" and "Interior".
Ce datatype supporte le regroupement d'options multiples. Une option multiple placée au sommet de la structure appartient toujours à un groupe. Les options multiples placées dessous (qui seront alors de second ou troisième niveau, etc. ) seront considérées comme appartenant au même groupe. Ci-dessous, le tableau montre le cas de deux groupes nommés Extérieur et Intérieur:

In the example above, while the "Body" and "Color" multi-options belong to the "Exterior" group, the "Seats" multi-option belongs to another group called "Interior". In other words, the multi-options located at the top level are grouped. The "Bumpers" and "Mirrors" multi-options located at the second level belong to the same group as "Color".
Dans l'exemple ci-dessus, alors que les options multiples Carrosserie et Couleurs appartiennent au groupe Extérieur, l'option multiple Sièges appartient à l'autre groupe Intérieur. En d'autres termes, les options multiples placées au niveau le plus haut sont groupées et les options multiples Pare-chocs et Rétroviseurs situées au second niveau appartiennent au même groupe que l'option multiple Couleurs.

Note that both grouping and nesting of multi-options are defined at the time of creation. It is not possible to move an existing multi-option to another group or place it beneath a different multi-option. This is why the multi-level structure must be carefully thought out beforehand. It is not recommended to create structures containing more than ten levels. The maximum number of levels is limited to 15. Refer to the source code if you need to change this limitation.
Retenez que le regroupement et l'imbrication des options multiples sont définies au moment de leur création. Il est impossible de déplacer une option multiple vers un autre groupe ou de la placer sous une option multiple différente. C'est pourquoi la structure multi-niveaux doit être mûrement réfléchi à l'avance. Alors que le nombre maximum de niveaux est limité à 15, il n'est pas recommandé de créer des structures contenant plus de dix niveaux. Référez-vous au code source si vous souhaitez modifier cette limite.

Removal of a multi-option will also remove all its sub items (multi-options located beneath it). By removing all multi-options that belong to a group, you can remove the the group itself. Note that this is the only way of removing a group.
La suppression d'une option multiple supprimera également tous ses sous-éléments (les options multiples placées dessous). Par ailleurs, supprimer toutes les options multiples d'un même groupe supprimera le groupe lui-même. Retenez qu'il s'agit-là du seul moyen de supprimer un groupe.

The following screenshot shows the class attribute edit interface for this datatype.
La capture d'écran ci-après montre l'interface d'édition des attributs de classe de ce datatype.

Class attribute edit interface for the "Multi-option2" datatype.
Interface d'édition des attributs de classe dans le cas du datatype «Multi-option2»

Object attribute edit interface / Interface d'édition des attributs d'objet

The following screenshot shows the object attribute edit interface for this datatype.
La capture d'écran ci-après montre l'interface d'édition des attributs d'objet dans le cas de ce datatype.

Object attribute edit interface for the "Multi-option2" datatype.
Interface d'édition des attributs d'objet dans le cas du datatype «Multi-option2»

As you can see from the screenshot above, options are represented as lines in the table (one table for each multi-option). The "Option" field contains the name of the option. The value specified in the "Additional price" column will be added to the product price in case the corresponding option is selected. The "Image" column can be used to add images to options. When viewing a product, users will see a thumbnail/icon that links to the original image. In this case, the system will display options as a list with radio buttons (if no images are added, the options are shown using a drop-down list). Note that it is possible to add other types of related objects instead of images, but the default templates are for images only.
Comme vous pouvez le voir sur l'image ci-dessus, les options sont représentées par les lignes du tableau (un tableau pour chaque option multiple). Le champ Option contient le nom de l'option. La valeur précisée dans la colonne Additional price (Prix supplémentaire) sera ajoutée au prix du produit lorsque l'option correspondante sera sélectionnée. La colonne Image est utilisée pour ajouter une image aux options. Lorsqu'ils regardent un produit, les utilisateurs voient des vignettes/icônes qui sont des liens vers la taille originale des images. Dans ce cas, le système affichera les options sous la forme d'une liste dont chaque item sera associé à un bouton radio (si aucune image n'est ajoutée alors les options sont présentées sous la forme d'un menu déroulant). Retenez qu'il est possible d'associer d'autres types d'objets que des images, mais les templates par défaut n'acceptent que les images.

While the "Def" column with radio buttons can be used to specify the default selection, the "Dis" column contains checkboxes for disabling the options. The "Add option" button can be used to add a new empty line to the table. To remove one or more options, select them using the checkboxes located in the first unnamed column and click the "Remove selected" button.
Alors que la colonne Def contenant des boutons radio est utilisée pour spécifier la sélection par défaut, la colonne Dis contient des cases à cocher pour désactiver les options. Le bouton Add option (Ajouter une option) permet d'ajouter une nouvelle ligne vierge au tableau. Pour supprimer une ou plusieurs options, sélectionnez-les grâce aux cases à cocher placées dans la colonne de gauche sans nom puis cliquez sur le bouton Remove selected (Supprimer la sélection).

To add a new multi-option beneath an existing one, click the "Add multioption sub level" button. Note that this button will not be shown for multi-options that already have sub items (multi-options located beneath them). In this case, the system will show a list of the sub items with checkboxes on the left side plus two new buttons called "Remove multioption" and "Add multioption" below. These buttons are present at each level of the structure, allowing you to add and remove multi-options located at the different levels. Note that removing a multi-option will also remove all its sub items.
Pour ajouter une nouvelle option multiple sous une option existante, cliquez sur le bouton Add multioption sub level (Ajouter un sous-niveau multi-options). Retenez que ce bouton ne s'affichera pas pour les options multiples comportant déjà des sous-éléments (des options multiples placées dessous). Dans ce cas, le système affichera une liste des sous-éléments (précédés de cases à cocher) ainsi que deux nouveaux boutons: Remove multioption (Supprimer la multi-options) et Add multioption (Ajouter une option multiple). Ces boutons, présents à chaque niveau de la structure, vous permettent d'ajouter ou de supprimer des options multiples aux différents niveaux.

Adding a new group of multi-options / Ajouter un nouveau groupe d'options multiples

The "Add group" button makes it possible to add a new group of multi-options. The following screenshot shows a part of the object attribute edit interface that corresponds to a newly created empty group of multi-options.
Le bouton Add group (Ajouter un groupe) permet d'ajouter un nouveau groupe d'options multiples. L'image qui suit montre l'interface d'édition des attributs d'objet à l'occasion de la création d'un nouveau groupe d'options multiples:

A part of the object attribute edit interface for the "Multi-option2" datatype.
Une partie de l'interface d'édition des attributs d'objet dans le cas du datatype «Multi-option2»

As the screenshot shows, a newly created group consists of one multi-option containing only one option (all the fields are empty). At this stage, you should enter the name of the group and the name of multi-option, plus create the necessary options. Nested multi-options can be created using the "Add multioption sub level" button.
Comme le montre l'image ci-dessus, un nouveau groupe est composé d'une option multiple contenant une unique option (dont tous les champs sont vides). À ce stade, vous devez indiquer le nom du groupe et celui de l'option multiple puis créer les options nécessaires. Des options multiples imbriquées peuvent être créées grâce au bouton Add multioption sub level (Ajouter un sous-niveau multi-options).

The "Add multioption" button allows you to add new multi-options to the top level within the group. The system will show all multi-options that belong to the group with checkboxes on the left hand side. The "Remove multioption" button can be used to remove selected multi-options. The group itself is automatically removed when all multi-options that belong to it are removed.
Le bouton Add multioption (Ajouter une option multiple) vous permet d'ajouter de nouvelles options multiples au groupe. Le système affichera toutes les options multiples appartenant à un groupe accompagnées, sur leur gauche, de cases à cocher. Le bouton Remove multioption (Supprimer la multi-options) est utilisé pour supprimer les options multiples sélectionnées. Le groupe est automatiquement supprimé lorsque toutes les options multiples qu'il contient sont supprimées.

Adding dependency rules / Ajouter des règles de dépendance

The "Rules" button located at the bottom makes it possible to specify dependency rules for nested multi-options. When this button is clicked, the object attribute edit interface will change. Instead of showing an interface for editing the options, the system will show an interface that can be used to define the rules. Note that this behavior isn't common when it comes to other datatypes. The following screenshot shows what the object attribute edit interface will change into when the "Rules" button is clicked.
Le bouton Rules (Règles), situé sous tous les autres, permet de créer des règles de dépendance pour les options multiples imbriquées. Lorsque l'on clique sur ce bouton, l'interface d'édition des attributs d'objet est modifiée. Plutôt que d'afficher une interface d'édition des options, le système affiche alors une interface utilisée pour définir les règles. Retenez que ce comportement n'est commun à aucun autre datatype. La capture d'écran suivante montre à quoi ressemble l'interface d'édition des attributs d'objet après avoir été modifiée par un clic sur le bouton Rules (Règles):

Dependency rules in the object attribute edit interface for the "Multi-option2" datatype.
Règles de dépendance dans l'interface d'édition des attributs d'objet dans le cas du datatype «Multi-option2»

As the screenshot shows, every nested multi-option ("Bumpers" and "Mirrors") has a table with checkboxes that make it possible to specify which options are available for each possible value of the parent multi-option ("Color"). By default, all checkboxes are selected, meaning that all options are available. The screenshot above shows a situation which follows the rules that were discussed earlier. In other words, the following limitations are introduced:
Comme le montre l'image ci-dessus, chaque option multiple imbriquée (Pare-chocs et Rétroviseurs) est représentée par un tableau contenant des cases à cocher permettant d'indiquer les options disponibles pour chacune des valeurs de l'option multiple parent (Couleurs). Par défaut, toutes les caches à cocher sont cochées, ce qui signifie que toutes les options sont disponibles. Cette image illustre le cas des règles exposées précédemment. En d'autres termes on peut dire que les limitations suivantes ont été introduites:

• Red cars can not have bumpers painted in the same color as the body.
  Les voitures rouge ne peuvent être livrées avec un pare-chocs de la couleur de la carrosserie
• Black cars can not have silver mirrors.
  Les voitures noires ne peuvent être livrées avec des rétroviseurs argent
• Red cars can not have non-painted mirrors.
  Les voitures rouge ne peuvent être livrées avec des rétroviseurs non peints

The "Reset rules" button located at the bottom of the interface makes it possible to restore the default configuration (allowing all possible combinations). Note that pressing this button will wipe out the custom rules. Clicking the "Options" button will bring you back to the interface for editing options. In other words, the "Rules" and the "Options" buttons make it possible to switch between the two object edit interfaces of this datatype.
Le bouton Reset rules situé au bas de l'interface sert à charger la configuration par défaut (autorisant toutes les combinaisons possibles). Retenez qu'un clic sur ce bouton effacera toutes les règles personnalisées. En cliquant sur le bouton Options vous retournez à l'interface d'édition des options. En clair, les boutons Reset rules et Options vous permettent de basculer d'une interface à l'autre de ce datatype.

Raw output / Sortie brute

The ".content" of an ezcontentobjectattribute object using this datatype returns an ezmultioption2 object.
La partie .content d'un objet ezcontentobjectattribute utilisant ce datatype renvoie un objet  ezmultioption2 .

Commentaires