Incorporar o. CPQ IU com CPQ Componente da web
Usando o. CPQ Componente web, você pode incorporar a IU Logik em uma página da web sem usar um iframe. Como a IU do componente é compatível com temas, os usuários podem editar facilmente a aparência da IU.
. CPQ O componente da web permite que um usuário incorpore o. CPQ IU diretamente para uma página da web sem um iframe. A IU do componente Web é compatível com temas para permitir que os usuários editem facilmente a aparência da IU.
Para usar o componente web, você deve ter:
- Um produto configurável associado a um blueprint implantado
- R CPQ Token de tempo de execução que inclui o URL de destino como o URL do site de origem na lista de permissões nas propriedades do GCP
As informações contextuais na página (como um SKU no URL da página) podem ser acessadas pelo componente da Web com personalização mínima. O componente web também:
- Elimina a necessidade de usar um iframe para incorporar a IU Logik, evitando restrições de segurança e problemas inerentes aos iFrames
- Envia eventos HTML nativos que podem ser ouvidos em qualquer lugar em uma página
- Reduz a complexidade da integração; por exemplo, seu componente Web orquestra chamadas de API para exibição e configuração de IU
- Fornece maior controle sobre Logik em seu site com acesso ao HTML diretamente na página, integrando-se mais perfeitamente com a página primária
- É compatível com temas personalizados
Incorporar o. CPQ Componente da web
O componente web pode ser adicionado a qualquer página em que você possa adicionar HTML. Os únicos campos obrigatórios para inicializar o componente web são o URL, o token de tempo de execução e o ID do produto configurável.
Exemplo
O código de exemplo a seguir inclui comentários para fornecer mais detalhes sobre como o componente da Web funciona e fornece exemplos para referência.
Ele inclui código mínimo que pode ser facilmente adicionado a um contêiner ou incorporar componentes. Um ID de produto deve ser inserido manualmente.
<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>O código de exemplo a seguir representa um exemplo de página inteira. Ele permite que o usuário passe facilmente vários parâmetros e leia um ID de produto na página.
<!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>