Here's what callouts
field looks like today:
{
"callouts": [
{
"type": "rue30ShippingUpsell",
"icon": "truck",
"message": "Place an order today, then ship free for 30 days"
},
{
"type": "rue30ManyDaysLeft",
"icon": "truck",
"message": "You have %d days left of FREE shipping"
},
{
"type": "rue30LastDay",
"icon": "truck",
"message": "You have 1 day left of FREE shipping"
},
{
"type": "rue365FreeShipping",
"icon": "truck",
"message": "Free Shipping is all yours"
},
{
"type": "internationalExcluded",
"icon": "truck",
"message": "Ships to the U.S."
},
{
"type": "domesticReturns",
"icon": "arrow",
"message": "This item has an extended holiday return period. All items purchased now through September 30 can be returned through January 15."
},
{
"type": "internationalReturns",
"icon": "arrow",
"message": "Discounted shipping & returns are available in select countries"
}
]
}
The client uses data about the member to determine which of these callouts to show:
It chooses one of these four based on the member's shipping program benefits and whether the member is shopping internationally:
- rue30ShippingUpsell
- rue30ManyDaysLeft
- rue30LastDay
- rue365FreeShipping
- internationalExcluded
Client chooses one of these two based on whether the member is shopping internationally:
- domesticReturns
- internationalReturns
further, domesticReturns
's message varies depending on whether the product is Final Sale and whether we're in the Extended Returns window.
Instead of splitting business logic between the API and the client, we can have the API do all the thinking and have it simply tell the client which things to display and exactly what to display with them:
Ex 1
{
"calloutBlocks": [
{
"name": "shippingMessage",
"icon": "truck",
"message": "Place an order today, then ship free for 30 days"
},
{
"name": "returnsMessage",
"icon": "arrow",
"message": "This item has an extended holiday return period. All items purchased now through September 30 can be returned through January 15."
},
]
}
Ex 2
{
"calloutBlocks": [
{
"name": "shippingMessage",
"icon": "truck",
"message": "Ships to the U.S."
},
{
"name": "returnsMessage",
"icon": "arrow",
"message": "Discounted shipping & returns are available in select countries"
},
]
}
No matter how many things determine which messages to show and what content should be in each, the API alone is responsible for making the determination. The client needs only know which types to look for and for each type:
- Where to render it on the screen
- How to format the content (font, size, icons, bold font, brand coloring, etc.)
We may want to roll our GFH messaging into the callouts
or calloutBlocks
(or whatever we call it) field, so we'd have something like:
Ex 3
{
"calloutBlocks": [
{
"name": "shippingMessage",
"icon": "truck",
"message": "Ships to the U.S."
},
{
"name": "gfhMessage",
"icon": "gift",
"message": "This item is guaranteed to ship in time for Christmas"
},
{
"name": "returnsMessage",
"icon": "arrow",
"message": "Discounted shipping & returns are available in select countries"
},
]
}
and when GFH is not applicable to the product, that gfhMessage
block would simply not be there.