How to Make Gift Message Input Fields Required on Checkout Page in Magento 1.8

checkoutmagento-1.8onepage-checkoutonestepcheckout

How can I make the input fields in the gift message compulsory/ required on the checkout page?

By Magento's default, you don't have to fill in these fields below, but I need to make it required if the checkbox of id="allow_gift_messages_for_order" is checked.

To
From
Message

This is the code,

<div class="allow-gift-messages-for-order-container" id="allow-gift-messages-for-order-container" style="display:none">
    <p class="micro-text-cart"><?php echo $this->__('You can leave this box blank if you do not wish to add a gift message for whole order.') ?></p>
    <input type="hidden" name="giftmessage[<?php echo $this->getEntity()->getId() ?>][type]"  value="quote" />
    <div class="form-group">
        <ul>
            <li class="fields">

                <div class="form-group col-lg-6 field control-group name-lastname">
                    <label for="gift-message-whole-from"><?php echo $this->__('From') ?></label>
                    <div class="input-box">
                        <input type="text" name="giftmessage[<?php echo $this->getEntity()->getId() ?>][from]" id="gift-message-whole-from" title="<?php echo $this->__('From') ?>"  value="<?php echo $this->getEscaped($this->getMessage()->getSender(), $this->getDefaultFrom()) ?>" class="input-text validation-passed form-control" />
                    </div>
                </div>

                <div class="form-group col-lg-6 field control-group">
                    <label for="gift-message-whole-to"><?php echo $this->__('To') ?></label>
                    <div class="input-box">
                        <input type="text" name="giftmessage[<?php echo $this->getEntity()->getId() ?>][to]" id="gift-message-whole-to" title="<?php echo $this->__('To') ?>" value="<?php echo $this->getEscaped($this->getMessage()->getRecipient(), $this->getDefaultTo()) ?>" class="input-text validation-passed form-control" />
                    </div>
                </div>

            </li>
            <li class="wide">
                <div class="form-group">
                    <label for="gift-message-whole-message"><?php echo $this->__('Message') ?></label>
                    <div class="input-box">
                        <textarea id="gift-message-whole-message" onchange="toogleRequired('gift-message-whole-message', ['gift-message-whole-from','gift-message-whole-to'])" class="input-text validation-passed giftmessage-area form-control" name="giftmessage[<?php echo $this->getEntity()->getId() ?>][message]" title="<?php echo $this->__('Message') ?>" rows="5" cols="10"><?php echo $this->getEscaped($this->getMessage()->getMessage()) ?></textarea>
                    </div>
                </div>

            </li>
        </ul>
    </div>

    <script type="text/javascript">
    //<![CDATA[
        toogleRequired('gift-message-whole-message', ['gift-message-whole-from','gift-message-whole-to']);
    //]]>
    </script>
</div>

EDIT:

<form name="my-custom-form" id="my-custom-form" action="" method="post">
<div class="form-group">
    <ul>
        <li class="fields">

            <div class="form-group col-lg-6 field control-group name-lastname">
                <label for="gift-message-whole-from" class="required"><em>*</em><?php echo $this->__('From') ?></label>
                <div class="input-box">
                    <input type="text" name="giftmessage[<?php echo $this->getEntity()->getId() ?>][from]" id="gift-message-whole-from" title="<?php echo $this->__('From') ?>"  value="<?php echo $this->getEscaped($this->getMessage()->getSender(), $this->getDefaultFrom()) ?>" class="input-text required-entry form-control" />
                </div>
            </div>

            <div class="form-group col-lg-6 field control-group">
                <label for="gift-message-whole-to" class="required"><em>*</em><?php echo $this->__('To') ?></label>
                <div class="input-box">
                    <input type="text" name="giftmessage[<?php echo $this->getEntity()->getId() ?>][to]" id="gift-message-whole-to" title="<?php echo $this->__('To') ?>" value="<?php echo $this->getEscaped($this->getMessage()->getRecipient(), $this->getDefaultTo()) ?>" class="input-text required-entry form-control" />
                </div>
            </div>

        </li>
        <li class="wide">
            <div class="form-group">
                <label for="gift-message-whole-message"><em>*</em><?php echo $this->__('Message') ?></label>
                <div class="input-box">
                    <textarea id="gift-message-whole-message" onchange="toogleRequired('gift-message-whole-message', ['gift-message-whole-from','gift-message-whole-to'])" class="input-text required-entry giftmessage-area form-control" name="giftmessage[<?php echo $this->getEntity()->getId() ?>][message]" title="<?php echo $this->__('Message') ?>" rows="5" cols="10"><?php echo $this->getEscaped($this->getMessage()->getMessage()) ?></textarea>
                </div>
            </div>

        </li>
    </ul>
</div>
</form>

<script type="text/javascript">
//<![CDATA[
    toogleRequired('gift-message-whole-message', ['gift-message-whole-from','gift-message-whole-to']);
//]]>
</script>

<script type="text/javascript">
    //< ![CDATA[
        var customForm = new VarienForm('my-custom-form');
    //]]>
</script>

EDIT:

I got it solved! Need to edit the checkout.js in IWD OPC extension actually,

....
....

initSaveOrder: function(){

            $j(document).on('click', '.opc-btn-checkout', function(){
                if (IWD.OPC.Checkout.disabledSave==true){
                    return;
                }
                var addressForm = new VarienForm('billing-new-address-form');
                if (!addressForm.validator.validate()){             
                    return;
                }

                console.log($j('input[name="allow_gift_messages_for_order"]').prop('checked'));
                if ($j('input[name="allow_gift_messages_for_order"]').prop('checked') === true){
                    var giftForm = new VarienForm('gift-message-form');
                    if (!giftForm.validator.validate()){                
                        return;
                    }
                }

                if (!$j('input[name="billing[use_for_shipping]"]').prop('checked')){
                    var addressForm = new VarienForm('opc-address-form-shipping');
                    if (!addressForm.validator.validate()){             
                        return;
                    }
                }

                IWD.OPC.saveOrderStatus = true;
                IWD.OPC.Plugin.dispatch('saveOrderBefore');
                if (IWD.OPC.Checkout.isVirtual===false){
                    IWD.OPC.Shipping.saveShippingMethod();
                }else{
                    IWD.OPC.validatePayment();
                }
            });

    },
  ...
  ...

inline.html,

<div class="form-group" id="gift-message-form">
                        <ul>
                            <li class="fields">

                                <div class="form-group col-lg-6 field control-group name-lastname">
                                    <label for="gift-message-whole-from" class="required"><em>*</em><?php echo $this->__('From') ?></label>
                                    <div class="input-box">
                                        <input type="text" name="giftmessage[<?php echo $this->getEntity()->getId() ?>][from]" id="gift-message-whole-from" title="<?php echo $this->__('From') ?>"  value="<?php echo $this->getEscaped($this->getMessage()->getSender(), $this->getDefaultFrom()) ?>" class="input-text required-entry form-control" />
                                    </div>
                                </div>

                                <div class="form-group col-lg-6 field control-group">
                                    <label for="gift-message-whole-to" class="required"><em>*</em><?php echo $this->__('To') ?></label>
                                    <div class="input-box">
                                        <input type="text" name="giftmessage[<?php echo $this->getEntity()->getId() ?>][to]" id="gift-message-whole-to" title="<?php echo $this->__('To') ?>" value="<?php echo $this->getEscaped($this->getMessage()->getRecipient(), $this->getDefaultTo()) ?>" class="input-text required-entry form-control" />
                                    </div>
                                </div>

                            </li>
                            <li class="wide">
                                <div class="form-group">
                                    <label for="gift-message-whole-message" class="required"><em>*</em><?php echo $this->__('Message') ?></label>
                                    <div class="input-box">
                                        <textarea id="gift-message-whole-message" onchange="toogleRequired('gift-message-whole-message', ['gift-message-whole-from','gift-message-whole-to'])" class="input-text required-entry giftmessage-area form-control" name="giftmessage[<?php echo $this->getEntity()->getId() ?>][message]" title="<?php echo $this->__('Message') ?>" rows="5" cols="10"><?php echo $this->getEscaped($this->getMessage()->getMessage()) ?></textarea>
                                    </div>
                                </div>

                            </li>
                        </ul>
                    </div>

Best Answer

<form action="" method="post" id="someid">
<input type="checkbox" class="required-entry" />
<div class="actions">
                <button type="submit" title="Subscribe" class="button"><span><span>Sign Up</span></span></button>
            </div>
</form>
<script type="text/javascript">
    //<![CDATA[
        var FormDetail = new VarienForm('someid');
    //]]>
    </script>

i have gave you sample code in sample format. for validation to work.it should have a form and some id to it. and last it should have the script tag as shown in the code

Related Solutions

Magento 1.8 Onepage Checkout – How to Do Onestep Checkout for Checkout Page

