3

I want to change the order of the Magento checkout steps. I have followed the instructions from this url, but I am seeing the following errors in the console.

  1. ReferenceError: billing is not defined
  2. TypeError: $(...) is null

What is the reason for this error?

This is the billing.phtml file (app/design/frontend/rwd/default/template/checkout/onepage/billing.phtml)

<form id="co-billing-form" action="">
<fieldset>
    <ul class="form-list">
    <?php if ($this->customerHasAddresses()): ?>
        <li class="wide">
            <label for="billing-address-select"><?php echo $this->__('Select a billing address from your address book or enter a new address.') ?></label>
            <div class="input-box">
                <?php echo $this->getAddressesHtmlSelect('billing') ?>
            </div>
        </li>
    <?php endif; ?>
    <li id="billing-new-address-form"<?php if ($this->customerHasAddresses()): ?> style="display:none;"<?php endif; ?>>
        <fieldset>
            <input type="hidden" name="billing[address_id]" value="<?php echo $this->getAddress()->getId() ?>" id="billing:address_id" />
            <ul>
                <li class="fields"><?php echo $this->getLayout()->createBlock('customer/widget_name')->setObject($this->getAddress()->getFirstname() ? $this->getAddress() : $this->getQuote()->getCustomer())->setForceUseCustomerRequiredAttributes(!$this->isCustomerLoggedIn())->setFieldIdFormat('billing:%s')->setFieldNameFormat('billing[%s]')->toHtml() ?></li>
                <li class="fields">
                    <div class="field">
                        <label for="billing:company"><?php echo $this->__('Company') ?></label>
                        <div class="input-box">
                            <input type="text" id="billing:company" name="billing[company]" value="<?php echo $this->escapeHtml($this->getAddress()->getCompany()) ?>" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Company')) ?>" class="input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('company') ?>" />
                        </div>
                    </div>
        <?php if(!$this->isCustomerLoggedIn()): ?>
                    <div class="field">
                        <label for="billing:email" class="required"><em>*</em><?php echo $this->__('Email Address') ?></label>
                        <div class="input-box">
                            <input type="text" name="billing[email]" id="billing:email" value="<?php echo $this->escapeHtml($this->getAddress()->getEmail()) ?>" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Email Address')) ?>" class="input-text validate-email required-entry" />
                        </div>
                    </div>
        <?php endif; ?>
                </li>
        <?php $_streetValidationClass = $this->helper('customer/address')->getAttributeValidationClass('street'); ?>
                <li class="wide">
                    <label for="billing:street1" class="required"><em>*</em><?php echo $this->__('Address') ?></label>
                    <div class="input-box">
                        <input type="text" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Street Address')) ?>" name="billing[street][]" id="billing:street1" value="<?php echo $this->escapeHtml($this->getAddress()->getStreet(1)) ?>" class="input-text <?php echo $_streetValidationClass ?>" />
                    </div>
                </li>
        <?php $_streetValidationClass = trim(str_replace('required-entry', '', $_streetValidationClass)); ?>
        <?php for ($_i = 2, $_n = $this->helper('customer/address')->getStreetLines(); $_i <= $_n; $_i++): ?>
                <li class="wide">
                    <div class="input-box">
                        <input type="text" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Street Address %s', $_i)) ?>" name="billing[street][]" id="billing:street<?php echo $_i ?>" value="<?php echo $this->escapeHtml($this->getAddress()->getStreet($_i)) ?>" class="input-text <?php echo $_streetValidationClass ?>" />
                    </div>
                </li>
        <?php endfor; ?>
                <?php if ($this->helper('customer/address')->isVatAttributeVisible()) : ?>
                <li class="wide">
                    <label for="billing:vat_id"><?php echo $this->__('VAT Number') ?></label>
                    <div class="input-box">
                        <input type="text" id="billing:vat_id" name="billing[vat_id]" value="<?php echo $this->escapeHtml($this->getAddress()->getVatId()) ?>" title="<?php echo Mage::helper('core')->quoteEscape($this->__('VAT Number')) ?>" class="input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('vat_id') ?>" />
                    </div>
                </li>
                <?php endif; ?>
                <li class="fields">
                    <div class="field">
                        <label for="billing:city" class="required"><em>*</em><?php echo $this->__('City') ?></label>
                        <div class="input-box">
                            <input type="text" title="<?php echo Mage::helper('core')->quoteEscape($this->__('City')) ?>" name="billing[city]" value="<?php echo $this->escapeHtml($this->getAddress()->getCity()) ?>" class="input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('city') ?>" id="billing:city" />
                        </div>
                    </div>
                    <div class="field">
                        <label for="billing:region_id" class="required"><em>*</em><?php echo $this->__('State/Province') ?></label>
                        <div class="input-box">
                            <select id="billing:region_id" name="billing[region_id]" title="<?php echo Mage::helper('core')->quoteEscape($this->__('State/Province')) ?>" class="validate-select" style="display:none;">
                                <option value=""><?php echo $this->__('Please select region, state or province') ?></option>
                            </select>
                            <script type="text/javascript">
                            //<![CDATA[
                                $('billing:region_id').setAttribute('defaultValue',  "<?php echo $this->getAddress()->getRegionId() ?>");
                            //]]>
                            </script>
                            <input type="text" id="billing:region" name="billing[region]" value="<?php echo $this->escapeHtml($this->getAddress()->getRegion()) ?>"  title="<?php echo Mage::helper('core')->quoteEscape($this->__('State/Province')) ?>" class="input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('region') ?>" style="display:none;" />
                        </div>
                    </div>
                </li>
                <li class="fields">
                    <div class="field">
                        <label for="billing:postcode" class="required"><em>*</em><?php echo $this->__('Zip/Postal Code') ?></label>
                        <div class="input-box">
                            <input type="text" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Zip/Postal Code')) ?>" name="billing[postcode]" id="billing:postcode" value="<?php echo $this->escapeHtml($this->getAddress()->getPostcode()) ?>" class="input-text validate-zip-international <?php echo $this->helper('customer/address')->getAttributeValidationClass('postcode') ?>" />
                        </div>
                    </div>
                    <div class="field">
                        <label for="billing:country_id" class="required"><em>*</em><?php echo $this->__('Country') ?></label>
                        <div class="input-box">
                            <?php echo $this->getCountryHtmlSelect('billing') ?>
                        </div>
                    </div>
                </li>
                <li class="fields">
                    <div class="field">
                        <label for="billing:telephone" class="required"><em>*</em><?php echo $this->__('Telephone') ?></label>
                        <div class="input-box">
                            <input type="text" name="billing[telephone]" value="<?php echo $this->escapeHtml($this->getAddress()->getTelephone()) ?>" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Telephone')) ?>" class="input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('telephone') ?>" id="billing:telephone" />
                        </div>
                    </div>
                    <div class="field">
                        <label for="billing:fax"><?php echo $this->__('Fax') ?></label>
                        <div class="input-box">
                            <input type="text" name="billing[fax]" value="<?php echo $this->escapeHtml($this->getAddress()->getFax()) ?>" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Fax')) ?>" class="input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('fax') ?>" id="billing:fax" />
                        </div>
                    </div>
                </li>
                <?php if(!$this->isCustomerLoggedIn()): ?>

        <?php $_dob = $this->getLayout()->createBlock('customer/widget_dob') ?>
        <?php $_gender = $this->getLayout()->createBlock('customer/widget_gender') ?>
            <?php if ($_dob->isEnabled() || $_gender->isEnabled()): ?>
                <li class="fields">
                <?php if ($_dob->isEnabled()): ?>
                    <div class="field">
                        <?php echo $_dob->setDate($this->getQuote()->getCustomerDob())->setFieldIdFormat('billing:%s')->setFieldNameFormat('billing[%s]')->toHtml() ?>
                    </div>
                <?php endif; ?>
                <?php if ($_gender->isEnabled()): ?>
                    <div class="field">
                        <?php echo $_gender->setGender($this->getQuote()->getCustomerGender())->setFieldIdFormat('billing:%s')->setFieldNameFormat('billing[%s]')->toHtml() ?>
                    </div>
                <?php endif ?>
                </li>
            <?php endif ?>

        <?php $_taxvat = $this->getLayout()->createBlock('customer/widget_taxvat') ?>
        <?php if ($_taxvat->isEnabled()): ?>
                <li>
                    <?php echo $_taxvat->setTaxvat($this->getQuote()->getCustomerTaxvat())->setFieldIdFormat('billing:%s')->setFieldNameFormat('billing[%s]')->toHtml() ?>
                </li>
        <?php endif ?>

                <li class="fields" id="register-customer-password">
                    <div class="field">
                        <label for="billing:customer_password" class="required"><em>*</em><?php echo $this->__('Password') ?></label>
                        <div class="input-box">
                            <input type="password" name="billing[customer_password]" id="billing:customer_password" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Password')) ?>" class="input-text required-entry validate-password" />
                        </div>
                    </div>
                    <div class="field">
                        <label for="billing:confirm_password" class="required"><em>*</em><?php echo $this->__('Confirm Password') ?></label>
                        <div class="input-box">
                            <input type="password" name="billing[confirm_password]" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Confirm Password')) ?>" id="billing:confirm_password" class="input-text required-entry validate-cpassword" />
                        </div>
                    </div>
                </li>
                <?php endif; ?>
                <?php if ($this->isCustomerLoggedIn() && $this->customerHasAddresses()):?>
                    <li class="control">
                        <input type="checkbox" name="billing[save_in_address_book]" value="1" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Save in address book')) ?>" id="billing:save_in_address_book" onchange="if(window.shipping) shipping.setSameAsBilling(false);"<?php if ($this->getAddress()->getSaveInAddressBook()):?> checked="checked"<?php endif;?> class="checkbox" /><label for="billing:save_in_address_book"><?php echo $this->__('Save in address book') ?></label>
                    </li>
                <?php else:?>
                    <li class="no-display"><input type="hidden" name="billing[save_in_address_book]" value="1" /></li>
                <?php endif; ?>
                <?php echo $this->getChildHtml('form.additional.info'); ?>
            </ul>
        </fieldset>
    </li>
    <?php /* Extensions placeholder */ ?>
    <?php echo $this->getChildHtml('checkout.onepage.billing.extra')?>
    <?php if ($this->canShip()): ?>
        <li class="control">
            <input type="radio" name="billing[use_for_shipping]" id="billing:use_for_shipping_yes" value="1"<?php if ($this->isUseBillingAddressForShipping()) {?> checked="checked"<?php }?> title="<?php echo Mage::helper('core')->quoteEscape($this->__('Ship to this address')) ?>" onclick="$('shipping:same_as_billing').checked = true;" class="radio" /><label for="billing:use_for_shipping_yes"><?php echo  $this->__('Ship to this address') ?></label></li>
        <li class="control">
            <input type="radio" name="billing[use_for_shipping]" id="billing:use_for_shipping_no" value="0"<?php if (!$this->isUseBillingAddressForShipping()) {?> checked="checked"<?php }?> title="<?php echo Mage::helper('core')->quoteEscape($this->__('Ship to different address')) ?>" onclick="$('shipping:same_as_billing').checked = false;" class="radio" /><label for="billing:use_for_shipping_no"><?php echo $this->__('Ship to different address') ?></label>
        </li>
    <?php endif; ?>
    </ul>
    <?php if (!$this->canShip()): ?>
        <input type="hidden" name="billing[use_for_shipping]" value="1" />
    <?php endif; ?>
    <?php echo $this->getChildHtml('payment'); ?>
    <div class="buttons-set" id="billing-buttons-container">
        <p class="required"><?php echo $this->__('* Required Fields') ?></p>
        <button type="button" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Continue')) ?>" class="button" onclick="billing.save()"><span><span><?php echo $this->__('Continue') ?></span></span></button>
        <span class="please-wait" id="billing-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>
