<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=262721675103356&amp;ev=PageView&amp;noscript=1">
Skip to the main content.
ICX FOLDER
logo-ICX

2 minutos de lectura

¿Cómo crear un webservice en Magento 2?

2 minutos de lectura

¿Cómo crear un webservice en Magento 2?

Los webservices son mecanismos vitales para que dos o más sistemas se comuniquen, ya que permiten transferir información, ejecutar procedimientos o capturar datos de los usuarios. 

Imagina que llenas un formulario con tus datos personales, luego estos son enviados a un servidor y procesados, puede ser para participar en un sorteo, para solicitar un servicio particular o realizar un reclamo. En este artículo se abarcará una guía sencilla para crear un webservice en Magento 2, el cual se utilizará como ejemplo para capturar los datos de un cliente que está llenando un formulario de contacto.

Primero se debe crear el formulario para el lado del cliente, para esto vamos a utilizar la herramienta para crear un formulario HTML de forma rápida y sencilla:

Formulario_Magento

Se debe copiar el código HTML del formulario y pegarlo en donde se desee mostrársele al usuario. Para este ejercicio se creará una página "contact":

Contact_Magento


Adicionalmente, se usará el siguiente código de javascript para enviar el formulario cuando el usuario presione el botón de Submit (te invitamos a agregar mayor funcionalidad como validaciones o un captcha, ya que este ejemplo es sólo una demostración básica):

<script type="text/javascript" defer>
  require(['jquery','jquery/ui'], function($) {
    $('#submit').on('click', function(){
      var formData = new FormData($("#contact-form")[0]);
      formData = JSON.stringify(Object.fromEntries(formData));
      $('body').trigger('processStart');
      $.ajax({
        type: "POST",
                 url: "/rest/V1/custom/contact-form/",
        data: formData,
        success: function(){
          $('body').trigger('processStop');
          alert("Success");
        },
        error: function (xhr, ajaxOptions, thrownError) {
           $('body').trigger('processStop');
          alert("Error");
        },
        dataType: 'json',
        contentType: 'application/json',
      });
   });
});
</script>

Del código javascript anterior, debes remplazar "contact-form" por el nombre que le quieras dar a la ruta de tu webservice. Con esto terminamos nuestro formulario, ahora vamos a crear el API y la ejecución del lado del servidor.

En la carpeta, app/code de nuestro directorio de Magento, vamos a crear un módulo, en este ejemplo se nombrará "Imagineer_Contact" (crear la carpeta app/code/Imagineer/Contact).

Dentro de nuestro módulo agregaremos los siguientes archivos (remplaza "Imagineer" y "Contact" para que corresponda con el nombre de tu módulo):

registration.php   :

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Imagineer_Contact',
    __DIR__
);

etc/module.xml   :

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Imagineer_Contact" setup_version="1.0.0" />
</config>
 
etc/di.xml   :
 
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Imagineer\Contact\Api\Contact" type="Imagineer\Contact\Model\Api\Contact"/>  
</config>
 
etc/webapi.xml  (debes remplazar "contact-form" con el mismo nombre que asignaste en el código javascript anterior):
 
<?xml version="1.0"?>
<routes xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../app/code/Magento/Webapi/etc/webapi.xsd">
    <route method="POST" url="/V1/custom/contact-form/">
        <service class="Imagineer\Contact\Api\Contact" method="getPost"/>
        <resources>
            <resource ref="anonymous"/>
        </resources>
    </route>
</routes>
 

Api/Contact.php  (Aquí se deben indicar los parámetros que recibe el webservice, en este caso sólamente son 2, el nombre y la información de contacto, ambas son hileras y sus nombres deben coincidir con los nombres de los campos del formulario HTML):

<?php
namespace Imagineer\Contact\Api;
interface Contact
{
    /**
     * GET for Post api
     * @param string $name
     * @param string $info
     * @return string
     */
    public function getPost($name, $info);
}
 

Model/Api/Contact.php   (Aquí vamos a colocar la funcionalidad de nuestro método getPost, debemos conservar los mismos parámetros y nombres que en el api que se definió en la interfaz anterior):

<?php
namespace Imagineer\Contact\Model\Api;
 
use Psr\Log\LoggerInterface;
 
class Contact
{
    protected $logger;
 
    public function __construct(
        LoggerInterface $logger
    )
    {
 
        $this->logger = $logger;
    }
 
    /**
     * @inheritdoc
     */
    public function getPost($name, $info);
    {
        $response = ['success' => false];
        try {
            // Your Code here
            $response = ['success' => true, 'message' => $name . " " . $info];
        } catch (\Exception $e) {
            $response = ['success' => false, 'message' => $e->getMessage()];
            $this->logger->info($e->getMessage());
        }
        return  json_encode($response);
    }
}

 

Dentro de la función getPost, puedes agregar el comportamiento deseado, como guardar la información en una base de datos, enviar un correo electrónico o lo que quieras hacer. De cualquier forma, siempre te recomendamos que hagas validaciones de seguridad tanto del lado del cliente como del lado del servidor, para evitar ataques de inyección de código o simplemente limpiar formatos de datos inválidos.

Una vez que tenemos estos archivos listos en nuestro módulo, solamente falta instalarlo y compilar, para esto se deben correr los comandos:

bin/magento setup:upgrade

bin/magento setup:di:compile

bin/magento cache:flush

Ahora prueba ingresando los datos en el formulario, te recomiendo abrir la consola de inspección de tu navegador (en el caso de Chrome, presionando F12 o clic derecho > inspeccionar). Luego navega a la pestaña de Network y revisa lo que sucede cuando realizas el Submit del formulario.

Formulario_Magento

Deberías ver un  código 200 con el mensaje de respuesta. Si el código de error es 400, revisa la sintaxis de tu javascript, y si es error 500, revisa los archivos ubicados en:

var/log/system.log 

var/log/exception.log

/var/log/apache2/error.log  (si usas apache)

/var/log/nginx/nginx_error.log (si usas nginx)

Espero que esta guía haya sido útil para crear un webservice básico en Magento, si deseas más información o tienes algún comentario al respecto, puedes contactarme y con gusto intentaré responderte. Si quieres descargar el código utilizado en esta guía, visita el siguiente enlace: Imagineer_Contact.zip

Content added to ICX Folder

Guardar blog

Imprimir

Suscribirse

Comienza

CX Insights Recomendados Para Usted

Cómo customizar el admin de Magento (parte 1)

Cómo customizar el admin de Magento (parte 1)

Cada instancia de Magento consiste de al menos dos sitios separados: el frontend, que permite a los clientes navegar, crear cuentas y comprar...

Leer más
Magento B2B y Magento B2C: diferencias clave entre ambas plataformas

Magento B2B y Magento B2C: diferencias clave entre ambas plataformas

En el mundo del comercio electrónico, las necesidades y expectativas de los clientes varían significativamente entre los segmentos B2B y B2C.

Leer más
Cómo crear Tarjetas de Regalo (Gift Cards) en Magento

Cómo crear Tarjetas de Regalo (Gift Cards) en Magento

Desde la perspectiva del cliente, seleccionar regalos adecuados para la familia o amigos puede llegar a ser todo un desafío, especialmente con la...

Leer más

SUBSCRIPCIÓN ICX

Venga y sea parte de los últimos insights específicos proporcionados por nuestros expertos

¿Qué sigue?

¿ESTÁS LISTO?