Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Leanne de Goeij 2 posts 93 karma points
    Nov 09, 2018 @ 09:10
    Leanne de Goeij
    0

    Umbraco with Merchello and Peta Poco (UI-O-Matic)

    Hey everyone!

    I'm trying to combine Merchello with Peta Poco and UI-O-Matic. What I really want, is use the Merchello Product Picker for my Peta Poco / UI-O-Matic model.

    My current code:

        [UIOMaticField(
            Name = "Product", 
            Description = "A product.", 
            View = "~/App_Plugins/Merchello/propertyeditors/productpicker/merchello.productselector.html")]
        public string Product { get; set; }
    

    What I'm getting (which doesn't do anything):

    enter image description here

    Does anyone have any idea what could work?

  • Leanne de Goeij 2 posts 93 karma points
    Nov 16, 2018 @ 09:20
    Leanne de Goeij
    101

    For anyone curious as to how a tackled this: I made a Custom Editor View

    /App_Plugins/CustomMerchelloPicker/Package.manifest

    {
      propertyEditors: [
        {
          alias: "CustomMerchelloPicker",
          name: "CustomMerchelloPicker",
          editor: {
            view: "~/App_Plugins/CustomMerchelloPicker/CustomMerchelloPicker.html"
          }
        }
      ]
      ,
      javascript: [
        '~/App_Plugins/CustomMerchelloPicker/CustomMerchelloPicker.js'
      ]
    }
    

    /App_Plugins/CustomMerchelloPicker/CustomMerchelloPickerApiController.cs

    using Merchello.Web;
    using Merchello.Web.Models.ContentEditing;
    using Merchello.Web.Models.VirtualContent;
    using System.Collections.Generic;
    using System.Linq;
    using Umbraco.Web.Mvc;
    using Umbraco.Web.WebApi;
    
    namespace CaranteGroep.Catalog.Plender.WebApplication.App_Plugins.CustomMerchelloPicker
    {
        [PluginController("CustomMerchelloPicker")]
        public class CustomMerchelloPickerApiController : UmbracoApiController
        {
            public IList<CustomMerchelloPickerProduct> GetAll()
            {
                var merchello = new MerchelloHelper();
    
                var products = merchello.Query
                    .Product
                    .Search(1, int.MaxValue)
                    .Items
                    .Select(i => GetSmallObject(merchello.Query.Product.TypedProductContent(((ProductDisplay)i).Key)))
                    .Where(p => (p.Type == "ftProduct"))
                    .ToList();
    
                return products;
            }
    
            protected CustomMerchelloPickerProduct GetSmallObject(IProductContent product)
            {
                var temp = new CustomMerchelloPickerProduct
                {
                    Key = product.Key.ToString(),
                    Name = product.Name,
                    Type = product.DocumentTypeAlias
                };
    
                return temp;
            }
        }
    
        public class CustomMerchelloPickerProduct
        {
            public string Key;
            public string Name;
            public string Type;
        }
    }
    

    /App_Plugin/CustomMerchelloPicker/CustomMerchelloPicker.js

    angular.element(document).ready(function () {
        angular.module("umbraco").controller("CustomMerchelloPicker",
            function ($scope, $http) {
                $http.get("/umbraco/CustomMerchelloPicker/CustomMerchelloPickerApi/GetAll").then(function (response) {
                    console.log(response);
                    $scope.products = response.data;
                });
            });
    });
    

    /App_Plugin/CustomMerchelloPicker/CustomMerchelloPicker.html

    <div ng-app="umbraco" ng-controller="CustomMerchelloPicker">
        <select ng-model="property.value"
                ng-options='product.Key as product.Name for product in products'>
            <option value="">---Please select---</option>
        </select><br>
    </div>
    

    On the Peta Poco model

        [UIOMaticField(
            Name = "Product",
            Description = "A product.",
            View = "~/App_Plugins/CustomMerchelloPicker/CustomMerchelloPicker.html")]
        public string Product { get; set; }
    
  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies