Planète

julien dubreuil

Drupal since 2009

Drupal Commerce, ajouter un pane custom dans votre checkout

Drupal Commerce creation d'un pane de checkout

Comme nous avons pu le voir dans l’article précédent, il est simple de configurer le checkout de Drupal Commerce de façon à créer l’expérience utilisateur que vous désirez.

Dans cet article nous allons voir comment avec du code, ajouter et modifier des panes. Pour rappel, les panes sont les éléments qui composent les différentes pages du checkout. On y retrouve par exemple, le pane de paiement, d’adresse ou encore de choix de solution de transport.

Histoire d’illustrer cela, je vous propose de créer un module Drupal afin d’ajouter un pane permettant à vos clients de choisir parmi plusieurs emballages cadeaux. Ce simple module est accessible sur Github pour plus de compréhension.

Déclaration de notre nouveau Pane

La première chose à faire consiste à déclarer au système notre nouveau pane en utilisant le

hook_commerce_checkout_pane_info()

sandbox.module

<span class='line'><span class="k">function</span> <span class="nf">sandbox_commerce_checkout_pane_info</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="nv">$panes</span><span class="p">[</span><span class="s1">&#39;paper_gift&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="k">array</span><span class="p">(</span>
</span><span class='line'>    <span class="s1">&#39;title&#39;</span> <span class="o">=&gt;</span> <span class="nx">t</span><span class="p">(</span><span class="s1">&#39;Paper gifts&#39;</span><span class="p">),</span>
</span><span class='line'>    <span class="s1">&#39;base&#39;</span> <span class="o">=&gt;</span> <span class="s1">&#39;paper_gift_pane&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="s1">&#39;page&#39;</span> <span class="o">=&gt;</span> <span class="s1">&#39;checkout&#39;</span><span class="p">,</span>
</span><span class='line'>  <span class="p">);</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">return</span> <span class="nv">$panes</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span>

Notre pane sera alors reconnu par Drupal et disponible dans le checkout. Dès à présent, vous pouvez activer le module et voir le pane apparaitre sur la page d’administration du checkout.

Comme à la manière des hooks de Drupal, le code qui génère l’affichage des panes va faire de l’introspection dans le code, de façon à chercher toutes les fonctions qui commenceront par la “base” que vous avez définie dans le hook_commerce_checkout_pane_info().

Ainsi le code sera à la recherche des fonctions suivantes :

BASE_settings_form()
BASE_checkout_form()
BASE_checkout_form_validate()
BASE_checkout_form_submit()
BASE_review()

Implémentation du formulaire d’administration du Pane

L’intérêt du pane est d’être affiché sur une page du checkout, néanmoins vous pouvez créer un formulaire de configuration pour celui-ci. Pour y accéder, rendez-vous sur l’interface d’administration du checkout. Notez qu’il n’y a pas de table dans laquelle les informations seront stockées, il vous faudra utiliser les méthodes variable_get() et variable_set() pour sauvegarder vos réglages.

sandbox.module

<span class='line'><span class="sd">/**</span>
</span><span class='line'><span class="sd"> * Pane: settings form callback.</span>
</span><span class='line'><span class="sd"> */</span>
</span><span class='line'><span class="k">function</span> <span class="nf">paper_gift_pane_settings_form</span><span class="p">(</span><span class="nv">$checkout_pane</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nv">$form</span><span class="p">[</span><span class="s1">&#39;paper_gifts&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="k">array</span><span class="p">(</span>
</span><span class='line'>    <span class="s1">&#39;#type&#39;</span> <span class="o">=&gt;</span> <span class="s1">&#39;checkboxes&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="s1">&#39;#title&#39;</span> <span class="o">=&gt;</span> <span class="nx">t</span><span class="p">(</span><span class="s1">&#39;Ship this item in a gift box&#39;</span><span class="p">),</span>
</span><span class='line'>    <span class="s1">&#39;#default_value&#39;</span> <span class="o">=&gt;</span> <span class="nx">variable_get</span><span class="p">(</span><span class="s1">&#39;paper_gifts&#39;</span><span class="p">,</span> <span class="k">array</span><span class="p">()),</span>
</span><span class='line'>    <span class="s1">&#39;#options&#39;</span> <span class="o">=&gt;</span> <span class="nx">paper_gift_pane_default_paper_gifts</span><span class="p">(),</span>
</span><span class='line'>  <span class="p">);</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">return</span> <span class="nv">$form</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="sd">/**</span>
</span><span class='line'><span class="sd"> * Defines a list of default paper gifts to use.</span>
</span><span class='line'><span class="sd"> */</span>
</span><span class='line'><span class="k">function</span> <span class="nf">paper_gift_pane_default_paper_gifts</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">return</span> <span class="k">array</span><span class="p">(</span>
</span><span class='line'>    <span class="s1">&#39;boy&#39;</span> <span class="o">=&gt;</span> <span class="nx">t</span><span class="p">(</span><span class="s1">&#39;Boys&#39;</span><span class="p">),</span>
</span><span class='line'>    <span class="s1">&#39;girl&#39;</span> <span class="o">=&gt;</span> <span class="nx">t</span><span class="p">(</span><span class="s1">&#39;Girls&#39;</span><span class="p">),</span>
</span><span class='line'>    <span class="s1">&#39;christmas&#39;</span> <span class="o">=&gt;</span> <span class="nx">t</span><span class="p">(</span><span class="s1">&#39;Christmas&#39;</span><span class="p">),</span>
</span><span class='line'>    <span class="s1">&#39;birthday&#39;</span> <span class="o">=&gt;</span> <span class="nx">t</span><span class="p">(</span><span class="s1">&#39;Birthday&#39;</span><span class="p">),</span>
</span><span class='line'>    <span class="s1">&#39;none&#39;</span> <span class="o">=&gt;</span> <span class="nx">t</span><span class="p">(</span><span class="s1">&#39;None&#39;</span><span class="p">),</span>
</span><span class='line'>  <span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span>

Dans le code ci-dessus, j’ai créé un formulaire d’administration et ajouté un champ texte, permettant au webmaster de modifier le texte qui sera affiché à l’utilisateur.

Création du Pane

Un pane n’est ni plus, ni moins qu’un formulaire dans le formulaire de checkout. Comme à l’habitude, vous y retrouverez le form, le form_validate et le form_submit.

Form

Le form contiendra ce qui sera affiché à l’utilisateur. Dans le cas de notre exemple, l’utilisateur pourra choisir entre plusieurs papiers cadeaux ou pas d’emballage.

sandbox.module

