Picture of Iframe | Design Job

Iframe | Design Job

For real-time reference and debugging, please check the GitHub implementation.

The API Request creates a link to embed the editor in an iframe. This link automatically authenticates the user and is only valid for a short period. It requires the Customer GUID and the Product ID.

You can specify several parameters in the request:

  • id: This is the Customer GUID.

  • productId OR SKU: This represents the Infigo Product ID or the product SKU.

  • errorUrl (optional): Redirects the user in case of authentication errors.

  • embeddedOperationMode: Set this to "true" when embedding MegaEdit; otherwise, you can omit this parameter.

The response will return a URL containing a temporary AutoLogin token, which should be inserted into your iframe's src.

To capture specific events that occur in the editor, you must include our JavaScript library on your iframe's parent page (see resources). This library allows you to capture events, such as the 'Add to basket' click event. When this event occurs, you need to capture the Job ID included in the event data, as it is required later in the order placement process to ensure the correct output is generated.

You can also extend the integration to allow for editing existing jobs (either from the basket or saved projects). To do this, pass the ID as the orderlineItemId parameter. If you need to support saved projects, you can capture and handle the 'Save project' event in the editor through the JavaScript communicator library, storing the ID and directing the customer to their account.

Sample request:

{{HostURL}}/services/api/Editor/LinkFor?id={{CustomerGUID}}&productId={{ProductId}}&embeddedMode=false&embeddedOperationMode=true
 

For more details on the required parameters and how to construct the request effectively, refer to the implementation in the getEditorLinkFor file on GitHub.

Important:
To achieve proper iframe integration, you will need to utilize the

Incomplete
XD

The Infigo Iframe Communicator facilitates communication between the iframe containing the editor and the parent page. This allows for seamless interaction and event handling between the editor and the hosting application.

CatfishEditorCommunication Object

The CatfishEditorCommunication object serves as a wrapper between the Infigo Iframe and your application, handling communication and data parsing between these two systems; it essentially acts as a bridge. In the Iframe demo app, you can see the Communicator.Attach, which demonstrates how to pass data and utilize the XD and Communicator library.

The CatfishEditorCommunication object provides methods and constants for communicating with the editor iframe. Ensure you pass the correct Infigo Origin URL to the RegisterForCatfishEditorEvent method to listen for messages from the editor.

MessageConstants

The MessageConstants property contains predefined constants for different types of messages that can be sent or received between the iframe and the parent page. These constants include:

  • InfigoItemAddedToBasket: Indicates that an item has been added to the basket by Infigo.

  • InfigoItemAddedToSavedProjects: Indicates that an item has been added to saved projects by Infigo.

  • EditorLoaded: Indicates that the editor has been loaded.

  • ExternalDataUpdate: Indicates that external data has been updated.

  • Cancel: Indicates a cancellation event.

  • Unknown: Indicates an unknown or unsupported message.

  • ExternalDataUpdate: Event that can be used to pass information from the Merchant into the ME scripting.

RegisterForCatfishEditorEvent(callback, source_origin)

This method registers a callback function to handle editor events. It listens for messages sent from the editor iframe and triggers the appropriate callback based on the received message.

  • callback: The function to be called when an editor event occurs.

  • source_origin: The origin of the messages to listen for.

PostMessage(messageId, data, target_url, target)

This method sends a message to the editor iframe.

  • messageId: The identifier for the message.

  • data: The data to be sent with the message.

  • target_url: The URL of the target iframe.

  • target: The target window of the message.

Usage

To utilize the Infigo Iframe Communicator, follow these steps:

  1. Include the provided JavaScript file in your project.

  2. Use the RegisterForCatfishEditorEvent method to register callback functions for handling editor events.

  3. Use the PostMessage method to send messages to the editor iframe when necessary.

Example

// Register callback for editor events
CatfishEditorCommunication.RegisterForCatfishEditorEvent(function (eventType, eventData) {
    // Handle editor event
    console.log("Received event:", eventType, "Data:", eventData);
}, "https://example.com");

