WooCommerce ESW

WooCommerce ESW

Il progetto prevede la creazione di un mini-sito con commerce integrato con Easy Store Web.

Ambiente di lavoro

Container

Abbiamo optato per un docker container così strutturato
docker-compose.yml

version: '3.9'

services:

  db:
    image: mysql:5.7
    ports:
      - 3306:3306
    environment:
      MYSQL_DATABASE: webmobili
      MYSQL_USER: webmobili
      MYSQL_PASSWORD: w3bm0b1l1
      MYSQL_ROOT_PASSWORD: w3bm0b1l1
    volumes:
      - db:/var/lib/mysql

  wordpress:
    depends_on:
      - db
    build:
      context: ./
    ports:
      - 8000:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: webmobili
      WORDPRESS_DB_PASSWORD: w3bm0b1l1
      WORDPRESS_DB_NAME: webmobili
      WORDPRESS_DEBUG: 1
      TZ: "Europe/Rome"
    volumes:
      - wordpress:/var/www/html

volumes:
  db:
  wordpress:

Punta al seguente Dockerfile che si occupa di configurare xdebug per PHP.
N.B. Ad oggi (giugno 2022) Wordpress non è compatibile con PHP 8 (infatti usiamo il 7.4).

FROM wordpress:6.0.0-php7.4-apache
RUN apt-get update && \
  pecl install xdebug \
  && docker-php-ext-enable xdebug
# Copy xdebug.ini to /usr/local/etc/php/conf.d/
COPY ./*.ini /usr/local/etc/php/conf.d/
# Copy plugin data to to /usr/src/wordpress/wp-content/plugins/designbest-esw
COPY --chown=www-data:www-data ./designbest-esw/ /usr/src/wordpress/wp-content/plugins/designbest-esw/

Nella root dev'essere presente il file xdebug.ini così configurato:

zend_extension=xdebug.so

[xdebug]
xdebug.mode=develop,debug
xdebug.discover_client_host = true
xdebug.start_with_request=yes

Ecco il devcontainer.json

{
	"name": "Designbest Commerce ESW",

	// Update the 'dockerComposeFile' list if you have more compose files or use different names.
	// The .devcontainer/docker-compose.yml file contains any overrides you need/want to make.
	"dockerComposeFile": [
		"../docker-compose.yml"
	],

	// The 'service' property is the name of the service for the container that VS Code should
	// use. Update this value and .devcontainer/docker-compose.yml to the real service name.
	"service": "wordpress",

	// The optional 'workspaceFolder' property is the path VS Code should open by default when
	// connected. This is typically a file mount in .devcontainer/docker-compose.yml
	"workspaceFolder": "/var/www/html",

	// Add the IDs of extensions you want installed when the container is created.
	"extensions": ["xdebug.php-pack", "xdebug.php-debug", "bmewburn.vscode-intelephense-client","neilbrayfield.php-docblocker"],

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	"forwardPorts": [8000]
}

Visual Studio

- Cliccare sul pulsante Run & Debug e farsi creare in automatico il file .vscode/launch.json per abilitare xdebug per PHP.
- Creare un file .vscode/settings.json per configurare le estensioni col seguente codice

{
  "es6-css-minify.minifyOnSave": "exists",
  "intelephense.environment.phpVersion": "7.4.3"
}

- Aprire wp-config.php e aggiungere appena sotto a define( 'WP_DEBUG',... la riga

define( 'WP_DEBUG_LOG', true );

Wordpress Admin

Da http://localhost:8000/wp-admin
ho creato credenziali con la mia solita password, utente la mail di lavoro.

• Aggiornare l'aggiornabile
• Installare il plugin WooCommerce
• (opzionale) Installare il tema Astra
  • Aspetto => Opzioni Astra => spalla dx => Installa Plugin Importatore
  • Da questa pagina installare il template (scegliendo Elementor) Custom Printing con tutti i suoi contenuti
• (opzionale) Installare il plugin Classic Widget
• Installare il plugin Checkout Field Editor for WooCommerce.
  Entrare nelle impostazioni e aggiungere i campi partita iva e codice fiscale con i nomi billing_cf e billing_piva
• (developer) Installare il plugin WP Crontrol per vedere la situazione dei cron jobs e poterli eliminare
• (developer) Installare il plugin WP Hooks Finder (by Muhammad Rehman) per poter vedere tutti gli hook in pagina.

Easy Store - Le specifiche

Ci saranno 3 tipi di utenza

• Clienti con Easy Store
• Clienti con Outlet
• Clienti con Easy Store + Outlet

Il plugin è in grado di distinguere in quale caso ci troviamo in base al file di configurazione
/designbest-esw/config/config.php
Dalla voce

"sorgente-dati" => "designbest", // valori esw o designbest o designbest-esw

Il plugin è basato su 5 interfacce services che cambiano le loro funzioni a seconda del tipo di utenza:

• IApiConnectService connessione alle API
• IProductsService sincronizzazione prodotti
• IOrdersService gestione degli ordini (fattura ecc)
• IAdminService gestione backoffice WP
• ICronJobsService gestione di cron-job per sincronizzare

Clienti con Easy Store

File config.php correttamente configurato per questa utenza:

return array(
  "sorgente-dati" => "esw",
  "environment" => "test", // "production"

  // Configurazione esw
  "esw_negoziocode" => "01",
  "esw-x-apikey" => "hEckyjWBYUycOIRiUZUgJUJ4YWJHWlY4N1VTTWYwM2NRZUZOSmc=",
  "esw-dbconnection" => "173_WMECOMMERCE"
);

Le API di Easy Store non permettono di caricare articoli sul gestionale, ma solo di leggerli.
Per sincronizzare i prodotti è necessario montare un pooling tramite un cron-job che andrà a leggere i dati del gestionale e li proietterà sul commerce.

Inserimento anagrafica

Quando un utente si registra al commerce è necessario aggiungere l'anagrafica al gestionale (nome, cognome, indirizzo, cod.fiscale/piva ecc)

Clienti con outlet

File config.php correttamente configurato per questa utenza:

return array(
  "sorgente-dati" => "designbest",
  "environment" => "test", // "production",

  // Configurazione designbest
  "db-token_endpoint" => "https://ws.designbest.com/token",
  "db-token_username" => "designbestrest",
  "db-token_password" => "Z3+3MlGwEbz#",
  "db-shop_piva" => "00258570274"  // Arredamenti Casabella
);