Añadir botón de "Recibí mi pedido en Prestashop 1.5"

15 noviembre, 2014 |

Si te gusta, compártelo ;)

Introducción

Para muchas tiendas online es fundamental saber si un determinado pedido ha sido recibido por el cliente o no, especialmente cuando se utilizan transportistas no rastreables. Hoy vamos a dar a nuestros clientes la opción de indicarnos si han recibido un pedido mediante la adición de un botón de tipo Recibí mi pedido, ahorrándonos tiempo y problemas.


Compatibilidad: Prestashop 1.5 y
Prestashop 1.6

Descargar los archivos del proyecto

¿Por qué solicitar a los clientes que confirmen la llegada de su pedido?

Dependiendo del tipo de negocio que manejemos, es posible que deseemos asegurarnos de que determinados pedidos han sido entregados a sus clientes, especialmente si son enviados mediante transportistas no rastreables o mediante envío gratuito (sin número de seguimiento).

Es por ello, que, para evitarnos estos problemas daremos a los clientes la oportunidad de notificar de forma manual si un pedido ha sido entregado.

Lo que vamos a hacer...

En este tutorial vamos a crear un override, y modificaremos dos archivos de nuestro tema. En concreto...

OrderDetailController.php (override)
order-detail.tpl
history.js

Haremos uso de los estados de pedido "Enviado" y "Entregado". Tendremos en cuenta los id de los estados de pedido a medida que añadamos los fragmentos de código necesarios.

Debemos notar también que, por defecto, la página de detalle de pedido se muestra mediante una llamada javascript, y por lo tanto tenemos que crear una llamada ajax que apunte a la anulación (override) del controlador.

Por último, debemos tener en cuenta que esto se aplica a clientes registrados solamente, no a usuarios invitados.

Agregar el botón "He recibido el pedido"

Lo primero que tendriamos que hacer es añadir algún tipo de botón para que el cliente pueda hacer clic en él. La página ideal para esto es, por supuesto, la página de "Historial de pedidos", a la que se puede acceder desde "Mi cuenta":

Historial de pedidos de Prestashop

Como podemos ver en la imagen anterior, este producto ya ha sido enviado, por lo tanto el cliente debe ser capaz de decirnos si recibió el pedido o no. Vamos a aprovechar el apartado "Siga su pedido paso a paso", para añadir nuestro botón aquí. Sería una buena idea crear una copia de seguridad de la carpeta de nuestro tema. Hecho esto, abrir el archivo order-detail.tpl, situado en el directorio raíz de nuestro tema.

Buscar este código:

<h3>{l s='Follow your order\'s status step-by-step'}</h3>

Y justo después añadir el siguiente código:

<h3>{l s='Follow your order\'s status step-by-step'}</h3>

{if $order_history.0.id_order_state == 4}
  <form action="{$link->getPageLink('order-detail', true)|escape:'html'}" method="post" class="std" id="markAsReceived">

 <input type="hidden" class="hidden" value="{$order->id|intval}" name="id_order" />
  <input type="submit" class="exclusive" name="markAsReceived" id="markAsReceivedBtn" value="{l s='He recibido el pedido'}">
  <p class="clear"></p>
  </form>
{/if}
Hemos encerrado un formulario (con el susodicho botón ), dentro de un condicional. El botón solo será visible si el id del estado del pedido es igual a 4. Recordemos que al comienzo del artículo mencionamos los estados de pedido. Por lo tanto, los clientes solo verán el botón si el estado del pedido se encuentra establecido en "Enviado".

El formulario apunta a la misma página (order-detail.tpl, y su relativo controlador). También tenemos que pasar el id del pedido, ya que el sistema necesita conocer el estado del pedido para ser actualizado más tarde.

Así es como tendría que verse el botón:

Botón para confirmar la llegada del pedido

Con esto casi hemos terminado con la plantilla. Volveremos más tarde para agregar un mensaje de confirmación cuando el estado del pedido sea actualizado.

Los "estados de pedido" en el Back-office

Estados de pedido en Prestashop

Desde esta sección podemos ver los id's de los estados, o crear "estados de pedido"

Creando el override (OrderDetailController.php)

