Copied to clipboard

Flag this post as spam?

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


  • Andrew Wilson 11 posts 114 karma points
    Apr 20, 2018 @ 16:16
    Andrew Wilson
    1

    Product Extended Content disappearing when switching between tabs

    We have products which have Extended Content split over multiple tabs, when you first load the Extended Content all of the properties in each of the tabs load just fine.

    The problem is when you swap between tabs, some of the data fields are reset. The problem seems to only affect Checkbox and Radio buttons but is very intermittent.

    To replicate this you would create multiple tabs with mixed content, but at least one checkbox list on one of the tabs. Edit a product, check some of the checkboxes and save. Refresh the page and then change between tabs, the checkboxes are reset. The problem is that I have found this to be intermittent.

    I'm seeing no javascript errors during this process.

    Has anyone else encountered this error or could shed any light on why this may be happening? This is driving me crazy and we have to delivery a solution to the customer soon and we can't continue with this very strange behavior in place.

    Using Merchello v2.6.0 on Umbraco 7.7.13

    Thanks for your assistance.

  • Fredric 10 posts 80 karma points
    Nov 06, 2018 @ 13:43
    Fredric
    0

    Did you find a solution for this?

  • Joe 30 posts 133 karma points
    Nov 11, 2018 @ 02:21
    Joe
    100

    I'm not sure whether the Merchello team aware of it, but I applied several fixes for different issues on top of Merchello 2.7. Here's the fix for radio button issue: (You can add your code to fix checkbox also!)

    In js Merchello.Backoffice.ProductDetachedContentController, add this reloadContentTabConfig(contentTab) function

            /**
             * Fix problem on content template destructed on tab-switching
             * @param {any} contentTab
             */
            function reloadContentTabConfig(contentTab) {
                //var contentTab = _.find($scope.contentTabs, function (ct) { return ct.id === id; });
    
                // every detached content associated with a variant MUST share the same content type,
                var detachedContentType = $scope.productVariant.detachedContentType();
    
                contentResource.getScaffold(-20, detachedContentType.umbContentType.alias).then(function (scaffold) {
                    var scaffoldTab = _.find(scaffold.tabs, function (t) {
                        return t.id === contentTab.id;
                    });
    
                    // Fix on RadioButtons
                    var radiobuttons = _.filter(contentTab.properties, function (t) { return t.view === "radiobuttons"; });
                    angular.forEach(radiobuttons, function (ctProp) {
                        var scaffoldProp = _.find(scaffoldTab.properties, function (tProp) { return tProp.alias === ctProp.alias; });
    
                        // Converting an Object to an Array of Objects. See https://medium.com/chrisburgin/javascript-converting-an-object-to-an-array-94b030a1604c
                        var transformedConfigItems = Object.keys(scaffoldProp.config.items).map(function (i) {
                            return {
                                key: i,
                                value: scaffoldProp.config.items[i]
                            };
                        });
    
                        // Fix on the ID of RadioButtons
                        angular.forEach(ctProp.config.items, function (ctRadioOption) {
                            var scaffoldRadioOption = _.find(transformedConfigItems, function (transformedConfigItem) {
                                return ctRadioOption.value === transformedConfigItem.value.value;
                            });
                            ctRadioOption.id = scaffoldRadioOption.key;
                        });
                    });
    
                    // Can continue to apply fix on other types (if any)
                    // ...
                });
            }
    

    Then at switchTab(), call this reloadContentTabConfig() function, like this:

            function switchTab(id) {
                var exists = _.find(umbracoTabs, function(ut) {
                    return ut === id;
                });
                if (exists !== undefined) {
                    var fnd = _.find($scope.contentTabs, function (ct) {
                        return ct.id === id;
                    });
                    $scope.currentTab = fnd;
                    reloadContentTabConfig($scope.currentTab);
                    $scope.tabs.setActive(id);
                }
            }
    

    so as stickTab() as below:

            function stickTab() {
                if ($scope.contentTabs.length > 0) {
                    if ($scope.currentTab === null) {
                        $scope.currentTab = $scope.contentTabs[0];
                    }
                    setTabVisibility();
                }
                ensureRenderTab();
                $scope.tabs.setActive($scope.currentTab.id);
    
                reloadContentTabConfig($scope.currentTab);
            }
    
Please Sign in or register to post replies

Write your reply to:

Draft