Use Cases
Add to the Order Email
In order to display delivery date and time in order emails, follow next steps:
- Go to Marketing > Communications > Email Templates
- Press Add New Template button
- Select
New Order for Guest
template, and press Load Template button -
Add the following code into
Template Content
field:{{block class="Swissup\DeliveryDate\Block\View" area="frontend" template="Swissup_DeliveryDate::email/order/view.phtml" order_id=$order_id}}
- Press Save Template button
- Go to Stores > Configuration > Sales > Sales Emails > Order, select this
template for
New Order Confirmation Template for Guest
option and save config - 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.
- Make sure Checkout Success page is enabled. Go to
Stores
>Configuration
>Swissup Checkout
>Success Page
and check option ‘Enabled’ in ‘General’ section. - 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. - 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.
- Go to FireCheckout config Custom CSS and JS section.
-
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 ); });
- 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.