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 Guesttemplate, and press Load Template button -
Add the following code into
Template Contentfield:{{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 Guestoption and save config - Repeat the same steps for
New Order for Registered Customertemplate.
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 Pageand check option ‘Enabled’ in ‘General’ section. - Go to section ‘Page Layout’. Drag
Delivery Dateblock 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 Previewbutton 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.