Displaying custom button for a web variation of an experience fragment

Question

Hi,I have a button for experience fragments defined in ../experience-fragments/.content.xml asThe button is displayed when I select- an experience fragment or- a variation of the experience fragment (e.g. myfragment/master).My goal is to pass a variation name in the item path every time when the button is clicked (this is not happening when it's not the variation selected - of course).How can I- display the button only if the experience fragment variation is selected or- pass some default web variation name in the path when the experience fragment itself is selected?Thanks,Peter

Madhur-Madan · Accepted Answer

Hi @pnagy

If you want the button to appear only when you choose a specific version of the experience fragment or show a default version when you select the experience fragment itself, you can use a set of tools called Granite UI's JavaScript API. This set of tools helps you manage how things behave on the webpage. Specifically, you can use a part of these tools called actionContext from Coral UI foundation collection. This helps you look at what you've selected and decide whether to show or hide the button based on your choices.

(function ($, window, undefined) {
    "use strict";

    $(document).on("foundation-contentloaded", function (e) {
        var selectedItems = $(".cq-siteadmin-admin-actions-edit-activator.foundation-collection-item.foundation-selections-item");

        // Ensure only one item is selected
        if (selectedItems.length === 1) {
            var selectedItem = $(selectedItems[0]);
            var variationName = extractVariationName(selectedItem);

            // Check if the selected item is a variation
            if (variationName) {
                // Display the button and set the variation name in the path
                showButtonAndSetVariationName(variationName);
            } else {
                // If the selected item is the experience fragment itself, set a default variation name
                showButtonAndSetVariationName("defaultVariation");
            }
        } else {
            // Hide the button when multiple items are selected or none are selected
            hideButton();
        }
    });

    function extractVariationName(selectedItem) {
        // Extract the variation name from the selected item (adjust based on your structure)
        var variationName = selectedItem.data("foundation-collection-item-id");
        return variationName ? variationName : null;
    }

    function showButtonAndSetVariationName(variationName) {
        $(".xf-edit-master-variation").show();

        // Set the variation name in the URL template
        var buttonHref = "/bin/wcmcommand?cmd=ue&_charset_=utf-8&path={item}&variation=" + variationName;
        $(".xf-edit-master-variation [href.uritemplate]").attr("href.uritemplate", buttonHref);
    }

    function hideButton() {
        $(".xf-edit-master-variation").hide();
    }
})(jQuery, this);

Raja_Reddy · Answer

Hi @pnagy To display the button only if the experience fragment variation is selected, you can add a condition to the granite:rel property.The granite:rel property includes a variation parameter that will be set to the name of the selected variation. This will cause the button to only be displayed when a variation is selected.To pass a default web variation name in the path when the experience fragment itself is selected, you can modify the href.uritemplate property to include a default value for the variation parameter.The href.uritemplate property includes a variation parameter with a default value of default. This will cause the default variation to be used when the experience fragment itself is selected.Thanks.

Anmelden

Login über soziales Netzwerk

Willkommen

Login über soziales Netzwerk

Scanne Datei nach Viren

Diese Datei kann nicht heruntergeladen werden