我正在研究一个使用AJAX加载追加销售产品的Magento 2模块.每个客户的追加销售产品可能不同,因此AJAX用于加载块以允许缓存清除.
为此,我有一个自定义模块,我的块扩展了\Magento\Catalog\Block\Product\ProductList\Upsell.在catalog_product_view.xml我的模块布局中有以下内容 -
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="product.info.upsell" remove="true" />
<referenceContainer name="content.aside">
<block class="MyCompany\MyModule\Block\Product\ProductList\Upsell"
name="personalised.product.upsell"
template="MyCompany_MyModule::upsell.phtml" />
</referenceContainer>
</body>
</page>
在我的upsell.phtml中 -
<div id="personalised-upsells-container" data-role="personalised-upsells"></div>
<script type="text/x-magento-init">
{
"*": {
"MyCompany_MyModule/js/upsell": {
"upsellAjaxUrl": "<?php echo $block->getUpsellAjaxUrl(); ?>"
}
}
}
</script>
该getUpsellAjaxUrl()生成http://magento2.dev/personalised/products/upsellAjax/id/6
我的upsell.js -
define([
'jquery',
'upsellProducts'
], function($) {
function getUpsellContent(url) {
$.ajax({
url: url,
dataType: 'html'
}).done(function (data) {
$('#personalised-upsells-container').html(data).promise().done(function(){
$('.upsell').upsellProducts();
});
});
}
return function (config, …