Display a button under the “Add to CArt” button on the PDP page

The independent extension code to display the button under the “Add to Cart” button based on the condition of a custom checkbox field in the item record

The button need to displayed based on the value of the custom item field of the sub matrix items based on the matrix option choosed

Entry point code:

mountToApp: function mountToApp(container) {
                var pdp = container.getComponent('PDP');
                ProductDetailsFullView.addChildViews({
                    'BuildPatchCable': function wrapperFunction() {
                        return new PatchCableConfiguraterView({
                            container: container
                        });
                    }
                });
                _.extend(ProductDetailsFullView.prototype, {
                    initialize: _.wrap(ProductDetailsFullView.prototype.initialize, function (fn) {
                        fn.apply(this, _.toArray(arguments).slice(1));
                        /* To Add childView in ProductDetailsFullView */
                        this.on('beforeCompositeViewRender', function beforeCompositeViewRender() {
                            this.$el.find('.product-details-full-actions').after('<div class="BuildPatchCable" data-view="BuildPatchCable"></div>');
                        });



                        /* To render the BuildPatchCable view when the matrix option changes on PDP page */
                        var self = this;
                        pdp.on('afterOptionSelection', function () {
                            self.getChildViewInstance('BuildPatchCable').render();
                        })
                    })
                });
            }

View file:

return Backbone.View.extend({


            template: jj_patchcableconfigurater_patchcableconfigurater_tpl


            , initialize: function (options) {
                var self = this;
                self.container = options.container;
            }
            


            //@method getContext @return JJ.PatchCableConfigurater.PatchCableConfigurater.View.Context
            , getContext: function getContext() {
                //@class JJ.PatchCableConfigurater.PatchCableConfigurater.View.Context
                var self = this;
                var Container = this.container;
                var pdp = Container.getComponent('PDP');
                self.itemArray = pdp.getItemInfo().item;
                self.subitem = null;
                if (pdp.getSelectedMatrixChilds().length == 1) {
                    self.subitem = pdp.getSelectedMatrixChilds()[0];
                }
                var showBuildPatchButton;
                if (self.subitem != null) {
                    showBuildPatchButton = self.subitem.custitemenablecustompatchcable;
                } else {
                    showBuildPatchButton = self.itemArray.custitemenablecustompatchcable
                }
                return {
                    showBuildPatchButton: showBuildPatchButton
                };
            }
        });

Tpl file:

{{#if showBuildPatchButton}}
<div class="patch-button">
  <button  data-action="configuraterForm" class="patch-cable-button-button">
    Build Custom Cable
  </button>
</div>
{{/if}}