</fieldset>
</form>
<script type="text/javascript">
//<![CDATA[
    var billing = new Billing('co-billing-form', '<?php echo $this->getUrl('checkout/onepage/getAddress') ?>address/', '<?php echo $this->getUrl('checkout/onepage/saveBilling') ?>');
    var billingForm = new VarienForm('co-billing-form');

    //billingForm.setElementsRelation('billing:country_id', 'billing:region', '<?php echo $this->getUrl('directory/json/childRegion') ?>', '<?php echo $this->__('Select State/Province...') ?>');
    $('billing-address-select') && billing.newAddress(!$('billing-address-select').value);

    var billingRegionUpdater = new RegionUpdater('billing:country_id', 'billing:region', 'billing:region_id', <?php echo $this->helper('directory')->getRegionJson() ?>, undefined, 'billing:postcode');
//]]>
</script>
1
  1. You are missing the inline javascript code that defines the billing variable. Compare the billing.phtml files in your current theme against the ones in:

app\design\frontend\base\default\template\checkout\onepage\billing.phtml

app\design\frontend\base\default\template\persistent\checkout\onepage\billing.phtml

You should see similar to below:

<script type="text/javascript">
//<![CDATA[
    var billing = new Billing('co-billing-form', '<?php echo $this->getUrl('checkout/onepage/getAddress') ?>address/', '<?php echo $this->getUrl('checkout/onepage/saveBilling') ?>');
    var billingForm = new VarienForm('co-billing-form');

    //billingForm.setElementsRelation('billing:country_id', 'billing:region', '<?php echo $this->getUrl('directory/json/childRegion') ?>', '<?php echo $this->__('Select State/Province...') ?>');
    $('billing-address-select') && billing.newAddress(!$('billing-address-select').value);

    var billingRegionUpdater = new RegionUpdater('billing:country_id', 'billing:region', 'billing:region_id', <?php echo $this->helper('directory')->getRegionJson() ?>, undefined, 'billing:postcode');
//]]>
</script>

Reference

  1. Replace $ with jQuery
  • I have added the code. What change do I need to made? – E.B Jul 31 '17 at 10:15
  • What code are you added ? you just have to compare with of the base/default one like it explained in my answer – PЯINCƏ Jul 31 '17 at 10:18
  • I haven't added any code. The above code is the the content in the phtml file. – E.B Jul 31 '17 at 10:23
  • The files in base/default and rwd/default is the same. – E.B Jul 31 '17 at 10:25
  • and you are using rwd/default theme – PЯINCƏ Jul 31 '17 at 10:26

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.