Customizing reschedule options in Affinity 2.0

📘
Note
This article applies to Affinity 2.0. If you use Affinity 1.0, see Using advanced configuration options with Affinity.

Merchants can allow customers to edit their upcoming order date by enabling the reschedule option in their customer portal control settings. Use the configuration script below to customize the quick delay frequency options and the dates available in the calendar.

📘
Platform

Shopify Checkout Integration

Migrated Shopify Checkout Integration

Before you start

You must be on the Recharge Plus or Custom pricing plan to make advanced customizations to the Affinity customer portal.

Add the configuration script

Affinity uses the window.RechargeExtensions global variable to incorporate reschedule configuration options. You must initialize this variable before assigning any configuration:

window.RechargeExtensions = window.RechargeExtensions || {};

If you do not initialize window.RechargeExtensions, your configuration script will not work and may cause errors in the customer portal.

Add the script in the Recharge merchant portal or directly within your Shopify theme.

Customize quick options and the calendar

Use the following script to control which quick delay options appear and which dates customers can select in the calendar:

<script>window.RechargeExtensions = window.RechargeExtensions || {};window.RechargeExtensions.reschedule = {  disableQuickOptions: false,  disableCalendar: false,  quickOptions: [    { frequency: 2, unit: 'week' },    { frequency: 4, unit: 'week' }  ],  calendar: {    enableDaysOfWeek: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],    enableDaysOfMonth: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],    enableMonthsOfTheYear: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]  }};</script>

Property	Description
`disableQuickOptions`	Set to `true` to hide the quick delay options.
`disableCalendar`	Set to `true` to hide the calendar.
`quickOptions`	Define the quick delay options customers can select. Each option requires a `frequency` (integer) and a `unit` (`day`, `week`, or `month`).
`calendar.enableDaysOfWeek`	List the days of the week customers can select in the calendar.
`calendar.enableDaysOfMonth`	List the days of the month customers can select in the calendar.
`calendar.enableMonthsOfTheYear`	List the months customers can select in the calendar.

Limit how far into the future a customer can reschedule

Add maxDaysInFuture or maxMonthsInFuture to the calendar object to limit the scheduling window available to customers and ensure fulfillment constraints are met. The value is an integer representing the maximum number of days or months a customer can reschedule into the future.

<script>
window.RechargeExtensions = window.RechargeExtensions || {};
window.RechargeExtensions.reschedule = {
  disableQuickOptions: false,
  disableCalendar: false,
  quickOptions: [
    { frequency: 2, unit: 'week' },
    { frequency: 4, unit: 'week' }
  ],
  calendar: {
    enableDaysOfWeek: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
    enableDaysOfMonth: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
    enableMonthsOfTheYear: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    maxDaysInFuture: 15
  }
};
</script>