How to add HTML attributes in generated widget from Victoire

Question

I would like to add an "onclick" attribute in buttons widget generated by Victoire CMS, in order to track click events by GoogleAnalytics. How can I do it ?

Cheers

Answer 1

So I suppose you're talking about a Widget Button here.

It's not planned to allow users to add as many attribute as they want on this widget. However you have multiple solutions.

1 - Use a Render Widget (recommended)

Replace your Button Widget with a Render Widget and call a route from on of your application Controller. You can add as many parameters as you want : in your case it can be useful to change the Google Analytics event name depending on the button you create.

2 - Themes (quickest)

Each Widget view can be overridden by using a custom Theme. For example, here you can create the file app/Resources/VictoireWidgetButtonBundle/views/showGoogleAnalytics.html.twig.

Copy the code from the original view vendor/victoire/button-widget/Victoire/Widget/ButtonBundle/Resources/views/show.html.twig and change it as you want.

Then you just have to edit your Widget in Style mode and select the theme you just added. If your theme doesn't appear here, clear your cache or check that the path is corresponding to the path described above.

However, this method add a new available Theme for all your buttons and it can cause errors if your client try to apply this Theme in another Button. That's why we recommend the first solution.

3 - Use an HTML Widget (quick & dirty)

HTML Widget allow you to add your custom HTML code.

Answer 2

U can use this:

<button onclick="myFunction()">Click me</button>

myFunction() is a function in javascript which will be done when you click on a button.

Every attribute can be added by setAttribute("attribute", "value");