Adding custom field to listing page hamburger menu

dev
,
1

I am currently trying to extend the hamburger menu on the product listing blade to include a new field that has been added to our CustomCatalogProduct extension. I am following the example documented here: Extensibility - Extending grid columns - Virto Commerce Documentation but have run into a blocker.

Menu I am trying to extend:

Hamburger Menu
Hamburger Menu551Ă—1034 79.4 KB

In the linked Virto example the Id of the grid seems to be set via a method called setGirdOptions which then can be referenced to add the additional field.

customerOrder-list.js (VirtoCommerce.OrdersModule)

  $rootScope.$on('loginStatusChanged', (securityScopes) => {
      $translate.refresh().then(() => {
          let gridOptions = $scope.getGridOptions();
          $scope.setGridOptions("customerOrder-list-grid", gridOptions);
      });
  });

The problem that I am running into is that I cannot find an Id to reference for category/item listing blade. It appears setGridOptions is referenced differently in the categories-items-lists.js (VirtoCommerce.CatalogModule) file.

$scope.setGridOptions = function (gridOptions) {

    //disable watched
    bladeUtils.initializePagination($scope, true);
    //choose the optimal amount that ensures the appearance of the scroll
    $scope.pageSettings.itemsPerPageCount = 50;

    uiGridHelper.initialize($scope, gridOptions, function (gridApi) {
        //update gridApi for current grid
        $scope.gridApi = gridApi;

        uiGridHelper.bindRefreshOnSortChanged($scope);
        $scope.gridApi.infiniteScroll.on.needLoadMoreData($scope, showMore);
    });
};

The Question: Where am I going wrong here? How do I reference the item/category listing blade’s grid column?

Thanks in advance!

2

Could you attach the your platform manifest?

image
image962Ă—627 52.5 KB

3

Too many characters for the post so here is a link to github: https://github.com/jconnellypfl/Manifest/blob/main/vc-platform-info.json

4

I’m not sure if it help but it worth to mention that you don’t have to manually extend the grid with new column options, because the grid control automatically infers available columns from the data that is bound to. Thus, if your API returns objects of CustomCatalogProduct with new fields in response, they should automatically being added to the list, please check that you API return the products with new fields first.

5

We are under the impression that the hamburger menu on the Product/Category Listing Page is hyrdrated by the api/catalog/listentries endpoint.

Full URL: https://localhost:8081/api/catalog/listentries

Following the comment about grid control automatically infering column data we extended the ProductListEntry.cs to include out two new fields.

CustomListEntry
CustomListEntry1920Ă—802 136 KB

We can see our new fields populated in the response body of listentries, but the menu does not contain the new values as expected. Response from api/catalog/listentries:

