Home>Support>Widget IDs are not unique

Widget IDs are not unique

By C, 7 years ago. Last reply by Alex S, 7 years ago.

Hi,

I’m having difficulty adding widget-specific JavaScript parameters where the same type of widget appears more than once on a page. I believe the problem is due to the fact that widget IDs are note unique when used in the page builder.

As a test I added two SiteOrigin button widgets to a page and two to the blog sidebar (not the same page). I then updated so-widgets-bundle/widgets/button/tpl/default.php to output the widget ID ($this->id). The blog sidebar correctly showed unique widget IDs but the page builder did not (both were ‘sow-button-1’).

I’ve tried deactivating all plugins and a different theme to no avail.

Hope you can help.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 1 month ago Alex S
    Hi, I Work Here

    Hi C,

    That’s odd. That widget ID shouldn’t be used by SiteOrigin Page Builder. Do you have a public URL where we can take a look at what’s going on?

  2. 7 years, 1 month ago C

    Hi Alex,

    Thanks for getting back. Not just yet, the website’s only in a development environment at the moment.

    When you say that the widget ID is not used by the page builder that might be the problem. I need a unique ID in case I output more than one widget of the same type on the page. For consistency I had hoped to use the widget ID as this is what I would use in the sidebar (where I believe WordPress ensures widget IDs are unique).

    If this isn’t possible perhaps you could recommend an alternative approach. I think there may be a SiteOrigin ID I can use so perhaps I could resort to this when not in a sidebar?

    Thanks,

    C

  3. 7 years, 1 month ago Alex S
    Hi, I Work Here

    Hi C,

    Sorry, I should have been more specific. By “we don’t use that widget id”, I meant, we use our own. For example, here’s the widget id of a SiteOrigin Editor widget I added to a test page:

    panel-203-0-0-0

    This id is unique to the page, row, column and widget numbering. In other words, you shouldn’t be seeing the id you’re seeing as we purposefully don’t use it. To clarify, what version of SiteOrigin Page Builder are you using?>

  4. 7 years, 1 month ago C

    That makes sense. I’m outputting the ID myself for the sole purpose of seeing what it is (I’m using the latest version of page builder, 2.5.10).

    Can you confirm how I would get hold of your ID in the instance of my widget so that I can use it in my JavaScript parameters? Also, is it possible to get this ID in a non-SiteOrigin widget (specifically, in the ‘widget’ function)?

  5. 7 years, 1 month ago Alex S
    Hi, I Work Here

    Hi C,

    You can find the id by using something like the Chrome DevTools. Right click the area, click inspect element and look for the widget ID in the markup.

  6. 7 years, 1 month ago C

    Thanks Alex but I need this programmatically.

    Here’s the scenario: I have a custom slideshow widget which I use in the top row of the page builder for a large slideshow and again in the bottom row for a thumbnail carousel. Each widget takes different parameters which is used, in part, by JavaScript output on the page to render each slideshow in the appropriate way. At the moment I’m working around it by generating a random number and using this as the ID for each widget but this isn’t ideal.

    If I output the widget instance data for each slideshow I think I can see what I need:

    [panels_info] => Array
            (
                [class] => slideshow_widget
                [grid] => 0
                [cell] => 0
                [id] => 0
                [widget_id] => 89b728c6-b07b-4cc1-bd0a-84c8ce90e105
                [cell_index] => 0
                [widget_index] => 0
            )
    
    [panels_info] => Array
            (
                [class] => slideshow_widget
                [grid] => 5
                [cell] => 0
                [id] => 12
                [widget_id] => 74ca8f9e-26a3-4aeb-a987-aa626ae3a534
                [cell_index] => 0
                [widget_index] => 12
            )
    

    It would seem the ‘id’ or ‘widget_id’ would be appropriate for my needs but I had hoped to use an ID that was consistent between sidebar widgets and page builder widgets to save the need to distinguish between the two.

    What do you reckon?

  7. 7 years, 1 month ago Alex S
    Hi, I Work Here

    Hi C,

    You can’t use the widget_id – that’s not visible on the frontend and is purely for internal reference.

    You should get the page id and then use the panels_info to work out the unqiue widget id. The id will always be: panel-PAGE_IDGRID_IDCELL_IDWIDGET_D

    I had hoped to use an ID that was consistent between sidebar widgets and page builder widgets to save the need to distinguish between the two.

    Unfortunately, that’s not possible. We can’t use the standard WordPress ids as it’ll result in non-unique ids.

  8. 7 years, 1 month ago C

    Hi Alex,

    I think it might be:

    panel-PAGE_ID-GRID_ID-CELL_ID-CELL_INDEX

    ‘widget_index’ and ‘id’ of ‘panels_info’ don’t seem to be used.

    At present I’m creating my own ID using the ‘id’ value from the ‘panels_info’ array as it would seem to be unique. If the array does not exist then the widget instance id will be used (which is appropriate in a sidebar).

    $slideshow_id = $this->id;
            
    if (array_key_exists('panels_info', $instance)){
        $slideshow_id = "pagebuilder-slideshow" . $instance['panels_info']['id'];
    }
    

    Thanks for all your help.

  9. 7 years, 1 month ago Alex S
    Hi, I Work Here

    Hi,

    It very well might be – I sadly can’t double check it at the moment, sorry!

    I don’t see anything wrong with using the id you came up with as that’s just as unique as the one we generate.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More