Umbraco Commerce UI Order Config: Is it possible to list out all properties on an order line?

Questions
,
1

With the Umbraco Commerce Backoffice I am using the JSON config UI files to customise the order line as per the docs.

As the products being added to the cart/order have dynamic properties set on them and could be changed by the external Struct PIM service. It’s not ideal to have to create a big array of all the properties on the order line that it could be.

I was wondering if there was a way to display all the properties associated to an order line easily?

My thoughts on how to solve this…

My thought or hack approach to this problem is that I could use the view property in the JSON object for the order line and that I could load a custom HTML view with its own AngularJS controller where I could print out all the properties and their values in one go.

This is what I tried in the JSON file App_Plugins\UmbracoCommerce\config\order.editor.config.json

{
  "orderLine": {
      "properties": [
          {
              "label": "All Properties",
              "description": "All properties for this item",
              "isReadOnly": true,
              "view": "App_Plugins/UmbracoCommerce/config/order-line-all-properties.html"
          }
      ]
  },
  ...
}

I was hoping that I was able to load in a custom HTML view with this above in order for me to then print out all the values.

However it simply shows as No Value when opening up the order line in the modal window, I would have expected it to have loaded my custom view or give me a 404 to say it can’t find the view on disk.

Screenshot of Umbraco Commerce with a custom order line property with view value set
Screenshot of Umbraco Commerce with a custom order line property with view value set3171×1779 274 KB

Debug info

Commerce Version:  13.1.19
Umbraco Version:  13.6.0

Hoping the lovely @mattbrailsford will get a chance to see this at some point and chime in if this can be achieved or not.

Cheers
Warren :umbraco-heart:

2

Try removing the isReadOnly option as if that is set to true then the property is forcibly given a readonlyvalue view.

1 Like
3

Thanks @mattbrailsford removing the readonly flag worked in terms of loading a custom view.

I have tried to see what’s in the model you pass to the view and was hoping for a little more info in it.

<div>
    <h2>Props</h2>
    <pre>{{ properties | json }}</pre>
    <h2>Model</h2>
    <pre>{{ model | json }}</pre>
</div>

JSON of {{ model | json }} in Angular View

{
  "alias": "bwvd3i23cwl",
  "label": "All Properties",
  "description": "All properties for this item",
  "config": {
    "storeId": "8eb4b83e-c3d4-4255-a810-0194b7bdede3",
    "orderId": "d7fa802b-dbba-410a-91b9-019541db9f4b",
    "orderLineId": "e1d5e405-3276-4ae9-a974-019541dba241"
  },
  "view": "/App_Plugins/UmbracoCommerce/config/order-line-all-properties.html",
  "value": "",
  "isReadOnly": false,
  "isServerSideOnly": false
}

image
image2810×1617 323 KB

Without fully knowing what is in your AngularJS model for this, is there other properties I could use to get information about the order line and its properties?

Or are there AngularJS services/resources I could inject with use in a custom AngularJS controller with this view to get the info I need?

4

You can inject an editorState and call editorState.getCurrent() to get a copy of the current cart object. You’d then have to use the ID’s in the config passed to the prop editor view to find the orderline and then loop it’s properties.

1 Like
5

Thanks off to give it a try :slight_smile:

6

Yay thanks Matt got something working :tada:

image
image2723×1485 296 KB

App_Plugins/UmbracoCommerce/orderline.allproperties.controller.js

(function () {
    'use strict';

    function orderLineAllPropsController($scope, editorState) {

        // Get the info about the Umbraco Commerce Order
        let commerceEditorState = editorState.getCurrent();

        var vm = this;
        vm.commerceEditorState = commerceEditorState;

        // The existing model that was passed along from Commerce
        /*
            {
              "alias": "en6qh1vsho",
              "label": "All Properties",
              "description": "All properties for this item",
              "config": {
                "storeId": "8eb4b83e-c3d4-4255-a810-0194b7bdede3",
                "orderId": "d7fa802b-dbba-410a-91b9-019541db9f4b",
                "orderLineId": "e1d5e405-3276-4ae9-a974-019541dba241"
              },
              "view": "/App_Plugins/UmbracoCommerce/order-line-all-properties.html",
              "value": "",
              "isReadOnly": false,
              "isServerSideOnly": false
            }
        */
        vm.model = $scope.model;
        vm.orderLineId = $scope.model.config.orderLineId;

        // Find the order line in the commerceEditorState.orderLines array that matches the ID property
        vm.orderLine = commerceEditorState.orderLines.find(orderLine => orderLine.id === vm.orderLineId);
    }

    angular.module('umbraco').controller('Commerce.CustomOrderLine.AllProps', orderLineAllPropsController);
})();

App_Plugins/UmbracoCommerce/order-line-all-properties.html

<div ng-controller="Commerce.CustomOrderLine.AllProps as vm">

    <div ng-if="!vm.orderLine">
        Could not find Order Line with ID<br/>
        <em>{{ vm.orderLineId }}</em>
    </div>

    <div ng-repeat="(key, prop) in vm.orderLine.properties">
        <strong>{{ key }}</strong> <em>{{ prop.value }}</em>
    </div>
</div>

App_Plugins/UmbracoCommerce/package.manifest

{
  "javascript": [
    "~/App_Plugins/UmbracoCommerce/orderline.allproperties.controller.js"
  ]
}
1 Like