Review Invite
Note on shared code sample:
To prevent the code examples from getting long, we will replace code from the previous sections with 3 dots thus "..." and show only code from the current section.
You will however be able to view the Complete code here
Complete code (baselayer.js)
Click to view
const EVENTS = window.eventsLib.EVENTS
const dispatchAction = window.eventsLib.dispatchAction
const registerEvents = window.eventsLib.registerEvents
const sendingNotification = (event, message, status) => {
dispatchAction({
action: EVENTS.NOTIFICATION,
payload: {
event,
message,
status,
type: 'save'
},
})
}
let credentials = { clientId: '', clientSecret: '' }
const storeDetails = [
{
id: 'shop-7e52920a-2722-4881-9908-ecec98c716e4',
name: 'Shop 1',
url: 'shop1.example.com',
locale: 'de-DE'
},
{
id: 'shop-1e570f63-10f8-4d5a-ae18-21d3d933eb93',
name: 'Trustsurance',
url: 'shop2.example.com',
locale: 'fr-FR'
},
]
const widgetLocations = [
{
id: 'wdg-loc-pn',
name: 'Product Title',
},
{
id: 'wdg-loc-ft',
name: 'Footer',
},
{
id: 'wdg-loc-hp',
name: 'Home Page',
},
]
const productIdentifiers = [
{ id: 'data-sku', name: 'SKU' },
{ id: 'data-gtin', name: 'GTIN' },
{ id: 'data-mpn', name: 'MPN' },
]
const baseLayer = () => {
registerEvents({
[EVENTS.GET_INFORMATION_OF_SYSTEM]: () => {
console.log('GET_INFORMATION_OF_SYSTEM')
dispatchAction({
action: EVENTS.SET_INFORMATION_OF_SYSTEM,
payload: {
nameOfSystem: 'eCommercPlatformName',
versionNumberOfSystem: 'v-0.0.1',
versionNumberOfPlugin: 'v-0.0.1',
allowsEstimatedDeliveryDate: true,
allowsEventsByOrderStatus: true,
allowsSendReviewInvitesForPreviousOrders: true,
allowsSendReviewInvitesForProduct: true,
},
})
},
[EVENTS.GET_LOCALE]: () => {
dispatchAction({
action: EVENTS.SET_LOCALE,
payload: 'en-GB', // de-DE , en-EN, es-ES, fr-FR , it-IT , nl-NL , pl-PL , pt-PT
})
},
[EVENTS.ERROR]: () => {
console.log('eventError', error)
},
[EVENTS.SAVE_CREDENTIALS]: (event) => {
try {
console.log('SAVE_CREDENTIALS')
sessionStorage.setItem('credentials', JSON.stringify(event.payload))
setTimeout(() => {
sendingNotification(EVENTS.SAVE_CREDENTIALS, 'CREDENTIALS SAVED', 'success')
}, 400)
} catch (error) {
setTimeout(() => {
sendingNotification(EVENTS.SAVE_CREDENTIALS, 'CREDENTIALS NOT SAVED', 'error')
}, 400)
}
},
[EVENTS.GET_CREDENTIALS_PROVIDED]: () => {
console.log('GET_CREDENTIALS_PROVIDED')
const savedCredentials = sessionStorage.getItem('credentials')
console.log(savedCredentials, "credentials");
setTimeout(() => {
dispatchAction({
action: EVENTS.SET_CREDENTIALS_PROVIDED,
payload: savedCredentials ? JSON.parse(savedCredentials) : credentials,
})
}, 400)
},
[EVENTS.GET_SALES_CHANNELS_PROVIDED]: () => {
console.log('EVENTS.SET_SALES_CHANNELS_PROVIDED');
setTimeout(() => {
dispatchAction({
action: EVENTS.SET_SALES_CHANNELS_PROVIDED,
payload: storeDetails,
})
}, 1000)
},
[EVENTS.GET_MAPPED_CHANNELS]: () => {
console.log('GET_MAPPED_CHANNELS')
const savedMappedChannels = sessionStorage.getItem('mappedChannelsData')
setTimeout(() => {
dispatchAction({
action: EVENTS.SET_MAPPED_CHANNELS,
payload: savedMappedChannels ? JSON.parse(savedMappedChannels) : []
})
}, 400)
},
[EVENTS.SAVE_MAPPED_CHANNEL]: (event) => {
console.log('SAVE_MAPPED_CHANNEL', event.payload)
sessionStorage.setItem('mappedChannelsData', JSON.stringify(event.payload))
try {
setTimeout(() => {
dispatchAction({
action: EVENTS.SET_MAPPED_CHANNELS,
payload: event.payload,
})
sendingNotification(EVENTS.SET_MAPPED_CHANNELS, 'MAPPED CHANNELS SAVED', 'success')
}, 2000)
} catch (error) {
setTimeout(() => {
sendingNotification(EVENTS.SET_MAPPED_CHANNELS, 'MAPPED CHANNELS NOT SAVED', 'error')
}, 400)
}
},
[EVENTS.GET_TRUSTBADGE_CONFIGURATION_PROVIDED]: (event) => {
console.log('GET_TRUSTBADGE_CONFIGURATION_PROVIDED', event.payload)
const shopId = event.payload.salesChannelRef
const TBData = sessionStorage.getItem('trustBadge-' + shopId)
setTimeout(() => {
dispatchAction({
action: EVENTS.SET_TRUSTBADGE_CONFIGURATION_PROVIDED,
payload: (TBData) ? JSON.parse(TBData) : [],
})
}, 400)
},
[EVENTS.SAVE_TRUSTBADGE_CONFIGURATION]: (event) => {
console.log('SAVE_TRUSTBADGE_CONFIGURATION', event.payload)
const shopId = event.payload.salesChannelRef
sessionStorage.setItem('trustBadge-' + shopId, JSON.stringify(event.payload))
try {
setTimeout(() => {
dispatchAction({
action: EVENTS.SET_TRUSTBADGE_CONFIGURATION_PROVIDED,
payload: event.payload,
})
sendingNotification(
EVENTS.SAVE_TRUSTBADGE_CONFIGURATION,
'TRUSTBADGE CONFIGURATION SAVED',
'success'
)
}, 3000)
} catch (error) {
setTimeout(() => {
sendingNotification(
EVENTS.SAVE_TRUSTBADGE_CONFIGURATION,
'TRUSTBADGE CONFIGURATION NOT SAVED',
'error'
)
}, 400)
}
},
[EVENTS.GET_LOCATION_FOR_WIDGET]: () => {
console.log('GET_LOCATION_FOR_WIDGET')
dispatchAction({
action: EVENTS.SET_LOCATION_FOR_WIDGET,
payload: widgetLocations,
})
},
[EVENTS.GET_AVAILABLE_PRODUCT_IDENTIFIERS]: (event) => {
console.log('GET_AVAILABLE_PRODUCT_IDENTIFIERS', event.payload.salesChannelRef)
dispatchAction({
action: EVENTS.SET_AVAILABLE_PRODUCT_IDENTIFIERS,
payload: productIdentifiers,
})
},
[EVENTS.GET_WIDGET_PROVIDED]: (event) => {
console.log('GET_WIDGET_PROVIDED')
const shopId = event.payload.salesChannelRef
const widgetsData = sessionStorage.getItem('widgets-' + shopId)
setTimeout(() => {
dispatchAction({
action: EVENTS.SET_WIDGET_PROVIDED,
payload: (widgetsData) ? JSON.parse(widgetsData) : { children: [] },
})
}, 3000)
},
[EVENTS.SAVE_WIDGET_CHANGES]: (event) => {
try {
console.log('SAVE_WIDGET_CHANGES')
const shopId = event.payload.salesChannelRef
sessionStorage.setItem('widgets-' + shopId, JSON.stringify(event.payload))
setTimeout(() => {
dispatchAction({
action: EVENTS.SET_WIDGET_PROVIDED,
payload: event.payload,
})
sendingNotification(EVENTS.SAVE_WIDGET_CHANGES, 'WIDGET SAVED', 'success')
}, 3000)
} catch (error) {
setTimeout(() => {
sendingNotification(EVENTS.SAVE_WIDGET_CHANGES, 'WIDGET NOT SAVED', 'error')
}, 400)
}
},
[EVENTS.GET_PRODUCT_REVIEW_FOR_CHANNEL]: (event) => {
console.log('GET_PRODUCT_REVIEW_FOR_CHANNEL', event.payload)
const shopId = event.payload.salesChannelRef
const productReviewData = sessionStorage.getItem('productReviewData-' + shopId)
setTimeout(() => {
dispatchAction({
action: EVENTS.SET_PRODUCT_REVIEW_FOR_CHANNEL,
payload: (productReviewData) ? JSON.parse(productReviewData) : null
})
}, 400)
},
[EVENTS.ACTIVATE_PRODUCT_REVIEW_FOR_CHANNEL]: (event) => {
try {
console.log('ACTIVATE_PRODUCT_REVIEW_FOR_CHANNEL', event.payload)
const shopId = event.payload.salesChannelRef
sessionStorage.setItem('productReviewData-' + shopId, JSON.stringify(event.payload))
setTimeout(() => {
dispatchAction({
action: EVENTS.SET_PRODUCT_REVIEW_FOR_CHANNEL,
payload: event.payload,
})
sendingNotification(
EVENTS.ACTIVATE_PRODUCT_REVIEW_FOR_CHANNEL,
'PRODUCT REVIEW FOR CHANNEL ACTIVATED',
'success'
)
}, 400)
} catch (error) {
setTimeout(() => {
sendingNotification(
EVENTS.ACTIVATE_PRODUCT_REVIEW_FOR_CHANNEL,
'PRODUCT REVIEW FOR CHANNEL NOT ACTIVATED',
'error'
)
}, 400)
}
},
[EVENTS.DEACTIVATE_PRODUCT_REVIEW_FOR_CHANNEL]: (event) => {
try {
console.log('DEACTIVATE_PRODUCT_REVIEW_FOR_CHANNEL', event.payload)
const shopId = event.payload.salesChannelRef
sessionStorage.removeItem('productReviewData-' + shopId)
setTimeout(() => {
dispatchAction({
action: EVENTS.SET_PRODUCT_REVIEW_FOR_CHANNEL,
payload: null,
})
sendingNotification(
EVENTS.DEACTIVATE_PRODUCT_REVIEW_FOR_CHANNEL,
'PRODUCT REVIEW FOR CHANNEL DEACTIVATED',
'success'
)
}, 400)
} catch (error) {
setTimeout(() => {
sendingNotification(
EVENTS.DEACTIVATE_PRODUCT_REVIEW_FOR_CHANNEL,
'PRODUCT REVIEW FOR CHANNEL NOT DEACTIVATED',
'error'
)
}, 400)
}
},
[EVENTS.GET_USE_ESTIMATED_DELIVERY_DATE_FOR_CHANNEL]: (event) => {
console.log('GET_USE_ESTIMATED_DELIVERY_DATE_FOR_CHANNEL', event)
const shopId = event.payload.salesChannelRef
const storedPayload = sessionStorage.getItem('useEstimatedDeliveryDateForChannel-' + shopId)
setTimeout(() => {
dispatchAction({
action: EVENTS.SET_USE_ESTIMATED_DELIVERY_DATE_FOR_CHANNEL,
payload: (storedPayload) ? JSON.parse(storedPayload) : {},
})
}, 400)
},
[EVENTS.SAVE_USE_ESTIMATED_DELIVERY_DATE_FOR_CHANNEL]: (event) => {
try {
console.log('SAVE_USE_ESTIMATED_DELIVERY_DATE_FOR_CHANNEL', event.payload)
const shopId = event.payload.salesChannelRef
sessionStorage.setItem('useEstimatedDeliveryDateForChannel-' + shopId, JSON.stringify(event.payload))
setTimeout(() => {
dispatchAction({
action: EVENTS.SET_USE_ESTIMATED_DELIVERY_DATE_FOR_CHANNEL,
payload: event.payload,
})
sendingNotification(
EVENTS.SAVE_USE_ESTIMATED_DELIVERY_DATE_FOR_CHANNEL,
'USE ESTIMATED DELIVERY DATE FOR CHANNEL SAVED',
'success',
'save'
)
}, 400)
} catch (error) {
setTimeout(() => {
sendingNotification(
EVENTS.DEACTIVATE_PRODUCT_REVIEW_FOR_CHANNEL,
'USE ESTIMATED DELIVERY DATE FOR CHANNEL NOT SAVED',
'error',
'save'
)
}, 400)
}
},
[EVENTS.GET_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL]: (event) => {
console.log('GET_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL')
const shopId = event.payload.salesChannelRef
const storedPayload = sessionStorage.getItem('useEventsByOrderStatusForChannel-' + shopId)
setTimeout(() => {
dispatchAction({
action: EVENTS.SET_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL,
payload: (storedPayload) ? JSON.parse(storedPayload) : {},
})
}, 400)
},
[EVENTS.SAVE_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL]: (event) => {
SET_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL = event.payload.active
try {
console.log('SAVE_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL', event.payload)
const shopId = event.payload.salesChannelRef
sessionStorage.setItem('useEventsByOrderStatusForChannel-' + shopId, JSON.stringify(event.payload))
setTimeout(() => {
dispatchAction({
action: EVENTS.SET_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL,
payload: event.payload,
})
sendingNotification(
EVENTS.SAVE_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL,
'USE EVENTS BY ORDER FOR CHANNEL SAVED',
'success',
'save'
)
}, 400)
} catch (error) {
setTimeout(() => {
sendingNotification(
EVENTS.SAVE_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL,
'USE EVENTS BY ORDER FOR CHANNEL NOT SAVED',
'error',
'save'
)
}, 400)
}
},
[EVENTS.EXPORT_PREVIOUS_ORDER]: (event) => {
console.log('EXPORT_PREVIOUS_ORDER', event.payload)
setTimeout(() => {
const link = document.createElement('a')
link.download = `./invite_list.csv`
const blob = new Blob(
['email; reference; productName; productSku; productUrl; productImageUrl',
'\n',
'[email protected]; 101912; demo product; 234; shop.com/productName; shop.com/image/productName'],
{ type: 'data:text/csv;charset=utf-8,' })
link.href = URL.createObjectURL(blob)
link.click()
URL.revokeObjectURL(link.href)
dispatchAction({
action: EVENTS.SET_EXPORT_PREVIOUS_ORDER,
payload: event.payload,
})
}, 400)
},
})
}
baseLayer()
What is an invite?
In this section, we take a look at the Review Invites tab.
In other, for a shop owner to collect reviews from their customers, a review invite must first be sent to the customer.
In this section, we will look at how to set up the dashboard to enable shop owners to configure their invite settings from within their e-commerce platform.
Enabling different parts of the review tab
The Review tab is divided into different sections as shown in the screenshot above.
To enable them we will need to expand the [GET_INFORMATION_OF_SYSTEM] which we created in initial baseLayer code
[EVENTS.GET_INFORMATION_OF_SYSTEM]: () => {
console.log('GET_INFORMATION_OF_SYSTEM')
dispatchAction({
action: EVENTS.SET_INFORMATION_OF_SYSTEM,
payload: {
nameOfSystem: 'eCommercPlatformName',
versionNumberOfSystem: 'v-0.0.1',
versionNumberOfPlugin: 'v-0.0.1',
allowsEstimatedDeliveryDate: true,
allowsEventsByOrderStatus: true,
allowsSendReviewInvitesForPreviousOrders: true,
allowsSendReviewInvitesForProduct: true
},
})
},
Now we have added three new attributes to our payload:
- allowsEstimatedDeliveryDate: This will cause the section labeled 2 to show.
- allowsEventsByOrderStatus: This will cause the section labeled 2 to show.
- allowsSendReviewInvitesForPreviousOrders: This will cause the section labeled 3 to show.
- allowsSendReviewInvitesForProduct: This will cause the section labeled 1 to show (Thus completely hidden from the user).
Product review collection
Shop owners who already have product review collection as an extra feature can collect customer feedback for a particular product right on their shopfront.
From the dashboard, the shop owner has the option to enable or disable this feature at any time (labeled 1 in the diagram above).
...
[EVENTS.ACTIVATE_PRODUCT_REVIEW_FOR_CHANNEL]: (event) => { //line 2
try {
console.log('ACTIVATE_PRODUCT_REVIEW_FOR_CHANNEL', event.payload)
const shopId = event.payload.salesChannelRef
sessionStorage.setItem('productReviewData-' + shopId, JSON.stringify(event.payload))
setTimeout(() => {
dispatchAction({
action: EVENTS.SET_PRODUCT_REVIEW_FOR_CHANNEL,
payload: event.payload,
})
sendingNotification(
EVENTS.ACTIVATE_PRODUCT_REVIEW_FOR_CHANNEL,
'PRODUCT REVIEW FOR CHANNEL ACTIVATED',
'success'
)
}, 400)
} catch (error) {
setTimeout(() => {
sendingNotification(
EVENTS.ACTIVATE_PRODUCT_REVIEW_FOR_CHANNEL,
'PRODUCT REVIEW FOR CHANNEL NOT ACTIVATED',
'error'
)
}, 400)
}
},
[EVENTS.DEACTIVATE_PRODUCT_REVIEW_FOR_CHANNEL]: (event) => {
try {
console.log('DEACTIVATE_PRODUCT_REVIEW_FOR_CHANNEL', event.payload)
const shopId = event.payload.salesChannelRef
sessionStorage.removeItem('productReviewData-' + shopId)
setTimeout(() => {
dispatchAction({
action: EVENTS.SET_PRODUCT_REVIEW_FOR_CHANNEL,
payload: null,
})
sendingNotification(
EVENTS.DEACTIVATE_PRODUCT_REVIEW_FOR_CHANNEL,
'PRODUCT REVIEW FOR CHANNEL DEACTIVATED',
'success'
)
}, 400)
} catch (error) {
setTimeout(() => {
sendingNotification(
EVENTS.DEACTIVATE_PRODUCT_REVIEW_FOR_CHANNEL,
'PRODUCT REVIEW FOR CHANNEL NOT DEACTIVATED',
'error'
)
}, 400)
}
},
...
Whenever the shop owner toggles the activation button, one of the two above event handlers is fired. In the case of an active toggle, the [ACTIVATE_PRODUCT_REVIEW_FOR_CHANNEL] event handler (line 2) is fired. Here, we store the returned activation payload to the DB i.e.: event.payload.
In step 4 of the integration we looked at the TrustBadge, collecting product reviews is a part of the Trustbadge.
To activate this you will have to add specific HTML elements bearing the details of the products you will like to collect reviews for. There is a help centre article that better describes the structure of the HTML elements to embed.
You can then implement logic that adds or omits the HTML components from the shopfront depending on whether you have data in the DB based on the shop owner's toggle choice. Thus:
if($toggleStateFromDB) {
// Display product review html elements
}
Invite timing
Shop owners can decide on the timing option to use to send out invites (labeled 2 and 3 in the diagram above). This is broadly broken down into three(3) types:
- Using the timing as set on eTrusted Control Centre (Default)
- Using the Estimated Delivery Date. For this option to work properly please ensure that the checkout Div element is implemented.
- order status is set to "Shipped" . With this option, you will need to create an event using our APIs.
Lets now look at how to allow users to select one of these options in code:
...
[EVENTS.GET_USE_ESTIMATED_DELIVERY_DATE_FOR_CHANNEL]: (event) => {
console.log('GET_USE_ESTIMATED_DELIVERY_DATE_FOR_CHANNEL', event)
const shopId = event.payload.salesChannelRef
const storedPayload = sessionStorage.getItem('useEstimatedDeliveryDateForChannel-' + shopId)
setTimeout(() => {
dispatchAction({
action: EVENTS.SET_USE_ESTIMATED_DELIVERY_DATE_FOR_CHANNEL,
payload: (storedPayload) ? JSON.parse(storedPayload) : {},
})
}, 400)
},
[EVENTS.SAVE_USE_ESTIMATED_DELIVERY_DATE_FOR_CHANNEL]: (event) => {
try {
console.log('SAVE_USE_ESTIMATED_DELIVERY_DATE_FOR_CHANNEL', event.payload)
const shopId = event.payload.salesChannelRef
sessionStorage.setItem('useEstimatedDeliveryDateForChannel-' + shopId, JSON.stringify(event.payload))
setTimeout(() => {
dispatchAction({
action: EVENTS.SET_USE_ESTIMATED_DELIVERY_DATE_FOR_CHANNEL,
payload: event.payload,
})
sendingNotification(
EVENTS.SAVE_USE_ESTIMATED_DELIVERY_DATE_FOR_CHANNEL,
'USE ESTIMATED DELIVERY DATE FOR CHANNEL SAVED',
'success',
'save'
)
}, 400)
} catch (error) {
setTimeout(() => {
sendingNotification(
EVENTS.SAVE_USE_ESTIMATED_DELIVERY_DATE_FOR_CHANNEL,
'USE ESTIMATED DELIVERY DATE FOR CHANNEL NOT SAVED',
'error',
'save'
)
}, 400)
}
},
[EVENTS.GET_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL]: (event) => {
console.log('GET_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL')
const shopId = event.payload.salesChannelRef
const storedPayload = sessionStorage.getItem('useEventsByOrderStatusForChannel-' + shopId)
setTimeout(() => {
dispatchAction({
action: EVENTS.SET_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL,
payload: (storedPayload) ? JSON.parse(storedPayload) : {},
})
}, 400)
},
[EVENTS.SAVE_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL]: (event) => {
SET_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL = event.payload.active
try {
console.log('SAVE_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL', event.payload)
const shopId = event.payload.salesChannelRef
sessionStorage.setItem('useEventsByOrderStatusForChannel-' + shopId, JSON.stringify(event.payload))
setTimeout(() => {
dispatchAction({
action: EVENTS.SET_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL,
payload: event.payload,
})
sendingNotification(
EVENTS.SAVE_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL,
'USE EVENTS BY ORDER FOR CHANNEL SAVED',
'success',
'save'
)
}, 400)
} catch (error) {
setTimeout(() => {
sendingNotification(
EVENTS.SAVE_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL,
'USE EVENTS BY ORDER FOR CHANNEL NOT SAVED',
'error',
'save'
)
}, 400)
}
},
...
Prior to the shop owner setting which timing option to use, the default will be the setting as found on the eTrusted Control Centre.
When a shop owner selects one of the other two options and hits "Save changes" either the [SAVE_USE_ESTIMATED_DELIVERY_DATE_FOR_CHANNEL] or [SAVE_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL] event handler is fired to save the owners choice to DB and also to dispatch [SET_USE_ESTIMATED_DELIVERY_DATE_FOR_CHANNEL] or [SET_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL] respectively to inform our systems on which timing option to use.
Once the timing option has been set, whenever the dashboard page is loaded the [GET_USE_ESTIMATED_DELIVERY_DATE_FOR_CHANNEL] and [GET_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL] event handlers will be fired, you can then check the DB to see if one of the options is set and dispatch [SET_USE_ESTIMATED_DELIVERY_DATE_FOR_CHANNEL] or [SET_USE_EVENTS_BY_ORDER_STATUS_FOR_CHANNEL] to set the dashboard to reflect the chosen option.
Creating and exporting an invite list
Shop owners can prepare an invite list using their order data from their e-commerce platform (labeled 4 in the diagram above).
From the dashboard, the owner can select how far back they will like to go in terms of orders placed in X number of days. From there they hit the "export" button to export the list in CSV format.
They will then import this list to the eTrusted Control Centre to send out invites.
To handle this in code, you will use the [EXPORT_PREVIOUS_ORDER] event handler which is fired when the shop owner hits the "export" button, the event.payload.numberOfDays attribute contains how far back in days to export.
The code below prepares a sample CSV data to be exported, you can modify this example and fill it out with real order data from the DB.
Also, read the CSV structure help article to learn about the different data elements you can have.
...
[EVENTS.EXPORT_PREVIOUS_ORDER]: (event) => {
console.log('EXPORT_PREVIOUS_ORDER', event.payload)
setTimeout(() => {
const link = document.createElement('a')
link.download = `./invite_list.csv`
const blob = new Blob(
['email; reference; productName; productSku; productUrl; productImageUrl',
'\n',
'[email protected]; 101912; demo product; 234; shop.com/productName; shop.com/image/productName'],
{ type: 'data:text/csv;charset=utf-8,' })
link.href = URL.createObjectURL(blob)
link.click()
URL.revokeObjectURL(link.href)
dispatchAction({
action: EVENTS.SET_EXPORT_PREVIOUS_ORDER,
payload: event.payload,
})
}, 400)
},
...
Demo app reference
Below are the reference points if you are following along using the demo app
What's next?
We are almost through with the integration, in the next section, we will look at how shop owners can reset and reconfigure their setup if they need to.
Updated 11 days ago