IWD OnestepCheckout - Magento 2

IWD OnestepCheckout - Magento 2

Well, everybody knows that IWD is great extension provider. An IWD agency is also an active member of magento community. What so ever work done by them weather that is for magento 1 or magento 2, they are at their best working mode.

CoffeeWithMagento members strongly recommend OneStepCheckout of IWD.

Download IWD OneStepCheckout from here.

https://www.iwdagency.com/extensions/one-step-page-checkout.html

There are changes developers need in this IWD Onestepcheckout extension as per request from client. Let's talk about change of header.

1.  Display header menu in IWD one page checkout extension

               
   Everybody have noticed , on checkout page header of website is not appearing. It is a default functionality. But many developers need customization and display website header. Well , solution is so simple. Follow below steps.

        

         Please go to this file path

 IWD/Opc/view/frontend/layout/onepage_index_index.xml

        update code

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

  layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">   

         to

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

  layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

After file updated need to clear cache.

php bin/magento c:c

Isn't that easy? Yes, it is.

       2. IWD OneStepCheckout issue with shipping method update.

First of all need to clarify that, actually it is not an issue of module. Than what is the issue?

Issue is with jQuery plugin used in that module.

As faced this issue, so many days and days were passed in debugging from model to block , block to controller but still there was not single hint for resolving the issue.

To overcome this problem just need to comment out some lines from helper.js file.

Open file helper.js from location.

       IWD\Opc\view\frontend\web\js\helper.js

around line number 1008 there is code

 $select.change(function(){
            $select = $(this);

            if ($select && $select[0] && $select[0].selectize) {
                $select[0].selectize.addItem($select.val(), true);
            }
        }).selectize({
            selectOnTab: true,
            persist: false,
            placeholder: $text,
            allowEmptyOption: showEmptyOption,
            disableSearch: disableSearch,
            onChange: function() {
                var value = this.$input.val(),
                    changed = this.$input.html(),
                    elements = $("select[name='" + this.$input.attr('name') +"']");

                this.$input.val('');
                this.$input.val(value);

                this.$input.get(0).indeterminate = true;
                if ("createEvent" in document) {
                    var c_event = document.createEvent("HTMLEvents");
                    c_event.initEvent("change", false, true);
                    this.$input.get(0).dispatchEvent(c_event);
                } else {
                    this.$input.get(0).fireEvent("onchange");
                }

                if (elements.length > 1) {
                    elements.each(function() {
                        $(this).html(changed);
                    });
                }

                this.$input.trigger('change');
            }
        });

replace whole piece of code with below lines.

$select.change(function(){
            $select = $(this);

            if ($select && $select[0] && $select[0].selectize) {
                $select[0].selectize.addItem($select.val(), true);
            }
        });
        // .selectize({
        //     selectOnTab: true,
        //     persist: false,
        //     placeholder: $text,
        //     allowEmptyOption: showEmptyOption,
        //     disableSearch: disableSearch,
        //     onChange: function() {
        //         var value = this.$input.val(),
        //             changed = this.$input.html(),
        //             elements = $('select[name=' + this.$input.attr('name') +']');

        //         this.$input.val('');
        //         this.$input.val(value);

        //         this.$input.get(0).indeterminate = true;
        //         if ("createEvent" in document) {
        //             var c_event = document.createEvent("HTMLEvents");
        //             c_event.initEvent("change", false, true);
        //             this.$input.get(0).dispatchEvent(c_event);
        //         } else {
        //             this.$input.get(0).fireEvent("onchange");
        //         }

        //         if (elements.length > 1) {
        //             elements.each(function() {
        //                 $(this).html(changed);
        //             });
        //         }

        //         this.$input.trigger('change');
        //     }
        // });
        $('.select').addClass('input-text');

Easy though. 
It takes so much time to reproduce and resolve this problem.

If like my efforts , Please share, comment and subscribe for future posts and inspire more.