// Register iframe for keyboard interaction
CatfishEditorCommunication.RegisterForKeyboardInteraction("editorIframe", "https://editor.example.com");
 
 
Communicator

The Infigo Iframe Communicator facilitates communication between the iframe containing the editor and the parent page. This allows for seamless interaction and event handling between the editor and the hosting application.

CatfishEditorCommunication Object

The CatfishEditorCommunication object serves as a wrapper between the Infigo Iframe and your application, handling communication and data parsing between these two systems; it essentially acts as a bridge. In the Iframe demo app, you can see the Communicator.Attach, which demonstrates how to pass data and utilize the XD and Communicator library.

The CatfishEditorCommunication object provides methods and constants for communicating with the editor iframe. Ensure you pass the correct Infigo Origin URL to the RegisterForCatfishEditorEvent method to listen for messages from the editor.

MessageConstants

The MessageConstants property contains predefined constants for different types of messages that can be sent or received between the iframe and the parent page. These constants include:

  • InfigoItemAddedToBasket: Indicates that an item has been added to the basket by Infigo.

  • InfigoItemAddedToSavedProjects: Indicates that an item has been added to saved projects by Infigo.

  • EditorLoaded: Indicates that the editor has been loaded.

  • ExternalDataUpdate: Indicates that external data has been updated.

  • Cancel: Indicates a cancellation event.

  • Unknown: Indicates an unknown or unsupported message.

  • ExternalDataUpdate: Event that can be used to pass information from the Merchant into the ME scripting.

RegisterForCatfishEditorEvent(callback, source_origin)

This method registers a callback function to handle editor events. It listens for messages sent from the editor iframe and triggers the appropriate callback based on the received message.

  • callback: The function to be called when an editor event occurs.

  • source_origin: The origin of the messages to listen for.

PostMessage(messageId, data, target_url, target)

This method sends a message to the editor iframe.

  • messageId: The identifier for the message.

  • data: The data to be sent with the message.

  • target_url: The URL of the target iframe.

  • target: The target window of the message.

Usage

To utilize the Infigo Iframe Communicator, follow these steps:

  1. Include the provided JavaScript file in your project.

  2. Use the RegisterForCatfishEditorEvent method to register callback functions for handling editor events.

  3. Use the PostMessage method to send messages to the editor iframe when necessary.

Example

// Register callback for editor events
CatfishEditorCommunication.RegisterForCatfishEditorEvent(function (eventType, eventData) {
    // Handle editor event
    console.log("Received event:", eventType, "Data:", eventData);
}, "https://example.com");

// Register iframe for keyboard interaction
CatfishEditorCommunication.RegisterForKeyboardInteraction("editorIframe", "https://editor.example.com");
 
 
Keyboard Interaction

For reference, check the code.

The provided code snippet includes functionality for handling keyboard events within an iframe, particularly for detecting the opening and closing of the virtual keyboard on mobile devices. Below is an analysis of the relevant code:

onKeyboardToggle Function

This function detects changes in the dimensions of the visual viewport, typically occurring when the virtual keyboard is opened or closed on mobile devices. It registers an event listener for the resize event on the visualViewport object.

  • Parameters:

    • iframeId: The ID of the iframe element containing the editor.

    • targetUrl: The URL of the target iframe.

    • defaultKeyboardSize: (Optional) The default height of the keyboard. If not provided, a default minimum height of 300 pixels is used.

  • Functionality:

    • Retrieves the iframe element based on the provided iframeId.

    • Listens for changes in the dimensions of the visual viewport using the resize event.

    • Determines whether the keyboard is open or closed by comparing the screen height with the visual viewport height.

    • Constructs a message object containing information about the action (keyboard open or closed) and the dimensions of the visual viewport.

    • Sends the constructed message to the target iframe using XD.postMessage.

XD.postMessage Function

