SwissUpLabs Logo

Use Cases

Add to the Order Email

In order to display delivery date and time in order emails, follow next steps:

  1. Go to Marketing > Communications > Email Templates
  2. Press Add New Template button
  3. Select New Order for Guest template, and press Load Template button
  4. Add the following code into Template Content field:

    {{block class="Swissup\DeliveryDate\Block\View" area="frontend" template="Swissup_DeliveryDate::email/order/view.phtml" order=$order}}
    
  5. Press Save Template button
  6. Go to Stores > Configuration > Sales > Sales Emails > Order, select this template for New Order Confirmation Template for Guest option and save config
  7. Repeat the same steps for New Order for Registered Customer template.

Add to the Success Page

Use module Checkout Success Page module to show delivery date at success page.

  1. Make sure Checkout Success page is enabled. Go to Stores > Configuration > Swissup Checkout > Success Page and check option ‘Enabled’ in ‘General’ section.
  2. Go to section ‘Page Layout’. Drag Delivery Date block from ‘Blocks available on Success Page’ and drop at ‘Layout of Success Page’ in place where you want to see delivery date.
  3. Save config or use Save and Start Preview button to check how success page looks after update.

Localize calendar

Default calendar language in Delivery Date module is English. If you need to change language then you have to do a little bit of coding.

Example below will work perfectly with FireCheckout module. In this example I will change calendar language to Dutch.

  1. Go to FireCheckout config Custom CSS and JS section.
  2. Insert code below into “Custom JS” field:

    require([
        'jquery',
        'jquery/ui',
    ], function ($) {
    var datepicker = $.datepicker;
    
    datepicker.regional.myLang = {
        closeText: "Sluiten",
        prevText: "",
        nextText: "",
        currentText: "Vandaag",
        monthNames: [ "januari", "februari", "maart", "april", "mei", "juni",
        "juli", "augustus", "september", "oktober", "november", "december" ],
        monthNamesShort: [ "jan", "feb", "mrt", "apr", "mei", "jun",
        "jul", "aug", "sep", "okt", "nov", "dec" ],
        dayNames: [ "zondag", "maandag", "dinsdag", "woensdag", "donderdag", "vrijdag", "zaterdag" ],
        dayNamesShort: [ "zon", "maa", "din", "woe", "don", "vri", "zat" ],
        dayNamesMin: [ "zo", "ma", "di", "wo", "do", "vr", "za" ],
        weekHeader: "Wk",
        dateFormat: "dd-mm-yy",
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: "" };
    datepicker.setDefaults( datepicker.regional.myLang );
    });
    
  3. Save config. Clear Magento cache. Check FireCheckout at frontend.

Languages localization you can find at https://github.com/jquery/jquery-ui/tree/master/ui/i18n.

I won’t deep dive into explanation how to apply other localization. You only need to get datepicker.regional.myLang initialization. If you don’t like some translations - feel free to change them. Or if you can’t find your language you can make localization by yourself.

Edit this Page