Intégration de l’interface CPQ utilisateur au CPQ composant Web
En utilisant le CPQ composant Web, vous pouvez intégrer l’interface utilisateur Logik dans une page Web sans utiliser d’iframe. Étant donné que l’interface utilisateur du composant est compatible avec les thèmes, les utilisateurs peuvent facilement modifier l’apparence de l’interface utilisateur.
Le CPQ composant Web permet à un utilisateur d’intégrer l’interface CPQ utilisateur directement à une page Web sans iframe. L’interface utilisateur du composant Web est compatible avec les thèmes pour permettre aux utilisateurs de modifier facilement l’apparence de l’interface utilisateur.
Pour utiliser le composant Web, vous devez disposer des éléments suivants :
- Produit configurable associé à un plan déployé
- Jeton CPQ d’exécution qui inclut l’URL de destination comme URL du site Web d’origine mise sur liste blanche dans les propriétés GCP
Les informations contextuelles sur la page (telles qu’un SKU dans l’URL de la page) sont accessibles au composant Web avec une personnalisation minimale. Le composant Web :
- Supprime la nécessité d’utiliser un iframe pour intégrer Logik UI, évitant ainsi les restrictions de sécurité et les problèmes inhérents aux iframes
- Répartit les événements HTML natifs qui peuvent être écoutés partout sur une page
- Réduit la complexité de l’intégration ; par exemple, son composant Web orchestre les appels d’API pour l’affichage et la configuration de l’interface utilisateur
- Offre un meilleur contrôle sur Logik sur votre site avec un accès au HTML directement sur la page, s’intégrant de manière plus transparente à la page parente
- Est compatible avec les thèmes personnalisés
Intégration du CPQ composant Web
Le composant Web peut être ajouté à n’importe quelle page contenant du code HTML. Les seuls champs requis pour initialiser le composant Web sont l’URL, le jeton d’exécution et l’ID de produit configurable.
Exemple
L’exemple de code suivant inclut des commentaires pour fournir plus de détails sur le fonctionnement du composant Web et fournit des exemples à titre de référence.
Il comprend un minimum de code qui peut être facilement ajouté à un conteneur ou à des composants intégrés. Un ID de produit doit être saisi manuellement.
<script
src="https://TENANT.SECTOR.logik.io/ui/wc-build/logik-wc.es.js"
type="module"
></script>
<logik-ui
runtime-token="RUNTIME_TOKEN"
tenant-api-url="TENANT.SECTOR.logik.io"
product-id="PRODUCT_ID"
>
</logik-ui>L’exemple de code suivant représente un exemple en pleine page. Il permet à l’utilisateur de transmettre facilement plusieurs paramètres et de lire un identifiant de produit à partir de la page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Web Component Sandbox</title>
<script
type="module"
src="https://renderdraw02.demo01.logik.io/ui/wc-build/logik-wc.es.js"
></script>
</head>
<body>
<logik-ui></logik-ui>
<script>
// Type Definitions
/**
* @typedef {Object} BomProduct
* @property {string} id - Product identifier
* @property {number} price - Unit price of the product
* @property {number} quantity - Quantity of the product
* @property {('SALES'|'MANUFACTURING')} bomType - Type of BOM
* @property {string} type - Product type (e.g., 'accessory')
* @property {number} rollUpPrice - Rolled up price including child products
* @property {number} extPrice - Extended price (price * quantity)
* @property {number} level - Hierarchy level in the BOM structure
* @property {{ selected: boolean, disabled: boolean }} selection - Selection state
* @property {number} extList - Extended list price
* @property {number} list - List price
* @property {string} displayName - Display name of the product
* @property {string|null} parentProduct - ID of parent product if nested
*/
/**
* @typedef {Object} BomData
* @property {{
* products: Array<BomProduct>,
* total: number,
* totalPages: number,
* totalItems: number,
* errorMessage: string|null,
* incompletePricing: boolean
* }} newProducts - Updated products in the BOM
*/
/**
* @typedef {Object} LogikConfigurationData
* @property {string} configurationId - The unique identifier for the configuration
* @property {string} productId - The product identifier
* @property {Object} fields - The current state of all fields in the configuration
* @property {BomData} [bomData] - Bill of Materials data (only present in BOM events)
* @property {Object} [quoteData] - Quote data (only present in Quote events)
*/
/**
* @typedef {Object} QuoteData
* @property {Object} quote - Quote-specific data
* @property {string} quote.SBQQ__PricebookId__c - Pricebook identifier
* @property {string} quote.LGK__QueriedEditAccess__c - Edit access status
* @property {Object} product - Configured product data
* @property {string} product.configuredProductId - ID of the configured product
* @property {Object} product.configurationAttributes - Configuration attributes
* @property {string} product.configurationAttributes.LGK__Logik_Id__c - Logik configuration ID
* @property {Object} product.configurationAttributes.LGK__Configuration_Data__c - Configuration data
* @property {Array} product.configurationAttributes.LGK__Configuration_Data__c.items - Configuration items
* @property {Object} product.optionConfiguration - Option configuration data
* @property {Array} product.optionConfiguration.Dynamic - Dynamic option configurations
*/
// Configuration
const logikUrl = 'https://renderdraw02.demo01.logik.io';
const runtimeToken = 'YIFFI0dluM7ULhibRGR2GB_3F2npxSn_Zw';
const productId = '01t8c00000RzlKoAAJ';
const fields = [
{ variableName: 'exampleBooleanField', value: true },
{
variableName: 'exampleArrayField',
value: ['alpha', 'delta', 'beta'],
},
{ variableName: 'exampleStringField', value: 'left' },
{ variableName: 'exampleNumberField', value: 21 },
];
/**
* Initializes the Logik UI web component with the specified configuration parameters.
* @param {string} productId - The unique identifier for the product. This is a configurable product id in the logik Admin
* @param {string} runtimeToken - The authentication token for runtime access. This can be created in the logik Admin under Runtime Clients. The token must have include an origin matching the url of the page that is hosting the web component.
* @param {string} tenantApiUrl - This should be set to the url of your logik tenant. eg https://example.demo01.logik.io
* @param {string} [assetURL] - Optional URL for asset resources. If provided, sets the asset-url attribute. Defaults to the provided tenantApiUrl. You will most likely not need to set this.
* @param {Array<{
* variableName: string,
* value: string | number | boolean | Array<string>
* }>} [fields] - A list of field values to set in the initial state of the configuration.
* @returns {void}
*/
function initLogikUI(productId, runtimeToken, tenantApiUrl, assetURL, fields) {
const logikuiEl = document.querySelector('logik-ui');
logikuiEl.setAttribute('product-id', productId);
logikuiEl.setAttribute('runtime-token', runtimeToken);
logikuiEl.setAttribute('tenant-api-url', tenantApiUrl);
if (assetURL) {
logikuiEl.setAttribute('asset-url', assetURL);
}
if (fields) {
logikuiEl.setAttribute('fields', JSON.stringify(fields));
}
}
// Initialize the component
initLogikUI(productId, runtimeToken, logikUrl, false, fields);
// Event Listeners
/**
* Event fired when the user cancels the configuration. After this event is received,
* the configuration will be terminated and the logik-ui component should be unmounted.
* @event logik-ui:cancel
* @type {CustomEvent}
* @property {Object} detail - An empty object indicating the configuration was cancelled
*/
window.addEventListener('logik-ui:cancel', function (event) {
console.log('Cancel event received', event);
});
/**
* Event fired when the user generates a quote. After this event is received,
* the configuration will be terminated and the logik-ui component should be unmounted.
* @event logik-ui:quote
* @type {CustomEvent}
* @property {Object} detail - The event details
* @property {QuoteData} detail.data - The quote data
*/
window.addEventListener('logik-ui:quote', function (event) {
console.log('Quote event received', event);
});
/**
* Event fired when the BOM changes during configuration
* @event logik-ui:bom
* @type {CustomEvent}
* @property {Object} detail - The event details
* @property {LogikConfigurationData} detail.data - The configuration data with BOM information
*/
window.addEventListener('logik-ui:bom', function (event) {
console.log('BOM event received', event);
});
</script>
</body>
</html>