{"listEntries":[{"type":"category","isActive":true,"code":"0114f","name":"Andy customer catalog","links":[],"outline":["27737c45-9114-4ded-a786-f92e9241c54d","511c4bdd-387e-464a-acea-7640cdde6d62"],"path":["Andy customer catalog","Andy customer catalog"],"catalogId":"27737c45-9114-4ded-a786-f92e9241c54d","seoObjectType":"Category","seoInfos":[{"semanticUrl":"andy-customer-catalog","objectId":"511c4bdd-387e-464a-acea-7640cdde6d62","objectType":"Category","isActive":true,"languageCode":"en-US","id":"3337cfa7-64b3-4ecf-ac9e-adba1131247a"}],"createdDate":"2022-06-15T13:11:15.6777963Z","modifiedDate":"2022-06-15T13:11:15.6777963Z","createdBy":"34a42029-cf3a-4f15-aefc-df7d81c0aa11","modifiedBy":"34a42029-cf3a-4f15-aefc-df7d81c0aa11","id":"511c4bdd-387e-464a-acea-7640cdde6d62"},{"type":"category","isActive":true,"code":"c65b7","name":"Andy customer category","links":[],"outline":["27737c45-9114-4ded-a786-f92e9241c54d","13125d44-f7a9-48a3-b70f-78ccffe52fc5"],"path":["Andy customer catalog","Andy customer category"],"catalogId":"27737c45-9114-4ded-a786-f92e9241c54d","seoObjectType":"Category","seoInfos":[{"semanticUrl":"andy-customer-category","objectId":"13125d44-f7a9-48a3-b70f-78ccffe52fc5","objectType":"Category","isActive":true,"languageCode":"en-US","id":"c5730814-09f8-4bea-88d8-88bcb3a1cfd3"}],"createdDate":"2022-06-15T13:11:22.4506601Z","modifiedDate":"2022-06-15T13:11:22.4506601Z","createdBy":"34a42029-cf3a-4f15-aefc-df7d81c0aa11","modifiedBy":"34a42029-cf3a-4f15-aefc-df7d81c0aa11","id":"13125d44-f7a9-48a3-b70f-78ccffe52fc5"},{"type":"category","isActive":true,"code":"c65b7","name":"Andy customer category","links":[],"outline":["27737c45-9114-4ded-a786-f92e9241c54d","a2ab9fd0-a064-4550-a484-aa646ed077c3"],"path":["Andy customer catalog","Andy customer category"],"catalogId":"27737c45-9114-4ded-a786-f92e9241c54d","seoObjectType":"Category","seoInfos":[{"semanticUrl":"andy-customer-category","objectId":"a2ab9fd0-a064-4550-a484-aa646ed077c3","objectType":"Category","isActive":true,"languageCode":"en-US","id":"6963388d-be2b-416b-8b5d-dd30345520b4"}],"createdDate":"2022-05-31T13:45:29.7864141Z","modifiedDate":"2022-05-31T13:45:29.7864141Z","createdBy":"andylarkin@pfllinkappcenterdev.onmicrosoft.com","modifiedBy":"andylarkin@pfllinkappcenterdev.onmicrosoft.com","id":"a2ab9fd0-a064-4550-a484-aa646ed077c3"},{"internalName":"The third","vendor":"","productType":"Physical","type":"product","isActive":false,"imageUrl":"https://localhost:8091/assets/catalog/0a40f/BXN-45667978/White_Crinkle.png","code":"HJA-11940926","name":"New Crinkle Paper","links":[],"outline":["27737c45-9114-4ded-a786-f92e9241c54d","93a64833-bf45-424a-92a0-cf7040f8d97e"],"path":["Andy customer catalog","New Crinkle Paper"],"catalogId":"27737c45-9114-4ded-a786-f92e9241c54d","seoObjectType":"CatalogProduct","seoInfos":[{"semanticUrl":"new-crinkle-paper","objectId":"93a64833-bf45-424a-92a0-cf7040f8d97e","objectType":"CatalogProduct","isActive":true,"languageCode":"en-US","id":"a307b1aa-e031-49a3-8370-3c54e91e98a0"}],"createdDate":"2022-06-15T15:41:20.1056633Z","modifiedDate":"2022-06-15T15:59:11.0269262Z","createdBy":"andylarkin@pfllinkappcenterdev.onmicrosoft.com","modifiedBy":"andylarkin@pfllinkappcenterdev.onmicrosoft.com","id":"93a64833-bf45-424a-92a0-cf7040f8d97e"},{"productType":"BillOfMaterials","type":"product","isActive":true,"imageUrl":"https://localhost:8091/assets/catalog/27737/OMA-64252303/943fabbfa2df8a6a7e29e6f6416de4a2.jpg","code":"MLR-87674328","name":"Andy BOM II","links":[],"outline":["27737c45-9114-4ded-a786-f92e9241c54d","70cfbba4-0ddf-491a-b924-3e8ee6d1fe7a"],"path":["Andy customer catalog","Andy BOM II"],"catalogId":"27737c45-9114-4ded-a786-f92e9241c54d","seoObjectType":"CatalogProduct","seoInfos":[{"semanticUrl":"andy-bom-ii","objectId":"70cfbba4-0ddf-491a-b924-3e8ee6d1fe7a","objectType":"CatalogProduct","isActive":true,"languageCode":"en-US","id":"188a5bde-efa1-413d-855c-b927187d1b6e"}],"createdDate":"2022-06-15T13:08:31.8438667Z","modifiedDate":"2022-06-15T13:11:35.5796027Z","createdBy":"andylarkin@pfllinkappcenterdev.onmicrosoft.com","modifiedBy":"34a42029-cf3a-4f15-aefc-df7d81c0aa11","id":"70cfbba4-0ddf-491a-b924-3e8ee6d1fe7a"},{"productType":"BillOfMaterials","type":"product","isActive":true,"imageUrl":"https://localhost:8091/assets/catalog/27737/GCN-64326420/056788968af9cd40891a435a947f174c--ways-to-lose-weight-weight-loss.jpg","code":"SFN-73743092","name":"Andy BOM pre-sequel","links":[],"outline":["27737c45-9114-4ded-a786-f92e9241c54d","a9d6147c-c653-4a5c-a36a-c6fb66f37565"],"path":["Andy customer catalog","Andy BOM pre-sequel"],"catalogId":"27737c45-9114-4ded-a786-f92e9241c54d","seoObjectType":"CatalogProduct","seoInfos":[{"semanticUrl":"andy-bom-pre-sequel","objectId":"a9d6147c-c653-4a5c-a36a-c6fb66f37565","objectType":"CatalogProduct","isActive":true,"languageCode":"en-US","id":"47a5c747-ffb7-455f-a9a0-7f2efd90b03a"}],"createdDate":"2022-06-15T15:33:23.5118884Z","modifiedDate":"2022-06-15T15:51:19.947906Z","createdBy":"andylarkin@pfllinkappcenterdev.onmicrosoft.com","modifiedBy":"34a42029-cf3a-4f15-aefc-df7d81c0aa11","id":"a9d6147c-c653-4a5c-a36a-c6fb66f37565"}],"totalCount":6,"results":[{"type":"category","isActive":true,"code":"0114f","name":"Andy customer catalog","links":[],"outline":["27737c45-9114-4ded-a786-f92e9241c54d","511c4bdd-387e-464a-acea-7640cdde6d62"],"path":["Andy customer catalog","Andy customer catalog"],"catalogId":"27737c45-9114-4ded-a786-f92e9241c54d","seoObjectType":"Category","seoInfos":[{"semanticUrl":"andy-customer-catalog","objectId":"511c4bdd-387e-464a-acea-7640cdde6d62","objectType":"Category","isActive":true,"languageCode":"en-US","id":"3337cfa7-64b3-4ecf-ac9e-adba1131247a"}],"createdDate":"2022-06-15T13:11:15.6777963Z","modifiedDate":"2022-06-15T13:11:15.6777963Z","createdBy":"34a42029-cf3a-4f15-aefc-df7d81c0aa11","modifiedBy":"34a42029-cf3a-4f15-aefc-df7d81c0aa11","id":"511c4bdd-387e-464a-acea-7640cdde6d62"},{"type":"category","isActive":true,"code":"c65b7","name":"Andy customer category","links":[],"outline":["27737c45-9114-4ded-a786-f92e9241c54d","13125d44-f7a9-48a3-b70f-78ccffe52fc5"],"path":["Andy customer catalog","Andy customer category"],"catalogId":"27737c45-9114-4ded-a786-f92e9241c54d","seoObjectType":"Category","seoInfos":[{"semanticUrl":"andy-customer-category","objectId":"13125d44-f7a9-48a3-b70f-78ccffe52fc5","objectType":"Category","isActive":true,"languageCode":"en-US","id":"c5730814-09f8-4bea-88d8-88bcb3a1cfd3"}],"createdDate":"2022-06-15T13:11:22.4506601Z","modifiedDate":"2022-06-15T13:11:22.4506601Z","createdBy":"34a42029-cf3a-4f15-aefc-df7d81c0aa11","modifiedBy":"34a42029-cf3a-4f15-aefc-df7d81c0aa11","id":"13125d44-f7a9-48a3-b70f-78ccffe52fc5"},{"type":"category","isActive":true,"code":"c65b7","name":"Andy customer category","links":[],"outline":["27737c45-9114-4ded-a786-f92e9241c54d","a2ab9fd0-a064-4550-a484-aa646ed077c3"],"path":["Andy customer catalog","Andy customer category"],"catalogId":"27737c45-9114-4ded-a786-f92e9241c54d","seoObjectType":"Category","seoInfos":[{"semanticUrl":"andy-customer-category","objectId":"a2ab9fd0-a064-4550-a484-aa646ed077c3","objectType":"Category","isActive":true,"languageCode":"en-US","id":"6963388d-be2b-416b-8b5d-dd30345520b4"}],"createdDate":"2022-05-31T13:45:29.7864141Z","modifiedDate":"2022-05-31T13:45:29.7864141Z","createdBy":"andylarkin@pfllinkappcenterdev.onmicrosoft.com","modifiedBy":"andylarkin@pfllinkappcenterdev.onmicrosoft.com","id":"a2ab9fd0-a064-4550-a484-aa646ed077c3"},{"internalName":"The third","vendor":"","productType":"Physical","type":"product","isActive":false,"imageUrl":"https://localhost:8091/assets/catalog/0a40f/BXN-45667978/White_Crinkle.png","code":"HJA-11940926","name":"New Crinkle Paper","links":[],"outline":["27737c45-9114-4ded-a786-f92e9241c54d","93a64833-bf45-424a-92a0-cf7040f8d97e"],"path":["Andy customer catalog","New Crinkle Paper"],"catalogId":"27737c45-9114-4ded-a786-f92e9241c54d","seoObjectType":"CatalogProduct","seoInfos":[{"semanticUrl":"new-crinkle-paper","objectId":"93a64833-bf45-424a-92a0-cf7040f8d97e","objectType":"CatalogProduct","isActive":true,"languageCode":"en-US","id":"a307b1aa-e031-49a3-8370-3c54e91e98a0"}],"createdDate":"2022-06-15T15:41:20.1056633Z","modifiedDate":"2022-06-15T15:59:11.0269262Z","createdBy":"andylarkin@pfllinkappcenterdev.onmicrosoft.com","modifiedBy":"andylarkin@pfllinkappcenterdev.onmicrosoft.com","id":"93a64833-bf45-424a-92a0-cf7040f8d97e"},{"productType":"BillOfMaterial...

We expected internal name and vendor to be populated on the hamburger menu but no such luck. Did we miss something? Thank you!

6

Try to cleanup browser local storage and try again
image

7

We did so. We even used different browser (Edge) and chrome anonymous mode. The result is the same.

8

This issue can be reproduced by setting any property to NULL on the first entity in the grid.

In our case, if the first entity in the response listEntries does not have internal name or vendor set, then these fields won’t appear in the hamburger menu. But if we set them to some values, then all goes well and both columns appear in the hamburger menu.

The problematic piece of code is here: vc-platform/uiGridUtils.js at dev · VirtoCommerce/vc-platform · GitHub

  1. First, it takes all columns on the first entity in the grid.
  2. Then goes through column definitions and removes any column that is not present on the first entity.
1 Like
9

I see several options:

  1. Virto Commerce Rest API removes null columns from response. But you can adjust service and set default values for your columns: “”, 0, MinDate, etc. instead of NULL

  2. Use Extensibility - Extending grid columns - Virto Commerce Documentation and add columns manually
    vc-module-order/order2.js at dev · VirtoCommerce/vc-module-order (github.com)