how to add one more panel to product detail page - Merchello

Nguyen Dung Tri 106 posts 606 karma points

Jan 06, 2017 @ 02:21

How to add one more panel to product detail page?

Merchello

Umbraco 7

Hello,

I want to add one more custom panel to product detail page. Please look at my product detail page:

enter image description here

What I have tried so far is create an html page in (App_Plugins/Merchello/Backoffice/Merchello/directives/entity.couponcollections.tpl.html)

I add a block of code to mechello.directive.js like this to load my html to product detail page:

/**
 * @ngdoc directive
 * @name static-collection-tree-picker
 * @function
 *
 * @description
 * Directive to pick static entity collections.
 */
angular.module('merchello.directives').directive('entityStaticCollections',
    function() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                preValuesLoaded: '=',
                entity: '=',
                entityType: '='
            },
            templateUrl: '/App_Plugins/Merchello/Backoffice/Merchello/Directives/entity.staticcollections.tpl.html',
            controller: 'Merchello.Directives.EntityStaticCollectionsDirectiveController'
        }
});

And then I view my product detail page again, but no panel for my coupon page has shown.

How can I achieve this?

Copy Link

Rusty Swayne 1655 posts 4993 karma points c-trib

Jan 06, 2017 @ 16:33

The best way to do it is by creating a directive in your own app_plugins directory (an html element or attribute) and then simply update the Merchello view or directive to which you want to add the new section.

One thing to note is your JS must be added after the Merchello JS files have loaded if you want to use any Merchello JS object. I typically accomplish this by naming my secondary App_Plugins directive with a name the that will sort alphabetically after Merchello ... ex. App_Plugins/Merchello.MyDirective

By creating your own directive, you can isolate your code and not risk anything in the core Merchello section AND make it much easier to keep Merchello updated with version updates as you'd simply need to merge in your new element and not have to worry about any of the html or js code.

Copy Link

Nguyen Dung Tri 106 posts 606 karma points

Jan 09, 2017 @ 02:30

As your instruction, I have achieve some of these:

I have created an html file in: Merchello.FastTrack.Ui\App_Plugins\Merchello\Backoffice\Merchello\directives\entity.couponcollections.tpl.html

enter image description here

I have created a js file for my directive js in: Merchello.FastTrack.Ui\App_Plugins\Merchello\Backoffice\js\merchello.discountcoupon.js

enter image description here

In my js file, I create a directive:

   /**
 * @ngdoc directive
 * @name static-collection-tree-picker
 * @function
 *
 * @description
 * Directive to pick static entity collections.
 */
angular.module('merchello.directives').directive('entitycouponcollections',
    function() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                preValuesLoaded: '=',
                entity: '=',
                entityType: '='
            },
            templateUrl: '/App_Plugins/Merchello/Backoffice/Merchello/Directives/entity.couponcollections.tpl.html',
            controller: 'Merchello.Directives.MyCouponController'
        }
});

In package.manifest, I have included my js:

enter image description here

But when I run the website, the content of entity.couponcollections.tpl.html did not added to the product detail page. Can you give me some more clues?

Copy Link

Rusty Swayne 1655 posts 4993 karma points c-trib

Jan 09, 2017 @ 16:48

You probably don't need to use a controller in the directive, instead use a link function (unless you have the controller code as well).

Also in the view you are hoping to display the directive you need to add the element

  <entitycouponcollections pre-values-loaded='[some scope prop]' entity='[scope collection property]' entity-type='[scope collection entity type]'></entitycouponcollections>

Copy Link

is working on a reply...

Flag this post as spam?

How to add one more panel to product detail page?