9

I successfully added custom shipping method like this:

app/etc/config.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
    <default>
        <carriers>
            <lime>
                <active>1</active>
                <allowed_methods>delivery</allowed_methods>
                <methods>delivery</methods>
                <type>NAMESPACE</type>
                <sallowspecific>0</sallowspecific>
                <model>Namespace\Module\Model\Carrier</model>
                <name>Namespace_Module custom Shipping</name>
                <title>Namespace_Module custom Shipping</title>
                <handling_type>F</handling_type>
            </lime>
        </carriers>
    </default>
</config>

app/code/Namespace/Module/Model/Carrier.php

public function collectRates(RateRequest $request)
{
    if (!$this->getConfigFlag('active')) {
        return false;
    } 
    $result = $this->_rateResultFactory->create(); 
    $method = $this->_rateMethodFactory->create(); 
    $method->setCarrier('HILO');
    $method->setCarrierTitle('HILO'); 
    $method->setMethod('Fast');
    $method->setMethodTitle('Fast'); 
    $amount = $this->getConfigData('price'); 
    $method->setPrice($amount);
    $method->setCost($amount); 
    $result->append($method);
    return $result;
}

It shows up at checkout page, but I want to show custom text area input data when the user choose my custom shipping method, and I can save the custom input text area data.

here's what I want it to look like:

enter image description here

  • 2
    hi, how did you add this field?can you please help me to get a code? – Mujahidh Sep 4 '18 at 6:30
2

In order to show a custom input field after selecting your custom shipping method, you have to add a js block subscribing to select method event:

Add a custom phtml to layout checkout_index_index.xml

Then add the next block to your phtml:

<script type="text/javascript">
    require([
        'jquery',
        'Magento_Checkout/js/model/quote',
    ], function (jQuery, quote) {
        jQuery(document).ready(function () {
            quote.shippingMethod.subscribe(function (value) {
                if (quote.shippingMethod() && quote.shippingMethod().carrier_code == 'your_custom_shipping_method_code') {
                    var customBlock = "<div class ='custom-information'><input type="text" id="your_custom_id"></div>";
                    if((!$('.custom-information').length > 0)) {
                        $('#checkout-shipping-method-load').append(customBlock);
                    }
                });
            });
        });
    });
</script>

With the above code, you will add the input you want below your custom shipping method.

After that, you should have to create a plugin to save your custom value.

Check: Magento\Checkout\Model\GuestShippingInformationManagement

I hope it helps you. Regards, Pablo

  • 1
    can you please explain this little more – Mujahidh Sep 5 '18 at 6:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.