{"id":2059,"date":"2019-11-18T14:19:03","date_gmt":"2019-11-18T12:19:03","guid":{"rendered":"https:\/\/www.h-hennes.fr\/blog\/?p=2059"},"modified":"2019-11-18T14:31:47","modified_gmt":"2019-11-18T12:31:47","slug":"prestashop-1-7-ajouter-un-champ-produit-de-type-file-dans-ladministration","status":"publish","type":"post","link":"https:\/\/www.h-hennes.fr\/blog\/2019\/11\/18\/prestashop-1-7-ajouter-un-champ-produit-de-type-file-dans-ladministration\/","title":{"rendered":"Prestashop 1.7 : Ajouter un champ produit de type file dans l’administration"},"content":{"rendered":"\n

Suite \u00e0 mon (ancien ) article (https:\/\/www.h-hennes.fr\/blog\/2017\/10\/19\/prestashop-1-7-ajouter-des-champs-produit\/<\/a> ) sur l’ajout de champs custom dans le formulaire d’administration d’un produit, j’ai eut pas mal de questions sur comment ajouter un champ de type file.<\/p>\n\n\n\n

Il faut reconna\u00eetre que la fonctionnalit\u00e9 n’est pas \u00e9vidente car le formulaire est soumis en ajax et le g\u00e8re pas l’upload de fichiers.<\/p>\n

Le simple fait d’ajouter un champ de type file dans le formulaire n’est donc pas suffisant pour que cela fonctionne.

Cet article pr\u00e9sente une approche qui fonctionne, mais je ne peux pas garantir que c’est la meilleure approche.

Pour son fonctionnement je me suis inspir\u00e9 de la gestion de l’upload qui est faite pour la gestion des images standard du produit via la librairie Js Dropzone<\/strong><\/p>\n

Pour le code j’ai donc repris le code de l’ancien article en y ajoutant la logique d’un champ image.

Voici visuellement comment se pr\u00e9sente le champ d’upload<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

L’ensemble de la logique d’upload et de sauvegarde de la valeur du produit va \u00eatre g\u00e9r\u00e9e directement dans le module<\/p>\n

Voici le rendu dans le cas ou une image existe d\u00e9j\u00e0.
Il est possible de la supprimer en cliquant sur le lien correspondant<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Voici le code pour l’affichage et la gestion du champ dans le fichier tpl
Les commentaires devrait vous \u00e9clairer sur le fonctionnement, je l’ai pens\u00e9 de mani\u00e8re \u00e0 pouvoir ajouter facilement plusieurs champs<\/p>\n\n\n\n

\n{* Affichage du champ Image *}\n            <div class="col-lg-12 col-xl-12">\n                <label class="form-control-label">{l s='my custom field file' mod='hhproduct'}<\/label>\n\n                <div id="custom_field_file_thumbnail">\n                {* Si une image existe déjà sur le produit *}\n                    {if isset($custom_field_file) && $custom_field_file !=""}\n                        <div style="border: 1px dashed #000; padding:10px; max-width: 500px; margin-bottom: 30px; margin-top: 30px" >\n                            <label class="form-control-label">{l s='my current image' mod='hhproduct'}<\/label><br \/>\n                        <img src="{$file_dir}{$custom_field_file}" style="max-width: 450px" \/><br \/>\n                        <a href="#" class="custom_field_file_delete">{l s='Delete this image' mod='hhproduct'}<\/a>\n                        <\/div>\n                {\/if}\n                <\/div>\n                <input type="file" class="dropzone" name="custom_field_file_uploader" id="custom_field_file_uploader" \/>\n            <\/div>\n                <script>\n                    $(function() {\n                        \/\/Gestion de l'upload via la librairie DropZone\n                        Dropzone.autoDiscover = false;\n                        var customFieldImageDropzone = $('#custom_field_file_uploader').dropzone({\n                            url: '{$moduleLink}&id_product={$id_product}&uploadProductImage=1&field_name=custom_field_file',\n                            paramName: "file", \/\/Nom du champs à envoyer\n                            previewTemplate : document.querySelector('#custom_field_file_dropzone_template').innerHTML,\n                            thumbnailWidth : 450,\n                            success : function(file){\n                                alert('{l s='File uploaded with success' mod='hhproduct'}');\n                                \/\/Affichage de la nouvelle image dans l'emplacement\n                                $('#custom_field_file_thumbnail').html('').html(file.previewElement);\n                            }\n                        });\n\n                        \/\/Gestion de la suppression\n                        $('#custom_field_file_thumbnail').on('click','.custom_field_file_delete',function(){\n                            $.ajax({\n                               method: 'post',\n                               url : '{$moduleLink}&id_product={$id_product}&deleteProductImage=1&field_name=custom_field_file',\n                               success : function(msg){\n                                   console.log(msg);\n                                   alert('{l s='File delete with success' mod='hhproduct'}');\n                                   $('#custom_field_file_thumbnail').html('');\n                               }\n                            });\n                            return false;\n                        });\n                    });\n                <\/script>\n\n            {* template d'affichage dropzone *}\n            <div id="custom_field_file_dropzone_template" style="display:none">\n                <div style="border: 1px dashed #000; padding:10px; max-width: 500px; margin-bottom: 30px; margin-top: 30px">\n                    <div class="dz-details">\n                        <label class="form-control-label">{l s='my new image' mod='hhproduct'}<\/label><br \/>\n                        <img data-dz-thumbnail style="max-width: 450px" \/><br \/>\n                        <a href="#" class="custom_field_file_delete">{l s='Delete this image' mod='hhproduct'}<\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n<\/pre>\n\n\n\n
Et voici le code php de gestion de cet upload
De mon c\u00f4t\u00e9 l’objet product a \u00e9t\u00e9 surcharg\u00e9 pour ajouter ce champ mais libre \u00e0 vous de faire un traitement diff\u00e9rent<\/p>\n\n\n\n
\n\/**\n     * Configuration admin du module\n     * @return string\n     * @throws PrestaShopDatabaseException\n     * @throws PrestaShopException\n     *\/\n    public function getContent()\n    {\n        \/\/Gestion de l'envoi des fichiers\n        if (Tools::getValue('uploadProductImage')) {\n            $id_product = (int)Tools::getValue('id_product');\n            $field_name = Tools::getValue('field_name');\n            if ($this->_updateProductImageField($id_product, $field_name)) {\n                return $this->l('Image uploaded with success');\n            }\n        } elseif (Tools::getValue('deleteProductImage')) {\n            $id_product = (int)Tools::getValue('id_product');\n            $field_name = Tools::getValue('field_name');\n            if ($this->_deleteProductImageField($id_product, $field_name)) {\n                return $this->l('Image deleted with success');\n            }\n        } else {\n            return 'No configuration needed for this module';\n        }\n\n    }\n\n    \/**\n     * Upload de l'image d'un produit\n     * @param $id_product\n     * @param $field_name\n     * @return bool\n     * @throws PrestaShopDatabaseException\n     * @throws PrestaShopException\n     *\/\n    protected function _updateProductImageField($id_product, $field_name)\n    {\n        \/\/Envoi de l'image\n        \/\/@TOdo g\u00e9rer le cas ou l'image existe d\u00e9j\u00e0\n        $savePath = dirname(__FILE__) . '\/views\/img\/p';\n        $uploader = new Uploader('file');\n        $file = $uploader->setSavePath($savePath)\n            ->setAcceptTypes(['jpg', 'png', 'git', 'jpeg'])\n            ->process();\n\n        $fileName = ltrim(str_replace($savePath, '', $file[0]['save_path']), '\/');\n        try {\n            \/\/Sauvegarde la valeur de l'image pour le produit\n            $product = new Product($id_product);\n            $product->$field_name = $fileName;\n            $product->save();\n        } catch (PrestaShopException $e) {\n            echo $e->getMessage();\n            return false;\n        }\n\n        return true;\n    }\n\n\n    \/**\n     * Suppression de l'image d'un produit\n     * @param $id_product\n     * @param $field_name\n     * @return bool\n     *\/\n    protected function _deleteProductImageField($id_product, $field_name)\n    {\n        try {\n            \/\/Sauvegarde d'une valeur vide pour le produit\n            $product = new Product($id_product);\n\n\n            \/\/Si le produit a une image et qu'elle existe on la supprime\n            if ($product->$field_name != \"\") {\n                $imagePath = dirname(__FILE__) . '\/views\/img\/p\/' . $product->$field_name;\n                if (is_file($imagePath)) {\n                    unlink($imagePath);\n                }\n            }\n            $product->$field_name = '';\n            $product->save();\n        } catch (PrestaShopException $e) {\n            echo $e->getMessage();\n            return false;\n        }\n    }\n<\/pre>\n\n\n\n
Vous pouvez t\u00e9l\u00e9charger ci-dessous une version du module qui impl\u00e9mente ce champ (je l’ai test\u00e9 uniquement sur Ps 1.7.6 )<\/p>\n
\u00a0<\/p>\n\n\n\n
hhproduct<\/a>T\u00e9l\u00e9charger<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
Suite \u00e0 mon (ancien ) article (https:\/\/www.h-hennes.fr\/blog\/2017\/10\/19\/prestashop-1-7-ajouter-des-champs-produit\/ ) sur l’ajout de champs custom dans le formulaire d’administration d’un produit, j’ai eut pas mal de questions sur comment ajouter un champ de type file. Il faut reconna\u00eetre que la fonctionnalit\u00e9 n’est pas \u00e9vidente car le formulaire est soumis en ajax et le g\u00e8re pas l’upload de […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[245],"tags":[512,551,483,550],"class_list":["post-2059","post","type-post","status-publish","format-standard","hentry","category-prestashop-2","tag-administration","tag-file","tag-prestashop-1-7","tag-product"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts\/2059","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/comments?post=2059"}],"version-history":[{"count":4,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts\/2059\/revisions"}],"predecessor-version":[{"id":2068,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts\/2059\/revisions\/2068"}],"wp:attachment":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/media?parent=2059"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/categories?post=2059"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/tags?post=2059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}