E-commerce - Customize Order info page - Sitefinity - On Premise – Configurations & Setup

All Replies

Posted by Community Admin on 04-Sep-2015 00:00

Hello Devs,
I'm trying to customize my shopping cart process with some new fields. As you can see on the first image. I already saved that information on the order; now my question is:
Does anyone know how to customize the order info page (Second image) with some fields that have been added in the shopping process?

By the way I could find where this page is pulling the information (Image 3). So I think it has to be a way where I can extend the functionality that is already created.

Thanks for any help.

Posted by Community Admin on 12-Sep-2015 00:00

Hello Bernardo,

As far as I can see from the screenshots you have sent you would like to extend the backend page for the order details info and display some custom fields for the order in the Sitefinity backend. Can you please verify this? Can you please let me know if you would like to display the custom fields on the Preview step when placing the order on the frontend or in the Sitefinity backend under the Ecommerce -> Orders section.

If you would like to extend the backend Order Info page, you can override the control showing the order information in the backend from Administration -> Settings -> Advanced -> ContentView -> Controls -> OrdersBackend -> OrdersBackendDetail -> Sections -> MainSection -> fields -> OrderNumber and change the FieldType textbox to the CLR type of the custom control, which you will use, in my case is: SitefinityWebApp.ProductsListViewCustom.OrderFieldCustom.

The custom control references a layout and custom client script:

using System.Collections.Generic;

using System.Linq;

using Telerik.Sitefinity.Modules.Ecommerce.Orders.Web.UI.Fields;

namespace SitefinityWebApp.ProductsListViewCustom

public class OrderFieldCustom : OrderField

public override string LayoutTemplatePath

get

return OrderFieldCustom.layoutTemplatePathCustom;

public override IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences()

var baseScripts = base.GetScriptReferences();

var all = baseScripts.ToList();

all.Add(new System.Web.UI.ScriptReference("~/ProductsListViewCustom/OrderFieldCustom.js"));

return all;

public static readonly string layoutTemplatePathCustom = "~/ProductsListViewCustom/OrderFieldCustom.ascx";

In the template, we will add additional column and will bind to a custom property:

...

<telerik:GridTemplateColumn UniqueName="BinderContainer6" ItemStyle-CssClass="sfItmPriceCol" HeaderStyle-CssClass="sfItmPriceCol">

<HeaderTemplate>

<asp:Literal ID="Literal26" runat="server" Text='MyField on the fly'></asp:Literal>

</HeaderTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

<sitefinity:RadGridBinder ServiceUrl="required but unused" id="productsBinder" runat="server" TargetId="productsGrid" BindOnLoad="false" DataKeyNames="Id" DataMembers="Id" ContainerTag="div">

<Containers>

...

<sitefinity:BinderContainer runat="server">

<strong>MyField</strong>

</sitefinity:BinderContainer>

</Containers>

</sitefinity:RadGridBinder>

Note the grid template column unique name should match the grid binder BinderContainer index - BinderContainer6 will match the 6th Binder container in the grid binder.

You can check whether the field you want to show is returned by default from the service (see attached screenshot). If not, you should either override the Order service or call a custom one to retrieve the fields data. Then you can insert this field in the products datasource that will be bound to the grid:

... var productsDataSource =

"Items": this._order.Details,

"TotalCount": this._order.Details.length

;

for (var i = 0; i < productsDataSource.Items.length; i++)

productsDataSource.Items[i].MyField = "MyField " + i;

var productsBinder = this.get_productsBinder();

productsBinder.BindCollection(productsDataSource); ...

You can use the built in services to get the data you want in the js. For instance, if you want to query the full product's data you can use the following code:

for (var i = 0; i < productsDataSource.Items.length; i++)

var cartDetail = productsDataSource.Items[i];

var product = this.getProduct(cartDetail.ProductId);

var departmentIds = product.Department;

var department = null;

if (departmentIds && departmentIds.length > 0)

var departments = this.getDepartments(departmentIds);

var titles = [];

for (var k = 0; k < departments.Items.length; k++)

titles.push(departments.Items[k][0].Title);

department = titles.join(', ');

productsDataSource.Items[i].Department = department;

...

getProduct: function (productId)

var product = null;

var url = this._productServiceUrl + productId;

$.ajax(

method: "GET",

url: url,

async: false,

contentType: "application/json",

success: function (data)

product = data.Item;

,

error: function (err)

console.log(err);

);

return product;

,

getDepartments: function (departmentIds)

var departments = null;

var that = this;

$.ajax(

method: "PUT",

async: false,

url: that._hierarchicalTaxonServiceUrl,

data: JSON.stringify(departmentIds),

contentType: "application/json",

success: function (data)

departments = data;

,

error: function (err)

console.log(err);

);

return departments;

this._productServiceUrl = "/Sitefinity/Services/Ecommerce/Catalog/ProductService.svc/";

this._hierarchicalTaxonServiceUrl = "/Sitefinity/Services/Taxonomies/HierarchicalTaxon.svc/batchpath/";

With the above code you can also get the departments or other classifications.

The custom fields and data could be retrieved using the request to the products service. This is will return all custom fields data - the classifications fields will return the selected taxa items ids. You can directly access the product custom field from the JSON the service returns. Note that the custom field depends on the product type and if it does not exist for this product its value will be undefined.

var product = this.getProduct(cartDetail.ProductId);

var customFieldValue = product.CustomFieldName;

// or

customFieldValue = product["CustomFieldName"];

I am sending attached the files for your convenience.

Regards,
Sabrie Nedzhip
Telerik

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items

Posted by Community Admin on 14-Sep-2015 00:00

Hi Sabrie! Thank you so much for your reply this is exactly what I was looking for. I will continue with this. I really appreciate your time.

Regards,

Bernardo Quintero Rangel

This thread is closed