前端产品库是一个存储服务，它使用本地缓存来获取产品信息，而无需向服务器提出额外请求。它所提供的产品信息对于优化小型超市、小部件和结账定制非常有用。
这篇文章包含了使用前端产品库时常见任务的代码样本。
The product data storage
前端产品库使用数据存储缓存的 product_data_storage 部分作为其数据源。这个部分负责保存客户访问产品页面时来自服务器的所有产品数据。
实例化存储库
下面的代码片段使用Magento_Catalog/js/product/storage/storage-service在数据存储缓存本身初始化时初始化资源库。
define([
'Magento_Catalog/js/product/storage/storage-service'
]), function(storage){
'use strict';
return {
...
identifiersConfig: {
namespace: 'product_data_storage'
},
productStorageConfig: {
namespace: 'product_data_storage',
customerDataProvider: 'product_data_storage',
className: 'DataStorage'
},
initIdsStorage: function(){
storage.onStorageInit(this.identifiersConfig.namespace, this.idsStorageHandler.bind(this));
return this;
},
idsStorageHandler: function(idsStorage){
this.productStorage = storage.createStorage(this.productStorageConfig);
},
...
}
}
使用repository
为产品库数据订阅一个回调函数，以便与最近服务器请求的缓存数据一起工作。
...
idsStorageHandler: function(idsStorage){
this.productStorage = storage.createStorage(this.productStorageConfig);
this.productStorage.data.subscribe(this.dataCollectionHandler.bind(this));
},
dataCollectionHandler: function(data){
//Code to handle the data
},
...
从服务器获取数据
Use the loadDataFromServer method from the data-storage class to get product data from a list of IDs.
...
idsStorageHandler: function(idsStorage, currency, storeId){
this.productStorage = storage.createStorage(this.productStorageConfig);
this.productStorage.data.subscribe(this.dataCollectionHandler.bind(this));
this.productStorage.loadDataFromServer(currency, storeId, idsStorage.get());
},
...
| PARAMETER | DESCRIPTION |
|---|---|
currency |
The currency data to get for the product |
store |
The ID of the store associated with the product |
ids |
An object that contains the list of IDs as keys |
Specify REST resource
Use the following REST endpoint to get product information:
/V1/products-render-info
For UI Components, add this information in the dataProvider entry inside your etc/view/frontend/ui_component/<ui-component-name>.xml file.
The following example is from the recently-viewed widget:
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="productStorageConfig" xsi:type="array">
<item name="namespace" xsi:type="string">product_data_storage</item>
<item name="className" xsi:type="string">DataStorage</item>
<item name="updateRequestConfig" xsi:type="array">
<item name="url" xsi:type="serviceUrl" path="/products-render-info"/>
</item>
</item>
<item name="identifiersConfig" xsi:type="array">
<item name="namespace" xsi:type="string">recently_viewed_product</item>
</item>
</item>
</argument>
</argument>
This sets the appropriate information inside the updateRequestConfig object in the product storage configuration(productStorageConfig in the example code).
The object structure for this REST response is represented by \Magento\Catalog\Api\Data\ProductRenderInterface:
Show ObjectStructure
[
item_id: {
//@see: \Magento\Catalog\Api\Data\ProductRender\ButtonInterface
'add_to_*_button': { //Any product button will be represented by this interface
post_data: {...},
required_options: boolean,
url: string
},
//\Magento\Catalog\Api\Data\ProductRenderExtensionInterface
'extension_attributes': {
'review_html': '...'
},
//@see: \Magento\Catalog\Api\Data\ProductRender\ImageInterface[]
'images': [
{
'url': '...',
'code': '...',
'height': ...,
'width': ...,
'resized_height': ...,
...
}
],
'is_salable': boolean,
'name': '...',
//@see: \Magento\Catalog\Api\Data\ProductRender\PriceInfoInterface
'price_info': {
//@see \Magento\Catalog\Api\Data\ProductRender\FormattedPriceInfoInterface
//All prices are kind of html with currency symbol and rounding rules
'formatted_prices': {
'final_price': ...,
'max_price': ...,
'max_regular_price': ...,
'minimal_regular_price': ...,
...
},
'final_price': ...,
'max_price': ...,
'max_regular_price': ...,
'minimal_regular_price': ...,
...
},
'url': '...',
'type': '...', //enum: configurable, simple, virtual, etc
'currency_code': '...', //e.g. USD
'store_id': ... //integer
}
]