Debemos crear un archivo PHP en prestashop/override/controllers/front y llamarlo OrderDetailController.php. Dentro de este archivo, agregar el siguiente código:

class OrderDetailController extends OrderDetailControllerCore
{
 
    public function postProcess()
    {
        parent::postProcess();
 
        if (Tools::isSubmit('markAsReceived'))
        {
            $idOrder = (int)(Tools::getValue('id_order'));
            $order = new Order($idOrder);
 
            if(Validate::isLoadedObject($order))
            {
                if($order->getCurrentState() == 4) // Si el estado es "enviado"
                {
                    $new_history = new OrderHistory();
                    $new_history->id_order = (int)$order->id;
                    $new_history->changeIdOrderState(5, $order); // 5: Entregado
                    $new_history->addWithemail(true);    
                }
 
                $this->context->smarty->assign('receipt_confirmation', true);
 
            } else $this->_errors[] = Tools::displayError('Error: Invalid order number');
             
        }       
 
    }
 
}

Basicamente este código comprueba si el botón (markAsReceived) ha sido presionado. Si es así, toma el id del pedido en cuestión y un nuevo objeto es creado para ser usado. Es fundamental asegurarse siempre si el objeto ha sido cargado, mediante Validate::isLoadedObject($object)

Si el estado del pedido es igual a 4, podemos añadir un nuevo estado del pedido. Para ello utilizamos la clase OrderHistory, estableciendo el id del pedido ($new_history->id_order = (int)$order->id;), para luego cambiar el estado del pedido a 5. Si está establecido que se envie un email se hará, y asignamos una variable a la plantilla, con el fin de mostrar un mensaje de confirmación.

En este punto ya podemos probar el formulario. Pero antes debemos eliminar el archivo class_index.php, ubicado en prestashop/cache, para que el override pueda llevarse a cabo.

El mensaje de confirmación

Como un mensaje de confirmación siempre tranquiliza, justo antes del formulario que agregamos al archivo order-detail.tpl, agregar el siguiente código.

{if isset($receipt_confirmation) && $receipt_confirmation}
 <p class="success">
  {l s='¡Gracias por su confirmación!'}
 </p>
{/if}

Quedando la plantilla definitavamente así:

<h3>{l s='Follow your order\'s status step-by-step'}</h3>

{if isset($receipt_confirmation) && $receipt_confirmation}
    <p class="success">
        {l s='¡Gracias por su confirmación!'}
    </p>
{/if}

{if $order_history.0.id_order_state == 4}
    <form action="{$link->getPageLink('order-detail', true)|escape:'html'}" method="post" class="std" id="markAsReceived">
 
 
        <input type="hidden" class="hidden" value="{$order->id|intval}" name="id_order" />
        <input type="submit" class="exclusive" name="markAsReceived" id="markAsReceivedBtn" value="{l s='I have received this order'}">
        <p class="clear"></p>
    </form>
 
{/if}

Podríamos dejarlo aquí; sin embargo, para mejorar la experiencia de usuario de nuestros clientes, vamos a integrar este botón para el estilo ajax de la página de "historial de pedidos".

Agregando Ajax al archivo history.js

Abramos el archivo history.js, ubicado en prestashop/themes/nuestro_tema/js

Buscar este fragmento de código:

$('form#sendOrderMessage').submit(function(){
    return sendOrderMessage();
 
});

Y justo después añadir este fragmento:

$('form#markAsReceived').submit(function(){
    return markAsReceived();
});

Este fragmento lo utilizamos para capturar el evento del formulario (el de id markAsReceived)

Ahora debemos agregar una función al final del archivo. Tomaremos la función sendOrderMessage() como base para agregar la nuestra. Añadir este fragmento al final del archivo:

function markAsReceived()
{
 paramString = "ajax=true";
 $('#markAsReceived').find('input').each(function(){
  paramString += '&' + $(this).attr('name') + '=' + encodeURIComponent($(this).val());
 });
 $.ajax({
  type: "POST",
  headers: { "cache-control": "no-cache" },
  url: $('#markAsReceived').attr("action") + '?rand=' + new Date().getTime(),
  data: paramString,
  success: function (msg){
   $('#block-order-detail').fadeOut('slow', function() {
    $(this).html(msg);
    //catch the submit event of sendOrderMessage form
    
    $(this).find('#markAsReceivedBtn').fadeOut;
    $(this).fadeIn('slow');
   });
  }
 });
 return false;
}

