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/

obskur
quelle

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.

Amit Bera
quelle
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

Rafael Ortega Bueno
quelle
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