I've used the below tutorial from Magento 2 so that I can add a new checkout step that influences another step, however after loading the checkout I get a JS error (also below):
Link to tutorial: http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_custom_checkbox.html
Console error:
require.js:1895 GET https://my-ip/app/code/BusinessCheckout/CustomCheckout/view/frontend/web/js/single-checkbox net::ERR_ABORTED
Uncaught Error: Script error for: /app/code/BusinessCheckout/CustomCheckout/view/frontend/web/js/single-checkbox
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:166)
at HTMLScriptElement.onScriptError (require.js:1681)
The file structure is the same as the tutorial and here is my SomeProcessor.php:
<?php
namespace BusinessCheckout\CustomCheckout\Block\Checkout;
class SomeProcessor
{
/**
* Checkout LayoutProcessor after process plugin.
*
* @param \Magento\Checkout\Block\Checkout\LayoutProcessor $processor
* @param array $jsLayout
* @return array
*/
public function afterProcess(\Magento\Checkout\Block\Checkout\LayoutProcessor $processor, $jsLayout)
{
$shippingConfiguration = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
['children']['shippingAddress']['children']['shipping-address-fieldset']['children'];
$billingConfiguration = &$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']
['children']['payment']['children']['payments-list']['children'];
//Checks if shipping step available.
if (isset($shippingConfiguration)) {
$shippingConfiguration = $this->processAddress(
$shippingConfiguration,
'shippingAddress',
[
'checkoutProvider',
'checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset.street',
'checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset.city',
'checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset.country_id'
]
);
}
//Checks if billing step available.
if (isset($billingConfiguration)) {
//Iterate over billing forms.
foreach($billingConfiguration as $key => &$billingForm) {
//Exclude not billing forms
if (!strpos($key, '-form')) {
continue;
}
$billingForm['children']['form-fields']['children'] = $this->processAddress(
$billingForm['children']['form-fields']['children'],
$billingForm['dataScopePrefix'],
[
'checkoutProvider',
'checkout.steps.billing-step.payment.payments-list.' . $key . '.form-fields.street',
'checkout.steps.billing-step.payment.payments-list.' . $key . '.form-fields.city',
'checkout.steps.billing-step.payment.payments-list.' . $key . '.form-fields.country_id'
]
);
}
}
return $jsLayout;
}
/**
* Process provided address to contains checkbox and have trackable address fields.
*
* @param $addressFieldset - Address fieldset config.
* @param $dataScope - data scope
* @param $deps - list of dependencies
* @return array
*/
private function processAddress($addressFieldset, $dataScope, $deps)
{
//Creates checkbox.
$addressFieldset['custom_checkbox'] = [
'component' => '/app/code/BusinessCheckout/CustomCheckout/view/frontend/web/js/single-checkbox',
'config' => [
'customScope' => $dataScope,
'template' => 'ui/form/field',
'prefer' => 'checkbox'
],
'dataScope' => $dataScope . '.custom_checkbox',
'deps' => $deps,
'label' => __('Army Address'),
'provider' => 'checkoutProvider',
'visible' => true,
'initialValue' => false,
'sortOrder' => 10,
'valueMap' => [
'true' => true,
'false' => false
]
];
//Makes each address field label trackable.
if (isset($addressFieldset['street']['children'])) {
foreach($addressFieldset['street']['children'] as $key => $street) {
$street['tracks']['label'] = true;
//Remove .additional class. Can be removed, but style fix provided instead.
$street['additionalClasses'] = '';
$addressFieldset['street']['children'][$key] = $street;
}
}
return $addressFieldset;
}
}
?>
And my .js file:
define([
'vendor\magento\module-ui\view\base\web\js\form\element\single-checkbox',
'mage/translate'
], function (AbstractField, $t) {
'use strict';
return AbstractField.extend({
defaults: {
streetLabels: [$t('Company / Section / Unit'), $t('Post Sector Type'), $t('Post Sector')],
modules: {
street: '${ $.parentName }.street',
city: '${ $.parentName }.city',
country: '${ $.parentName }.country_id'
}
},
updateStreetLabels: function () {
if (this.value()) {
this.street().elems.each(function (street, key) {
this.street().elems()[key].set('label', this.streetLabels[key]);
}.bind(this));
} else {
this.street().elems.each(function (street, key) {
this.street().elems()[key].set('label', '');
}.bind(this));
}
},
updateCity: function () {
if (this.value()) {
this.city().value('Kyiv');
this.city().disabled(true);
} else {
this.city().value('');
this.city().disabled(false);
}
},
updateCountry: function () {
if (this.value()) {
this.country().value('UA');
this.country().disabled(true);
} else {
this.country().value('');
this.country().disabled(false);
}
},
onCheckedChanged: function () {
this._super();
this.updateStreetLabels();
this.updateCity();
this.updateCountry();
}
});
});
I'm completely new to custom modules in Magento 2 so I may have it laughably wrong. Anybody know what it could be that needs editing?
Thanks! :)
