{"id":2039,"date":"2019-09-10T12:42:59","date_gmt":"2019-09-10T10:42:59","guid":{"rendered":"https:\/\/www.h-hennes.fr\/blog\/?p=2039"},"modified":"2024-03-21T12:44:33","modified_gmt":"2024-03-21T10:44:33","slug":"prestashop-1-7-ajouter-une-etape-dans-le-tunnel-de-commande","status":"publish","type":"post","link":"https:\/\/www.h-hennes.fr\/blog\/2019\/09\/10\/prestashop-1-7-ajouter-une-etape-dans-le-tunnel-de-commande\/","title":{"rendered":"Prestashop 1.7 : Ajouter une \u00e9tape dans le tunnel de commande"},"content":{"rendered":"\n

Dans sa version 1.7 de Prestashop a compl\u00e8tement refondu le fonctionnement du tunnel de commande.

EDIT : 2024-03-21 :<\/strong>
A compter de la version 1.7.8\u00a0 il n’est plus n\u00e9cessaire de r\u00e9aliser une surcharge car un nouveau hook a \u00e9t\u00e9 impl\u00e9ment\u00e9.
J’ai mis \u00e0 jour l’article en cons\u00e9quence.<\/p>\n

Le fonctionnement est plus propre que dans la version pr\u00e9c\u00e9dente et avec cette nouvelle architecture il devient relativement simple d’ajouter une nouvelle \u00e9tape.
Nous allons voir comment r\u00e9aliser cela via la cr\u00e9ation d’un module.
L’id\u00e9e \u00e9tant d’ajouter une \u00e9tape \u00ab\u00a0Test de nouvelle \u00e9tape\u00a0\u00bb comme sur la capture ci-dessous :<\/p>\n\n\n\n

\"Checkout
Affichage de la nouvelle \u00e9tape<\/figcaption><\/figure>\n\n\n\n

Cet \u00e9tape contiendra uniquement 2 informations que nous souhaitons pouvoir r\u00e9utiliser dans le panier<\/p>\n\n\n\n

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

Fonctionnement technique avant Prestashop 1.7.8<\/h3>\n\n\n\n

Les diff\u00e9rentes \u00e9tapes du tunnel de commandes sont g\u00e9r\u00e9es dans la m\u00e9thode  bootstrap<\/em> du controller OrderController , le code est relativement simple \u00e0 comprendre.

Un instance de la classe CheckoutProcess<\/strong> est cr\u00e9\u00e9.
Puis l’ensemble des steps ( \u00e9tapes ) sont ensuite ajout\u00e9e au checkout via la m\u00e9thode addStep<\/em>(CheckoutStepInterface $step) qui attends donc une classe impl\u00e9mentant l’interface CheckoutStepInterface<\/strong><\/p>\n

Voici le code de la fonction du controller natif ( version 1.7.6 de Prestashop )<\/p>\n\n\n\n

 protected function bootstrap()\n    {\n        $translator = $this->getTranslator();\n\n        $session = $this->getCheckoutSession();\n\n        \/**\n         * Cr\u00e9ation du process\n         *\/\n        $this->checkoutProcess = new CheckoutProcess(\n            $this->context,\n            $session\n        );\n\n        \/**\n         * Ajout des diff\u00e9rentes \u00e9tapes\n         *\/\n        $this->checkoutProcess\n            ->addStep(new CheckoutPersonalInformationStep(\n                $this->context,\n                $translator,\n                $this->makeLoginForm(),\n                $this->makeCustomerForm()\n            ))\n            ->addStep(new CheckoutAddressesStep(\n                $this->context,\n                $translator,\n                $this->makeAddressForm()\n            ));\n\n        if (!$this->context->cart->isVirtualCart()) {\n            $checkoutDeliveryStep = new CheckoutDeliveryStep(\n                $this->context,\n                $translator\n            );\n\n            $checkoutDeliveryStep\n                ->setRecyclablePackAllowed((bool) Configuration::get('PS_RECYCLABLE_PACK'))\n                ->setGiftAllowed((bool) Configuration::get('PS_GIFT_WRAPPING'))\n                ->setIncludeTaxes(\n                    !Product::getTaxCalculationMethod((int) $this->context->cart->id_customer)\n                    && (int) Configuration::get('PS_TAX')\n                )\n                ->setDisplayTaxesLabel((Configuration::get('PS_TAX') && !Configuration::get('AEUC_LABEL_TAX_INC_EXC')))\n                ->setGiftCost(\n                    $this->context->cart->getGiftWrappingPrice(\n                        $checkoutDeliveryStep->getIncludeTaxes()\n                    )\n                );\n\n            $this->checkoutProcess->addStep($checkoutDeliveryStep);\n        }\n\n        $this->checkoutProcess\n            ->addStep(new CheckoutPaymentStep(\n                $this->context,\n                $translator,\n                new PaymentOptionsFinder(),\n                new ConditionsToApproveFinder(\n                    $this->context,\n                    $translator\n                )\n            ));\n    }\n<\/pre>\n\n\n\n
Comme vous pouvez le remarque il n’existe pas de hook, ni de solution non invasive pour rajouter une nouvelle \u00e9tape personnalis\u00e9e.
Il sera donc n\u00e9cessaire de surcharger cette m\u00e9thode pour pouvoir ajouter notre nouvelle \u00e9tape.<\/p>\n\n\n\n
Fonctionnement technique \u00e0 partir de Prestashop 1.7.8<\/h3>\n\n\n\n
A partir de la version 1.7.8 un nouveau hook a \u00e9t\u00e9 rajout\u00e9 pour permettre de faire ces actions.
Celui-ci est visible dans l’OrderController<\/p>\n\n\n\n
\n protected function bootstrap()\n    {\n        $translator = $this->getTranslator();\n        $session = $this->getCheckoutSession();\n\n        $this->checkoutProcess = $this->buildCheckoutProcess($session, $translator);\n        Hook::exec('actionCheckoutRender', ['checkoutProcess' => &$this->checkoutProcess]);\n    }\n<\/pre>\n\n\n\n
Ajout de la nouvelle \u00e9tape<\/h3>\n\n\n\n
C’est donc parti pour ajouter notre nouvelle \u00e9tape via le module hh_customcheckout<\/strong><\/p>\n
Voici la structure des fichiers que nous allons cr\u00e9er ( L’override n’est plus n\u00e9cessaire pour les versions sup\u00e9rieures \u00e0 1.7.8 )<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Pour commencer il faut cr\u00e9er la classe de gestion CustomCheckoutStep.php<\/strong> de notre \u00e9tape de checkout , voici son contenu :<\/p>\n\n\n\n
module = $module;\n        $this->setTitle('Test de nouvelle \u00e9tape');\n    }\n\n\n    \/**\n     * R\u00e9cup\u00e9ration des donn\u00e9es \u00e0 persister\n     *\n     * @return array step\n     *\/\n    public function getDataToPersist()\n    {\n        return array(\n            'service_name' => $this->serviceName,\n            'responsable_name' => $this->responsableName,\n        );\n    }\n\n    \/**\n     * Restoration des donn\u00e9es persist\u00e9es de la step\n     *\n     * @param array $data\n     * @return $this|AbstractCheckoutStep\n     *\/\n    public function restorePersistedData(array $data)\n    {\n        if (array_key_exists('service_name', $data)) {\n            $this->serviceName = $data['service_name'];\n        }\n\n        if (array_key_exists('responsable_name', $data)) {\n            $this->responsableName = $data['responsable_name'];\n        }\n\n        return $this;\n    }\n\n    \/**\n     * Traitement de la requ\u00eate ( ie = Variables Posts du checkout )\n     * @param array $requestParameters\n     * @return $this\n     *\/\n    public function handleRequest(array $requestParameters = array())\n    {\n        \/\/Si les informations sont post\u00e9es assignation des valeurs\n        if (isset($requestParameters['submitCustomStep'])) {\n            $this->serviceName = $requestParameters['service_name'];\n            $this->responsableName = $requestParameters['responsable_name'];\n\n            \/\/Passage \u00e0 l'\u00e9tape suivante\n            $this->setComplete(true);\n            \n            \/\/Code 1.7.6\n            if (version_compare(_PS_VERSION_, '1.7.6') > 0) {\n                $this->setNextStepAsCurrent();\n            } else {\n                $this->setCurrent(false);\n            }\n        }\n\n        return $this;\n    }\n\n    \/**\n     * Affichage de la step\n     *\n     * @param array $extraParams\n     * @return string\n     *\/\n    public function render(array $extraParams = [])\n    {\n\n        \/\/Assignation des informations d'affichage\n        $defaultParams = array(\n            \/\/Informations n\u00e9cessaires\n            'identifier' => 'test',\n            'position' => 3, \/\/La position n'est qu'indicative ...\n            'title' => $this->getTitle(),\n            'step_is_complete' => (int)$this->isComplete(),\n            'step_is_reachable' => (int)$this->isReachable(),\n            'step_is_current' => (int)$this->isCurrent(),\n            \/\/Variables custom\n            'serviceName' => $this->serviceName,\n            'responsableName' => $this->responsableName,\n        );\n\n        $this->context->smarty->assign($defaultParams);\n        return $this->module->display(\n            _PS_MODULE_DIR_ . $this->module->name,\n            'views\/templates\/front\/customCheckoutStep.tpl'\n        );\n    }\n\n}\n<\/pre>\n\n\n\n
Nous pouvons ensuite d\u00e9finir le template front de cet \u00e9tape dans le fichier customCheckoutStep.tpl<\/strong> dont voici le contenu<\/p>\n\n\n\n
<!-- Le template doit \u1ebftendre le template parent des \u00e9tapes du tunnel de commande -->\n{extends file='checkout\/_partials\/steps\/checkout-step.tpl'}\n\n<!-- Le contenu doit doit \u00eatre dans le block step content -->\n{block name='step_content'}\n    <div class=\"custom-checkout-step\">\n        <h2>Afin de confirmer votre commande merci de renseigner ces informations compl\u00e9mentaire sur votre service<\/h2>\n        <!-- Le formulaire doit envoyer les donn\u00e9es sur la page de commande en post -->\n        <form\n                method=\"POST\"\n                action=\"{$urls.pages.order}\"\n                data-refresh-url=\"{url entity='order' params=['ajax' => 1, 'action' => 'customStep']}\"\n        >\n\n            <!-- Les Champs sp\u00e9cifiques de la step avec assignation de la variable si elle existe -->\n            <section class=\"form-fields\">\n                <div class=\"form-group row\">\n                    <label class=\"col-md-3 form-control-label required\">Nom du service<\/label>\n                    <div class=\"col-md-6\">\n                        <input type=\"text\" name=\"service_name\" {if isset($serviceName)}value=\"{$serviceName}\"{\/if}\/>\n                    <\/div>\n                <\/div>\n                <div class=\"form-group row\">\n                    <label class=\"col-md-3 form-control-label required\">Nom du responsable<\/label>\n                    <div class=\"col-md-6\">\n                        <input type=\"text\" name=\"responsable_name\" {if isset($responsableName)}value=\"{$responsableName}\"{\/if}\/>\n                    <\/div>\n                <\/div\n            <\/section>\n            <footer class=\"form-footer clearfix\">\n                <input type=\"submit\" name=\"submitCustomStep\" value=\"Envoyer\"\n                       class=\"btn btn-primary continue float-xs-right\"\/>\n            <\/footer>\n        <\/form>\n    <\/div>\n{\/block}\n\n<\/pre>\n\n\n\n
Ajout de l’\u00e9tape dans le tunnel – Prestashop < 1.7.8<\/h3>\n\n\n\n
Notre nouvelle \u00e9tape est maintenant d\u00e9finie et son affichage \u00e9galement, il ne reste plus qu’a l’ajouter dans le checkout \u00e0 la position souhait\u00e9e, ceci sera fait via l’override du fichier OrderController.php<\/strong> dont voici le contenu<\/p>\n
\u00a0<\/p>\n\n\n\n
getTranslator();\n\n        $session = $this->getCheckoutSession();\n\n        $this->checkoutProcess = new CheckoutProcess(\n            $this->context,\n            $session\n        );\n\n        $this->checkoutProcess\n            ->addStep(new CheckoutPersonalInformationStep(\n                $this->context,\n                $translator,\n                $this->makeLoginForm(),\n                $this->makeCustomerForm()\n            ))\n            ->addStep(new CheckoutAddressesStep(\n                $this->context,\n                $translator,\n                $this->makeAddressForm()\n            ));\n\n        \/\/Les steps sont affich\u00e9e dans l'ordre d'ajout et il n'y a pas de possibilit\u00e9 de modifier l'ordre\n        \/\/Du coup il faut l'ajouter dans la position souhait\u00e9e\n        $customCheckout = Module::getInstanceByName('hh_customcheckout');\n        $this->checkoutProcess\n            ->addStep(new CustomCheckoutStep(\n                    $this->context,\n                    $this->getTranslator(),\n                    $customCheckout\n                )\n            );\n\n        if (!$this->context->cart->isVirtualCart()) {\n            $checkoutDeliveryStep = new CheckoutDeliveryStep(\n                $this->context,\n                $translator\n            );\n\n            $checkoutDeliveryStep\n                ->setRecyclablePackAllowed((bool) Configuration::get('PS_RECYCLABLE_PACK'))\n                ->setGiftAllowed((bool) Configuration::get('PS_GIFT_WRAPPING'))\n                ->setIncludeTaxes(\n                    !Product::getTaxCalculationMethod((int) $this->context->cart->id_customer)\n                    && (int) Configuration::get('PS_TAX')\n                )\n                ->setDisplayTaxesLabel((Configuration::get('PS_TAX') && !Configuration::get('AEUC_LABEL_TAX_INC_EXC')))\n                ->setGiftCost(\n                    $this->context->cart->getGiftWrappingPrice(\n                        $checkoutDeliveryStep->getIncludeTaxes()\n                    )\n                );\n\n            $this->checkoutProcess->addStep($checkoutDeliveryStep);\n        }\n\n        $this->checkoutProcess\n            ->addStep(new CheckoutPaymentStep(\n                $this->context,\n                $translator,\n                new PaymentOptionsFinder(),\n                new ConditionsToApproveFinder(\n                    $this->context,\n                    $translator\n                )\n            ));\n\n    }\n\n}\n<\/pre>\n\n\n\n
Ajout de l’\u00e9tape dans le tunnel – Prestashop  1.7.8 et +<\/h3>\n\n\n\n
A compter de la version 1.7.8 plus besoin d’override on peut tout g\u00e9rer proprement directement dans le code du module.
Voici un exemple d’impl\u00e9mentation.<\/p>\n\n\n\n
\nname = 'hh_customcheckout';\n        $this->tab = 'others';\n        $this->version = '0.1.0';\n        $this->author = 'hhennes';\n        $this->bootstrap = true;\n        parent::__construct();\n\n        $this->displayName = $this->l('Sample checkout step module');\n        $this->description = $this->l('Sample module for adding a custom step in checkout');\n    }\n\n    public function install()\n    {\n        return parent::install()\n            && $this->registerHook('actionCheckoutRender');\n    }\n\n    \/**\n     * Ajout de notre nouvelle \u00e9tape dans le tunnel de commande\n     *\n     * @param array $params\n     * @return void\n     *\/\n    public function hookActionCheckoutRender(array $params)\n    {\n        \/\/L'objet checkoutProcess est pass\u00e9 par r\u00e9f\u00e9rence, on peut donc le modifier directement.\n        \/\/Cf. controllers\/front\/OrderController.php:143\n        \/** @var CheckoutProcess $checkoutProcess *\/\n        $checkoutProcess = $params['checkoutProcess'];\n        \/\/Ajout de notre \u00e9tape sp\u00e9cifique\n        $checkoutProcess->addStep(\n            new CustomCheckoutStep(\n                $this->context,\n                $this->getTranslator(),\n                $this\n            )\n        );\n        \/\/R\u00e9cup\u00e9ration des \u00e9tapes du panier\n        $currentSteps = $checkoutProcess->getSteps();\n        \/\/R\u00e9cup\u00e9ration de notre \u00e9tape (qui est la derni\u00e8re du tableau des \u00e9tapes)\n        $customStep = array_pop($currentSteps);\n        \/\/Position \u00e0 laquelle on veut positionner notre \u00e9tape\n        $stepPosition = 2;\n        \/\/D\u00e9coupe du tableau pour r\u00e9cup\u00e9rer les \u00e9l\u00e9ments Avant et apr\u00e8s l'\u00e9tape\n        $beforeSteps = array_slice($currentSteps,0,$stepPosition);\n        $afterSteps = array_slice($currentSteps,$stepPosition);\n        \/\/Nouvel ordre des \u00e9tapes\n        $sortedSteps = array_merge($beforeSteps,[$customStep],$afterSteps);\n        \/\/On le d\u00e9finit dans le checkout\n        $checkoutProcess->setSteps($sortedSteps);\n    }\n\n}\n<\/pre>\n\n\n\n
Une fois le module install\u00e9, notre nouvelle \u00e9tape sera bien disponible dans le tunnel de commande \ud83d\ude00

Pour ceux qui le souhaitent vous pouvez t\u00e9l\u00e9charger directement le fichier du module , pour l’instant je ne l’ai test\u00e9 sur\u00a0 les versions\u00a0 1.7.5 et sup\u00e9rieur
La version avec override qui ne bougera plus est disponible ici : hh_customcheckout <\/a>
La version avec le hook qui pourrait encore \u00eatre mise \u00e0 jour est disponible sur ma boutique.<\/p>\n\n\n\n
T\u00e9l\u00e9charger le module gratuitement sur la boutique<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Dans sa version 1.7 de Prestashop a compl\u00e8tement refondu le fonctionnement du tunnel de commande. EDIT : 2024-03-21 : A compter de la version 1.7.8\u00a0 il n’est plus n\u00e9cessaire de r\u00e9aliser une surcharge car un nouveau hook a \u00e9t\u00e9 impl\u00e9ment\u00e9.J’ai mis \u00e0 jour l’article en cons\u00e9quence. Le fonctionnement est plus propre que dans la version […]<\/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":"default","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":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","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":[],"class_list":["post-2039","post","type-post","status-publish","format-standard","hentry","category-prestashop-2","prestashop-1-6","prestashop-1-7","prestashop-1-7-4","prestashop-1-7-5","prestashop-1-7-6","prestashop-1-7-7","prestashop-1-7-8","prestashop-8-0","prestashop-8-1"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts\/2039","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=2039"}],"version-history":[{"count":11,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts\/2039\/revisions"}],"predecessor-version":[{"id":5287,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts\/2039\/revisions\/5287"}],"wp:attachment":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/media?parent=2039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/categories?post=2039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/tags?post=2039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}