24/7 Support: 800.608.6482

How To Guides

Try our new AI assistant by clicking the chat icon in the lower right corner.

How To Guides

Scheduled Pickup & Delivery

1. Overview

2. Installation & Configuration

3. Shipping Method Settings

4. Zip Code Restrictions

5. Component Item & Template Changes

6. Checkout Experience

7. Admin Experience

8. Custom Emails

9. Provisioning

10. Upgrading From 1.000

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

Pickup & Delivery Settings

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.

Zip Code Restrictions

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

CSS Resources

JavaScript

JavAScript Resources

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:

Pickup & Delivery Item

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

Pickup & Delivery Item Template

The template for this item tag is available to edit as needed for advanced users:

Pickup & Delivery Item Template Code

This template controls the HTML behind the “Select Date/Time” Button.

Pickup & Delivery 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.

Pickup & Delivery Method

When selected a new button will appear on the page to allow the customer to choose their date and time:

Pickup & Delivery Method Selected

When the Select Date/Time button is clicked the calendar widget will be displayed.

Pickup & Delivery Method Displayed

Here the customer can see what days are available and then will be given a list of available timeslots.

Pickup & Delivery Calender

Once selected, the date time will show to the customer

Pickup & Delivery Time

And the shipping method name will be updated to reflect the date/time picked:

Pickup & Delivery Method Basket Display

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.

Pickup & Delivery Admin UX

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.

Pickup & Delivery Emails

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:


Looking for Developer Docs?

We have a whole section for that, including: Developer Training Series, Template Language docs, Module Development tutorials and much, much more.

Head to the Developer Section

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

Accept

Copyright © 1997 – 2024 Miva®, Miva Merchant®, MivaPay®, MivaCon®, Camp Miva®, Miva Connect®, Miva, Inc. All Rights Reserved.