<img src="abc.png" />
    
call to replace anchor tags contains '/admin' in href

How to add delivery date option on checkout?

Scenario

You want to add a delivery date option on the checkout so that your customers can select a date for delivery.

Example

Steps

To add delivery date option on checkout, you can enable calendar option on the checkout. For providing calendar on the checkout page, you need to add calendar widget. To do so, you are required Order Option form and then add the calendar widget to your store. Follow thebelow-mentionedsteps:

Creating Order Option form

  1. Go to Site Forms section in StoreHippo Admin Panel.
  2. Click on Add new to create the Order option form.
  3. Provide the name of the form as 'order_option'.
  4. In the order options form, create a field for delivery date.
  5. Enter label as 'Select Delivery Date' and name as 'select_delivery_date'.
  6. Select type as Widget.
  7. Click on the field settings icon next to type to edit the field. In the Widget field, enter the name of the widget (say "Calendar").
  8. Click on Save to save the form.

    Adding Widget

  9. Go to StoreHippo Design Theme.
  10. Go to HTML section and click on Show all widgets.
  11. Click on Add new widget.
  12. Add new store widget, name it as "calendar" (mentioned above), add thebelow-mentionedcode:

    Template:
    <div class="form-group" ng-init="dateOptions={changeYear:true,yearRange: '-50:+01',changeMonth: true,minDate:0,dateFormat:'dd/mm/yy'}; optionData[option.name].value=''">
    <div>
    <div ng-if="ms.cart.options.delievery_date">
    </div>
    <div ng-show="load_cal">
          Calendar Loading, Please Wait.  
    </div>
    <input type="text" min="{{today}}" ui-date="dateOptions" ng-change="getDateValue(optionData[option.name].value)" ng-model="optionData[option.name].value" class="form-control">​

    Controller:

    function ($rootScope, $scope , $timeout) {
        var formatDate = function (date) {
            var d = new Date(date),
                month = '' + (d.getMonth() + 1),
                day = '' + d.getDate(),
                year = d.getFullYear();
            if (month.length < 2) month = '0' + month;
            if (day.length < 2) day = '0' + day;
            return [year, month, day].join('-');
        }
        $rootScope.today = new Date();
        $rootScope.today = formatDate($rootScope.today);
        console.log('$rootScope.today===',$rootScope.today)
    
        $scope.load_cal = true;
        var get_status = function () {
            $timeout(function () {
                if ($scope.load_cal) {
                    if ($('input').hasClass('hasDatepicker')) {
                        $scope.load_cal = false
                    } else {
                        get_status();
                    }
                }
            }, 100)
        }
        get_status();
    }​
  13. Click on Save to save the widget.