How To Guides
Scheduled Pickup & Delivery
2. Installation & Configuration
5. Component Item & Template Changes
Overview
The scheduled pickup and delivery shipping module will allow a store to offer either local pickup or local delivery to the customers. The checkout experience will allow customers to select an available date and time slot to pick up their order (or get it delivered). Admin configuration settings give the merchant the ability to configure the rules for when pickups are available and how many per each timeslot.
System Requirements: Miva 9.14 or later.
Installation & Configuration
The pickup and delivery module is available to download for free from the Miva app store here: https://apps.miva.com/scheduled-pickup-delivery.html
Once downloaded, upload the module file to the store under Domain Settings -> Modules.
Once installed, go to Shipping Setting -> Add/Remove Modules, search for the Pickup and Delivery module and click install.
Once installed, you see a new tab under Shipping Settings for Pickup & Delivery
Shipping Method Settings
Multiple shipping methods can be added to the settings with each method representing a set of delivery/pickup rules which should be tied to a single location. If there are 3 physical locations, 3 different shipping methods with the location name in the method name to help identify it from other pickup methods will need to be set up.
Example:
Curbside Pickup — Carlsbad
Curbside Pickup — Del Mar
Curbside Pickup — Oceanside
Each shipping method has the following settings:
Enabled — Toggle to enable to disable the method
Code — Method Code
Name — Method Name
Advance Days — How many days in advance a customer can pick for pickup or delivery. Common examples would be 7, 14, 21, 30, etc.
Lead Time (minutes) — The number of minutes required before an order can be picked up. This is typically the time it will take to prep/package the order for pickup. For 2 days, it would be 2880 (60 * 24 * 2).
Slot Size — (minutes) This is how big of a window you want to offer customers. This value is defined in minutes. Common examples would be 60, 30, 15. For 60, the customers will see 1 hours blocks where they can choose to pick up their order.
Orders Per Slot — This setting will limit the number of customers who can choose a given timeslot. This should be based on the capacity for the number of orders that can fulfilled during that time window. For example, for a 60 min time slot size and the ability to fulfill 5 orders per hour, the value of 5 can be used here.
Start (hour) — The start time based on a 24-hour clock. For 8:00am the value would be 8 and for 5:00 pm the value would be 17.
End (hour) — The end time based on a 24-hour clock. For 8:00am the value would be 8 and for 5:00 pm the value would be 17.
Days of the Week — There is an individual active setting for each day of the week. Select which days to offer pickup/deliver for.
Cost — An optional setting to charge for delivery/pickup.
Zip Code Restrictions
To limit the pickup or delivery method to just certain local zip codes can be done by using Shipping Method Rules. Creating custom rules for when the method will appear can be added by editing the method after it has been created.
Component Item & Template Changes
When the module is installed a CSS file and JS file will be created under Miva JS/CSS Resources. These control the front-end experience for the customer. For default functionality, changes should not be needed in these files however, both are available to be modified as needed for any custom functionality or styling.
CSS
JavaScript
There is one required template change to enable to Calendar Picker to work during checkout. Upon installation an item is also created and assigned to the OSEL page:
A single line of code will need to be manually added to the OSEL page which will output the button to activate the date picker will appear. Typically, this would go below the shipping methods loop
The template for this item tag is available to edit as needed for advanced users:
This template controls the HTML behind the “Select Date/Time” Button.
Important: The JS for this module relies on the searchfield item being assigned to OSEL. If your site does not have this item assigned, it should be assigned to the OSEL page for the JS to work.
Checkout Experience
Once the module has been setup and the template changes completed, the new Pickup method will show alongside any other shipping method currently setup in the store.
When selected a new button will appear on the page to allow the customer to choose their date and time:
When the Select Date/Time button is clicked the calendar widget will be displayed.
Here the customer can see what days are available and then will be given a list of available timeslots.
Once selected, the date time will show to the customer
And the shipping method name will be updated to reflect the date/time picked:
Admin Experience
The pickup & delivery module can also be edited after an order is placed via the admin. This allows for Phone Orders to include the pickup/delivery shipping methods as well as modify a pickup date after the order has been placed.
Custom Emails
Some merchants may want to optionally setup a “Your Order is Ready for Pickup” email notification. This can be done by leveraging the existing Order Notification emails. Creating a copy of one of the emails then changing the subject and text and setting the email to manually trigger when the order is packed and ready to be picked up.
Provisioning
The following provisioning tags are supported:
Upgrading From 1.000
One of the bugs fixed in 1.001 fixes a JavaScript error (PD-12). If you are on version 1.000 and upgrade to 1.001 you need to manually make the following JS change.
Nagivate to User Interface -> CSS/JS Resources -> JS Resources -> pickupdelivery.js and edit line 807:
Replace it with the following code: