Statische inhoud toevoegen in Magento Checkout adresformulier

Als u dit leest, bent u waarschijnlijk op zoek naar een gemakkelijke manier om statische inhoud toe te voegen aan de veldenset Checkout-adres.

Als u de Magento Checkout-module opent, zult u de technologische complexiteit van de Magento Checkout opmerken. Als je kijkt naar Knockout, HTML, PHTML, XML, JS – zo’n mix van technologieën kan een eenvoudige, ongecompliceerde taak vaak super ingewikkeld doen lijken.

Als u iets aan de kassa moet bewerken, moet u meestal een aangepaste module maken die de lay-outprocessor overschrijft. Deze aanpak is logisch als de Checkout-wijziging complex is en er een soort dynamiek moet zijn.

Maar voor eenvoudige taken, zoals het bijwerken van plaatsaanduidingen voor invoer, het toevoegen van notities aan de invoer of het toevoegen van tekst tussen invoer, zijn aangepaste modules een overkill.

Laat me een eenvoudige frontend-oplossing met u delen voor situaties waarin we wat tekst of een afbeeldingsbanner moeten toevoegen, bijvoorbeeld tussen de achternaam-invoer en de bedrijfsinvoer. Iets zoals dit:

Magento Checkout Address Forms

Dit zijn de stappen:

  1. Zoek de Knockout-sjabloon voor het kernformulierveld van Magento:
    vendor/magento/module-ui/view/frontend/web/templates/form/field.html
  2. Kopieer het bestand naar je thema:
    app/design/frontend/Inchoo/[Theme_Name]/Magento_Ui/web/templates/form/field.html
  3. Maak onderaan het bestand de Knockout aan om te controleren waar u die aangepaste tekst wilt toevoegen.
    Als u bijvoorbeeld iets wilt toevoegen na de invoer van de achternaam, voegt u dit toe:

    <!-- ko if: element.inputName === 'lastname' -->
    <div class="delivery-address-title">
    <h6 translate="Please add your delivery address below"></h6>
    </div>
    <!-- /ko -->

Als u die tekst (of een ander stuk statische inhoud) ergens anders in het adresformulier moet plaatsen, moet u ook de Knockout-syntaxis inspecteren en naar de inputName zoeken:

Screenshot 2020 10 19 At 09 23 13

Als u bijvoorbeeld een wijziging nodig heeft na de postcode, dan heeft uw Knockout if-statement code postcode in plaats van de lastname

Er is ook nog iets om rekening mee te houden. Na uitbreiding van het Knockout-bestand, in ons geval de form/field.html bestand, en als u dat bestand aan uw thema toevoegt, zorg er dan voor dat uw cache wordt vernieuwd en dat statische bestanden opnieuw worden gegenereerd.

Dat is alles jongens. Veel geluk!

badges

Let’s connect

We hebben altijd zin in nieuwe en uitdagende projecten. We gaan graag met je in gesprek!