Les articles de votre blog ici ? Inscrivez votre blog !

[PrestaShop 1.7] Ajouter des champs texte aux produits

Publié le 29 janvier 2018 par Amerigeau @arnaudmerigeau

Aujourd'hui, nouveau tuto PrestaShop pour ajouter un champ aux produits pour ensuite l'utiliser dans vos intégrations front office ou bien dans des développements admin.

Constat : besoins spécifiques pour certains e-commerçants

Nombreux sont les projets où mes clients me demandent d'ajouter des données pour leurs produits sans pouvoir utiliser les champs disponibles par défaut. Voici le type de cas où je préfère utiliser des champs personnalisés pour les produits :

Dans ces cas précis, ce tutoriel PrestaShop risque combler vos attentes.

Ah mais attends, ce tuto PrestaShop va aussi vous faire gagner de l'argent.

Mais ça on va le voir plus loin.

Tuto PrestaShop : ajouter un champ pour les produits

C'est parti pour résoudre le cas numéro 1. Le tuto PrestaShop se déroule en 5 étapes assez simples vous allez voir. Penchons-nous d'abord sur les 4 premières étapes :

1. Installer le module AmProductFields

Téléchargez le module PrestaShop AmProductFields puis installez-le simplement via le back office de PrestaShop. Aucune configuration n'est nécessaire, facile donc !

2. Installer l'override Product.php

Pour vous simplifiez la tâche, j'ai compris dans le dossier du module le fichier override. Déplacez le fichier www/modules/amproductfields/doc_and_override/Product.php vers www/override/classes/ mais attention si vous avez déjà un fichier Product.php : dans ce cas, copiez le contenu du fichier que je fournis et adaptez-le avec le fichier Product.php déjà existant dans le dossier override/classes.

Supprimez le fichier de cache suivant : www/app/cache/prod/class_index.php

3. Rédigez vos contenus

Pour la base de départ, j'ai prévu 3 champs dont :

Rédigez vos contenus comme bon vous semble afin d'enrichir vos fiches produits.

4. Affichez vos contenus

Pour ma part, j'ai voulu afficher les informations saisies sur la fiche produit, sous les images, car par défaut le thème Classic offre de la place à cet endroit. On peut donc facilement rendre visible de l'information importante !

Ouvrez le fichier www/themes/classic/templates/catalog/product.tpl et ajoutez les lignes 74 à 77 :

