Copied to clipboard

Flag this post as spam?

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


  • Henrik Vincent 122 posts 616 karma points
    Jun 07, 2018 @ 10:39
    Henrik Vincent
    0

    Using CheckBoxList for meta robots content

    Hi guys

    I'm trying to use a checkbox list for adding values to content i a tag.

    I've made a similar function, where I use 2 true/false, but would like to see if it's possible, to just use a checkboxlist instead.

    Are these only for adding the value of the checkbox or could you do a if/else statement, to add noindex, if noindex box is checked, and as deafult add index, if it isnt?

    enter image description here

    Is this possible, or should I stick with the 2x checkbox way?

    Best

    Henrik

  • Nik 1591 posts 7148 karma points MVP 6x c-trib
    Jun 14, 2018 @ 08:59
    Nik
    1

    Hi Henrik,

    In all honest it actually depends what you find easiest to process in your front end code. Ease of code is probably separate check boxes, but a nicer editor experience is probably the checkbox list.

    There is a third option which is what I've actually done is create my own property editor completely for Robots meta which contains 2 check boxes but it handles the if behaviour in the back office so I can just render out the final value for that field on the front end.

    I based it on this existing package but as I wanted to separate components out I effectively created my own version. https://our.umbraco.org/projects/developer-tools/useo-pro/ so it could be worth looking at that :-)

    Nik

  • Henrik Vincent 122 posts 616 karma points
    Jun 14, 2018 @ 12:50
    Henrik Vincent
    0

    Hi Nik

    Thanks a bunch for your reply.

    That's a real nice way to do it.

    I haven't worked with Property Editors before, but I followed your advice, and downloaded the uSeoPro.

    After looking at the source, I've come up with this so far:

    HTML:

    <div ng-controller="MetaRobotsController">
        <div class="robots">
            <h5>Robot Settings</h5>
            <div>
                <h6>Robots Meta NOINDEX</h6>
                <input type="checkbox" ng-model="noindex"> 
            </div>
            <div>
                <h6>Robots Meta NOFOLLOW</h6>
                <input type="checkbox" ng-model="nofollow"> 
            </div>
            <h5>Tag Preview</h5>
            <code>
                &lt;meta name=&quot;robots&quot; content=&quot;<span>{{robots}}</span>&quot; /&gt;
            </code>
        </div>
    </div>
    

    Controller:

    angular.module("umbraco")
        .controller("MetaRobotsController",
        function ($scope, editorState, entityResource, contentEditingHelper, $http, $rootScope) {
    
    
            $scope.noindex = $scope.model.value.noindex;
            $scope.nofollow = $scope.model.value.nofollow;
    
    
    
            $scope.$watch("noindex", function () {
                $scope.UpdateModel();
            });
    
            $scope.$watch("nofollow", function () {
                $scope.UpdateModel();
            });
    
            $scope.UpdateModel = function () {
                var r1 = "";
                if ($scope.noindex == true || $scope.nofollow == true) {
                    r1 += $scope.noindex == true ? "noindex," : "index,";
                    r1 += $scope.nofollow == true ? "nofollow" : "follow";
                }
                $scope.robots = r1;
    
                $scope.model.value = {
                    noindex: $scope.noindex, nofollow: $scope.nofollow,
                    robots: r1
                };
            };
        });
    

    This works, but my question now is, how to actually get the code into my template. When rendering the field in the tempalte, I get the following:

    { "noindex": true, "nofollow": false, "robots": "noindex,follow" }
    

    How should I go about, to just get the actual "noindex,follow" (from the example above), printed in my empty tag? And can I put a default content (index,follow), when neither noindex nor nofollow is selected

  • Henrik Vincent 122 posts 616 karma points
    Jun 14, 2018 @ 13:50
    Henrik Vincent
    100

    Okay. So I did a little trial and error and ended up with the following changes to my controller, and got it working.

    So first of I changed a little in the vars, to get index,follow when none of the checkboxes were checked:

    var r1 = "index";
    var r2 = "follow";
    

    Next off, instead of adding to the r1, I set r1 to only handle noindex/index and r2 to only handle nofollow/follow.

    r1 = $scope.noindex == true ? "noindex" : "index";
    r2 = $scope.nofollow == true ? "nofollow" : "follow";
    

    I also removed the comma inside the noindex/index, added r1 and r2 to an array and then joined it:

    $scope.robots = [r1,r2].join();
    

    Then for the other part on how to render it in the template, I changed the last object to a string and added the surrounding meta-tag:

    $scope.model.value = '<meta name="robots" content="'+$scope.robots+'">';
    

    The final controller looks like this:

    angular.module("umbraco")
        .controller("MetaRobotsController",
        function ($scope, editorState, entityResource, contentEditingHelper) {
    
    
            $scope.noindex = $scope.model.value.noindex;
            $scope.nofollow = $scope.model.value.nofollow;
    
            $scope.$watch("noindex", function () {
                $scope.UpdateModel();
            });
    
            $scope.$watch("nofollow", function () {
                $scope.UpdateModel();
            });
    
            $scope.UpdateModel = function () {
                var r1 = "index";
                var r2 = "follow";
                if ($scope.noindex == true || $scope.nofollow == true) {
                    r1 = $scope.noindex == true ? "noindex" : "index";
                    r2 = $scope.nofollow == true ? "nofollow" : "follow";
                }
                $scope.robots = [r1,r2].join();
    
                $scope.model.value = '<meta name="robots" content="'+$scope.robots+'">';
            };
        });
    
  • Nik 1591 posts 7148 karma points MVP 6x c-trib
    Jun 14, 2018 @ 14:08
    Nik
    1

    Nice work on getting it working :-)

    Property editors are great things, I highly recommending looking into them more, but remember sometimes it's best to use whats there than build your own. Umbraco strives to keep editor experience simple and fluid so just keep that in mind when thinking about making your own editors :-)

    Congrats again :-)

  • Henrik Vincent 122 posts 616 karma points
    Jun 15, 2018 @ 06:27
    Henrik Vincent
    0

    Thanks Nik

    Yea they're awesome, and definitely something I'll look more into.

    I aware that sometimes the built-in editors are preferable, but it's fun learning new stuff, and I like that you can style the elements in the back office with the property editors. Also started doing alot of custom views for different page types, which is also awesome for editors.

    Thanks again for suggesting uSEO which was a great starting point to getting started with the property editor.

    Have a great weekend!

    Best

    Henrik

Please Sign in or register to post replies

Write your reply to:

Draft