Hay 2 métodos de envío y, de forma predeterminada, no se selecciona a nadie, el usuario debe seleccionar uno manualmente, como resultado dice envío (indefinido-indefinido). Quiero que el primer elemento se seleccione automáticamente si no se selecciona ninguno, cómo se puede hacer en magento 2
Respuestas:
Como entendí por su pregunta es que siempre desea tener un método de envío seleccionado cuando alguien entra en la página de pago.
Para lograr esto, necesitamos anular un javascript del módulo Magento_Checkout.
Primero lo primero, necesitamos crear un módulo:
Espacio de nombres / Módulo / registro.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Namespace_Module',
__DIR__
);
Espacio de nombres / Módulo / 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="Namespace_Module" setup_version="1.0.0">
<sequence>
<module name="Magento_Checkout"/>
</sequence>
</module>
</config>
Después de esto, necesitamos crear los requirejs para anular ese js.
Espacio de nombres / Módulo / vista / frontend / requirejs-config.js
var config = {
map: {
'*': {
'Magento_Checkout/js/model/checkout-data-resolver': 'Namespace_Module/js/model/checkout-data-resolver'
}
}
};
Ahora tenemos que copiar checkout-data-resolver.jsdesde Magento_Checkout/view/frontend/web/js/modelnuestro módulo con la misma rutaNamespace_Module/view/frontend/web/js/model
Después de eso, necesitamos cambiar una condición dentro de la función resolveShippingRates: function (ratesData)
Desde:
...
if (ratesData.length == 1) {
//set shipping rate if we have only one available shipping rate
selectShippingMethodAction(ratesData[0]);
return;
}
...
A:
...
if (ratesData.length >= 1) {
//set shipping rate if we have only one available shipping rate
selectShippingMethodAction(ratesData[0]);
return;
}
...
Y eso es todo, todo lo que tienes que hacer ahora es:
selectShippingMethodAction(ratesData[0]);Modifiqué esto y agregué la llamada para bajar un poco más abajo en el método, después de que busca los métodos ya seleccionados, para que no los anule.
if (ratesData.length >= 1) {
//set shipping rate if we have only one available shipping rate
selectShippingMethodAction(ratesData[0]);
return;
}
Esto hará que sea imposible seleccionar cualquier otra opción de envío. Esto resuelve el problema para mí:
if (ratesData.length == 1) {
//set shipping rate if we have only one available shipping rate;
selectShippingMethodAction(ratesData[0]);
return;
}
if (ratesData.length >= 1) {
//set shipping rate if we have only one available shipping rate
if(!selectedShippingRate) {
selectShippingMethodAction(ratesData[0]);
}
}
No es necesario que todo el módulo logre este cambio. Simplemente puede extender el módulo Checkout y anular en su tema.
Copiar el archivo js checkout-Data-resolver.js
a partir
vendor\magento\module-checkout\view\frontend\web\js\model
de
la aplicación \ diseño \ frontend \ Espacio de nombres \ THEMENAME \ Magento_Checkout \ web \ js \ modelo.
Localice la línea con el siguiente código:
if (ratesData.length == 1) {
y reemplácela con:
if (ratesData.length >= 1 && !selectedShippingRate) {
Lo que probablemente quiera hacer es seleccionar el método de envío más barato de forma predeterminada.
En su módulo over ride checkout-data-resolver, opcionalmente puede usar un mixin en su lugar.
var config = {
map: {
'*': {
'Magento_Checkout/js/model/checkout-data-resolver':'MyModule_Checkout/js/view/checkout-data-resolver'
}
}
}
en el método resolveShippingRates, modifique de la siguiente manera:
/**
* @param {Object} ratesData
*/
resolveShippingRates: function (ratesData) {
var selectedShippingRate = checkoutData.getSelectedShippingRate(),
availableRate = false;
//Added to find the cheapest rate
var lowestRateId = _.min(_.keys(ratesData), function(k) { return ratesData[k].amount; });
if (ratesData.length === 1) {
//set shipping rate if we have only one available shipping rate
selectShippingMethodAction(ratesData[0]);
return;
}
// added to select the cheapest rate if no method selected
if(lowestRateId && !selectedShippingRate && ratesData.length > 0) {
selectShippingMethodAction(ratesData[lowestRateId]);
}
Si bien los métodos anteriores sugieren anular las funciones js, recomendaría usar mixins para evitar conflictos de código innecesarios:
En su interfaz requirejs-config.js agregue lo siguiente:
var config = {
config: {
mixins: {
'Magento_Checkout/js/model/checkout-data-resolver': {
'{Vendor}/{Module}/model/checkout-data-resolver': true
}
}
}
};
En su checkout-data-resolver.js
define([
'underscore',
'mage/utils/wrapper',
'Magento_Checkout/js/checkout-data',
'Magento_Checkout/js/action/select-shipping-method',
'Magento_Checkout/js/action/select-payment-method'
],function (_, wrapper, checkoutData, selectShippingMethodAction) {
'use strict';
return function (checkoutDataResolver) {
var resolveShippingRates = wrapper.wrap(
checkoutDataResolver.resolveShippingRates,
function (originalResolveShippingRates, ratesData) {
// select your shipping method here using the ratesData and selectShippingMethodAction
return originalResolveShippingRates(ratesData);
}
);
return _.extend(checkoutDataResolver, {
resolveShippingRates: resolveShippingRates
});
};
});
Alternativamente, puede descargar el módulo aquí que le permite seleccionar un método de envío y pago predeterminado : Método de envío y pago predeterminado [M2]
Cualquiera que esté usando onestepcheckout puede intentar esto:
if (ratesData.length >= 1) {
setTimeout(function(){
selectShippingMethodAction(ratesData[0]);
}, 500)
return;
}
Sé que parece estúpido, pero por alguna razón, agregar ese retraso realmente funcionó para mí. El costo de envío se está actualizando así.