The billing and shipping step can be directly included via the layout XML but contents for shipping, payment and review step need to be loaded with javascript.

Basically you will need to write a javascript function that tries to get the shipment and payment methods whenever the address fields are changed (at least country, region and postcode).

Then you will need to create your own extension that handles the AJAX call from your javascript to retrieve all possible shipping/payment methods based on the address data entered by the user.

Honestly it will probably be cheaper to buy a solution like Firecheckout than to build it yourself. It can be quite complicated.

Magento2 – How to Wrap Multiple Elements in a Class in Checkout Form

Very interesting question. Let me answer the last assumption about the Checkout implementation. It might be over-engineered a bit since you have to add more than just 1 change in 1 file.

The approach does not require performing modifications in the Magento 2 core modules.

In order to achieve your goal and wrap checkout shipping address fields into a custom element the following elements should be added:

Custom checkout_index_index.xml file with the new UI Component definition
New HTML template with custom element
Layout Processor plugin
The di.xml declaration for the new plugin

The Custom_Checkout\view\frontend\layout\checkout_index_index.xml file:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
    <referenceBlock name="checkout.root">
        <arguments>
            <argument name="jsLayout" xsi:type="array">
                <item name="components" xsi:type="array">
                    <item name="checkout" xsi:type="array">
                        <item name="children" xsi:type="array">
                            <item name="steps" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="shipping-step" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="shippingAddress" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="shipping-address-fieldset" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="custom-field-group" xsi:type="array">
                                                                <item name="component" xsi:type="string">uiComponent</item>
                                                                <item name="sortOrder" xsi:type="string">0</item>
                                                                <item name="template" xsi:type="string">Custom_Checkout/checkout/field-group</item>
                                                                <item name="children" xsi:type="array">
                                                                    <item name="field-group" xsi:type="array">
                                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                                        <item name="displayArea" xsi:type="string">field-group</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>

In the layout, we should add new custom-field-group UI Component. The component has its own template Custom_Checkout\view\web\template\checkout\field-group.html where all fields are rendered. Also, the custom-field-group component has "0" value for sortOrder node. It allows rendering the component before all fields declared as part of the shipping-address-fieldset component.

Also, there is a field-group UI Component with its own displayArea setting.

The Custom_Checkout\view\web\template\checkout\field-group.html template file:

<div class="custom">
<!-- ko foreach: getRegion('field-group') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>

The template allows rendering all components added into the field-group region (also known as displayArea).

The Custom\Checkout\Plugin\AddressLayoutProcessor class file:

namespace Custom\Checkout\Plugin;

use Magento\Checkout\Block\Checkout\LayoutProcessor;

/**
 * Class AddressLayoutProcessor
 */
class AddressLayoutProcessor
{
    /**
     * @param LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(LayoutProcessor $subject, array $jsLayout)
    {
        $fieldGroup = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']
            ['children']['custom-field-group']['children']['field-group']['children'];

        $shippingAddressFields = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']['children'];

        $fieldGroup['country_id'] = $shippingAddressFields['country_id'];
        $fieldGroup['postcode'] = $shippingAddressFields['postcode'];

        $shippingAddressFields['country_id']['visible'] = false;
        $shippingAddressFields['postcode']['visible'] = false;

        return $jsLayout;
    }
}

The class is responsible for copying both country_id and postcode fields configurations into the newly created custom-field-group component.

The fields, once assigned to the custom-field-group should be marked as hidden (visible = true) in order to avoid duplication during rendering. The componentDisabled should not be used for disabling country_id and postcode due to other dependencies (e.g. region.js file) and shipping address processing mechanism.

The Custom\Checkout\etc\frontend\di.xml file:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="customFieldGroupPlugin" type="Custom\Checkout\Plugin\AddressLayoutProcessor"/>
    </type>
</config>

The plugin approach used for the fields changes because fields should be copied with complete configuration. In case Layout Processor declared in a custom module the plugin will catch changes.

As a result, both the country_id and the postcode fields are rendered in the shipping address form and wrapped into the custom element as it below (I added few styles for the custom CSS class to make stand out in the form):

If you also would like to do modifications to a billing address form, the Custom\Checkout\Plugin\AddressLayoutProcessor class should be updated. All you have to do is to perform same manipulations with billing address for specific payment method as we have for shipping address fields.

Happy to help!

Best Answer

Related Solutions

Magento 1.8 Onepage Checkout – How to Do Onestep Checkout for Checkout Page

Magento2 – How to Wrap Multiple Elements in a Class in Checkout Form

Related Topic