{"id":34742,"date":"2023-02-07T09:23:41","date_gmt":"2023-02-07T09:23:41","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=34742"},"modified":"2025-09-17T14:15:42","modified_gmt":"2025-09-17T14:15:42","slug":"data-store-button-widget-overview","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/data-store-button-widget-overview\/","title":{"rendered":"Data Store Button Widget Overview"},"content":{"rendered":"\n

From this tutorial, you’ll find out everything about the Data Store Button <\/strong>widget functionality and how to use it.<\/p>\n\n\n\n

With the help of JetEngine\u2019s Data Store Button <\/strong>widget, you will be able to add and remove items from the Data Store<\/strong> in a few clicks.<\/p>\n\n\n\n

Features Overview<\/h2>\n\n\n\n
\n

Go to the admin control panel and open JetEngine > JetEngine dashboard<\/em><\/strong>. Enable the Data Stores<\/strong> module by ticking the box and pressing the \u201cSave<\/strong>\u201d button.<\/p>\n\n\n\n\"enabled\n\n\n\n

After that, go to the admin dashboard and open the listing you\u2019ve created for your Data Store. In case you need a hint on how to create a Data Store, please check this tutorial<\/a>. <\/p>\n\n\n\n

Then, add all the needed data with the help of the dynamic widgets. In the Elements tab, find the Data Store Button <\/strong>widget and add it to the page.<\/p>\n\n\n\n\"data\n\n\n\n

Now let\u2019s have a closer look at all the features.<\/p>\n<\/div><\/div>\n\n\n\n

Select Store<\/h2>\n\n\n\n
\n

Here you can choose the store you\u2019ve created before in the Data Store module. In our case, it will be \u201cfavorite agents.\u201d <\/p>\n\n\n\n\"selecting\n<\/div><\/div>\n\n\n\n

Label<\/h2>\n\n\n\n
\n

In this bar, you can name your button. This is how users will see it on the front end.<\/p>\n\n\n\n\"setting\n<\/div><\/div>\n\n\n\n

Icon<\/h2>\n\n\n\n
\n

You can choose an icon for your button from the Library or upload a custom SVG icon. There\u2019s also an opportunity to leave it without an icon. It\u2019s up to you.<\/p>\n\n\n\n\"adding\n<\/div><\/div>\n\n\n\n

Reload Listing Grid on Success<\/h2>\n\n\n\n
\n

Enable this option to reload the listing grid with current Store posts on success.<\/p>\n\n\n\n\"enabled\n<\/div><\/div>\n\n\n\n

Open Popup on Success<\/h2>\n\n\n\n
\n

With this option, you can choose the pop-up from JetPopup<\/strong> after the Post is successfully added to the store. The pop-up should be selected in the Advanced Tab > JetPopup<\/em><\/strong> section, and Trigger Type<\/strong> must be set to \u201cNone.\u201d<\/p>\n\n\n\n\"enabled\n<\/div><\/div>\n\n\n\n

Action After an Item Added to the Store<\/h2>\n\n\n\n
\n

This option allows you to choose an action to execute after adding an item to your store. Let\u2019s check all three actions.<\/p>\n\n\n\n