Posterior a investigar en diversos repositorios y foros de internet al final hemos hallado la solución que te compartiremos aquí.
Solución:
Debido a que Magento usa la representación asíncrona, no es posible hacer lo que solicita.
Pero puede trabajar con el componente js UI para deshabilitar el campo
require(['uiRegistry'], function (uiRegistry)
uiRegistry.get("product_form.product_form.product-details.quantity_and_stock_status_qty.qty", function (element)
element.disable()
)
)
Esta respuesta es correcta, sin embargo, nos falta información sobre cómo sabemos usar ‘product_form.product_form.product-details.quanityt_and_stock_status_qty.qty’ como el parámetro get ().
.get busca que su primer parámetro sea un componente. Entonces … ¿cómo encuentra el componente, y ese lenguaje es claro? No.
Como ejemplo, quería agregar alguna funcionalidad javascript personalizada a la página de información del cliente dentro del administrador de Magento 2. Específicamente en, editar un usuario, pestaña ‘Información de cuenta’.
Hay dos formas de abordar esto por lo que puedo decir …
Edite la fuente de datos para cambiar los valores. Manipula el campo, como la visibilidad.
Edite la fuente de datos:
Vamos a rodar. Faltan algunos puntos aquí, pero estamos en una página manejada por el módulo de cliente de magento, es una página de edición … así que miramos aquí … /vendor/module-customer/view/adminhtml/layout/customer_index_edit.xml . Dentro de aquí, el área de contenido se define para contener ‘customer_form’.
Esto significa que estamos buscando un archivo ‘customer_form.xml’, en este caso se encuentra en /vendor/module-customer/view/base/ui_component/customer_form.xml. Aquí encontramos la definición de un par de formularios dentro de las pestañas y sus campos. La fuente de datos que buscamos se define cerca de la parte superior.
-
- customer_form.customer_form_data_source
- Customer Information
- true
Tenga en cuenta el ‘proveedor’ de ‘customer_form.customer_form_data_source’. Aquí es donde existirán todos nuestros datos de campo dentro de la llamada .get.
Nuestro .get () ahora se convertiría en:
uiRegistry.get('customer_form.customer_form_data_source', function(element)
console.log(element.data);
);
Ahora, la pregunta es … ¿qué podemos hacer con esto? Y todo lo que puede hacer es ajustar los datos. Puedes cambiar de campo true/false, manipular valores, etc. Útil.
Manipular el campo:
¿Qué pasa si queremos ocultar el campo y solo mostrarlo bajo la condición x … no podemos hacer eso con la fuente de datos?
Ahora … esto va a ser largo y parecerá complicado. Es porque estoy enseñando cómo encontrar sus datos … ya que no sé cómo encontrarlos de otra manera, y será diferente por módulo. Enséñale a pescar a un hombre.
Primero presento mi ‘customer_form.customer_form_data_source’ dentro de nuestro .get (). Esto nos proporcionará un objeto ‘params’ key, dentro de eso está la definición de un ‘activeArea’ en el objeto, que es ‘customer_form.areas.customer_edit_tab_view_content’.
Ok … entonces hay ‘áreas’. Las áreas son las pestañas de la izquierda, cada una es un área. Abra ‘_elems’ dentro de su consola, verá 9 objetos en la parte superior. Abra el segundo y encontrará una etiqueta de ‘Información de cuenta’. Esta es la sección que busco. Luego observe el valor de ‘nombre’ de ‘customer_form.areas.customer’ … ok, intentemos eso como nuestro parámetro get ().
uiRegistry.get('customer_form.areas.customer', function(element)
console.log(element);
);
Este es nuestro contenedor de conjunto de campos, verifique su valor de nombre dentro de la consola en ‘_elems’ -> 0 -> ‘nombre’. ‘customer_form.areas.customer.customer’ … estamos profundizando. De hecho, ya estamos allí, verifique el valor del ‘nombre’ en el campo que desea editar. Notarás que su nombre es ‘cliente[field_name]’. Hacer nuestro camino para get () es ‘customer_form.areas.customer.customer.[‘field_name]’.
uiRegistry.get('customer_form.areas.customer.customer.[field_name]', function(element)
element.visible(false);
);
Ejemplos:
[form_name].[tab_areas].[area_name].[fieldset_name].[field_name]
customer_form.areas.customer.customer.field_name
Hay un complemento integrado en Require JS para manejar la carga de la página, este es el método preferido, ya que cualquier otro módulo que dependa del suyo también conocerá el requisito de carga de la página. Si usa el método jQuery mencionado por Rajeev, los otros módulos no conocerán el requisito de carga de la página.
¡El complemento se llama domReady! y se puede usar agregándolo como una dependencia así:
require(["jquery", "domReady!"], function($)
// Your code here
);
Esto esperará a que se cargue la página, pero no significa necesariamente que se cargue después de todos los demás módulos KO, ya que también pueden estar esperando a que se cargue la página. Por esa razón, creo que el método de KAndy es el más confiable, pero esta respuesta puede ayudar a otros.
Los eventos de documento listo o cargado con DOM no se activarán una vez que se complete la carga del formulario de la interfaz de usuario.
Aquí, tendrá que escribir una función en javascript que se debe llamar en algún intervalo y tan pronto como su elemento de destino aparezca en DOM, procese su lógica de negocios y borre el intervalo.
Otra opción podría ser: ejecutar su lógica empresarial de JavaScript después de completar la solicitud AJAX, lo que se puede lograr utilizando el siguiente bloque de código.
$(document).ajaxComplete(function()
// enter your code here
);
Acuérdate de que tienes la capacidad de interpretar si te ayudó.