6

Right now I'm in the process of expanding our experience editor functionality. I've followed these articles for adding chrome around renderings and placeholders, and now I'm trying to extend this functionality further by inserting a custom button at the bottom of my placeholders that will let the user add a rendering.

Basically, this button should do the exact thing that the "add to here" buttons do - pull up the "select a rendering" window - but it will always add the component to the bottom.

My current best lead is to use the webedit:newrendering somehow. I've tried creating a button in the following way:

<a class="btn btn-default" onclick="javascript:Sitecore.PageModes.PageEditor.postRequest('webedit:newrendering(id=@({renderingID}))')">Add New Rendering</a>

Unfortunately this doesn't work at all. Again, ideally this button would just do the same thing as the "Add here" button when you click a placeholder in the experience editor, and I realize the code I've written wouldn't do that even if it did work.

1

1 Answer 1

0

To achieve the desired functionality of adding a rendering to the bottom of a placeholder in the Experience Editor, you can create a custom button that triggers the "Add here" functionality. Unfortunately, directly invoking the webedit:newrendering command via JavaScript may not work as expected due to the complexity of the Experience Editor's interactions.

Instead, you can use JavaScript to simulate a click on the "Add here" button associated with the placeholder. Here's a general approach:

Identify the "Add here" Button:

In the Experience Editor, inspect the HTML to identify the button associated with adding a rendering to the placeholder.

Use JavaScript to Simulate Click:

Write JavaScript code that simulates a click on the identified "Add here" button. This can be achieved using the click() method. Here's a basic example assuming you have a button with the ID customAddRenderingButton:

<a id="customAddRenderingButton" class="btn btn-default">Add New Rendering</a>

<script>
document.getElementById('customAddRenderingButton').addEventListener('click', function() {
    // Replace 'yourPlaceholderId' with the actual ID of your placeholder
    var placeholderId = 'yourPlaceholderId';
    
    // Find the "Add here" button associated with the placeholder
    var addHereButton = document.querySelector('[data-sc-placeholder-id="' + placeholderId + '"] [data-sc-click="chrome:placeholder:addcontrol"]');

    // Simulate a click on the "Add here" button
    if (addHereButton) {
        addHereButton.click();
    } else {
        console.error('Add here button not found.');
    }
});
</script>

This script assumes that you have a placeholder with a specific ID (yourPlaceholderId). Adjust the placeholder ID accordingly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.