The multi source capabilities is posible to be added only to the widgets that has “Items” attributes.
1. Add "Image Size Select"
If the items contains “image attribute”, you must to add “image size select” attribute.
If it’s not exists, will be error message.
It’s needed to unify the image size between all the sources.
to do so, please add “special attribute”, and select “image size” in special attribute type select.
If there are more then one image attribute, please specify the attribute name, to be connected with.
Also, you can add several size select attributes for several images.
2. Create section called "Source"
Add a section called “Source”, move it to the top.
Add a section called “Source”, move it to the top.
3. Add the Multi Source Attribute
Add the Multisource attribute – it’s under Dynamic Grouped Settings Type, and in “use for” select “Items”
4. Specify the attribute names and values for the multisource.
Find the item attribute names, that you want to be presented in the multisource, and put it in comma saparated in the “Included Attributes” text box.
Note: use your logic to decide what attributes needed and what not needed there, not always all the attributes from the items needed.
The “title” attribute is added automatically, so please don’t add it to the list.
If you need to set to some attribute default value, but no to add it to the select list (constant value), please specify it like this in the “default values” text box.
5. Check that the multisource works
Now it’s time to check that what you did it works, so just test the widget in the Elementor editor, select “Post” source, and the attributes sources, and make sure that the data is coming from the fields you have chosen.
6. Adding Ajax Functionality
Most of the widgets should have the “ajax” functionality with the multisource for the posts.
To add it, first select the ajax related checkboxes in the multisource attribute
Then, go to widget html editor and add those additions to the html wrapper:
{{uc_filtering_addclass}}
{{uc_filtering_attributes|raw}}
like this:
and around the div that wrapping the {{put_items()}} function, add the class “uc-items-wrapper”
if you have another items – {{put_items2()}}
then add around it’s wrapper class: “uc-items-wrapper2”
like this:
Now you can select “posts” and put some “filter tabs” near the widget and check that works.
If the widget has javascript and you need to refresh it after the filter replace the items, you can do it with the “uc_ajax_refreshed” event in the js tab like this:
That’s all for the multisource, this feature will make your widgets be rich and special.