<span class='line'><span class="sd">/**</span>
</span><span class='line'><span class="sd"> * Pane: form callback.</span>
</span><span class='line'><span class="sd"> */</span>
</span><span class='line'><span class="k">function</span> <span class="nf">paper_gift_pane_checkout_form</span><span class="p">(</span><span class="nv">$form</span><span class="p">,</span> <span class="o">&amp;</span><span class="nv">$form_state</span><span class="p">,</span> <span class="nv">$checkout_pane</span><span class="p">,</span> <span class="nv">$order</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nv">$paper_gifts</span> <span class="o">=</span> <span class="k">array</span><span class="p">();</span>
</span><span class='line'>  <span class="nv">$default_paper_gifts</span> <span class="o">=</span> <span class="nx">paper_gift_pane_default_paper_gifts</span><span class="p">();</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">foreach</span> <span class="p">(</span><span class="nv">$default_paper_gifts</span> <span class="k">as</span> <span class="nv">$name</span> <span class="o">=&gt;</span> <span class="nv">$title</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nv">$image</span> <span class="o">=</span> <span class="k">array</span><span class="p">(</span>
</span><span class='line'>      <span class="s1">&#39;path&#39;</span> <span class="o">=&gt;</span> <span class="nx">drupal_get_path</span><span class="p">(</span><span class="s1">&#39;module&#39;</span><span class="p">,</span> <span class="s1">&#39;sandbox&#39;</span><span class="p">)</span> <span class="o">.</span> <span class="s1">&#39;/images/&#39;</span> <span class="o">.</span> <span class="nv">$name</span> <span class="o">.</span> <span class="s1">&#39;.jpg&#39;</span><span class="p">,</span>
</span><span class='line'>      <span class="s1">&#39;title&#39;</span> <span class="o">=&gt;</span> <span class="nv">$title</span><span class="p">,</span>
</span><span class='line'>      <span class="s1">&#39;alt&#39;</span> <span class="o">=&gt;</span> <span class="nv">$title</span><span class="p">,</span>
</span><span class='line'>    <span class="p">);</span>
</span><span class='line'>    <span class="nv">$paper_gifts</span><span class="p">[</span><span class="nv">$name</span><span class="p">]</span> <span class="o">=</span> <span class="nx">theme</span><span class="p">(</span><span class="s1">&#39;image&#39;</span><span class="p">,</span> <span class="nv">$image</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>
</span><span class='line'>  <span class="nv">$pane_form</span><span class="p">[</span><span class="s1">&#39;paper_gift&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="k">array</span><span class="p">(</span>
</span><span class='line'>    <span class="s1">&#39;#type&#39;</span> <span class="o">=&gt;</span> <span class="s1">&#39;radios&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="s1">&#39;#default_value&#39;</span> <span class="o">=&gt;</span> <span class="s1">&#39;none&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="s1">&#39;#title&#39;</span> <span class="o">=&gt;</span> <span class="nx">t</span><span class="p">(</span><span class="s1">&#39;Select your paper gift&#39;</span><span class="p">),</span>
</span><span class='line'>    <span class="s1">&#39;#description&#39;</span> <span class="o">=&gt;</span> <span class="nx">t</span><span class="p">(</span><span class="s1">&#39;Your items will be shipped in a gift box.&#39;</span><span class="p">),</span>
</span><span class='line'>    <span class="s1">&#39;#options&#39;</span> <span class="o">=&gt;</span> <span class="nv">$paper_gifts</span><span class="p">,</span>
</span><span class='line'>    <span class="s1">&#39;#attributes&#39;</span> <span class="o">=&gt;</span> <span class="k">array</span><span class="p">(</span><span class="s1">&#39;class&#39;</span> <span class="o">=&gt;</span> <span class="k">array</span><span class="p">(</span><span class="s1">&#39;paper-gift-pane-selection&#39;</span><span class="p">)),</span>
</span><span class='line'>  <span class="p">);</span>
</span><span class='line'>
</span><span class='line'>  <span class="nv">$pane_form</span><span class="p">[</span><span class="s1">&#39;paper_gift&#39;</span><span class="p">][</span><span class="s1">&#39;#attached&#39;</span><span class="p">][</span><span class="s1">&#39;css&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="k">array</span><span class="p">(</span>
</span><span class='line'>    <span class="nx">drupal_get_path</span><span class="p">(</span><span class="s1">&#39;module&#39;</span><span class="p">,</span> <span class="s1">&#39;sandbox&#39;</span><span class="p">)</span> <span class="o">.</span> <span class="s1">&#39;/css/sandbox.css&#39;</span><span class="p">,</span>
</span><span class='line'>  <span class="p">);</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">return</span> <span class="nv">$pane_form</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span>

Form validate

Le form_validate permet d’effectuer des opérations de validation sur les champs saisis par l’utilisateur.

sandbox.module

<span class='line'><span class="sd">/**</span>
</span><span class='line'><span class="sd"> * Pane: form validation callback.</span>
</span><span class='line'><span class="sd"> */</span>
</span><span class='line'><span class="k">function</span> <span class="nf">paper_gift_pane_checkout_form_validate</span><span class="p">(</span><span class="nv">$form</span><span class="p">,</span> <span class="o">&amp;</span><span class="nv">$form_state</span><span class="p">,</span> <span class="nv">$checkout_pane</span><span class="p">,</span> <span class="nv">$order</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="c1">// Validate the given value or set to none if null.</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">empty</span><span class="p">(</span><span class="nv">$form_state</span><span class="p">[</span><span class="s1">&#39;values&#39;</span><span class="p">][</span><span class="nv">$checkout_pane</span><span class="p">[</span><span class="s1">&#39;pane_id&#39;</span><span class="p">]]))</span> <span class="p">{</span>
</span><span class='line'>    <span class="nv">$pane_values</span> <span class="o">=</span> <span class="nv">$form_state</span><span class="p">[</span><span class="s1">&#39;values&#39;</span><span class="p">][</span><span class="nv">$checkout_pane</span><span class="p">[</span><span class="s1">&#39;pane_id&#39;</span><span class="p">]];</span>
</span><span class='line'>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="k">empty</span><span class="p">(</span><span class="nv">$pane_values</span><span class="p">[</span><span class="s1">&#39;paper_gift&#39;</span><span class="p">]))</span> <span class="p">{</span>
</span><span class='line'>      <span class="nv">$pane_values</span><span class="p">[</span><span class="s1">&#39;paper_gift&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="s1">&#39;none&#39;</span><span class="p">;</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>  <span class="k">return</span> <span class="k">TRUE</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span>

Ici, on regarde simplement s’il y a une valeur, sinon on définit que l’utilisateur ne veut pas d’emballage.

Form submit

La sauvegarde des informations intervient dans le form_submit une fois que l’on a passé la validation.

sandbox.module

<span class='line'><span class="sd">/**</span>
</span><span class='line'><span class="sd"> * Pane: form submission callback.</span>
</span><span class='line'><span class="sd"> */</span>
</span><span class='line'><span class="k">function</span> <span class="nf">paper_gift_pane_checkout_form_submit</span><span class="p">(</span><span class="nv">$form</span><span class="p">,</span> <span class="o">&amp;</span><span class="nv">$form_state</span><span class="p">,</span> <span class="nv">$checkout_pane</span><span class="p">,</span> <span class="nv">$order</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">empty</span><span class="p">(</span><span class="nv">$form_state</span><span class="p">[</span><span class="s1">&#39;values&#39;</span><span class="p">][</span><span class="nv">$checkout_pane</span><span class="p">[</span><span class="s1">&#39;pane_id&#39;</span><span class="p">]]))</span> <span class="p">{</span>
</span><span class='line'>    <span class="nv">$pane_values</span> <span class="o">=</span> <span class="nv">$form_state</span><span class="p">[</span><span class="s1">&#39;values&#39;</span><span class="p">][</span><span class="nv">$checkout_pane</span><span class="p">[</span><span class="s1">&#39;pane_id&#39;</span><span class="p">]];</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">empty</span><span class="p">(</span><span class="nv">$pane_values</span><span class="p">[</span><span class="s1">&#39;paper_gift&#39;</span><span class="p">]))</span> <span class="p">{</span>
</span><span class='line'>      <span class="nv">$order</span><span class="o">-&gt;</span><span class="na">data</span><span class="p">[</span><span class="s1">&#39;paper_gift&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nv">$pane_values</span><span class="p">[</span><span class="s1">&#39;paper_gift&#39;</span><span class="p">];</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span>

Remarquez que vous avez accès à l’objet $order et que vous pouvez faire ce que vous en voulez. Pour l’exercice j’aurais pu créer un nouveau line item, mais pour faire simple le choix de l’utilisateur résidera comme simple information dans la commande.

Form review

Une fois l’information attachée à la commande, il ne nous reste plus qu’à la faire paraitre sur le pane de review afin que l’utilisateur puisse la voir.

Pour cela il suffit d’implémenter le form_review

sandbox.module

<span class='line'><span class="sd">/**</span>
</span><span class='line'><span class="sd"> * Pane: Review</span>
</span><span class='line'><span class="sd"> */</span>
</span><span class='line'><span class="k">function</span> <span class="nf">paper_gift_pane_review</span><span class="p">(</span><span class="nv">$form</span><span class="p">,</span> <span class="nv">$form_state</span><span class="p">,</span> <span class="nv">$checkout_pane</span><span class="p">,</span> <span class="nv">$order</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nv">$order</span><span class="o">-&gt;</span><span class="na">data</span><span class="p">[</span><span class="s1">&#39;paper_gift&#39;</span><span class="p">]</span> <span class="o">&amp;&amp;</span> <span class="nv">$order</span><span class="o">-&gt;</span><span class="na">data</span><span class="p">[</span><span class="s1">&#39;paper_gift&#39;</span><span class="p">]</span>  <span class="o">!=</span> <span class="s1">&#39;none&#39;</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nv">$content</span><span class="p">[</span><span class="s1">&#39;paper_gift&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="k">array</span><span class="p">(</span>
</span><span class='line'>      <span class="s1">&#39;#type&#39;</span> <span class="o">=&gt;</span> <span class="s1">&#39;item&#39;</span><span class="p">,</span>
</span><span class='line'>      <span class="s1">&#39;#markup&#39;</span> <span class="o">=&gt;</span> <span class="nx">t</span><span class="p">(</span><span class="s1">&#39;Items in your order will be wrapped with the %paper paper gift&#39;</span><span class="p">,</span> <span class="k">array</span><span class="p">(</span><span class="s1">&#39;%paper&#39;</span> <span class="o">=&gt;</span> <span class="nv">$order</span><span class="o">-&gt;</span><span class="na">data</span><span class="p">[</span><span class="s1">&#39;paper_gift&#39;</span><span class="p">])),</span>
</span><span class='line'>    <span class="p">);</span>
</span><span class='line'>    <span class="k">return</span> <span class="nx">drupal_render</span><span class="p">(</span><span class="nv">$content</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span>

Modification d’un Pane existant

Comme mentionné précédemment, les panes ne sont que des forms et comme tout form vous avez la possibilité de les alterer via un hook_form_alter() ou encore mieux un hook_form_ID_alter().

Dans le cas ou vous voudriez modifier les paramètres d’un pane, vous implémentez la fonction hook_commerce_checkout_pane_info_alter()

Le mot de la fin

Au final, ce n’était pas si compliqué que cela ? En plus du fait d’avoir maintenant un pane pour offrir un emballage papier cadeau à vos clients, vous savez maintenant qu’il y a 3 grandes étapes dans la vie d’un pane. Le formulaire de settings pour l’admin, le formulaire destiné aux clients et le formulaire de review. Je serais curieux de savoir pourquoi vous avez besoin d’ajouter un pane dans votre checkout…
Comme mentionné au début de ce post, le code est accéssible sur Github.

Lundi 1 Septembre 2014

Par Mantalo Conseil

Agence web, Agence de Communication et Marketing en Dordogne (Aquitaine)

e-commerce : un catalogue vendeur sans budget photo

Sommaire

1.Un site marchand sans photos attrayantes... juste inimaginable !
2.Le coût d'un shooting produits en studio
3.Alternatives aux photos professionnelles
4.Focus sur la prise de vues
5.Traiter les photos avant intégration dans la boutique
6.À propos de la Web agency Mantalo

Un site marchand sans photos attrayantes... juste inimaginable !

Imaginez une boutique sans vitrine ou un catalogue commercial sans illustrations... un remède contre la vente !

Plus encore, l'image a pris une telle importance dans nos comportements d'achat qu'elle ne doit pas seulement exister, elle se doit aussi d'être attractive pour satisfaire notre sensibilité croissante au marketing sensoriel.

Les studios spécialisés dans la photo publicitaire offrent sans aucun doute la meilleure solution sur le plan technique. Sans avoir participé un jour à un shooting produits de A à Z, on imagine difficilement le temps et les ressources nécessaires... ce qui nous laisse pantois lorsqu'on reçoit les devis.

Le coût d'un shooting produits en studio

Toujours trop cher lorsque le budget global est serré, les devis des photographes sont toutefois généralement justifiés. Comptez globalement entre 900 et 1000 euros HT pour une vingtaine de photos avec le retraitement numérique et les droits d'exploitation.

Évidemment, si on considère q'un produit doit en moyenne faire l'objet de 3 vues différentes, et qu'une boutique en ligne doit offrir une gamme de produits suffisante pour être attractive (au moins 50 références hors déclinaisons), le budget atteint assez facilement 7500 euros, soit environ autant que le budget minimum permettant le développement d'un site marchand générique de qualité satisfaisante.

Alternatives aux photos professionnelles

Rares sont donc les jeunes e-commerçants qui ont recours aux services d'un studio professionnel. Pour autant, disposer de belles photos produits reste essentiel et pour ne pas condamner le site marchand à l'échec dès le départ, il faut s'organiser au mieux avec les ressources disponibles.

Installez un studio de forture dans vos locaux

N'importe quelle pièce peut faire l'affaire pour peu que vous puissiez mobiliser environ 10 m²durant quelques semaines, avec :

un point de lumière naturelle,
un plateau de présentation pour les prises de vue,
une étagère (ou des suspensions) pour y entreposer les accessoires ou les produits en cours de travail,
une zone de circulation pour accéder facilement aux tables sans déplacer le pied de l'appareil photo et les dispositifs d'éclairage.

Réaliser toutes les prises de vues à partir de la même installation garantit l'homogénéité des photos et du résultat final.

Disposez du bon matériel

L'outillage indispensable se résume à 3 équipements :

Un trépied pour stabiliser l'appareil photo au cours des réglages et des prises de vues,
Un appareil photo numérique qui permet un réglage manuel de l'ouverture et de l'exposition,
Une boite à lumière ou des sources de lumière continue d'une puissance suffisante et adaptée aux produits à shooter.

Pour le reste, faites appel à votre imagination et à votre ingéniosité :

usez de papier ou de toile pour le fond,
mettez à profit le ruban adhésif et le fil de nylon pour suspendre et fixer le fond sur son support,
tracez au crayon ou au blanco vos repères de positionnement sur la table de présentation,
montez une étagère en kit pour tout ranger et tout avoir sous la main,
...

Considérez l'éclairage comme essentiel

Rassurez-vous, les plus grands professionnels passent eux aussi beaucoup de temps à trouver la bonne organisation des sources lumineuses.

Le bon choix d'éclairage permet des prises de vues qui respectent les couleurs et leurs contrastes. N'hésitez donc pas à passer le temps nécessaire aux essais car une fois trouvée, la solution servira durant toute la durée du shooting photo. Pensez aussi à garder sous la main un quart de feuille blanche qui vous servira à étalonner vos photos sur la plan de la luminosité.

Les ombres peuvent être parasites, ou de précieux alliés pour souligner les formes et donner du réalisme à vos produits.

Soignez la présentation des produits

Il reste la mise en scène des produits et sur ce point, vous pouvez simplement vous inspirer de certains sites référents qui impulsent les tendances pour des produits similaires aux votres. Bien sûr, si votre créativité vous autorise à innover... surprenez-nous !

5 clés pour valoriser à coup sûr les prises de vues de vos produits :

Inspectez vos produits sous toutes les coutures pour ne laisser aucun détail dégrader leur aspect (micro tâches, peluches, traces, grains de poussière, ...),
Trouvez l'angle le plus favorable pour mettre en évidence leurs signes distinctifs (rotation, inclinaison, surplomb, ...),
Associez vos produits à des objets très courants (clés, montre, carte de crédit, ...) si vous souhaitez que vos clients aient une bonne appréciation de leurs dimensions sans avoir à les rechercher dans le descriptif,
Enrichissez la présentation de vos produits par la présence d'accessoires s'ils contribuent fortement à intensifier l'intérêt ou le plaisir sensoriel,
Assurez-vous avant chaque prise de vue que votre fond soit resté impécable (exempt de plis, tâches, accrocs, ...) afin d'éviter les retouches post-production toujours ruineuses en temps.

Toutes les astuces sont permises pour imprimer un mouvement, maintenir en suspend un élément, raidir un support, ... et là, c'est à vous de jouer.

Focus sur la prise de vues

De la même façon que les repères sur votre fond guideront vos dispositions sur le plateau de shooting, le ou les points de prise de vues seront exactement tracés au sol, une fois définies comme satisfaisantes.

Prévoyez de demander à votre prestataire web une fonctionnalité zoom sur vos photos. Vos clients pourront ainsi examiner vos produits dans leurs moindres détails, et ils adorent ça... pour peu que les angles de prise de vues anticipent cette observation.

Doublez enfin toujours vos photos d'une prise de vue avec un quart de feuille blanche contre votre produit, face à l'angle de shoot. Vous aurez ainsi un repère constant de luminosité. Il sera un précieux indice pour guider le retraitement numérique définitif.

Traiter les photos avant intégration dans la boutique

Le retraitement numérique de vos photos se justifie par :

la volonté de montrer à vos clients, des photos totalement fidèles à l'aspect réel de vos produits,
l'intérêt de suivre les préconisation d'un guide de style que vous aurez préalablement établi en précisant notamment :
- les contraintes de taille des images,
- la dimension des différentes marges,
- les couleurs de background,
- les alignements pour les différentes catégories de produits,
- les ombrages et leurs caractéristiques,
le respect des principales règles visuelles pour la vente en ligne telles qu'exigées par certaines plateformes de vente en ligne comme eBay, Amazon ou Google Shopping, si vous étiez amenés à les utiliser.

Cette opération est la moins accessible pour les e-commerçants qui ne maîtrisent pas les outils de retouche numérique. C'est sur ce point qu'ils peuvent mettre à profit les services de notre agence.

À propos de la Web agency Mantalo

Lorsque le budget de nos clients le permet, nous collaborons volontiers avec les studios spécialisés en photographie publicitaire.

Dans les autres cas, à l'instar de cette publication ouverte et compte tenu de notre souhait de contribuer à la réussite de leur commerce en ligne, nous les aidons à mettre en oeuvre les moyens requis pour produire des photos de produits dans les meilleures conditions par un accompagnement :

à la mise en place d'un studio "maison" dans leurs locaux,
à la formalisation d'un guide de style,
à la prise de vues.

Nous offrons également à nos clients, des prestations de retraitement numérique à l'aide de logiciels professionnels qui nécessitent une licence d'utilisation et une formation spécialisée.

Tags:

Category:

Sites marchands

Votre projet de e-commerce tient la route ?

Votre budget photo est trop réduit pour faire appel à un studio professionnel en photographies publicitaires ?

Contactez-nous et voyons ensemble comment optimiser vos ressources disponibles !

Dimanche 10 Août 2014

Par vincent59

Vincent Liefooghe

Influence du paramétrage APC sur les performances Drupal

Avec une version PHP inférieure à 5.5 il est recommandé d'utiliser un cache d'OpCode. Ce cache permet d'améliorer les performances de PHP, en mettant en cache le code PHP une fois qu'il a été analysé.

L'un des caches les plus utilisés est APC. Son installation sur une distribution type Debian consiste simplement en une commande

apt-get install php-apc

Par défaut, la taille mémoire réservée est de 32 Mo.

Si cette taille n'est pas optimale, les performances peuvent être dégradées au lieu d'être améliorées. En effet, on a alors un phénomène de saturation du cache, de fragmentation, et le code doit passer par des phases de check / miss / insert.

Pour nos tests, nous réalisons une première séance de tirs avec l'outil siege, pendant 2 minutes, sur une liste de 200 urls (les contenus ont été générés par le module Devel generate).

Résultats sans APC

Transactions:		         770 hits
Availability:		      100.00 %
Elapsed time:		      119.15 secs
Data transferred:	        3.97 MB
Response time:		        3.81 secs
Transaction rate:	        6.46 trans/sec
Throughput:		        0.03 MB/sec
Concurrency:		       24.63
Successful transactions:         766
Failed transactions:	           0
Longest transaction:	        4.65
Shortest transaction:	        0.55

Typiquement, sans Cache d'OpCode et sans cache Drupal, les performances sont assez faibles.

Résultats avec 16 Mo

Le résultat de la commande siege est :

Transactions:		        2928 hits
Availability:		      100.00 %
Elapsed time:		      119.51 secs
Data transferred:	       14.98 MB
Response time:		        1.02 secs
Transaction rate:	       24.50 trans/sec
Throughput:		        0.13 MB/sec
Concurrency:		       24.89
Successful transactions:        2917
Failed transactions:	           0
Longest transaction:	        2.78
Shortest transaction:	        0.55

Sur cette VM de test, on obtient 24 transactions par secondes, sans cache drupal activé. On constate que la taille mémoire utilisée par le cache est de 15 Mo environ. Par rapport à la configuration sans le cache APC, on augmente les performances d'un rapport 4 environ.

La consommation mémoire APC est la suivante :

Résultats avec 12 Mo

Transactions:		         784 hits
Availability:		       99.87 %
Elapsed time:		      119.73 secs
Data transferred:	        3.99 MB
Response time:		        3.75 secs
Transaction rate:	        6.55 trans/sec
Throughput:		        0.03 MB/sec
Concurrency:		       24.58
Successful transactions:         778
Failed transactions:	           1
Longest transaction:	        4.42
Shortest transaction:	        0.58

Dans ce cas, le paramétrage du cache APC n'est pas correct. En effet, la taille du cache n'est pas suffisante pour stocker toutes les opérations.
Du coup, les performances chutent drastiquement (environ 1/4 des performances précédentes), et l'on a des performances identiques au fonctionnement sans le cache APC.

On constate que le cache APC est saturé, et que l'on voit des "cache full count", qui signifient que le cache a été rempli et qu'il a fallu vider des éléments, ce qui est très pénalisant.

Résultats avec 24 Mo

Transactions:		        3104 hits
Availability:		      100.00 %
Elapsed time:		      119.67 secs
Data transferred:	       15.90 MB
Response time:		        0.96 secs
Transaction rate:	       25.94 trans/sec
Throughput:		        0.13 MB/sec
Concurrency:		       24.89
Successful transactions:        3085
Failed transactions:	           0
Longest transaction:	        1.53
Shortest transaction:	        0.48

Avec 24 Mo, les choses rentrent dans l'ordre. Le cache est correctement utilisé, mais il n'y a pas d'amélioration des performances.

Résultats avec 32 Mo

Transactions:		        2595 hits
Availability:		      100.00 %
Elapsed time:		      119.78 secs
Data transferred:	       13.48 MB
Response time:		        1.15 secs
Transaction rate:	       21.66 trans/sec
Throughput:		        0.11 MB/sec
Concurrency:		       24.87
Successful transactions:        2583
Failed transactions:	           0
Longest transaction:	        5.92
Shortest transaction:	        0.89

Conclusion

Cette série de tests a montré que le paramétrage du cache APC doit être régulièrement monitoré et validé, sous peine d'avoir un effet inverse à celui attendu et de dégrader les performances.

On peut également constater qu'il ne sert à rien de surallouer la mémoire, car une fois la taille optimale allouée, il n'y a aucun gain.

Cela prouve également que le choix de l'hébergeur est important, et que la richesse du CMS Drupal a également des impacts sur les performances de la plate-forme. Il convient donc de faire le bon choix. Un hébergement mutualisé ne pourra généralement pas offrir la souplesse d'un hébergeur spécialisé, capable de mettre en oeuvre les bons composants et les bons paramétrages.

Addendrum : impact du cache Drupal

Les tests ont été réalisés avec le cache désactivé. De ce fait, de nombreuses requêtes MySQL sont générées, et tendent à ralentir le débit.
Si on active le cache Drupal pour les utilisateurs anonymes, les résultats sont spectaculaires.

Un premier essai sans cache APC, mais avec le cache Drupal :

Transactions:		        3610 hits
Availability:		      100.00 %
Elapsed time:		      119.95 secs
Data transferred:	       18.70 MB
Response time:		        0.83 secs
Transaction rate:	       30.10 trans/sec
Throughput:		        0.16 MB/sec
Concurrency:		       24.91
Successful transactions:        3598
Failed transactions:	           0
Longest transaction:	        5.18
Shortest transaction:	        0.59

On constate une nette amélioration par rapport à un paramétrage sans cache (30 transactions / seconde vs 6.5). Au final, on est assez proche d'une configuration APC sans cache Drupal.

Deuxième essai avec le cache Drupal et le cache APC :

Transactions:		       23611 hits
Availability:		      100.00 %
Elapsed time:		      119.03 secs
Data transferred:	      122.00 MB
Response time:		        0.13 secs
Transaction rate:	      198.36 trans/sec
Throughput:		        1.02 MB/sec
Concurrency:		       24.93
Successful transactions:       23483
Failed transactions:	           0
Longest transaction:	        2.49
Shortest transaction:	        0.06

Lorsqu'on active les caches APC et Drupal, les performances sont multipliées par 30 !

N'oubliez donc pas, pour avoir de bonnes performances, d'activer tous les niveaux de cache possibles : au niveau Drupal, mais également au niveau PHP. Le choix d'un hébergeur qui supporte ces différents niveaux est un gage de performances. Mon hébergeur, HebInWeb.com, met en oeuvre APC sur les instances Drupal.

Catégorie:

Tag:

Lundi 4 Août 2014

Par Mantalo Conseil

Agence web, Agence de Communication et Marketing en Dordogne (Aquitaine)

Nouveau site vitrine pour La Chanteracoise

Sommaire

1.La Chanteracoise passe la vitesse supérieure
2.Dans la continuité de notre accompagnement marketing
3.Une formation à la gestion du contenu
4.Pour renforcer le positionnement de la marque
5.Drupal pour voir plus loin

La Chanteracoise passe la vitesse supérieure

Pour Sylvain Boucher aussi, les sites Internet formatés par les sociétés commerciales du Web ont démontré leur limite. Enfermée dans un contrat de service qui ne lui laissait d'autres choix que celui d'attendre son terme, La Chanteracoise attendait patiemment le moment de pouvoir se libérer... c'est chose faite :

Le nouveau site est en ligne,
Il permet une gestion autonome du contenu,
L'investissement consacré au développement du site étant réalisé, le seul coût annuel sera désormais celui de l'hébergement !

Dans la continuité de notre accompagnement marketing

L'ensemble des missions parallèlement consacrées à la stratégie marketing pour permettre à La Chanteracoise de développer son activité, a été mis à profit dans la structure du nouveau site.

La segmentation des gammes et des différents circuits de distribution qui référencent la marque a pu contribuer à la structure très cohérente du contenu. Les univers graphiques des gammes cohabitent également en parfaite harmonie pour porter la pertinence des packaging et des visuels produits.

Une formation à la gestion du contenu

L'équipe commerciale est désormais formée à toutes les interventions récurrentes qui permettront à La Chanteracoise d'enrichir et d'actualiser les pages de son site Internet. À partir d'une arborescence préalablement posée et des vocabulaires de taxonomie précisément définis par l'agence pour optimiser la navigation sur le site, le service marketing de La Chanteracoise a pu intégrer très simplement ses textes de présentation et d'information.

Pour renforcer le positionnement de la marque

Comme très souvent lors de la création ou de la refonte du site Internet d'une entreprise commerciale, l'objectif est multiple :

toucher sur la toile les publics que cherche à prospecter la marque,
impacter le marché par l'attractivité et l'amplitude des gammes de produits,
lier une relation professionnelle avec les réseaux de distribution et centrale de référencement,
communiquer ses valeurs et son engagement auprès des clients finaux,
contribuer au développement des ventes et des parts de marché.

Convaincu par les résultats très significatifs constatés à la suite des premières actions préconisées par notre agence, Sylvain nous a naturellement confié son projet Web en connaissance de cause.

Drupal pour voir plus loin

À celles et ceux qui imaginent que la puissance de Drupal implique un back office très complexe, la facilité et la rapidité avec lesquelles l'équipe de La Chanteracoise s'est appropriée les outils de publication démontrent qu'il n'en est rien ! Il appartient à l'agence de se mettre un minimum à la place de son client pour :

configurer un espace d'administration qui soit à la fois fonctionnel et agréable,
faire en sorte que la gestion du contenu soit un plaisir,
adapter les accès, les rôles et les droits des utilisateurs aux besoins avérés d'interventions récurrentes sur le contenu.

Côté public, la richesse et la diversité de Drupal et de ses nombreux modules ouvrent la voie toute grande à une ergonomie très favorable pour l'interactivité entre les contenus, l'accessiblité et la navigation mobile.

Tags:

Bon, assez parlé de communication ! Envie de faire croustiller vos petits déjeuners et vos goûters gourmands ? Direction la-chanteracoise.fr !

Mardi 29 Juillet 2014

Par Mantalo Conseil

Agence web, Agence de Communication et Marketing en Dordogne (Aquitaine)

Nouveau site vitrine pour La Chanteracoise

Sommaire

1.La Chanteracoise passe la vitesse supérieure
2.Dans la continuité de notre accompagnement marketing
3.Une formation à la gestion du contenu
4.Pour renforcer le positionnement de la marque
5.Drupal pour voir plus loin

La Chanteracoise passe la vitesse supérieure

Le nouveau site est en ligne,
Il permet une gestion autonome du contenu,
L'investissement consacré au développement du site étant réalisé, le seul coût annuel sera désormais celui de l'hébergement !

Dans la continuité de notre accompagnement marketing

L'ensemble des missions parallèlement consacrées à la stratégie marketing pour permettre à La Chanteracoise de développer son activité, a été mis à profit dans la structure du nouveau site.

Une formation à la gestion du contenu

Pour renforcer le positionnement de la marque

Comme très souvent lors de la création ou de la refonte du site Internet d'une entreprise commerciale, l'objectif est multiple :

toucher sur la toile les publics que cherche à prospecter la marque,
impacter le marché par l'attractivité et l'amplitude des gammes de produits,
lier une relation professionnelle avec les réseaux de distribution et centrale de référencement,
communiquer ses valeurs et son engagement auprès des clients finaux,
contribuer au développement des ventes et des parts de marché.

Drupal pour voir plus loin

configurer un espace d'administration qui soit à la fois fonctionnel et agréable,
faire en sorte que la gestion du contenu soit un plaisir,
adapter les accès, les rôles et les droits des utilisateurs aux besoins avérés d'interventions récurrentes sur le contenu.

Tags:

Bon, assez parlé de communication ! Envie de faire croustiller vos petits déjeuners et vos goûters gourmands ? Direction la-chanteracoise.fr !

Mardi 29 Juillet 2014

Par juliendubreuil

julien dubreuil

Drupal since 2009

Drupal Commerce, maitriser votre checkout

Drupal Commerce configuration du checkout

Une des demandes récurrentes de la part des utilisateurs de Drupal Commerce est la possibilité de personnaliser le checkout. Que ce soit pour changer les étapes du checkout, ou pour recueillir des données supplémentaires, l’API de Drupal Commerce permet de répondre à ce besoin facilement.

Drupal Commerce vient avec deux concepts concernant le checkout, les Pages et les panes. Les “pages” permettent l’affichage et la configuration des différentes pages du checkout, comme par exemple la page de paiement, de livraison ou encore comme la page de résumé de commande. Ces pages contiennent des “panes”, permettant d’interagir avec le client, comme illustre la saisie de l’adresse ou du numéro de carte de crédit dans le checkout.

Attention toutefois, lorsque vous rallongez votre checkout, vous complexifiez le processus d’achat et augmentez les risques de perte de clients. Incontestablement, la bonne pratique est d’avoir le checkout le plus simple et court possible, néanmoins il existe certains cas où il faut déroger à la règle.

Ordonner les étapes de votre checkout

La façon la plus simple d’ordonner les étapes de votre checkout consiste à vous rendre sur l’interface d’administration de votre site dans la rubrique checkout settings de la section store > configuration

Cette page d’administration regroupe toutes les pages de votre checkout ainsi que les panes contenus dans chaque page. Drag’n dropable, vous pouvez déplacer un pane d’une page à une autre de façon à créer l’expérience utilisateur de votre choix.

Par défaut le checkout est découpé en 4 pages:
* Checkout : la page “Checkout”, est la première étape, elle permet la collecte des informations de base.
* Review order: la page “Review order” permet d’afficher un résumé de la commande avant la validation et la soumission du paiement.
* Payement : cette page, nommée “Payment”, est uniquement utilisée lorsque qu’une méthode de paiement est dite off-site.
* Checkout complete: la page “Checkout complete”, permet d’afficher une confirmation de commande au client.

Drupal Commerce checkout configuration

Ajouter des pages à votre checkout

Comme bien souvent, il existe deux façons de faire avec Drupal ou Drupal Commerce pour arriver à vos fins. Soit vous utilisez un module contrib, soit vous faites un peu de code custom.

Si vous souhaitez passer par un module, il vous faudra utiliser Drupal Commerce Checkout Pages qui vous permettra d’ajouter des pages depuis l’interface d’administration de votre site.

L’autre façon, consiste à utiliser l’API de Drupal Commerce en implémentant le hook_commerce_checkout_page_info() dans un module custom. Une fois créée votre page sera accessible dans l’interface d’administration. C’est de cette manière que sont créées les pages de Drupal Commerce. Pour plus d’information, rendez-vous dans le fichier commerce_checkout.api.php du sous module checkout.

Ajouter des panes à votre checkout

De la même manière que précédemment, il est possible de faire la même chose avec les panes.

Coté module vous pouvez vous baser sur Commerce extra panes afin d’afficher une ou plusieurs nodes dans votre checkout en guise d’information.

Coté code, il vous faudra implémenter le hook_commerce_checkout_pane_info() de façon à déclarer votre nouveau pane. Notez ensuite, que vous devrez créer vos callbacks, afin d’afficher les informations désirées.
Pour plus d’information, rendez-vous dans le fichier commerce_checkout.api.php du sous module checkout.

Le mot de la fin

Comme à l’accoutumée, il est simple de personnaliser le checkout de Drupal commerce que ce soit avec un module ou un peu de code custom. Encore une fois, attention de penser à l’expérience utilisateur de vos clients quand vous complexifiez le checkout.

Dimanche 27 Juillet 2014

Par Mantalo Conseil

Agence web, Agence de Communication et Marketing en Dordogne (Aquitaine)

Immobilier Horizon en ligne

Sommaire

1.Un site classieux pour une offre de qualité
2.Des fonctionnalités sur mesure
3.L'image est mise en avant
4.Une réalisation Mantalo Conseil
5.Avec la technologie Drupal

Un site classieux pour une offre de qualité

À partir de la charte graphique préalablement créée par P3RFACTION pour Immobilier Horizon, et sur la base d'un cahier des charges que nous avons élaboré avec Nicolas Goscimski, fondateur de Immoblier Horizon, nous nous sommes attachés à produire ce site puissant, fonctionnel, et visuellement très harmonieux.

Des fonctionnalités sur mesure

Les expériences de navigation sur la plupart des sites de transaction immobilière démontrent la difficulté de trouver un bien à partir de critères personnels ou géographiques spécifiques. L'enjeu était de répondre à cette problématique en offrant aux visiteurs du site un moteur de recherche plus intelligent que la moyenne... Mission accomplie !

L'image est mise en avant

S'agissant d'apprécier l'intérêt d'un bien immobilier, la qualité des photographies était une préoccupation réelle. Côté client, Immobilier Horizon fait appel à un de ses partenaires très professionnnel. Côté site internet, des vues adaptées à l'activité immobilière permettent au visiteur de naviguer très agréablement dans l'exploration du catalogue et des fiches descriptives des biens.

Une réalisation Mantalo Conseil

Merci à Nicolas Goscimski et à Laurence Datrier pour leur confiance accordée. Cette collaboration très positive qui a porté sur toutes les étapes de la création (conception, fonctionnalités, rédaction du contenu corporate, ...), s'est avérée aussi agréable qu'efficace.

Avec la technologie Drupal

Un fois encore, Drupal s'est révélée comme la technologie qui permet de pousser aussi loin de nécessaire les conditions d'une utilisation fonctionnelle et ergonomique, tant pour les utilisateurs du service que pour les administrateurs du site.

Tags:

Vous vous dites que la création d'un site internet réussi passe par une démarche globale et professionnelle ? C'est également notre avis... Contactez-nous !

Vendredi 11 Juillet 2014

Par Mantalo Conseil

Agence web, Agence de Communication et Marketing en Dordogne (Aquitaine)

Immobilier Horizon en ligne

Sommaire

1.Un site classieux pour une offre de qualité
2.Des fonctionnalités sur mesure
3.L'image est mise en avant
4.Une réalisation Mantalo Conseil
5.Avec la technologie Drupal

Un site classieux pour une offre de qualité

Des fonctionnalités sur mesure

L'image est mise en avant

Une réalisation Mantalo Conseil

Avec la technologie Drupal

Tags:

Vous vous dites que la création d'un site internet réussi passe par une démarche globale et professionnelle ? C'est également notre avis... Contactez-nous !

Vendredi 11 Juillet 2014

Par Simon Georges

Simon Georges

Drupal depuis plus de 10 ans, SEO depuis 3 ans

Butinage n°37

Trente-septième exemplaire de la veille régulière réalisée par Makina Corpus sur l'actualité web.

Mercredi 9 Juillet 2014

Par Mantalo Conseil

Agence web, Agence de Communication et Marketing en Dordogne (Aquitaine)

Généralités sur la gestion de contenus Drupal MantaloTonic

Sommaire

1.Avant de rédiger un contenu Drupal MantaloTonic : 7 étapes
2.Un usage spécifique à chaque type de contenu Drupal MantaloTonic
- 2.1.Accès
- 2.2.Trier et retrouver des contenus
- 2.3.Agir sur des contenus existants
- 2.4.Publier un contenu
3.Cloner un contenu

Avant de rédiger un contenu Drupal MantaloTonic : 7 étapes

Se documenter sur l’environnement du thème à aborder
Identifier le type de contenu approprié
Définir les objectifs
Définir les cibles
Élaborer le plan (idées à développer) en posant les titres
Rédiger les titres et paragraphes
Illustrer

Un usage spécifique à chaque type de contenu Drupal MantaloTonic

Il existe différents types de contenus, adaptés à chaque type d'information du site :

page : contenus de fonds, assez longs, peu évolutifs et sans mentions de date de publication ou d'auteur.
article : contenu court, évolutif et ou dynamique sans mentions de date de publication ou d'auteur. Un article est associé à une catégorie d'articles ou peut servir d'article de redirection pour le slider (grande image défilante) de la page d'accueil.
billet de blog : contenu d'actualité, dont l'auteur et la date de publication sont affichés publiquement.
équipe : contenu relatif aux membres de votre structure (collaborateurs, agents immobiliers, professeurs…)
client : contenu relatif aux clients de votre structure
partenaires : contenu relatif aux partenaires de votre structure
produits : relatif à la présentation de produits (site vitrine ou marketing)
biens : contenu spécifique aux agences immobilières pour décrire les biens immobiliers,
slider : contenu spécifique au slider (grande image défilante) de la page d'accueil (si ce type de contenu n'existe pas, utiliser un article ou une page pour créer un slider)

Chaque type de contenu correspond à un usage.

Accès

Par le menu : "Contenu"

Trier et retrouver des contenus

Il est possible de trier le contenu en sélectionnant des items et cliquer sur “Appliquer / Filtrer”
Annuler le tri en cliquant sur “Réinitialiser”

Agir sur des contenus existants

La liste de contenus propose différentes actions :

en cliquant sur le titre du contenu → affiche le contenu côté “public” du site.
modifier → pour modifier le contenu dans l’administration
supprimer → pour supprimer définitivement le contenu
cloner → pour dupliquer un contenu dans l’administration (cf rubrique ci-dessous)

Publier un contenu

Par défaut, un contenu créé ou cloné possède le statut “non publié” c’est à dire qu’il n’est pas visible pour les internautes.
Publier un contenu en cliquant sur “publier” dans les “Options de publication” de l’encadré du pied de page.

Cloner un contenu

Pour créer un contenu à partir d’un contenu existant (s’en servir de trame/modèle)

Ouvrir un contenu existant
cliquer sur “Cloner un contenu”
Par défaut, le nom donné à un contenu cloné est “Clone de…”. Donner un nouveau titre au contenu
“Enregistrer”

Tags:

Category:

Administrer un site Drupal MantaloTonic

Retrouvez dans notre dossier Administrer un site Drupal MantaloTonic la gestion des différents types de contenu sous Drupal MantaloTonic.

Mercredi 2 Juillet 2014

Par Mantalo Conseil

Agence web, Agence de Communication et Marketing en Dordogne (Aquitaine)

Généralités sur la gestion de contenus Drupal MantaloTonic

Sommaire

1.Avant de rédiger un contenu Drupal MantaloTonic : 7 étapes
2.Un usage spécifique à chaque type de contenu Drupal MantaloTonic
- 2.1.Accès
- 2.2.Trier et retrouver des contenus
- 2.3.Agir sur des contenus existants
- 2.4.Publier un contenu
3.Cloner un contenu

Avant de rédiger un contenu Drupal MantaloTonic : 7 étapes

Se documenter sur l’environnement du thème à aborder
Identifier le type de contenu approprié
Définir les objectifs
Définir les cibles
Élaborer le plan (idées à développer) en posant les titres
Rédiger les titres et paragraphes
Illustrer

Un usage spécifique à chaque type de contenu Drupal MantaloTonic

Il existe différents types de contenus, adaptés à chaque type d'information du site :

page : contenus de fonds, assez longs, peu évolutifs et sans mentions de date de publication ou d'auteur.
article : contenu court, évolutif et ou dynamique sans mentions de date de publication ou d'auteur. Un article est associé à une catégorie d'articles ou peut servir d'article de redirection pour le slider (grande image défilante) de la page d'accueil.
billet de blog : contenu d'actualité, dont l'auteur et la date de publication sont affichés publiquement.
équipe : contenu relatif aux membres de votre structure (collaborateurs, agents immobiliers, professeurs…)
client : contenu relatif aux clients de votre structure
partenaires : contenu relatif aux partenaires de votre structure
produits : relatif à la présentation de produits (site vitrine ou marketing)
biens : contenu spécifique aux agences immobilières pour décrire les biens immobiliers,
slider : contenu spécifique au slider (grande image défilante) de la page d'accueil (si ce type de contenu n'existe pas, utiliser un article ou une page pour créer un slider)

Chaque type de contenu correspond à un usage.

Accès

Par le menu : "Contenu"

Trier et retrouver des contenus

Il est possible de trier le contenu en sélectionnant des items et cliquer sur “Appliquer / Filtrer”
Annuler le tri en cliquant sur “Réinitialiser”

Agir sur des contenus existants

La liste de contenus propose différentes actions :

en cliquant sur le titre du contenu → affiche le contenu côté “public” du site.
modifier → pour modifier le contenu dans l’administration
supprimer → pour supprimer définitivement le contenu
cloner → pour dupliquer un contenu dans l’administration (cf rubrique ci-dessous)

Publier un contenu

Par défaut, un contenu créé ou cloné possède le statut “non publié” c’est à dire qu’il n’est pas visible pour les internautes.
Publier un contenu en cliquant sur “publier” dans les “Options de publication” de l’encadré du pied de page.

Cloner un contenu

Pour créer un contenu à partir d’un contenu existant (s’en servir de trame/modèle)

Ouvrir un contenu existant
cliquer sur “Cloner un contenu”
Par défaut, le nom donné à un contenu cloné est “Clone de…”. Donner un nouveau titre au contenu
“Enregistrer”

Tags:

Category:

Administrer un site Drupal MantaloTonic

Retrouvez dans notre dossier Administrer un site Drupal MantaloTonic la gestion des différents types de contenu sous Drupal MantaloTonic.

Mercredi 2 Juillet 2014

Par Marc Delnatte

Akabia

5 étapes indispensables pour un bon référencement onsite !

Pour bien référencer son site, il faut préalablement avoir étudié les mots clés sur lesquels vous souhaitez vous positionner. Après avoir réalisé cette minutieuse étude, vous pourrez vous attaquer à l’optimisation on-site.

Mercredi 25 Juin 2014

Par flocondetoile

Pourquoi choisir (ou pas) Drupal ?

Non, ce billet ne va pas vous proposer un comparatif des trois principaux CMS du marché, à savoir Wordpress, Joomla et Drupal. Parce que ce comparatif serait périmé au bout de quelques mois. Et parce que les fonctionnalités offertes par ces CMS tendent à se rapprocher de plus en plus, du fait d'une émulation réciproque. Mais alors, qu'est-ce qui peut différencier aujourd'hui ces CMS ? Essayons de faire un panorama des utilisations actuelles de ces CMS.

Thème

Drupal

Drupal 7

Drupal 8

Dimanche 22 Juin 2014

Par flocondetoile

Pourquoi choisir (ou pas) Drupal ?

Dimanche 22 Juin 2014

Par admin

DrupalFR vous invite au PHP Tour 2014

Le "PHP Tour" est l'événement tournant qu'organise l'AFUP (Association Française des Utilisateurs de PHP) et pour la troisième édition, celui-ci s'arrêtera à Lyon les 23 et 24 juin.

Il s'agit d'un rendez-vous incontournable autour du langage PHP, avec quelques têtes d'affiches, comme :

Rasmus Lerdorf, intitulée "Coding and Dreaming – PHP in 2014", soit un tour d’horizon des performances excitantes que permet désormais PHP 5.5.
Julien Pauli, sur "YooopeeCache", ou comment installer, configurer et profiter de OPCache, le cache d’OPCode par défaut depuis PHP5.5.
Pascal Martin sur "PHP 5.3 à PHP 5.6 : no pain but gain !", une conférence technique pour appréhender les changements de versions de PHP 5 en toute tranquillité !

De plus, les membres de l'association Drupal France et Francophonie peuvent bénéficier d'une remise sur le prix de l'entrée. Pour cela, il suffit d'envoyer un email au bureau pour que l'on vous communique le code "coupon".

Alors, vous pouvez vous rendre sur :

Enfin, de nombreuses surprises vous attendent comme les cliniques co-organisés par les sponsors, une soirée communautaire, etc...

Tags :

phptour

Forum :

Annonces et nouvelles

Mardi 17 Juin 2014

Par admin

DrupalFR vous invite au PHP Tour 2014

Le "PHP Tour" est l'événement tournant qu'organise l'AFUP (Association Française des Utilisateurs de PHP) et pour la troisième édition, celui-ci s'arrêtera à Lyon les 23 et 24 juin.

Il s'agit d'un rendez-vous incontournable autour du langage PHP, avec quelques têtes d'affiches, comme :

Rasmus Lerdorf, intitulée "Coding and Dreaming – PHP in 2014", soit un tour d’horizon des performances excitantes que permet désormais PHP 5.5.
Julien Pauli, sur "YooopeeCache", ou comment installer, configurer et profiter de OPCache, le cache d’OPCode par défaut depuis PHP5.5.
Pascal Martin sur "PHP 5.3 à PHP 5.6 : no pain but gain !", une conférence technique pour appréhender les changements de versions de PHP 5 en toute tranquillité !

Alors, vous pouvez vous rendre sur :

Enfin, de nombreuses surprises vous attendent comme les cliniques co-organisés par les sponsors, une soirée communautaire, etc...

Forum :

Annonces et nouvelles

Mardi 17 Juin 2014

Par juliendubreuil

julien dubreuil

Drupal since 2009

Yaml, le format de configuration

L’une des premières choses que vous allez remarquer en regardant le code de Drupal 8, est le nouveau format de configuration. Terminé les extensions en .info, maintenant toute la configuration réside dans des fichiers .yml écrits au format YAML (YAML Ain’t Markup Language).

Aussi facile à lire que précédemment, il permet plus de choses et s’est imposé comme l’un des formats de standardisation dans plusieurs langages de programmation, tels que C, Perl et Python. L’une des grandes décisions prise pour Drupal 8 a été de standardiser le plus possible et de réutiliser des composants existant et fiables de façon à se concentrer sur autre chose. Ainsi le format YAML remplacera nos bons vieux fichiers maison.

L’ancienne version du fichier .info du module block:

<span class='line'># Drupal 7 block.info
</span><span class='line'>name = Block
</span><span class='line'>description = Controls the visual building blocks a page is constructed with. Blocks are boxes of content rendered into an area, or region, of a web page.
</span><span class='line'>package = Core
</span><span class='line'>version = VERSION
</span><span class='line'>core = 7.x
</span><span class='line'>files[] = block.test
</span><span class='line'>configure = admin/structure/block</span>

La nouvelle version du fichier info du module block au format YAML

<span class='line'># Drupal 8 block.info.yml
</span><span class='line'>name: Block
</span><span class='line'>type: module
</span><span class='line'>description: 'Controls the visual building blocks a page is constructed with. Blocks are boxes of content rendered into an area, or region, of a web page.'
</span><span class='line'>package: Core
</span><span class='line'>version: VERSION
</span><span class='line'>core: 8.x
</span><span class='line'>configure: admin/structure/block</span>

Comme vous pouvez le voir, les deux fichiers sont similaires. La bonne nouvelle est que vous ne serez pas dépaysé en écrivant au format YAML.

Pour vous aider à comprendre les avantages et la structure de ce nouveau format, voici dans les grandes lignes à quoi ressemble la syntaxe. Si vous voulez en savoir plus, rendez-vous directement sur la page wikipédia ou sur la documentation Symfony 2

Les commentaires doivent être précédés par un #
La valeur Null peut être exprimée de deux façons, avec la chaîne de caractère null ou le symbole ~
Les booléens s’écrivent true ou false
Les chaînes de caractères doivent être entourées par des apostrophes. Néanmoins si votre chaîne de caractère contient une ou plusieurs apostrophes, vous pouvez utiliser les guillemets.
Les listes d’éléments peuvent être définies sur une seule ligne ou dans un bloc (sur plusieurs lignes). Utilisez un tiret pour ajouter un nouvel élément dans une liste.

<span class='line'># comment.info.yml
</span><span class='line'>dependencies:
</span><span class='line'> - datetime
</span><span class='line'> - node
</span><span class='line'> - text</span>

Ou si vous préférez, vous pouvez créer vos listes sur une seul ligne.

<span class='line'>[datetime, node, text]</span>

Les tableaux sont de simples objets au format clé:valeur.

<span class='line'># comment.info.yml
</span><span class='line'>name: Comment
</span><span class='line'>type: module
</span><span class='line'>description: 'Allows users to comment on and discuss published content.'
</span><span class='line'>package: Core
</span><span class='line'>version: VERSION
</span><span class='line'>core: 8.x</span>

Il est possible d’imbriquer les tableaux, il suffit simplement d’ajouter une indentation à un tableau. Attention, les indentations doivent utiliser deux espaces et non pas des tabulations.

<span class='line'>#block.routing.yml
</span><span class='line'>block_admin_display:
</span><span class='line'>  pattern: '/admin/structure/block'
</span><span class='line'>  defaults:
</span><span class='line'>    _content: '\Drupal\block\Controller\BlockListController::listing'
</span><span class='line'>    entity_type: 'block'
</span><span class='line'>  requirements:
</span><span class='line'>    _permission: 'administer blocks'</span>

Au final rien de méchant et rien de compliqué, l’intégration du format YAML ne vous donnera pas du fil à retordre. Cela aura juste pour conséquence d’unifier tous les fichiers de configurations en imposant un standard. Que ce soit pour la déclaration des modules, de fichiers de configuration en passant par le nouveau système de plug-in tout sera fait dans ce format.

Crédits Photo

Lundi 16 Juin 2014

Par flocondetoile

Comment Drupal est protégé contre les 10 plus importantes failles de sécurité

Dans le domaine de la sécurité, la réputation de Drupal n'est plus à faire. Interrogé sur les raisons de cette réputation, il est souvent indiqué que Drupal est sécurisé by design, c'est à dire depuis sa conception même. Autrement dit, dès le départ, Drupal a été conçu avec la notion toujours présente à l'esprit que le système doit être sûr et sécurisé. Regardons en détail comment Drupal, grâce à ses interfaces de programmations (API) si elles sont utilisées correctement, prend en compte chacune des failles de sécurité les plus importantes. Ces éléments de réponse proviennent du rapport publié régulièrement sur drupalsecurityreport.org.

Thème

Sécurité Drupal

Prestataire

Spécialiste

Drupal

Lundi 9 Juin 2014

Par flocondetoile

Comment Drupal est protégé contre les 10 plus importantes failles de sécurité

Lundi 9 Juin 2014

Par Artusamak

Julien Dubois

Keynote de Dries – Drupalcon Austin 2014

drupal

drupal 7

Drupal 8

La keynote que Dries a tenu pour le lancement de la nouvelle édition américaine de la Drupalcon 2014 à Austin se résume à se demander ce que sera le web de demain et comment Drupal pourrait jouer un rôle dans cet écosystème.

Drupalcon Austin 2014 C’est une question intéressante à se poser lorsque l’on constate que de plus en plus d’acteurs venus à Drupal commencent à faire marche arrière faute de libertés suffisantes avec Drupal 7 et d’une arrivée très tardive de Drupal 8. S’interroger sur ce à quoi ressemblera le web dans quelques années est une chose, mais s’inquiéter de savoir si Drupal fera partie de ce tableau en est une autre. La réponse est probablement non.

Mais il est intéressant de constater que l’évolution à laquelle on assiste auprès des acteurs du web est que les géants deviennent de plus en plus géants et qu’ils écrasent complètement les nouveaux venus. Il va falloir que les gens acceptent de se rebeller contre ça pour que l’équilibre d’internet ne soit pas en danger.

Il est presque déjà trop tard, Google décide actuellement de ne plus montrer certains sites, qu’en sera-t-il demain lorsqu’il aura aspiré toutes les données de vos sites et les montrera directement dans sa page de recherche sans vous renvoyer le moindre trafic ?

Dries pose cette question et se dit que Drupal pourrait avoir un rôle à jouer en vous permettant d’avoir entre les mains un outil permettant de créer un genre de plateforme riche à partir de laquelle le contenu pourrait être disséminé facilement selon le format dans lequel vous le consommeriez (article sur un PC, billet sur votre téléphone, etc).

Je trouve que cette keynote a le mérite de mettre en lumière ce problème pour lequel nous n’avons pas forcément conscience mais je reste sceptique sur le rôle que Drupal pourra jouer. Le pouvoir réside principalement sur le trafic plus que sur les moyens technologiques à disposition pour formater le contenu et adapter le message au visiteur. Drupal n’a pas d’emprise sur l’acquisition du trafic et l’on peut légitimement se demander comment s’affranchir d’un Google pour faire venir les visiteurs. C’est un acte citoyen de s’interroger sur ce point et sur nos habitudes de consommation, la réponse n’est pas simple mais il faudra accepter de soutenir des petits acteurs prometteurs faute de tous les voir disparaitre les uns après les autres.

La keynote complète :

Mercredi 4 Juin 2014