We're running our site on Magento CE2.4.1. Currently, checkout fields have the following attributes:
<input class="input-text" type="text" data-bind="
value: value,
valueUpdate: 'keyup',
hasFocus: focused,
attr: {
name: inputName,
placeholder: placeholder,
'aria-describedby': getDescriptionId(),
'aria-required': required,
'aria-invalid': error() ? true : 'false',
id: uid,
disabled: disabled
}" name="lastname" aria-required="true" aria-invalid="false" id="KR2W89N">
I would like add the autocomplete attribute to each field. Like this:
<input class="input-text" type="text" autocomplete="name" data-bind="[...]" name="lastname" aria-required="true" aria-invalid="false" id="KR2W89N">
I checked the following files to see if there is a way to achieve this:
magento/module-checkout/view/frontend/web/template/shipping-address/form.html
magento/module-checkout/Block/CheckoutLayoutProcessor.php
As for the form.html:
I could not figure a way to get the particular autocomplete value as a variable for each field.
As for the CheckoutLayoutProcessor.php:
I created a small module with the help of this thread:
How to auto fill the shipping address field in Checkout in Magento 2.2
I was able to e. g. change the LABEL for each field (just as a test). However, I could not find a way to define any other attribute / option for each checkout field.
Am I looking at the right files, anyway? Any help would me much appreciated.
I am not trying to autofill the fields myself. I just want to add the attributes so that browsers autofill the fields correctly. Currently, input of street.0 will also be added to street.1.
If the desired solution is not possible: is there a way to just set autocomplete="off" for only the street.1 field?
Thanks!
Alex
I now went for a probably non-elegant solution. In LayoutProcessor.php (please refer to link in initial post) I simply defined a custom template:
'config' => [
'customScope' => 'shippingAddress',
'template' => 'ui/form/field',
'elementTmpl' => 'Vendor_Module/form/element/customtemplate'
],
In this custom template I just hardcoded:
autocomplete="off"
This way it would obviously also be possible to set individual values for each field by creating a separate template for each field. Though, this seems a bit too much.
Just in case this might be of help for someone else I will mark this answer as the accepted one for now. Once someone will provide a more professional approach I will be more than happy to change her / his post to the accepted answer.
You solution is good. But not the best. I had to improve on it.
The best way is to override the template as you said. But we override only the template we want to change.
You create your module, normal stuff... etc/ module.xml, registration.php
Now to achieve this, we will need to override the template rendered for the company field. This can be done by overriding the configurations for this form field. The configuration is found in module-checkout of magento in the layout file checkout_index_index.xml. Its the item with name company
To override the template,
Create a layout file in your module
view/frontend/layout/checkout_index_index.xml with the following code to override the config
Create the new template file you would like to use for this field
view/frontend/web/template/form/element/input-no-autocomplete.html
Put the following code inside
Now deploy your module and check the field.
bin/magento setup:upgrade... etc
Code for Step 1.
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<item name="company" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="min_text_length" xsi:type="number">0</item>
</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">ui/form/field</item>
<item name="elementTmpl" xsi:type="string">Vendor_Module/form/element/input-no-autocomplete</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
For Step 2.
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<input class="input-text" type="text" autocomplete="off" data-bind="
value: value,
valueUpdate: 'keyup',
hasFocus: focused,
attr: {
name: inputName,
placeholder: placeholder,
'aria-descr-ibedby': getDescriptionId(),
'aria-required': required,
'aria-invalid': error() ? true : 'false',
id: uid,
disabled: disabled
}" />
Related
I want to remove some portion from di.xml of vendor module. Below example of some portion that to be removed.
<type name="Magento\Braintree\Block\GooglePay\Shortcut\Button">
<arguments>
<argument name="data" xsi:type="array">
<item name="template" xsi:type="string">Magento_Braintree::googlepay/shortcut.phtml</item>
<item name="alias" xsi:type="string">braintree.googlepay.mini-cart</item>
<item name="button_id" xsi:type="string">braintree-googlepay-mini-cart</item>
</argument>
<argument name="payment" xsi:type="object">BraintreeGooglePay</argument>
</arguments>
</type>
How can I remove the it using override of di.xml in custom module.
Have you tried putting
<type name="Magento\Braintree\Block\GooglePay\Shortcut\Button">
<arguments>
</arguments>
</type>
Inside custom di.xml?
Then run php bin/magento setup:upgrade, so that dependencies are updated.
To remove the button completely, search for occurences of the block class and create own layout file(-s) in custom module (Vendor/Module/view/frontend/layout/{{THE_LAYOUT_NAME}}.xml) with following content:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="{{GOOGLE_PAY_BUTTON_BLOCK_NAME}}" remove="true"/>
</body>
</page>
EDIT: The button block name is defined within the layout files by the name attribute of <block> tag.
Thanks for sharing the possible options.
The solution that did work for me is to make the item inside argument tag to null.
In my scenario, I do not want this item in dependency injection. That works for me.
Below code added in custom module etc/frontend/di.xml
<type name="Magento\Braintree\Block\GooglePay\Shortcut\Button">
<arguments>
<argument name="data" xsi:type="array">
<item name="template" xsi:type="null" />
<item name="alias" xsi:type="null" />
<item name="button_id" xsi:type="null" />
</argument>
<argument name="payment" xsi:type="object">BraintreeGooglePay</argument>
</arguments>
</type>
I have created custom column in Sales -> Order UI Grid. I have added "Profit" column. Which is not related to any database table and not the attribute. This column display just calculation of profit.
The issue is I can not sort the column. Column is sortable but it is sorting incorrectly.
I have checked many similar question in stack but nothing helpfull. As the column is not in table and not the attribute.
Following is my override file.
sales_order_grid.xml
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<columns name="sales_order_columns">
<column name="total_paid" class="Company\Module\Ui\Component\Listing\Column\PurchasedPrice">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Profit</item>
<item name="sortOrder" xsi:type="number">13</item>
</item>
</argument>
</column>
</columns>
</listing>
Maybe this is already an old question, but it can be helpful for someone like me facing this issue.
According to this Magento 2 GitHub issue, there is a ui_bookmark table where some settings about UiComponents (and UI Grid component in my case) are stored.
Truncating this table and clearing the cache in my case fixed the problem of columns sortOrder in UI Grid.
In magento 2 sales order grid default date purchase filter is there, but i want to filter with date and time both. please help me how to do.
I tried like below but i didn't get any solution.
Thanks
<column name="created_at" class="Magento_Ui/Component/Listing/Columns/Date">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="timezone" xsi:type="boolean">false</item>
<item name="filter" xsi:type="string">dateRange</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
<item name="label" xsi:type="string" translate="true">Created</item>
<item name="dateFormat" xsi:type="string">MMM d</item>
<item name="options" xsi:type="array">
<item name="showsTime" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</column>
The issue in dateFormat item. Use below code this will work for you.
<column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="timezone" xsi:type="boolean">false</item>
<item name="filter" xsi:type="string">dateRange</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
<item name="label" xsi:type="string" translate="true">Created</item>
<item name="dateFormat" xsi:type="string">MMM dd, YYYY, H:mm:ss A</item>
</item>
</argument>
</column>
Use this one instead
<column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date" component="Magento_Ui/js/grid/columns/date">
<settings>
<filter>dateRange</filter>
<dataType>date</dataType>
<label translate="true">Created</label>
</settings>
</column>
I want to apply default filters on records while using magento 2 admin grid using UI Component.
I know there is a way while using block to render admin grid but i want the way using UI component.
Vanilla out of the box can achieve default filter
Inject the below configs to your listing component, e.g., your_ui_component.xml
<listing ...>
<listingToolbar ...>
<filters ...>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="applied" xsi:type="array">
<item name="is_approved" xsi:type="string">1</item>
</item>
</item>
</argument>
</filters>
</listingToolbar>
</listing>
Source/credits: https://magento.stackexchange.com/a/178663/39320
You can add this in your ui_component/custom_listing.xml which should create filter button in grid:
<listingToolbar name="listing_top">
<filters name="listing_filters"/>
</listingToolbar>
And columns which should have been filtered needed to have "filter" field in column config, for ex.:
<column name="entity_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="sorting" xsi:type="string">asc</item>
<item name="label" xsi:type="string" translate="true">Entity ID</item>
</item>
</argument>
</column>
Is there a way to add widget to the layout xml? I know about the layout updates from the backend, but I wanted to know if there is a way to add widgets the same way as static blocks?
you can add widget via followings xml ,
<referenceContainer name="content.top">
<block class="Magento\Catalog\Block\Category\Widget\Link" name="demoBlock" template="widget/static_block/default.phtml">
<action method="setData">
<argument name="id_path" xsi:type="string">category/20</argument>
<argument name="title" xsi:type="string">Demo Category Title</argument>
<argument name="template" xsi:type="string">category/widget/link/link_inline.phtml</argument>
</action>
</block>
</referenceContainer>
you need to update followings
referenceContainer as per you needs
Block Class & Template (if you require to update the template for block)
arguments in setData