2

Am using magento 1.9.3 am trying to add new steps after shipping method called DELIVERY INSTRUCTIONS i refer this link [ https://www.fontis.com.au/blog/adding-step-onepage-checkout].

I did everything same in that link.

But DELIVERY INSTRUCTIONS Continue button not moving to newt step. Showing some error in console like this

enter image description here

This my deliveryinstructions.phtml code

<form id="co-deliveryinstructions-form" action="">
    <div id="checkout-deliveryinstructions-load">
       <!-- Content loaded dynamically -->
    </div>
    <script type="text/javascript">
    //<![CDATA[
        var deliveryinstructionsMethod = new DeliveryinstructionsMethod('co-deliveryinstructions-form', "<?php echo $this->getUrl('checkout/onepage/saveDeliveryinstructionsMethod') ?>");
    //]]>
    </script>
    <div id="onepage-checkout-deliveryinstructions-additional-load">
        <?php echo $this->getChildHtml('additional') ?>
    </div>
    <div class="buttons-set" id="deliveryinstructions-buttons-container">
        <p class="back-link"><a href="#" onclick="checkout.back(); return false;"><small>&laquo; </small><?php echo $this->__('Back') ?></a></p>
        <button type="button" class="button" onclick="deliveryinstructionsMethod.save()"><span><span><?php echo $this->__('Continue') ?></span></span></button>
        <span id="deliveryinstructions-please-wait" class="please-wait" style="display:none;">
            <img src="<?php echo $this->getSkinUrl('images/opc-ajax-loader.gif') ?>" alt="<?php echo Mage::helper('core')->quoteEscape($this->__('Loading next step...')) ?>" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Loading next step...')) ?>" class="v-middle" /> <?php echo $this->__('Loading next step...') ?>
        </span>
    </div>
</form>

And my second questions

Add progress title in YOUR CHECKOUT PROGRESS

enter image description here

Skin\frontend\base\default\js\opcheckout.js

setShippingMethod: function() {
        //this.nextStep();
        this.gotoSection('deliveryinstructions', true);
        //this.accordion.openNextSection(true);
    },

    //code added
    setDeliveryinstructions: function() {
        //this.nextStep();
        this.gotoSection('payment', true);
        //this.accordion.openNextSection(true);
    },
    //code added

How can i fix this two errors...?

Thanks in advance

2
  • Can you please post your diff of <SKIN DIRECTORY>/js/opcheckout.js>? Jul 31, 2017 at 14:53
  • @TimCieplowski update my opcheckout.js code please check
    – Ramesh S
    Aug 1, 2017 at 4:43

1 Answer 1

1

Finally i got the answer for 1st qestion. But i want to add YOUR CHECKOUT PROGRESS tab. 1st question answer is add new function in skin\frontend\base\default\js\opcheckout.js

After shipping method line no - 550 to 600 add following code

var DeliveryinstructionsMethod = Class.create();
DeliveryinstructionsMethod.prototype = {
    initialize: function(form, saveUrl){
        this.form = form;
        if ($(this.form)) {
            $(this.form).observe('submit', function(event){this.save();Event.stop(event);}.bind(this));
        }
        this.saveUrl = saveUrl;
        this.validator = new Validation(this.form);
        this.onSave = this.nextStep.bindAsEventListener(this);
        this.onComplete = this.resetLoadWaiting.bindAsEventListener(this);
    },

    validate: function() {
        var methods = document.getElementsByName('deliveryinstructions');
        if (methods.length==0) {
            alert(Translator.translate('Your order cannot be completed at this time as there is no shipping methods available for it. Please make necessary changes in your shipping address.').stripTags());
            return false;
        }

        if(!this.validator.validate()) {
            return false;
        }

        for (var i=0; i<methods.length; i++) {
            if (methods[i].checked) {
                return true;
            }
        }
        alert(Translator.translate('Please specify shipping method.').stripTags());
        return false;
    },

    save: function(){

        if (checkout.loadWaiting!=false) return;
        if (this.validate()) {
            checkout.setLoadWaiting('shipping-method');
            new Ajax.Request(
                this.saveUrl,
                {
                    method:'post',
                    onComplete: this.onComplete,
                    onSuccess: this.onSave,
                    onFailure: checkout.ajaxFailure.bind(checkout),
                    parameters: Form.serialize(this.form)
                }
            );
        }
    },

    resetLoadWaiting: function(transport){
        checkout.setLoadWaiting(false);
    },

    nextStep: function(transport){
        var response = transport.responseJSON || transport.responseText.evalJSON(true) || {};

        if (response.error) {
            alert(response.message.stripTags().toString());
            return false;
        }

        if (response.update_section) {
            $('checkout-'+response.update_section.name+'-load').update(response.update_section.html);
        }

        payment.initWhatIsCvvListeners();

        if (response.goto_section) {
            checkout.gotoSection(response.goto_section, true);
            checkout.reloadProgressBlock();
            return;
        }

        if (response.payment_methods_html) {
            $('checkout-payment-method-load').update(response.payment_methods_html);
        }

        checkout.setShippingMethod();
    }
};

And deliveryinstructions.phtml

<form id="co-deliveryinstructions-form" action="">
    <div id="checkout-deliveryinstructions-load">
       <!-- Content loaded dynamically -->
    </div>
    <script type="text/javascript">
    //<![CDATA[
        var deliveryinstructionsMethod = new DeliveryinstructionsMethod('co-deliveryinstructions-form', "<?php echo $this->getUrl('checkout/onepage/saveDeliveryinstructions') ?>");
    //]]>
    </script>
    <div id="onepage-checkout-deliveryinstructions-additional-load">
        <?php echo $this->getChildHtml('additional') ?>
    </div>
    <div class="buttons-set" id="deliveryinstructions-buttons-container">
        <p class="back-link"><a href="#" onclick="checkout.back(); return false;"><small>&laquo; </small><?php echo $this->__('Back') ?></a></p>
        <button type="button" class="button" onclick="deliveryinstructionsMethod.save()"><span><span><?php echo $this->__('Continue') ?></span></span></button>
        <span id="deliveryinstructions-please-wait" class="please-wait" style="display:none;">
            <img src="<?php echo $this->getSkinUrl('images/opc-ajax-loader.gif') ?>" alt="<?php echo Mage::helper('core')->quoteEscape($this->__('Loading next step...')) ?>" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Loading next step...')) ?>" class="v-middle" /> <?php echo $this->__('Loading next step...') ?>
        </span>
    </div>
</form>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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