Guardar y probrar si todo ha funcionado.

En lugar de probar el botón haciendo múltiples pedidos en la tienda, cambiar el estado del pedido desde el Back-office, como vemos en la siguiente imagen:
Actualizar el estado de un pedido en prestashop

En esta otra imagen de abajo podéis ver los múltiples cambios de estados que hice probando el funcionamiento del botón.

Confirmación de entrega del pedido

Y con esto ya hemos terminado, espero que os funcione bien!!!

30 comentarios:

  1. Hola,

    he seguido el manual, se que es para 1.5 pero yo tengo la version 1.6.0.9.
    me aparece el boton y carga de nuevo el historial cuando lo presionas pero no cambia el estado del pedido. Supongo que cambiará algo en esta version.

    Es posible hacerlo para 1.6.0.9??

    muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola Roberto,

      Lo acabo de probar en la versión 1.6.0.11 y sí que ha funcionado. Prácticamente no ha cambiado nada, al menos en el archivo .php y el .js

      Los únicos cambios que he hecho han sido en el archivo order-edtail.tpl. Busca la única etiqueta h1 que hay en el archivo, y justo después de h1 añade esto:

      No se pueden insertar determinadas etiquetas en los comentarios, así que prueba a bajarte este archivo .txt y pega su contenido justo después de h1


      https://mega.co.nz/#!oAMyCSBB!N_2eq6BBtVq2uol8bDt42CtMnqLnTw9iZ5jzSONQ0Ak


      Guarda los cambios, y... eso sí, muy importante, borra el archivo ../prestashop/cache/class_index.php

      No te preocupes por borrarlo, cuando recargas la tienda se regenera el archivo.

      Eliminar
  2. Hola, tengo la version 1.6.1.4 y me paso lo mismo que a Roberto.
    No se cambia el estado al presionar el boton

    alguna sugerencia?

    Saludos

    ResponderEliminar
  3. Hola,
    hice lo que indicas pero sigue igual. Vuelve cambiar el historial sin cambiar de estado. Revise todos los cambios que hay que poner en los archivos y esta todo bien.
    Se te ocurre alguna otra cosa?

    Saludos

    ResponderEliminar
  4. Hola Francisco, pudo ver este tema?
    tengo la version 1.6.1.4 y al dar clic al boton no cambia de estado. solo recarga nuevamente el historial. ya hice los cambios que le indico a Roberto y sigue igual

    Saludos
    Eduardo

    ResponderEliminar
    Respuestas
    1. Hola Eduardo,
      Lamentablemente este tutorial es solo compatible con Prestashop 1.5, como se indica arriba.

      Eliminar
  5. Ok
    como mencionabas que lo probaste y funciono en la versión 1.6.0.11 por eso te consultaba.
    Quizás sabias que modificación hacer para que funcione en la 1.6.1.4

    Saludos

    ResponderEliminar
    Respuestas
    1. Pues es cierto, no me había fijado, lo miraré a ver.

      Eliminar
    2. Hola Eduardo, ya funciona siento haber causado molestias a quien haya leído el tutorial. Lo acabo de probar en la versión 1.6.1.4

      Faltaba un = en el archivo OrderDetailController.php

      if($order->getCurrentState() == 4)

      Justo en esa línea. Prueba a ver si te funciona ahora. Siento el error.

      Un saludo.

      Eliminar
  6. Ok Francisco
    lo pruebo y luego te cuento.
    gracias de antemano
    saludos

    ResponderEliminar
  7. Lo probe y no funciona.
    sigue igual que antes.
    revise linea por lina todo el codigo que indicas en los diferentes archivos y esta todo bien.

    ResponderEliminar
    Respuestas
    1. Funcionar funciona, lo probé ayer con la 1.6.1.4 recién instalada. Luego copiaré el código de aquí y lo volveré a pegar en mis archivos para probarlo.

      Borras el archivo class_index.php?

      Es imprescindible que lo borres para que funcione. En Rendimiento debes activar la opción "Recompilar las plantillas cuando sean modificadas".

      Es algo así, no estoy en casa ahora. Vacía la caché también, prueba con otro navegador. Borra las cookies o la caché del que utilices, a veces no se ven los cambios por cosas así.

      Eliminar
  8. Hola, el mismo. Descarga el archivo y pega el archivo PHP en override/ controllers/ front

    ResponderEliminar
  9. donde esta el archivo para descargar?
    yo lo cree (OrderDetailController.php) tal como indicas arriba y copie el codigo.

    ResponderEliminar
    Respuestas
    1. Donde dice descargar archivos del proyecto. Al principio del tutorial.

      Eliminar
  10. ahora si cambia de estado,
    Gracias

    Lo unico es que no aparece el mensaje de confirmacion dando las graciasç

    ResponderEliminar
    Respuestas
    1. A mí sí me aparece. Asegúrate. ¿Seguro que te ha salido o te has rendido?

      Eliminar
  11. Si cambia el estado. Eso ya lo hace bien pero no me aparece el mensaje de confirmación.

    ResponderEliminar
  12. Francisco, sigue sin aparecer el mensaje de confirmacion
    que es lo que puede estar mal?

    ResponderEliminar
    Respuestas
    1. Hola, pues aparte de asegurarte de haber introducido bien el código, borrar la caché desde la ruta prestashop/cache/smarty/compile
      y prestashop/cache/smarty/cache
      NO BORRES el archivo index.php. Borra las cookies de localhost de tu navegador, la caché del navegador también.

      Eliminar
    2. Hola, pues aparte de asegurarte de haber introducido bien el código, borrar la caché desde la ruta prestashop/cache/smarty/compile
      y prestashop/cache/smarty/cache
      NO BORRES el archivo index.php. Borra las cookies de localhost de tu navegador, la caché del navegador también.

      Eliminar
  13. que es lo que tengo que borrar exactamente de estas carpetas?
    adentro de estas carpetas hay una cantidad mas de carpetas

    ResponderEliminar
    Respuestas
    1. Toodoo lo que hay excepto los archivos index.php
      Pero asegurate que son las carpetas correctas. Y es importante que borres la caché del navegador, las cookies del localhost, no hace falta que borres todas las cookies. En Chrome hay una opción que se llama "datos de aplicaciones alojadas" o algo así. Vamos todo lo que creas que puede ser susceptible de que no veas los cambios. El historial, por ejemplo, no hace falta que lo borres.

      Eliminar
  14. he realizado todo lo que indicas y sigue sin aparecer.
    revise el codigo varias veces y no encontre errores.
    no se que mas hacer
    lo probe desde otra pc y desde un telefono y pasa lo mismo

    ResponderEliminar
    Respuestas
    1. Hola, lo he probado en Internet Explorer 11 tras borrar toda la caché, cookies, y casi todo. En este navegador no me importa, y sí que me aparece el mensaje de confirmación.

      Mira la captura:

      http://img9.uploadhouse.com/fileuploads/22334/22334619ca200344fd84fe1eae063b30f9931197.png

      Eliminar
  15. ok, entiendo pero a mi no me aparece
    y creo que no debe ser un tema de borrar el cache del navegador donde hice los cambios, ya que lo probe en otra pc y tampoco aparece

    ResponderEliminar
    Respuestas
    1. Ya no sé que decirte la verdad. Yo lo he probado en la misma versión que tú y no he tocado nada excepto la opción "Recompilar las plantillas cuando los archivos sean modificados" que la tengo activada. Las opciones CCC (COMBINACIÓN, COMPRESIÓN Y CACHE) de la ruta Parámetros -> Avanzados los tengo todos desactivados. Lo estás probando en localhost?

      Eliminar
  16. ya probe de todo
    ya me di por vencido.
    Si se te ocurre algo mas barbaro sino no te preocupes
    gracias igualmente por tu ayuda

    ResponderEliminar
    Respuestas
    1. Lo único que se me ocurre es que me mandes tu carpeta de prestashop y un backup de la base de datos. Así yo lo instalo en mi PC para encontrar el problema.

      Eliminar