{** * 2007-2017 PrestaShop * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License 3.0 (AFL-3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * https://opensource.org/licenses/AFL-3.0 * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@prestashop.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade PrestaShop to newer * versions in the future. If you wish to customize PrestaShop for your * needs please refer to http://www.prestashop.com for more information. * * @author PrestaShop SA <contact@prestashop.com> * @copyright 2007-2017 PrestaShop SA * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) * International Registered Trademark & Property of PrestaShop SA *} {extends file=$layout} {block name='head_seo' prepend} <link rel="canonical" href="{$product.canonical_url}"> {/block} {block name='head' append} <meta property="og:type" content="product"> <meta property="og:url" content="{$urls.current_url}"> <meta property="og:title" content="{$page.meta.title}"> <meta property="og:site_name" content="{$shop.name}"> <meta property="og:description" content="{$page.meta.description}"> <meta property="og:image" content="{$product.cover.large.url}"> <meta property="product:pretax_price:amount" content="{$product.price_tax_exc}"> <meta property="product:pretax_price:currency" content="{$currency.iso_code}"> <meta property="product:price:amount" content="{$product.price_amount}"> <meta property="product:price:currency" content="{$currency.iso_code}"> {if isset($product.weight) & ($product.weight != 0)} <meta property="product:weight:value" content="{$product.weight}"> <meta property="product:weight:units" content="{$product.weight_unit}"> {/if} {/block} {block name='content'} <section id="main" itemscope itemtype="https://schema.org/Product"> <meta itemprop="url" content="{$product.url}"> <div class="row"> <div class="col-md-6"> {block name='page_content_container'} <section class="page-content" id="content"> {block name='page_content'} {block name='product_flags'} <ul class="product-flags"> {foreach from=$product.flags item=flag} <li class="product-flag {$flag.type}">{$flag.label}</li> {/foreach} </ul> {/block} {block name='product_cover_thumbnails'} {include file='catalog/_partials/product-cover-thumbnails.tpl'} {/block} <div class="scroll-box-arrows"> <i class="material-icons left"></i> <i class="material-icons right"></i> </div> <section id="amproductfields"> <h2>{$product.custom_field_lang}</h2> <div>{$product.custom_field_lang_wysiwyg nofilter}</div> </section> {/block} </section> {/block} </div> <div class="col-md-6"> {block name='page_header_container'} {block name='page_header'} <h1 class="h1" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1> {/block} {/block} {block name='product_prices'} {include file='catalog/_partials/product-prices.tpl'} {/block} <div class="product-information"> {block name='product_description_short'} <div id="product-description-short-{$product.id}" itemprop="description">{$product.description_short nofilter}</div> {/block} {if $product.is_customizable & count($product.customizations.fields)} {block name='product_customization'} {include file="catalog/_partials/product-customization.tpl" customizations=$product.customizations} {/block} {/if} <div class="product-actions"> {block name='product_buy'} <form action="{$urls.pages.cart}" method="post" id="add-to-cart-or-refresh"> <input type="hidden" name="token" value="{$static_token}"> <input type="hidden" name="id_product" value="{$product.id}" id="product_page_product_id"> <input type="hidden" name="id_customization" value="{$product.id_customization}" id="product_customization_id"> {block name='product_variants'} {include file='catalog/_partials/product-variants.tpl'} {/block} {block name='product_pack'} {if $packItems} <section class="product-pack"> <h3 class="h4">{l s='This pack contains' d='Shop.Theme.Catalog'}</h3> {foreach from=$packItems item="product_pack"} {block name='product_miniature'} {include file='catalog/_partials/miniatures/pack-product.tpl' product=$product_pack} {/block} {/foreach} </section> {/if} {/block} {block name='product_discounts'} {include file='catalog/_partials/product-discounts.tpl'} {/block} {block name='product_add_to_cart'} {include file='catalog/_partials/product-add-to-cart.tpl'} {/block} {block name='product_additional_info'} {include file='catalog/_partials/product-additional-info.tpl'} {/block} {block name='product_refresh'} <input class="product-refresh ps-hidden-by-js" name="refresh" type="submit" value="{l s='Refresh' d='Shop.Theme.Actions'}"> {/block} </form> {/block} </div> {block name='hook_display_reassurance'} {hook h='displayReassurance'} {/block} </div> </div> </div> <div id="product_tabs" class="row"> <div class="col-xs-12"> {block name='product_tabs'} <div class="tabs"> <ul class="nav nav-tabs" role="tablist"> {if $product.description} <li class="nav-item"> <a class="nav-link{if $product.description} active{/if}" data-toggle="tab" href="#description" role="tab" aria-controls="description" {if $product.description} aria-selected="true"{/if}>{l s='Description' d='Shop.Theme.Catalog'}</a> </li> {/if} <li class="nav-item"> <a class="nav-link{if !$product.description} active{/if}" data-toggle="tab" href="#product-details" role="tab" aria-controls="product-details" {if !$product.description} aria-selected="true"{/if}>{l s='Product Details' d='Shop.Theme.Catalog'}</a> </li> {if $product.attachments} <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#attachments" role="tab" aria-controls="attachments">{l s='Attachments' d='Shop.Theme.Catalog'}</a> </li> {/if} {foreach from=$product.extraContent item=extra key=extraKey} <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#extra-{$extraKey}" role="tab" aria-controls="extra-{$extraKey}">{$extra.title}</a> </li> {/foreach} </ul> <div class="tab-content" id="tab-content"> <div class="tab-pane fade in{if $product.description} active{/if}" id="description" role="tabpanel"> {block name='product_description'} <div class="product-description">{$product.description nofilter}</div> {/block} </div> {block name='product_details'} {include file='catalog/_partials/product-details.tpl'} {/block} {block name='product_attachments'} {if $product.attachments} <div class="tab-pane fade in" id="attachments" role="tabpanel"> <section class="product-attachments"> <h3 class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</h3> {foreach from=$product.attachments item=attachment} <div class="attachment"> <h4><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">{$attachment.name}</a></h4> <p>{$attachment.description}</p <a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}"> {l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted}) </a> </div> {/foreach} </section> </div> {/if} {/block} {foreach from=$product.extraContent item=extra key=extraKey} <div class="tab-pane fade in {$extra.attr.class}" id="extra-{$extraKey}" role="tabpanel" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}> {$extra.content nofilter} </div> {/foreach} </div> </div> {/block} </div> </div> {block name='product_accessories'} {if $accessories} <section class="product-accessories clearfix"> <h3 class="h5 text-uppercase">{l s='You might also like' d='Shop.Theme.Catalog'}</h3> <div class="products"> {foreach from=$accessories item="product_accessory"} {block name='product_miniature'} {include file='catalog/_partials/miniatures/product.tpl' product=$product_accessory} {/block} {/foreach} </div> </section> {/if} {/block} {block name='product_footer'} {hook h='displayFooterProduct' product=$product category=$category} {/block} {block name='product_images_modal'} {include file='catalog/_partials/product-images-modal.tpl'} {/block} {block name='page_footer_container'} <footer class="page-footer"> {block name='page_footer'} <!-- Footer content --> {/block} </footer> {/block} </section> {/block}

On affiche alors les 2 champs traduisibles dans une <section> avec un id dans le cas où vous auriez besoin de donner un style particulier à l'élément. J'ai aussi encadré d'un <h2> le premier champ pour avoir un code optimisé pour le référencement.

Comment gagner de l'argent avec ce tuto PrestaShop ?

La réponse est assez simple vous allez voir.

Aujourd'hui, vous savez à présent comment afficher de nouveaux champs sur vos fiches produits. Très bien, et alors ??

Et bien, vous allez donc pouvoir proposer une fiche produit avec les infos clés en haut de page et un bouton d'ajout panier visible même sur les écrans de taille moyenne.

Enfin, vous allez pouvoir travailler votre référencement en ajoutant du contenu à vos fiches produits.

Je peux conseiller le format suivant :

  • description courte : avis du marchand avec un ton vendeur
  • champs supplémentaires : points clés du produit avec des faits
  • description longue : détails du produits avec des phrases et des informations pointues, le tout organisé avec des titres et visuels

Le résultat :

  • une fiche produit optimisée pour la lecture par vos clients, un meilleur taux de conversion à la clé
  • une visibilité de vos pages produits améliorée par un contenu plus riche et optimisé pour le SEO : meilleur référencement donc !

Vous avez un bel outil aujourd'hui pour développer votre business alors faites en bon usage 😉

A bientôt pour un nouvel article !

Mots clés : prestashop, prestashop 1.7, tuto prestashop, tuto prestashop 1.7, tutorial prestashop, tutoriel prestashop

Vous avez aimé cet article ? Notez-le avec les étoiles ! Merci !