The Configurator iframe Component
1. Preparation & Options
The GoldLeaf hose assembly iframe configurator can be setup with the following options that can be passed to the iframe as url query parameters:
| Option | Url Query parameter | Listener (event.data.type) |
|---|---|---|
| Add to cart button | add_to_cart_button=true | addedToCart |
| Request quote button | request_quote_button=true | requestedQuote |
| Get PDF drawing | generate_pdf_button=true | generatedPdf |
2. Iframe Setup
Create an iframe on your site that points to: https://goldleaf.app/iframe/hoseassembly?security_token=<yourSecurityToken>&customer_id=<yourCustomerId>, (where customer_id is optional). It should listen for whichever event.data.type event is setup based on the options selected, as well as securityTokenExpired.
3. Query Parameters Summary:
These are all the query parameters that the GoldLeaf hose assembly configurator accepts:
| Query Parameter | Description |
|---|---|
| security_token | the returned token retrieved above |
| customer_id | the GoldLeaf customer’s id (24-character hex string) |
| add_to_cart_button | "true" to show this button |
| request_quote_button | "true" to show this button |
| generate_pdf_button | "true" to show this button |
| button_colour | a colour name or hex code (e.g. 'red' or '#FF0000') |
| button_color | a color name or hex code (e.g. 'red' or '#FF0000') |
| hide_pricing | "true" to hide all pricing in menus |
| hide_in_stock_only_button | "true" to hide the ability to show only in-stock items in menus |
4. Events
Events are emitted as a postMessage from the iframe to the parent window. Your application should listen for these postMessages and handle them appropriately.
4.1. securityTokenExpired
This indicates that the security token has expired (e.g. an active user session has exceeded an hour). Your site should be setup to listen for this event, generate a new security token from the API key, and update the url query parameter of the iframe component.
4.2. addedToCart
This indicates that a user has asked to add this hose assembly to your cart. This postMessage will include the data for the hose assembly that was added in json format (See below).
4.3. requestedQuote
This indicates that a user has asked to get a quote for this hose assembly. This postMessage will include the data for the hose assembly that was added in json format (See below).
4.4. generatedPdf
This indicates that the user has generated a pdf for this hose assembly. It is optional to listen for this event but could be useful for data tracking purposes or follow-ups.
5. Response Hose Assembly
The response from adding to cart or requesting a quote is the details of the hose assembly in json format. The details of this hose assembly are as follows:
// Response json object:
{
id, // the hose assembly id
customerOrgId, // the customer’s id
partNumber, // the hose assembly part number
revision, // the hose assembly revision
customerPartNumber, // the part number entered by the customer
customerRevision, // the revision entered by the customer
description, // the description of this hose assembly
hosePartNumber, // the standard GoldLeaf hose part number
end1PartNumber, // the standard GoldLeaf end 1 part number
end2PartNumber, // the standard GoldLeaf end 2 part number
ferrule1PartNumber, // the standard GoldLeaf ferrule 1 part number
ferrule2PartNumber, // the standard GoldLeaf ferrule 2 part number
wrapPartNumber, // the standard GoldLeaf wrap part number
hoseOrgPartNumber, // your part number for the hose
end1OrgPartNumber, // your part number for end 1
end2OrgPartNumber, // your part number for end 2
ferrule1OrgPartNumber, // your part number for ferrule 1
ferrule2OrgPartNumber, // your part number for ferrule 2
wrapOrgPartNumber, // your part number for the wrap
hose, // the hose id
end1, // the end 1 id
end2, // the end 2 id
ferrule1, // the ferrule 1 id
ferrule2, // the ferrule 2 id
wrap, // the wrap id
wrapStyle, // the wrap style (object)
length, // the hose length
lengthUnit, // the hose length unit of measure
orientation, // the orientation of the ends
}
If more details are required about the hose assembly, they can be fetched using the standard GoldLeaf API’s and an admin API key. Such examples are:
| Type | Endpoint | Notes |
|---|---|---|
| GET | /hoseassembly/:hoseAssemblyId | (includes full bill of materials with scrap) |
| POST | /hoseassembly/:hoseAssemblyId/getBillOfMaterials | (get just the bill of materials with scrap) |
| POST | /hoseassembly/:hoseAssemblyId/price | (can pass the params.customerId for customer specific) |
| POST | /hoseassembly/:hoseAssemblyId/release | (to ‘release’ this hose assembly) |
| POST | /hoseassembly/:hoseAssemblyId/datasheet | (body = { format: ‘pdf’, customerId: <customerId> } to fetch a pdf data sheet – customerId is optional) |
Full details are available in the Endpoints section of the API documentation.