Drupal Español - Blog

Commerce pasarela de pago en Drupal. Si queremos vender en nuestra tienda online, debemos proporcionar a nuestros clientes una forma de pago que les genere confianza por un lado, y que nos de seguridad a nosotros por el otro, para ello, una de las pasarelas más utilzadas (en Europa) es PayPal, con la particularidad que nos permite, aceptar tanto los pagos mediante cuentas de la plataforma, como pagos con tarjeta de crédito/débito, lo cual es muy cómodo porque con una única plataforma aceptamos varias formas de pago.

Vamos a ver como añadirla a nuestra página. Lo primero será, como siempre, ir a la página del proyecto y usar composer para instalar la extensión mediante el comando $ composer require 'drupal/commerce_paypal:^1.0@RC'

Image

Esto descargará el módulo y sus dependencias. Ahora debemos activarlo en el sitio, vamos a Ampliar y en la búsqueda escribimos "payp", cuando nuestre el módulo, lo activamos

Image

Una vez activado, vamos a Comercio -- Configuración -- Pago -- Pasarelas de pago

Image

Pulsamos sobre "+Añadir pasarela de pago"

Image

Cubrimos los campos con las opciones mostradas, marcando el "Modo: prueba" para tener un entorno de pruebas con pagos simulados, cuando hayamos finalizado la fase de desarrollo, volveremos aquí y marcaremos "producción". Las claves de la API las obtendremos desde el sitio de PayPal Develop creandonos una cuenta ( no es necesario tener cuenta live ).

Image

Dejando estas opciones marcadas, aceptaremos pagos tanto con cuenta PayPal por defecto como con tarjeta de crédito o débito, guardamos las opciones.

Image

Y esto ha sido commerce pasarela de pago, recordad que tenéis este y otros manuales de ayuda en el blog y si aun así no halláis respuesta a vuestro problema, podéis publicar vuestras preguntas en el tablón, donde la comunidad os ayudará a resolverlas.

Una vez que tenemos claro como crear un módulo custom en Drupal 8/9, nos surge la necesidad de incluir en nuestro portal un bloque custom en Drupal 8/9 que pinte algo, ya sea un texto , formulario o cualquier entidad de Drupal.

Lo primero que necesitamos es generar la estructura para que Drupal se entere de que existe un bloque nuevo:

Image

Como podemos ver, la estructura es: MIMODULO/src/Plugin/Block y dentro la clase con una nomenclatura en concreto, aunque pongamos otro nombre a nuestra clase seguiría funcionando, pero lo correcto es llevar un orden lógico.

Ahora ya dentro de la clase empezamos generar el código mínimo necesario para que Drupal lo pueda interpretar.

Para empezar necesitamos especificar en cual nombre de espacio se encuentra nuestro bloque y como mínimo necesitamos añadir la clase a la que necesitamos extender:

Image

Además tenemos que definir de forma obligatoria la "id" y el nombre de nuestro bloque:

Image

De esta forma ya podemos generar la estructura básica del block que se conforma de una clase extendiendo de "BlockBase" de Drupal y que tiene que tener como mínimo una función pública llamada "build" por la cual Drupal mostrara todo el contenido del bloque.

Image

En este ejemplo simplemente queremos que nuestro bloque pinte un texto "Hola Mundo", para ello desde nuestro bloque retornamos un "Markup" con el texto:

Image

En este momento si colocamos en nuestro bloque en cualquier lugar de nuestra web, veremos el texto insertado.

Ejemplo completo de la clase:

<?php

namespace Drupal\a_test\Plugin\Block;

use Drupal\Core\Block\BlockBase;


/**
 * Provides a 'A test' Block.
 *
 * @Block(
 *   id = "a_test_hello_world",
 *   admin_label = @Translation("A Test Hello World"),
 * )
 */
class aTestHolaBlock extends BlockBase {

  /**
   * {@inheritdoc}
   */
  public function build() {
    return [
      '#markup' => $this->t('Hola Mundo'),
    ];
  }

}

Y así es como podemos crear un bloque custom en Drupal 8/9: Mi primer bloque | AulaDrupal.

Para mas información visite nuestro blog.

File Watcher es un procesador para compilar SASS o SCSS con PHPstorm, nuestra herramienta favorita de desarrollo con Drupal. :)

Vamos a mostrar como configurarla, paso a paso:

Lo primero que tenemos que hacer es tener nuestros archivos bien ordenados dentro de nuestro theme. 

Dentro del theme, en la raíz del mismo,  tendremos una carpeta llamada CSS con los archivos que compilará  File Watcher. Y en la misma ruta otra carpeta con los SASS o SCSS que necesitamos compilar, ejemplo:

En mi theme, mi estructura es la siguiente: todo el css se compila en el archivo Style.css, pero dentro de la carpeta sass, tengo toda una estructura de componentes que se cargan en mi Style.scss con un @import.

De esta manera todos mis estilos están ordenados y los proceso según el orden que me beneficie.

Previo a todos los pasos debemos tener instalado, Sass en nuestro sistema, aqui os dejo el comando de ubuntu: 

npm install -g sass

Ahora vamos a configurar la herramienta del PhpStorm:

Vamos a Inicio - Settings  y dentro en  tools - File Watcher . Pulsamos el botón + para añadir un nuevo compilador. Elegimos el  tipo de hoja de estilo que vamos a usar de la lista (SASS y SCSS usan el mismo motor), y una vez dentro,  abrimos  el desplegable

Working Directory and Environment Variables.

Dentro hay 3 imputs (marcadas en rojo en la imagen) que tenemos que reescribir con nuestras rutas:

Arguments: $FileName$:$ProjectFileDir$/web/themes/custom/auladrupal/css/$FileNameWithoutExtension$.css

Output paths to refresh: $ProjectFileDir$/web/themes/custom/auladrupal/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/web/themes/custom/auladrupal/css/$FileNameWithoutExtension$.css.map

Working directory: $ProjectFileDir$/web/themes/custom/auladrupal/sass/

una vez tengamos todo configurado, solo tenemos que probar a realizar algún cambio en nuestro código Front para ver si se compila. Este proceso es muy rápido por tanto seguramente no veáis que lo ha hecho. Para comprobarlo, id a la carpeta CSS y verificar que ese cambio esta en el style.css  

Hemos aprendido a Compilar SASS o SCSS con PHPstorm usando File Watcher

Si necesitas mas ayuda de PHPstorm ve al blog desde aqui 

Enlace para descargar el PHPStorm