This function sends messages to the target iframe using the window.postMessage method if supported by the browser, or through a hash fragment if not.

  • Parameters:

    • message: The message to be sent.

    • target_url: The URL of the target iframe.

    • target: (Optional) The target window for the message. Defaults to the parent window.

  • Functionality:

    • If the target_url is provided and the browser supports window.postMessage, the message is sent directly to the target iframe using window.postMessage.

    • If the browser does not support window.postMessage, the message is sent using a hash fragment in the URL of the target iframe.

Usage

To utilize the keyboard interaction functionality:

  1. Call the XD.documentEvents.onKeyboardToggle function, passing the ID of the iframe containing the editor and the target URL.

  2. The function will automatically detect changes in the visual viewport dimensions and send messages to the target iframe indicating whether the keyboard is open or closed.

This functionality is useful for applications that require responsive handling of keyboard events, particularly in scenarios where user input is expected within an iframe, such as text input fields within an embedded editor.

Passing Information to and from Infigo

With the help of the communicator, you can easily send various types of information between your system and Infigo. This functionality is especially useful for transferring product details, customer information, or any other data that needs processing. Infigo can read different data types via a MegaEdit editor script, allowing you to update and manipulate Editor, Product, or Job data.

To receive events from Infigo in your external system, ensure that you add your system's origin to the InfigoSettings under "External Source Origin For Post Messages." For guidance, refer to the setup example available at Infigo Design. Your system's origin must match what you have configured; otherwise, Infigo will not trust external messages due to security measures. Currently, each storefront can only have one origin configured.

For a practical example, check the product page. This page demonstrates how to retrieve attributes from Infigo and build an iframe form in the demo app. Customers can select values, and once the editor triggers the Editor loaded event, this information is passed to Infigo through the communicator.

You will also need to add a ME script to Infigo. This script will catch the event data and update attributes and Invent variables in Infigo if they match the names. Additionally, the script shows how to handle changes in Invent variables within Infigo, allowing you to send the updated values back to your system via the communicator.

This setup provides a flexible solution for passing pricing, attribute selections, and other information back and forth between your system, the ME editor, and Infigo.

Retrieve Design Job Data

Once the user finalizes the design for their job, you can capture all the data linked to this job via the iframe communicator event Infigo.ItemAddedToBasket. Below is an example of the data structure that will be received:

{
  "Id": 3530,
  "Job": {
    "Id": "d3530",
    "Quantity": 1,
    "CustomName": null,
    "Attributes": [],
    "Canvas": "Integration Sample",
    "CanvasSize": "Integration Sample",
    "NumPages": 1,
    "OutputType": "Integration Sample",
    "SpineWidth": 0,
    "Weight": 0,
    "Stock": "Integration Sample White Stock",
    "Width": 289.28,
    "Height": 127.00,
    "IsDynamicSize": false,
    "Price": 0
  },
  "Customer": {
    "Id": 90703,
    "Email": "3f033a41-6f26-4e52-8dee-8b10df18b8d6@doesnotexist.com",
    "Guid": "3f033a41-6f26-4e52-8dee-8b10df18b8d6"
  },
  "Product": {
    "Name": "Integration Sample",
    "Sku": null,
    "ExternalIds": [],
    "ProductGroupName": null,
    "Id": 2042
  },
  "Images": {
    "Thumbnails": [
      "/iframe/CFE/GetJobFile?strGuid=cd2488c0-9f7d-41df-b4ca-e03ef4de2b2f&strFile=thumboutputpreview_0.png"
    ],
    "Previews": [
      "/iframe/CFE/GetJobFile?strGuid=cd2488c0-9f7d-41df-b4ca-e03ef4de2b2f&strFile=outputpreview_0.png"
    ]
  }
}
 

This data structure also includes thumbnails and previews of the job, which you can use to display the design created by the user.

You will need to store this data in your system and link it to a shopping cart item. When the order placement is finalized, you can pass this Job reference to Infigo to complete the order process.