To help facilitate the ability to enter custom screens as part of a purchase flow, we have introduced a feature called Spark Plugs. This feature allows customers to display one or more Lightning Components at given inflection points been pre-determined by Fonteva. 

Spark Plug Points

Here is a list of the inflection points that Spark Plugs can be added:

  1. On click of Add To Cart on Item Detail page
  2. On load of the Shopping Cart
  3. On load of the Checkout page
  4. On load of the Invoice Payment page
  5. On load of the Payment Confirmation page

Spark Plug Configuration

Now that we have listed the places you can extend the application, let's dive into how to extend it. We have shipped two new Custom Metadata Types (CMT). One is to outline the extension points and the other is to list the components to display in each extension point.

The Spark Plug Extension Point CMT cannot be modified as it is managed records.

The Spark Plug Extension is the CMT where all customizations will be entered. You can provide one or more Lightning Components under this CMT for each extension point. Let's go into detail on it:


  1. Label: The unique Label.
  2. Spark Plug Extension Name: The extension name, which is the API name.
  3. Spark Plug Extension Point: The lookup to the extension point that needs to be extended (see Table Below).
  4. Execution Order: The display order of components. You can chain multiple Lightning Components on one extension point.
  5. Extension Point Enabled?: Determines if the extension is enabled.
  6. Lightning Component: The Lightning Component to display. Only provide the name of the component, and do not provide the name namespace.
Spark Plug Extension PointExample Data passed in via SparkPlugComponentInterface
Load_Checkout{ salesOrder: 'a01...' }
Load_Invoice_Payment{ salesOrder: 'a01...' }
Load_Payment_Confirmation
{
  name: '00124...',
  total: '12.00',
  currencyISOCode: 'USD',
  url: 'https://...',
  type: // Invoice/Sales Order/Proforma Invoice/Receipt
}
CODE
Load_Shopping_Cart
{ 
  id: 'a01...', // SalesOrder Id
  total: 123.45,
  isMultiCurrencyOrg: bool,
  currencyISOCode: 'USD',
  events: [], // event objects that are in the order
  subscriptions: [], // subscription objects that are in the order
  others: [], // other lines in the order
  hasInstallments: bool
}  
CODE
On_Click_Add_to_Order
{
  salesOrderId: 'a01...',
  itemId: 'a10...',
  solId: 'a02...',
  hasAssignments: bool,
  hasForms: bool,
  hasAdditionalItems: bool,
  salesOrder: {} // SalesOrder object
}
CODE

Component Example

To make sure the component you develop works in the Spark Plug container, you must implement the interface FDService:SparkPlugComponentInterface. 

The FDService:SparkPlugComponentInterface will provide the following information to the extending component automatically:

  1. extensionPoint : This string attribute will allow your component to know which extension point was loaded

  2. data : This JS object will provide information pertinent to the extension point.

    1. For example, when you go to Checkout and on load the Spark is loaded, this will have the entire Sales Order, Gateway, etc. as its data. 

The component needs to be global as well. Any component that implements this interface needs to register the following two events:

  1. FDService:SparkPlugCompleteEvent : This event should be fired when the action in the component is complete. For example, when the user submits the form. This event will let the container know that this component is complete to either show the next component in the list or destroy the Spark Plug container.
  2. FDService:SparkPlugLoadedEvent : This event should be fired when the custom component is loaded so that the loader can be hidden and there are no blank screens.

Below is a full code example of a component:

Extension.cmp

<aura:component implements="FDService:SparkPlugComponentInterface" access="global">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:registerEvent type="FDService:SparkPlugCompleteEvent" name="SparkPlugCompleteEvent"/>
    <aura:registerEvent type="FDService:SparkPlugLoadedEvent" name="SparkPlugLoadedEvent"/>
     Spark Plug!!
	<lightning:button variant="brand" label="Submit" onclick="{! c.handleClick }" />
</aura:component>
XML

ExtensionController.js

({
    doInit : function(component, event, helper) {
        var compEvent = $A.get('e.FDService:SparkPlugLoadedEvent');
        compEvent.setParams({extensionPoint : component.get('v.extensionPoint')});
        compEvent.fire();
	},
	handleClick : function(component, event, helper) {
        var compEvent = $A.get('e.FDService:SparkPlugCompleteEvent');
        compEvent.setParams({extensionPoint : component.get('v.extensionPoint')});
        compEvent.fire();
	}
})
JS

The extending component does not need to be aware if there are more components to show or not. The container will take care of that for you as long as the above events are fired.