Extending Order Detail
CoreShop's Order Detail Page is a custom-designed interface built with ExtJs, offering straightforward ways to extend and customize it according to your specific needs.
UI Overview
The Order Detail UI consists of various blocks strategically positioned for optimal user experience. There are four main positions for these blocks:
- Top: At the top of the page.
- Left: On the left side of the page.
- Right: On the right side of the page.
- Bottom: At the bottom of the page.
Default Blocks
The following are the default blocks provided by CoreShop:
- Top
- Header
- Left
- Payments
- Invoices
- Shipments
- Correspondence
- Right
- Customer Details
- Comments
- Bottom
- Details
Creating a New Block
To introduce a new block, you'll need to create a new Pimcore Backend Javascript File, following the
namespace coreshop.order.order.detail.blocks
.
Example
Below is a sample JavaScript code to demonstrate how to add a custom block:
pimcore.registerNS('coreshop.order.order.detail.blocks.custom');
coreshop.order.order.detail.blocks.custom = Class.create(coreshop.order.order.detail.abstractBlock, {
saleInfo: null,
initBlock: function () {
var me = this;
me.deliveryPhone = Ext.create({
xtype: 'panel',
style: 'display:block'
});
me.purchaseOrderNumber = Ext.create({
xtype: 'panel',
style: 'display:block'
});
me.trackingMail = Ext.create({
xtype: 'panel',
style: 'display:block'
});
me.packagingType = Ext.create({
xtype: 'panel',
style: 'display:block'
});
me.packagingAmount = Ext.create({
xtype: 'panel',
style: 'display:block'
});
var items = [];
items.push({
xtype: 'panel',
layout: 'hbox',
items: [
{
xtype: 'panel',
flex: 1,
items: [
me.purchaseOrderNumber,
me.deliveryPhone,
me.trackingMail
]
},
{
xtype: 'panel',
flex: 1,
items: [
me.packagingType,
me.packagingAmount
]
}
]
});
this.details = Ext.create('Ext.panel.Panel', {
title: t('zeroridge_order_informations'),
margin: '0 20 20 0',
border: true,
flex: 6,
iconCls: 'coreshop_icon_order',
items: items
});
},
getPriority: function () {
return 1;
},
getPosition: function () {
return 'left';
},
getPanel: function () {
return this.details;
},
updateSale: function () {
var me = this;
me.deliveryPhone.setHtml('<span style="font-weight:bold;">' + t('zeroridge_delivery_phone') + ': </span>' + me.sale.deliveryPhone);
me.purchaseOrderNumber.setHtml('<span style="font-weight:bold;">' + t('zeroridge_purchase_order_number') + ': </span>' + me.sale.purchaseOrderNumber);
me.trackingMail.setHtml('<span style="font-weight:bold;">' + t('zeroridge_tracking_mail') + ': </span>' + me.sale.trackingEmail);
if (me.sale.packagingType) {
me.packagingType.setHtml('<span style="font-weight:bold;">' + t('zeroridge_packaging_type') + ': </span>' + me.sale.packagingType.localizedfields.data.en.name);
} else {
me.packagingType.setHtml('<span style="font-weight:bold;">' + t('zeroridge_packaging_type') + ': </span> Unknown');
}
me.packagingAmount.setHtml('<span style="font-weight:bold;">' + t('zeroridge_packaging_amount') + ': </span>' + me.sale.packagingAmount);
}
});
In this custom block, the following methods must be implemented:
- initBlock: Initializes the block upon creation.
- getPriority: Determines the display priority of the block. Higher values mean higher placement.
- getPosition: Specifies the position of the block (top, left, right, or bottom).
- getPanel: Returns the ExtJs Panel representing the content of the block.
- updateSale: Updates the block's content when the sale is refreshed
Customizing Order Serialization
CoreShop uses JMS Serializer for order serialization. You can extend its serialization logic either through JMS
Configuration or by registering an event handler for the CoreShop\Bundle\OrderBundle\Events::SALE_DETAIL_PREPARE
event.
If that isn't enough, you can create a Custom Controller and query that with Ext.Ajax and your own parameters.