A fairy tale inside Magento 2 checkout world

Spanish version <a href="https://www.damianculotta.com.ar/magento/cien-formas-de-agregar-validaciones-javascript-personalizadas-que-no-funcionan-y-una-que-si-un-cuento-de-hadas-dentro-del-mundo-del-checkout-de-magento2/" target="_blank">here (guest post on Damian Culotta blog).</a>

One day the queen of a flourishing reign that sells all her lands good products realised that they were bought by some undeserving people and so she asked to her faithful developer to find the way to take care of this.

Our developer started her journey by reading a very huge file made with a very ancient technique called xml in the following location:

vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml

And inside found something similar that she thought to be the way to add a custom js validation to the vat_id field:

Second step was to add the custom js validation rule to the already existing ones and used a famous tool that many developers before already used to find how:

https://magento.stackexchange.com/questions/190125/magento-2-add-custom-validation-rule

She followed all the steps but when it was time to test, it didn’t work, the undeserving people could still buy the products.

It was unclear how the validation would be triggered but thinking of the way Magento 1 worked she thought it didn’t work because the css class was missing from the field (since required class was added for the required fields) and apparently the 

 in charge of this had the following method:

_setClasses: function () {
    var additional = this.additionalClasses,
                classes;

     if (_.isString(additional) && additional.trim().length) {
             additional = this.additionalClasses.trim().split(' ');
           classes = this.additionalClasses = {};

           additional.forEach(function (name) {
               classes[name] = true;
                }, this);
            }

The way she could set this value was taken from other xml files:

<item name="shipping-address-fieldset" xsi:type="array">
    <item name="children" xsi:type="array">
        <item name="vat_id" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="additionalClasses" xsi:type="string">custom-validation</item>
            </item>
        </item>
    </item>
</item>

And again it didn’t work because there was no passing of the 

 from the xml file to the template and so to the js component which apparently is done only for the components of the admin area like in this example 

vendor/magento/module-ui/view/base/web/templates/form/field.html

At this point our developer decides to try and change directly the templates in order to add the css class needed for the validation. There are 2 templates that compose the vat_id ui component:

<item name="shipping-address-fieldset" xsi:type="array">
    <item name="children" xsi:type="array">
        <item name="vat_id" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="elementTmpl" xsi:type="string">Vendor_Module/form/element/custom</item>
                <item name="template" xsi:type="string">Vendor_Module/form/field</item>
            </item>
        </item>
    </item>
</item>

 can be overwritten from the xml, our developer discovers that isn’t the same for the 

. In fact it is hardcoded in the following location:

vendor/magento/module-checkout/Block/Checkout/AttributeMerger.php:173

 forcing her to use a Plugin to be able to change the template.

In the meanwhile, the Queen asks how come is taking so long for such a small task and the developer is considering a change in carrier.

At this point, she realises that the problem is mostly on js part and in fact the validation trigger is handled by the following js file:

vendor/magento/module-ui/view/base/web/js/lib/validation/validator.js

Inside has a specific method to add new validation rule:

/**
  * Adds new validation rule.
  *
  * @param {String} id - Rule identifier.
  * @param {Function} handler - Validation function.
  * @param {String} message - Error message.
  */
  validator.addRule = function (id, handler, message) {
    ulesList[id] = {
      handler: handler,
      message: message
    };

She is getting closer finally, at least it’s what she thinks, using this example:

vendor/magento/module-catalog/view/adminhtml/web/component/image-size-field.js

If you made it so far, you’ll realise that also in this case it didn’t work, leaving our developer with no other choice than go for the overwriting the core, specifically 

vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js

 by adding the custom validation rule directly.

var config = {
    map: {
        '*': {
            "Magento_Ui/js/lib/validation/rules": "Vendor_Module/js/lib/validation/rules"
        }
    }
};

Her final step was to do what was her first:

And, as you may have guessed, ladies and gentlemen, she finally succeed in accomplishing her mission.

Custom Js Validation Magento2

La prima parte dell’articolo la trovate 

Hackathon & Magento Contribution Day Leipzig

Da diversi anni ormai, i giorni prima del Meet Magento Germania, si svolge l’

, un’iniziativa nata nel 2010 e che ha avuto un gran successo tanto che ad oggi vengono organizzati almeno 3/4 all’anno. E’ stata una bella occasione per conoscere da vicino la comunità magento tedesca e scoprire che non ha nulla da invidiare a quella olandese. Anche qui un punto di forza sono le aziende con forte spirito di comunità ma anche un alto livello di specializzazione degli sviluppatori che ne fanno parte e che tramite questi hackathon non fanno altro che accrescere le proprie conoscenze. Alcuni di questi esperti gli conosciamo molto bene e avremo l’onore di averli come ospiti,  

Andreas von Studnitz, durante il training sullo sviluppo in Magento 2 l’8 giugno

Carmen Bremen, speaker al Mage Titans Italy il 9 giugno a Milano

In combinazione si è svolta anche il Magento Contribution Day con qualche novità. Per chi non fosse già a conoscenza, sono una serie di eventi in cui insieme ad alcuni membri del team Magento Community Engineering e quindi le menti dietro lo sviluppo e l’architettura di Magento 2, si va a fare bug 

 permettendo così di confrontarsi su determinate scelte e problematiche di Magento 2. In questa occasione è stata proposta l’aggiunta del 

, che segna un ulteriore passo di Magento nel coinvolgere la comunità ed assumere il carattere open source per le Community Edition di cui questa nuova feature andrà a far parte.

 Magento’s chief Evangelist e 3 Magento Architects  

. E a lavorare gomito a gomito con loro c’erano ben altri 60 sviluppatori per ben 2 giorni per il puro piacere di sviluppare e imparare.

Vi dico solo che sono tornata col sogno di realizzare lo stesso anche da noi in Italia. Che ne dite?

MeetMagento Germania è arrivata alla undicesima edizione. Sono stati 2 giorni pieni di contenuti con 3 track paralleli misti tra tecnico e commerciale. Probabilmente di numero leggermente inferiore a quella olandese, ma non per questo meno affollata di aziende partecipanti. Unico neo per chi viene da fuori è che la maggior parte delle comunicazioni e dei talk sono in tedesco ma per fortuna quei pochi in inglese ma buoni sono riuscita a godermeli.

 –  nella bellissima Lipsia, considerata ora la Berlino di un tempo non ancora invasa da quei turisti un po’ hipster, molto facile da raggiungere e in una posizione centrale.

 – anche qui vasta scelta di argomenti. Ecco alcuni highlight di esempio:

Fabrizio Branca – SUPER-scaling E-Commerce with Magento

: è stata una delle più belle nuove conoscenze fatte grazie all’evento. E’ veramente entusiasmante conoscere uno speaker di tale calibro. Non provo nemmeno a descrivere in poche parole di cosa ha parlato e vi giro direttamente ad un articolo sempre suo sull’argomento 

http://fbrnc.net/blog/2015/10/super-scaling-magento

Brent Peterson – Project Reporting: The 4 basics

: Il problema del tracciamento e reportistica di un progetto è presente in ogni azienda, di qualsiasi forma, inclusa Bitbull. E lo chiamo problema solo perché penso esistano pochi esseri viventi a cui piace stare a compilare timesheet, riempire tracker, creare mille report con mille informazioni al fine di proteggere sia te che cliente dal fallimento di un progetto o da eventuali derive; motivo per cui ero molto interessata al loro approccio. Sicuramente il risultato di avere visione completa in qualsiasi momento l’ha raggiunto ma purtroppo con il solito costo di quella persona che sta a compilare i report. La parte più interessante è arrivata durante le domande quando l’azienda 

 ha esposto i benefici del caso opposto, e cioè non dover tracciare nulla ma avere il team dedicato al cliente per intervalli prefissati.

David Manners – Building a Framework Agnostic API

: questo talk ero particolarmente interessata perché è la teoria che sarà presentata durante 

La conoscenza più importante che porta il talk è la capacità di creare codice che ti permette di non essere vincolato ad un Magento 1, poter facilmente cambiare ad un Magento 2 e perchè no….ad un Magento 3.

E finisco con dire che alla fine di tutti questi eventi quello che rimane sono le persone e le relazioni che si vanno a creare, accomunati dalla stessa passione.

Maggio – mese delle conferenze:  #mhlej17, #mm17de

Maggio è un mese particolarmente pieno di eventi, tanto da lasciare la chat/ufficio di Bitbull, un po’ deserta per qualche giorno. E riempire successivamente il blog di articoli sugli eventi.

 di cui vi parlerò nell’articolo seguente.

MeetMagento Olanda, 9 edizione, si conferma come uno dei più grandi eventi Magento in Europa con ben 7 track paralleli che vanno a coprire qualsiasi tematica in ambito ecommerce, dal marketing al tecnico, per tutti i gusti. Sicuramente da non farsi mancare il loro 10mo anniversario nel 2018, prevista come edizione speciale. Per i più curiosi la prima edizione in assoluto di MeetMagento è stata in Olanda il 27 gennaio del 2009 organizzata da 

, seguita poco dopo da quella tedesca il 5 febbraio.

, di quanto fossi sorpresa, direi quasi invidiosa, della grande forza della 

 e non posso che confermare quanto già detto.

 –  vicino Utrecht, piena del fascino tipico di una piccola città olandese, in una costruzione riqualificata da un ex fabbrica, l’evento ha trovato la sua giusta dimensione per dare a spazio ai talk, agli stand degli sponsor e al networking.

 – vasta scelta di argomenti. Ecco alcuni highlight di esempio:

Juliette Reinders Folmer – The Big ‘Why Equal doesn’t Equal’ Quiz

 : da veri programmatori PHP si può intuire l’argomento già dal titolo, quello che non si può intuire è quanto non sappiamo e diamo per scontato del PHP.

Ivan Chepurnyi – Challenges of Architecting Magento 2.0 Customizations

: un’ora piena di approfondimenti ed esempi concreti di cosa fare e non fare durante lo sviluppo con Magento 2. 

Ioana Marchis – Dedicated teams for product owners as a business model

: un nuovo modello di vendita di servizi che stiamo applicando anche in Bitbull e che sempre di più si adatta alle esigenze di un mercato in continuo cambiamento e ritmi veloci. Approfitto per ricordarvi che 

: Dopo una lunga giornata in cui impari nuovi argomenti, conosci nuove persone e aziende, ti lasci ispirare dall’energia che circonda l’evento arriva il ben meritato divertimento e devo dire che, anche qui, si sono superati. In particolare, con la premiazione di alcune aziende della comunità olandese, premi accolti con grande entusiasmo e soddisfazione, andando a mostrare la passione che viene anche ripagata dal riconoscimento collettivo, dove non si è competitor, ma uniti nella propria ambizione.

Concludo con la speranza che un giorno riusciremo ad avere la nostra italigento mostrando una comunità magento italiana alla pari delle altre.

Maggio – mese delle conferenze: #mm17nl

Il mese di ottobre si è rivelato particolarmente intenso grazie all’opportunità di partecipare e parlare a 3 eventi molto diversi tra di loro. Ognuno ha regalato a tutti noi partecipanti oltre che un’esperienza non facile da dimenticare anche riflessioni, insegnamenti, domande e ispirazioni ma soprattutto un senso di comunità forte.

Sono stati 2 giorni di piena euforia per tante ragioni che Alessandro ha spiegato molto bene in 

. E’ un’esperienza che suggerisco vivamente a chiunque ma soprattutto per chi ancora non ha partecipato ad un evento della comunità magento e vuole iniziare con qualcosa di non troppo formale e ritrovarsi più un ambiente simile a quando si è tra colleghi che condividono idee, progetti e opinioni in generale.

  con due tracce, tech e merchant. La particolarità è stato incontrare la comunità olandese di magento che mi ha lasciato una bellissima impressione. Hanno dimostrato come il detto 

 non sia solo un detto. Mi ha sorpreso moltissimo come oltre a conoscersi tutti molto bene, azzarderei dire come buoni amici, siano presenti anche al lato pratico e cioè tante aziende olandesi che supportano questi eventi economicamente ma anche facendosi da 

 Tant’è che sono tutti riuniti ufficialmente sotto 

 e sono molto attivi su vari fronti di interesse comune.

Per me è stato un evento speciale perchè è stata 

la mia prima presentazione ( spoiler alert api in magento 2)

 da speaker e non andrò ad annoiarvi troppo con il lato sentimentale ma vi dirò solo questo: chiunque metta passione nel proprio lavoro ha qualcosa da condividere ed è merito di chi condivide che la qualità del lavoro di tutti noi migliora ogni giorno di più quindi per favore non esitate a provare quest’esperienza e se non volete andare a cimentarvi fuori dall’italia a breve apriranno 

le call for paper per Magetitans Italy 2017

. Fatevi sotto e facciamo vedere la comunità italiana di magento.

Ci sono stati diversi talk importanti soprattutto lato tech ( ovviamente da backend sono di parte) di cui:

<li style="font-weight: 400">
<a href="http://www.slideshare.net/yireo/magento-2-seminar-toon-van-dooren-varnish-in-magento-2">Varnish in Magento 2 di Toon van Dooren</a>
</li>
<li style="font-weight: 400">
<a href="http://www.slideshare.net/yireo/magento-2-seminar-miguel-balparda-m2-with-php-7-and-varnish">M2 with PHP 7 and Varnish di Miguel Balparda</a>
</li>
<li style="font-weight: 400">
<a href="http://www.slideshare.net/yireo/magento-2-seminar-christian-mnch-magerun2">Magerun2 di Christian Münch</a>
</li>
<li style="font-weight: 400">
<a href="https://ivanchepurnyi.github.io/slides/micro-services/index.html#/">Micro-services M2 Performance di Ivan Chepurnyi</a>  
</li>

<li style="font-weight: 400">
<a href="http://www.slideshare.net/rdohms/writing-code-that-lasts-magento2seminar-utrecht">Writing code that you won’t hate tomorrow di Rafael Dohms</a>
</li>
<li style="font-weight: 400">
<a href="https://speakerdeck.com/xeraa/full-text-search-explained">Full-Text Search Explained by Philipp Krenn</a> ( fan di star wars non fatevelo scappare )
</li>

Il genere di meet magento non credo necessiti particolari presentazioni ma non per questo è stato meno originale degli altri 2 eventi. Un 

 molto ricco con qualche divertente fuoriprogramma:

Posso dire che ho imparato divertendomi, anzi ridendo con le lacrime a essere veramente onesti. Ecco a voi alcuni highlight tech che vi possono far capire l’atmosfera illare dell’evento e non per questo meno costruttiva:

<li style="font-weight: 400">
<a href="https://github.com/tzyganu/mm16ro">Best Worst Magento Extension di Marius Străjeru</a> : per chi non lo conosce basti pensare che ha sbagliato mestiere, doveva fare il comico e dire che lui ha sbagliato mestiere essendo il numero 1 su <a href="http://magento.stackexchange.com/users/146/marius">Magento Stackexchange</a> ( e se non sai cosa è magento stackexchange non lo dire a nessuno e vai subito a iscriverti) è un’assurdità.
</li>

<li style="font-weight: 400">
<a href="http://fabian-blechschmidt.de/talks/2016-MM16RO-Fucking-Up-Projects.pdf">Fucking up projects – a manual di Fabian Blechschmidt</a> : per chi ha partecipato a <a href="http://www.magetitans.it/">Magetitans Italia 2016</a>  ha avuto già occasione di sentire una versione di questo manuale che grazie al contributo dei partecipanti che offrono sempre più materiale si è andata ad estendere sempre di più. Chi l’avrebbe mai detto che abbiamo bisogno di un manuale per fallire un progetto?!
</li>

<li style="font-weight: 400">
<a href="http://www.slideshare.net/dmanners87/dont-be-a-git">Don’t be a git di David Manners</a> : prima volta per me sentirlo, si è dimostrato uno degli speaker più bravi che abbia mai avuto la possibilità di ascoltare con una grandissima capacità innata di far coinvolgere il pubblico e mi azzardo a dire, soprattutto ai fan di Ben Marks, si è più bravo anche di Ben. Basti pensare che, per il suo talk che parlava di comandi git sicuramente ignoti alla maggior parte di noi ma estremamente utili, ha usato gli altri speaker per far visualizzare al pubblico i vari branch e commit. Il tutto mentre vestiva l’abbigliamento tradizionale delle sue origini: il kilt!
</li>

<li style="font-weight: 400">
<a href="http://www.slideshare.net/avoelkl/secure-input-and-output-handling-meet-magento-romania-2016-67787417">Secure input and output handling di Anna Völkl</a> : rinomata esperta in sicurezza, non finisce mai di smentire che per garantirsi un alto grado di sicurezza non serve tanto codice o implementazioni complicate ma solo pochi semplici accorgimenti. Vi invito a leggere la sua presentazione per capire come con poche righe vi tenete al riparo da una buona percentuale degli attacchi.
</li>

<li style="font-weight: 400">
<a href="http://www.slideshare.net/vinaikopp/writing-testable-code-for-magento-1-and-2-2016-romaina">Writing Testable Code (for Magento 1 and 2)  di Vinai Kopp</a> : intramontabile sia lui come speaker che l’argomento. Un must da vedere almeno una volta nella vita e dopo sicuramente vi sognerete di averlo come insegnante vista la sua grande capacità di far sembrare chiari e semplici argomenti che decisamente non lo sono.
</li>

<li style="font-weight: 400">
<a href="https://speakerdeck.com/schmengler/porting-a-complex-extension-to-magento-1">Porting a complex extension to Magento 2 di Fabian Schmengler</a> : qui va una speciale nota di merito perché è riuscito a individuare i punti salienti di un argomento molto vicino a tutto il mondo magento che se non l’ha già fatto dovrà prevedere a breve di farlo e cioè migrare e sviluppare con magento 2. Penso sia il contenuto più utile che ho trovato per quanto riguarda magento 2 e dimostra quanto sia riuscito a dare una risposta concreta lì dove finora sono state lanciate tante opinioni spesso non basate sui fatti.
</li>

E infine vi segnalo il workshop che ho presentato 

, la versione in slide e in inglese dell’articolo 

Magento 2 tips & tricks: aggiungere una checkbox al checkout

. Per mia sorpresa c’è stato molto interesse soprattutto per l’aver evidenziato, a chi non si è ancora lanciato su magento 2, il livello di complessità che si va ad affrontare anche per task banali come aggiungere una checkbox nel checkout.

Un’altra particolarità dell’evento, che va a dimostrare cosa rende così importante la comunità di magento, è stato che durante la cena sopra menzionata vari speaker si sono  posti la domanda: Quanto siamo aperti a fare nuove conoscenze rispetto al rimanere nella cerchia dei volti conosciuti?

Ed è così che sono nati una serie di articoli molto interessanti e che vi possono interessare in prima persona se volete avvicinarvi e sentirvi parte integrante e non solo visitatori di passaggio di questa comunità. Personalmente mi sono ritrovata molto e ho trovato molti  spunti di riflessione.

<li style="font-weight: 400">
<a href="https://www.integer-net.com/an-open-approachable-magento-community-are-we-as-open-and-welcoming-as-we-should-be/">An open, approachable Magento Community: Are we as open and welcoming as we should be? di Sonja Riesterer</a>
</li>
<li style="font-weight: 400">
<a href="https://medium.com/@gxjansen/let-the-hard-work-begin-147a02664110#.vgrs3uli1">Let the hard work begin di Guido Jansen</a>  
</li>
<li style="font-weight: 400">
<a href="https://blog.commercehero.io/welcoming-people-into-the-magento-community-96fdcd93e1ef#.h1o51amte">Welcoming people into the Magento community di Kalen Jordan</a>
</li>
<li style="font-weight: 400">
<a href="https://medium.com/@RebeccaLTroth/being-a-magento-extrovert-is-challenging-9fd99ba4a001#.yqtgq4n40">Being a Magento extrovert is challenging di Rebecca Troth</a>  
</li>

#muc16nl, #magento2seminar, #mm16ro : 1 mese, 3 eventi, 3 talk

 e la maggior parte di noi Magento developers ha iniziato a sporcarsi le mani con la nuova piattaforma.

Sono tantissimi gli argomenti da studiare e affrontare per prendere in mano Magento 2 e molti richiedono un lungo periodo di apprendimento che non sempre abbiamo a disposizione.

Per questo motivo ho pensato che possano tornare utili degli esempi veloci di codice per affrontare situazioni reali lasciando a voi il compito di approfondire la teoria che c’è dietro, soprattutto per chi, come me, ha bisogno di partire dal codice per capire meglio i concetti sottostanti.

Partiamo quindi dall’argomento del titolo: aggiungere una checkbox al checkout; sembra una cosa semplice vero? Cosa sarà mai aggiungere una checkbox durante il processo di checkout. Non fatevi ingannare dalle apparenze, Magento è cambiato molto ma regala ancora alcune 

 dei vecchi tempi. Per farvi intuire di cosa sto parlando basta andare ad esaminare il file 

/Magento/Checkout/view/frontend/layout/checkout_index_index.xml

Anche solo in base a dove dobbiamo posizionare la nostra checkbox cambierà non di poco la via da prendere per arrivare alla soluzione. Ho costruito l’esercizio con lo scopo di andare a toccare più argomenti possibili e questo mi ha costretto a dividere l'articolo in 2 parti.

Vogliamo che l’utente possa indicare, durante lo step di spedizione, se vuole la fattura o meno e nel caso decida di volere la fattura, dobbiamo rendere visibile e obbligatorio il campo Società.

Prima di andare ad occuparci della parte frontend e quindi dove e come posizionare la nostra checkbox per la richiesta fattura, andiamo a vedere come aggiungere questo dato sul database all’interno della tabella degli ordini, utilizzando uno script di installazione.

creato la struttura di base del nostro modulo Magento 2

; aggiungiamo lo script di installazione 

bitbull-team/m2-checkout-customization/Setup/InstallSchema.php

<?php
use Magento\Framework\Setup\InstallSchemaInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\SchemaSetupInterface;

/**
* Class InstallSchema
* @package Bitbull\CustomCheckout\Setup
*/
class InstallSchema implements InstallSchemaInterface
{

   /**
    * @param SchemaSetupInterface $setup
    * @param ModuleContextInterface $context
    */
   public function install(SchemaSetupInterface $setup, ModuleContextInterface $context) 
   {
       $installer = $setup;
       $installer->startSetup();

       $installer->getConnection()->addColumn(
           $installer->getTable('sales_order'),
           'invoice_checkbox',
           [
               'type' => \Magento\Framework\DB\Ddl\Table::TYPE_SMALLINT,
               'nullable' => false,
               'default' => '0',
               'comment' => 'Request invoice'
           ]
       );
       $setup->endSetup();
   }
}

Tutti gli script di installazione e aggiornamento devono implementare  

Magento\Framework\Setup\InstallSchemaInterface

Magento\Framework\Setup\SchemaSetupInterface

 è l’interfaccia che fornisce la connessione al database tramite il quale eseguire la nostra modifica.

Magento\Framework\Setup\ModuleContextInterface

 non viene utilizzato ma se ci troviamo nel caso di dover fare un aggiornamento anziché un’installazione è qui che troviamo le informazioni relative al modulo come la versione corrente del setup specificata nel file 

 per determinare se applicare o meno il nostro aggiornamento.

<?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="Bitbull_CustomCheckout" setup_version="0.1.0">
    </module>
</config>

, basterà abilitare il modulo ed eseguire la procedura di aggiornamento come mostrato di seguito:

bin/magento module:enable Bitbull_CustomCheckout
bin/magento setup:upgrade

A questo punto andiamo a inserire la nostra checkbox all’interno dell’indirizzo di spedizione aggiungendo il file di layout **

 **le modifiche al layout dichiarate nel file saranno così aggiunte da Magento all’insieme delle layout rule.

Di seguito le dichiarazioni di layout che servono ad ottenere il risultato voluto:

<item name="invoice-checkbox" xsi:type="array">
   <item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
       <item name="config" xsi:type="array">
        <!–customScope is used to group elements within a single form (e.g. they can be validated separately)–>
           <item name="customScope" xsi:type="string">shippingAddress.custom_attributes</item>
           <item name="template" xsi:type="string">ui/form/field</item>
           <item name="elementTmpl" xsi:type="string">Bitbull_CustomCheckout/form/element/invoice-check</item>
       </item>
       <item name="provider" xsi:type="string">checkoutProvider</item>
       <item name="dataScope" xsi:type="string">shippingAddress.custom_attributes.invoice-checkbox</item>
       <item name="description" xsi:type="string">Richiedi fattura</item>
       <item name="sortOrder" xsi:type="string">121</item>
   </item>
   <item name="company" xsi:type="array">
       <item name="component" xsi:type="string">Bitbull_CustomCheckout/js/invoice-input</item>
       <item name="sortOrder" xsi:type="string">122</item>
   </item>
</item>

Queste righe definiscono direttive importanti che andiamo ad analizzare una ad una.

<item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>

 viene usato per la nostra checkbox. Se non viene specificato sarà usato quello di default 

Senza entrare troppo nel dettaglio, per poter capire come modificare ed estendere i 

 offerti da Magento 2 per il frontend bisogna avere una conoscenza base di Knockout, il framework utilizzato per costruirli.

A tal proposito suggerisco la lettura del 

 che contiene già tutto il necessario sia per renderizzare la nostra checkbox che per poter osservare "l'aggiornamento" del valore assunto.

Per poter cambiare la visibilità del campo società sulla base dello stato della checkbox dobbiamo sovrascrivere lo 

<item name="company" xsi:type="array">
   <item name="component" xsi:type="string">Bitbull_CustomCheckout/js/invoice-input</item>
   <item name="sortOrder" xsi:type="string">122</item>
</item>

 ci permette di modificare l’ordinamento di default dei campi input della form dell’indirizzo di spedizione; il valore utilizzato, 122, fa sì che il campo società sia posizionato subito dopo la nostra checkbox che ha 

Purtroppo non vale lo stesso per la form dell’indirizzo di fatturazione; in un prossimo articolo vedremo perché e come aggirare il problema.

vendor/bitbull-team/m2-checkout-customization/view/frontend/web/js/invoice-input.js

define([
   'underscore',
   'Magento_Ui/js/form/element/abstract',
   'jquery'
], function (_, Abstract, $) {
   "use strict";
   return Abstract.extend({
       defaults: {
           visible: false,
           required: false,
           listens: {
               visible: 'setPreview',
               '${ $.provider }:data.reset': 'reset',
               '${ $.provider }:${ $.customScope ? $.customScope + "." : ""}data.validate': 'validate',
               '${ $.provider }:${ $.customScope ? $.customScope + "." : ""}customAttributes.invoice-checkbox': 'setVisible'
           }
        },
	    initialize: function () {
	        this._super();
	        this.visible(false);
	    },
	    setVisible: function () {
	        var visible = this.source.shippingAddress.custom_attributes['invoice-checkbox'];
	        if (visible) {
	            this.validation['required-entry'] = true;
	        } else {
	            this.error(false);
	            this.validation = _.omit(this.validation, 'required-entry');
	        }
	        this.visible(visible);
	        this.required(visible);
	        return this;
	    }
   });
});

Con il codice sopra rendiamo visibile, obbligatorio e aggiungiamo il campo alle regole di validazione della form dell’indirizzo di spedizione a seconda del valore della nostra checkbox.

Il tutto è possibile sottoscrivendo il metodo setVisible ogni volta che cambia il valore della nostra checkbox accessibile tramite 

this.source.shippingAddress.custom_attributes["'invoice-checkbox'"].

<item name="config" xsi:type="array">
	<item name="customScope"  xsi:type="string">shippindAddress.customAttributes</item>
	<item name="template" xsi:type="string">ui/form/field</item>
	<item name="elementTmpl" xsi:type="string">Bitbull_CustomCheckout/form/element/invoice-check</item>
</item>

 ci permette di raggruppare un insieme di input per poter applicare azioni di gruppo sugli input field appartenenti a questo stesso scope.

 definiscono il template Knockout utilizzato per fare il rendering del nostro input field, nel nostro caso rispettivamente 

Un tool molto utile per andare a conoscere meglio i nostri 

 e avere quindi la controprova che tutti sia settato correttamente è l’estensione per chrome 

A questo punto arriviamo all’ultimo pezzo che ci permette di passare il dato dal frontend al backend:

bitbull-team/m2-checkout-customization/view/frontend/requirejs-config.js

config:{
      mixins: {
          'Magento_Checkout/js/action/set-shipping-information': {
           'Bitbull_CustomCheckout/js/action/set-shipping-information-mixin': true
          }
      }
  }

I mixins hanno un comportamento simile ai Plugin con il before nel javascript, dove noi possiamo andare ad attuare le nostre modifiche prima dell’azione originale, set-shipping-information in questo caso incaricata del salvataggio dell’indirizzo di spedizione.

/*jshint browser:true jquery:true*/
/*global alert*/
define([
   'jquery',
   'mage/utils/wrapper',
   'Magento_Checkout/js/model/quote'
], function ($, wrapper, quote) {
   'use strict';
    return function (setShippingInformationAction) {
       return wrapper.wrap(setShippingInformationAction, function (originalAction) {
           var shippingAddress = quote.shippingAddress();
           if (shippingAddress['extension_attributes'] === undefined) {
               shippingAddress['extension_attributes'] = {};
           }
           shippingAddress['extension_attributes']['invoice_checkbox'] = shippingAddress.customAttributes['invoice_checkbox'];
           // pass execution to original action ('Magento_Checkout/js/action/set-shipping-information')
           return originalAction();
       });
   };
});

 inseriti da Magento nella maggior parte delle interfacce affinché possano essere aggiunti dati nuovi; nel nostro caso si tratta di salvare il valore della checkbox.

La nostra avventura non è finita e, nella speranza di avervi dato input utili e chiari, continuerà come promesso nella prossima puntata sul lato backend.

https://github.com/bitbull-team/m2-checkout-customization

https://github.com/magento/magento2/issues/1864

http://magento.stackexchange.com/questions/135969/magento-2-how-to-add-a-custom-field-to-checkout-and-then-send-it

http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_form.html

http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_new_field.html

https://github.com/magento/devdocs/issues/844

Frase che almeno una volta abbiamo detto o sentito dire. E se il codice è lo stesso, i dati pure, rimane solo un colpevole: l’ambiente su cui gira il nostro magento escludendo

almeno per ora l’immancabile errore umano. Chi usa nginx, chi usa apache, chi usa una versione, chi un’altra, per non parlare delle differenze tra il nostro ambiente in locale, in staging e produzione perché le persone coinvolte hanno competenze diverse e compiti diversi. Ovviamente non consideriamo il caso in cui…

E arriva nel tuo team un nuovo membro che non conosce le tecnologie che vengono abitualmente usate e dev’essere in grado velocemente di poter sviluppare e dare il suo contributo. E vogliamo parlare di quel progetto di cui non sei l’artefice e che hai ereditato come punizione divina che gira ancora su una versione di Magento che non è mai stata aggiornata in produzione?

Tutti questi esempi pongono il seguente problema: come 

 un progetto senza dover per forza avere una macchina dedicata per ogni istanza del progetto e possibilmente con il minimo dello sforzo per tutti i membri del team?

Una risposta abbastanza semplice la fornisce <a href="https://www.vagrantup.com/" target="_blank">Vagrant</a> mettendo a disposizione gli strumenti necessari per gestire con pochi semplici comandi le ormai famose 

. Basta pensare che, una volta installato Vagrant sulla propria macchina, è possibile per chiunque con un solo commando accendere una qualsiasi macchina fornita e quindi usarla per il proprio progetto. Non solo: la stessa macchina può essere 

 tra tutti i membri del team che lavorano sullo stesso progetto evitando cosi il famoso “

Un altro punto importante è la facilità di 

 una macchina gestita con Vagrant permettendo cosi di creare tanti ambienti diversi, sperimentare con tecnologie nuove, il tutto senza contaminare il proprio ambiente locale.

Su Vagrant troviamo disponibili i file di installazione sia per sistemi <strong>Mac, Windows, Debian e CentOS</strong>  

Spesso per i progetti più comuni troviamo disponibili delle <strong>macchine già configurate</strong> con tutto il necessario, un esempio è 

. E quando vogliamo anche solo fare un giro di prova delle varie tecnologie senza investire troppo tempo sono una buona soluzione.

Quindi per iniziare a sfruttare Vagrant dobbiamo ricercare la <strong>macchina virtuale</strong> che ci serve per il nostro famoso progetto ereditato come punizione divina e ipotizziamo sia una <strong>macchina virtuale Ubuntu 14.0 LTS 32-bit</strong>. Per ottenere una macchina virtuale abbiamo a disposizione 

 ma quello che andremo ad utilizzare nel nostro esempio è 

 quindi assicurarsi di aver installato l’ultima versione e per avere una migliore integrazione 

A questo punto, dentro la cartella dove vogliamo posizionare la nostra macchina virtuale, eseguire il seguente comando:

In risposta dovreste ricevere il seguente messaggio:

A `Vagrantfile` has been placed in this directory. You are now ready to `vagrant up` your first virtual environment! Please read the comments in the Vagrantfile as well as documentation on `vagrantup.com` for more information about using Vagrant.

e all’interno della cartella in cui avete lanciato il comando troverete un file nominato 

, scritto usando la sintassi di <strong>ruby</strong> con essenzialmente 2 istruzioni:

Vagrant.configure(2) do |config| -> indica a vagrant la version di Vagrant con cui stiamo lavorando

config.vm.box = "ubuntu/trusty"; -> indica la macchina virtuale che andremo usare.

Bitbull

Andra Lungu

Articoli scritti da Andra Lungu

Custom Js Validation Magento2

Maggio – mese delle conferenze: #mhlej17, #mm17de

Maggio – mese delle conferenze: #mm17nl

#muc16nl, #magento2seminar, #mm16ro : 1 mese, 3 eventi, 3 talk

Magento 2 tips & tricks: aggiungere una checkbox al checkout

Sul mio computer funziona