Magento 2 - Auswirkungen auf die Adresse in Checkout-Formularen mit Layout-XML / UI-Argumenten


7

Ich versuche, einen Platzhalter für Straßenadressfelder im Versandadressformular an der Kasse zu setzen. Folgen Sie diesem Beispiel: http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_form.html Ich habe meine Module geändert checkout_index_index.xml.

Die meisten Felder haben jetzt einen Platzhalter in der Kasse, indem sie Folgendes definieren:

<item name="telephone" xsi:type="array">
  <item name="config" xsi:type="array">
    <item name="elementTmpl" xsi:type="string">Magento_Checkout/form/element/my-input</item>
  </item>
</item>

Telefon funktioniert. Die Eingabevorlage wird verwendet.

Die Adresse ist eine Gruppe, siehe magento-ui/view/frontend/view/frontend/templates/group/group.html Und sie enthält 2 Eingabeelemente.

Diese Elementvorlage kann im Layout nicht beeinflusst werden checkout_index_index.xml.

Zuletzt habe ich das ohne Erfolg versucht:

<item name="street" xsi:type="array">
    <item name="children" xsi:type="array">
        <item name="0" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="elementTmpl" xsi:type="string">Magento_Checkout/form/element/my-input</item>
            </item>
        </item>
        <item name="1" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="elementTmpl" xsi:type="string">Magento_Checkout/form/element/my-input</item>
            </item>
        </item>
    </item>
</item>

Die Schlüssel 0und 1scheinen richtig zu sein. Ich sehe sie im großen JSON in der Quelle der Checkout-Seite in der Straßengruppe:

<script type="text/x-magento-init">
{
  "#checkout":
    "Magento_Ui/js/core/app":  { ... }
}
</script>

Weiß jemand, wie die Eingabefelder für Straßenadressen beeinflusst werden können?

PS: Der Eingabe-Platzhalter kann aktiviert werden, indem die Eingabe-HTML-Vorlage wie folgt bearbeitet wird: /programming/35406440/magento2-checkout-form-how-to-display-placeholder-attribute-value-in-fields/

Antworten:


3

Für die Adresse müssen Sie etwas codieren.

Beim Auschecken werden die Felder von gerendert Magento\Checkout\Block\Checkout\AttributeMerger.

Um Platzhalter für Straße anzuzeigen , gehen Sie zur Funktion getMultilineFieldConfigund fügen Sie Folgendes ein:

if($attributeCode=='street') {
    $line['label'] = $attributeConfig['label'];
}

Nach

if ($isFirstLine && isset($attributeConfig['default']) && $attributeConfig['default'] != null) {
        $line['value'] = $attributeConfig['default'];
}

Und sieh diese Magie. Ich habe es bereits mit einer Magento 2-Instanz versucht und es funktioniert.


1
Es funktioniert, indem der AttributeMerger-Block mit einer Voreinstellung neu geschrieben wird. Möglicherweise auch mit einem Plugin. Von dort habe ich nur die Funktionen überladen, die ich brauchte, wo ich sah elementTmpl. Vielen Dank.
— obskure

1
Die Funktion getMultilineFieldConfig()ist geschützt, so dass ein Plugin hier nicht funktioniert: - /
— Giel Berkers

wie du das gemacht hast .. kannst du mir den vollständigen Code
— mitteilen

19

Die beste Lösung für mich war, sich auf dieselbe oben erwähnte Methode zu stützen: (getMultilineFieldConfig)

Erstellen Sie jedoch ein NEUES MODUL .

Fügen Sie in Ihrem neuen oder vorhandenen Modul Magento_Checkoutdie Knotenfolge hinzu ( VendorName / ModuleName / 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="VendorName_ModuleName" setup_version="1.0.0">
    <sequence>
        <module name="Magento_Checkout"/>
    </sequence>
</module>

Legen Sie nun die Abhängigkeitsinjektion für Magento \ Checkout \ Block \ Checkout \ LayoutProcessor fest

(VendorName / ModuleName / etc / frontend / 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">
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="vendorname_modulename" type="VendorName\ModuleName\Block\LayoutProcessor" sortOrder="100"/>
    </type>
</config>

Was fehlt, ist das Erstellen des Blocks (VendorName / ModuleName / Block / LayoutProcessor.php):

<?php
namespace VendorName\ModuleName\Block;

class LayoutProcessor
{
     /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
     public function afterProcess(
         \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
         array  $jsLayout
     ) {
        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
    ['shippingAddress']['children']['shipping-address-fieldset']['children']['street'] = [
        'component' => 'Magento_Ui/js/form/components/group',
        'label' => __('Address'),
        'required' => true,
        'dataScope' => 'shippingAddress.street',
        'provider' => 'checkoutProvider',
        'sortOrder' => 60,
        'type' => 'group',
        'children' => [
            [
                'component' => 'Magento_Ui/js/form/element/abstract',
                'config' => [
                    'customScope' => 'shippingAddress',
                    'template' => 'ui/form/field',
                    'elementTmpl' => 'ui/form/element/input'
                ],
                'dataScope' => '0',
                'provider' => 'checkoutProvider',
                'validation' => true,
                'additionalClasses' => 'additional',
                'label' => __('Street')
            ],
            [
                'component' => 'Magento_Ui/js/form/element/abstract',
                'config' => [
                    'customScope' => 'shippingAddress',
                    'template' => 'ui/form/field',
                    'elementTmpl' => 'ui/form/element/input'
                ],
                'dataScope' => '1',
                'provider' => 'checkoutProvider',
                'validation' => true,
                'label' => __('Number')
            ],
            [
                'component' => 'Magento_Ui/js/form/element/abstract',
                'config' => [
                    'customScope' => 'shippingAddress',
                    'template' => 'ui/form/field',
                    'elementTmpl' => 'ui/form/element/input'
                ],
                'dataScope' => '2',
                'provider' => 'checkoutProvider',
                'validation' => true,
                'label' => __('District')
                ]
            ]

        ];

         return $jsLayout;
     }
 }

Ergebnis: Geben Sie hier die Bildbeschreibung ein


Wie füge ich in diesem Textfeld eine Feldvalidierung hinzu, da meine Standardvalidierung danach nicht mehr funktioniert?
— Ashish Jagnani

4
@ AshishJagnani, benutze 'validation' => ["required-entry"=>true,"max_text_length"=>255,"min_text_length"=>1]- arbeitete für mich
— peter.gulyas

Dies löst die clientseitige Validierung. Sagen Sie Max Lenth 255. Jemand inspiziert und ändert. Was ist mit der serverseitigen Validierung?
— Ankit Shah

Die maximale Länge für Straßenadressfelder muss angegeben werden. Wie geht das?
— Ankit Shah

1
ist es möglich, dasselbe für die Rechnungsadresse zu tun?
— Dhaval Solanki
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.