javascript - tutorial - Anulando el modelo de vista difícil

mvc php tutorial español

Question

Estoy intentando reemplazar un poco de texto en un campo de entrada usando JS, pero el modelo de vista reemplaza mis comandos cada vez. Este es el HTML con el que comienzo:

<td class="new-variants-table__cell" define="{ editVariantPrice: new Shopify.EditVariantPrice(this) }" context="editVariantPrice" style="height: auto;">
    <input type="hidden" name="product[variants][][price]" id="product_variants__price" value="25.00" bind="price" data-dirty-trigger="true">
    <input class="mock-edit-on-hover tr js-no-dirty js-variant-price variant-table-input--numeric" bind-event-focus="onFocus(this)" bind-event-blur="onBlur(this)" bind-event-input="onInput(this)">
</td>

Yo corro este JS:

jQuery(''#product_variants__price'').siblings().removeAttr(''bind-event-focus'');
jQuery(''#product_variants__price'').siblings().removeAttr(''bind-event-input'');
jQuery(''#product_variants__price'').siblings().removeAttr(''bind-event-blur'');
jQuery(''#product_variants__price'').siblings().focus()
jQuery(''#product_variants__price'').siblings().val("34.00");
jQuery(''#product_variants__price'').val("34.00");

Y me quedo con el siguiente HTML:

<td class="new-variants-table__cell" define="{ editVariantPrice: new Shopify.EditVariantPrice(this) }" context="editVariantPrice" style="height: auto;">
    <input type="hidden" name="product[variants][][price]" id="product_variants__price" value="34.00" bind="price" data-dirty-trigger="true">
    <input class="mock-edit-on-hover tr js-no-dirty js-variant-price variant-table-input--numeric">
</td>

El problema es que cada vez que hago clic en el campo de entrada, el valor se revierte a lo que era cuando se cargó la página.

También he intentado ejecutar el comando en la pantalla principal junto con mi cambio de valor, para simular la edición de una variante y evitar el incumplimiento sin éxito:

jQuery(''#product_variants__price'').siblings().bind(''input'', function (e) {
    e.preventDefault();
    return false;
});
jQuery(''#product_variants__price'').siblings().bind(''focus'', function (e) {
    e.preventDefault();
    return false;
});
jQuery(''#product_variants__price'').siblings().focus()
jQuery(''#product_variants__price'').siblings().val("£34.00");
jQuery(''#product_variants__price'').val("£34.00");
jQuery(''#product_variants__price'').siblings().keydown()

Función td padre:

new Shopify.EditVariantPrice(jQuery(''#product_variants__price'').parent())

Entonces, ¿cómo puedo editar con éxito este valor en las entradas y también actualizar el modelo de vista de Shopify?

Puedes probar esto por ti mismo yendo aquí:

https://jebus333.myshopify.com/admin/products/2521183043

login [email protected] contraseña shop1

EDITAR: He intentado encontrar el modelo de vista en la página pero sin éxito. Además, no hay llamadas de red al editar los valores en los campos de entrada, lo que me hace creer que los valores se están retirando de algún lugar de la página.

Answer 1

Bueno, hay una especie de solución sucia ...

En primer lugar necesitarás un plugin de sendkeys . De hecho, eso significa que deberá incluir this y this bibliotecas JS (puede copiarlas y pegarlas en la consola para probarlas). Si no quieres usar la primera biblioteca (personalmente me parece bastante grande para algo tan pequeño) puedes extraer solo las cosas clave y usarlas solo.

El siguiente paso es crear la función que actuará como un usuario real:

function input(field, desiredValue) {
  // get the currency symbol while value is still pristine
  var currency = field.val()[0];

  // move focus to the input
  field.click().focus();

  // remove all symbols from the input. I took 10, but of course you can use value.length instead
  for (var i = 0; i < 10; i++) field.sendkeys("{backspace}");

  // send the currency key
  field.sendkeys(currency);

  // send the desired value symbol-by-symbol
  for (var i = 0; i < desiredValue.length; i++) field.sendkeys(desiredValue[i]);
}

Entonces simplemente puede llamarlo con el valor que desea asignar:

input($("#product_variants__price").next(), "123.00");

Realmente no logré falsificar el evento borroso debido a la falta de tiempo; por eso me vi obligado a leer la moneda y pasar .00 como una cadena. De todos modos ya tienes un camino por recorrer y una solución bastante funcional.

Answer 2

Parece que está intentando automatizar la edición de los precios variables de los productos en el panel de administración de Shopify.

En lugar de jugar con el DOM de la página de administración de Shopify, sugeriré usar el editor de productos de Shopify que le permite establecer los precios de todas las variantes en una sola pantalla. Creo que tendrá mejor suerte al establecer los precios de las variantes con JavaScript en la página del editor de productos a granel.

Al hacer clic en el botón ''Editar productos'' como se muestra en la captura de pantalla a continuación, se abrirá el editor de productos a granel.

También puedes ver si los complementos de grabación de macros basados ​​en el navegador como iMacro pueden ser de tu ayuda (también puedes codificar macros con JS en iMacro).

Answer 3

Prueba esto:

var old = Shopify.EditVariantPrice.prototype.onFocus;
Shopify.EditVariantPrice.prototype.onFocus = function(t) { 
  this.price = ''50.00''; // Use the price you want here
  old.call(this, t); 
};
jQuery(''#product_variants__price'').siblings().triggerHandler("focus");
jQuery(''#product_variants__price'').siblings().triggerHandler("blur");

Si te funciona, es posible que lo siguiente sea suficiente:

Shopify.EditVariantPrice.prototype.onFocus = function(t) { 
  this.price = ''50.00''; // Use the price you want here
};