웹 구성요소에 CPQ UI 포함 CPQ
웹 구성 요소를 사용하면 CPQ iframe을 사용하지 않고 웹 페이지에 Logik UI를 포함할 수 있습니다. 구성요소의 UI는 테마와 호환되므로 사용자가 UI의 모양을 쉽게 편집할 수 있습니다.
CPQ 웹 구성요소를 사용하면 사용자가 iframe 없이 웹 페이지에 직접 UI를 CPQ 포함할 수 있습니다. 웹 구성요소의 UI는 테마와 호환되므로 사용자가 UI의 모양을 쉽게 편집할 수 있습니다.
웹 구성 요소를 사용하려면 다음이 있어야 합니다.
- 배포된 Blueprint와 연결된 구성 가능한 제품
- CPQ 대상 URL을 원본으로 포함하는 런타임 토큰 GCP 속성에 허용 목록에 지정된 웹 사이트 URL
페이지의 상황별 정보(예: 페이지 URL의 SKU)는 최소한의 커스터마이제이션으로 웹 구성 요소에서 액세스할 수 있습니다. 웹 구성요소는 다음 작업도 수행합니다.
- iframe을 사용하여 Logik UI를 포함할 필요가 없으므로 iframe에 내재된 보안 제한 및 문제를 방지할 수 있습니다.
- 페이지의 어느 곳에서나 수신할 수 있는 네이티브 HTML 이벤트를 디스패치합니다.
- 통합 복잡성을 줄입니다. 예를 들어 웹 구성요소는 UI 표시 및 구성을 위한 API 호출을 오케스트레이션합니다
- 페이지에서 직접 HTML에 액세스하여 사이트의 Logik에 대한 통제 기능을 강화하여 상위 페이지와 보다 원활하게 통합합니다.
- 사용자 지정 테마와 호환 가능
웹 구성요소 포함 CPQ
웹 구성요소는 HTML을 추가할 수 있는 모든 페이지에 추가할 수 있습니다. 웹 구성요소를 초기화하는 데 필요한 유일한 필드는 URL, 런타임 토큰 및 구성 가능한 제품 ID입니다.
예제
다음 샘플 코드에는 웹 구성 요소의 작동 방식에 대한 자세한 정보를 제공하는 주석이 포함되어 있으며 참조할 수 있는 예제를 제공합니다.
컨테이너에 쉽게 추가하거나 구성요소를 포함할 수 있는 최소한의 코드가 포함되어 있습니다. 제품 ID를 수동으로 입력해야 합니다.
<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>다음 샘플 코드는 전체 페이지 예제를 나타냅니다. 이를 통해 사용자는 쉽게 여러 매개변수를 전달하고 페이지에서 제품 ID를 읽을 수 있습니다.
<!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>