Before you begin this tutorial, make sure you've completed the Quick Start Guide
In this tutorial, we'll automate a simple process: searching for Yelp reviews of restaurants you're viewing in OpenTable, all with the click of a button. We'll use the Elea page to develop our workflow.
1. Place a Button
Open the Page Editor
Start by navigating your browser to Elea's OpenTable page: Elea. Then, open the PixieBrix Page Editor.
Need help opening the Page Editor? Follow the steps here:
Grant Access
The first time you open the Page Editor on a new webpage, you need to grant PixieBrix access to the page. You can grant permanent access by either:
- Clicking Grant Permanent Access, or
- Granting temporary access by clicking on the PixieBrix extension in the Chrome Extensions dropdown and then refreshing the page
If you had the Page Editor open before navigating to the Elea page, you'll need to close the Page Editor by clicking the X in the top right corner, and then re-open it to provide access.
Place a Button
- Click Add in the top left of the Page Editor and choose Button.
- Then hover your cursor over any of the OpenTable buttons in the button group that includes [Overview, Photos, Popular Dishes, Menu, Reviews]
- Click and PixieBrix will add a new custom button "Action" at the end of the button group
(Optional Details) If you're using a different restaurant to build this flow, there might be additional buttons in the group, e.g., a Twitter button. Make sure to select a button that appears on every restaurant page, otherwise PixieBrix may infer a container selector that won't successfully locate the menu on every page. For example, if you select the Twitter button, by default PixieBrix looks for a menu with a "Twitter" button to place the new buttons.
Customize the Caption
To customize the caption, replace the word "Action" in the Caption text box with "Yelp"
2. Read Data
To select data from the page (even data not directly visible in the interface), we'll add a Component Reader brick. Click the "Add Button"
In the Brick Selection modal, click "Component Reader".
When you add a brick, the Page Editor automatically selects that brick for configuration
Identify the Framework (Automatic)
The Component Reader automatically detects what front-end framework the site creator used to create the site
For OpenTable, it will detect the popular React framework:
If PixieBrix did not automatically detect "React - 16.9.0", choose it in the Framework dropdown before continuing
Select the Page Element
Next, we'll tell PixieBrix where to read the data from on the page
Click the pointer icon for the Component Selector field to toggle selection mode
Hover your mouse to the right of the restaurant name. When the purple overlay looks like thee following, click to select the page element:
Optional: Choose a More Robust Selector
By default, PixieBrix will have chosen a selector that's based on the structural layout of the page. To ensure your selector works even if part of the OpenTable restaurant page layout changes, you can select the primary heading element h1[tabindex] suggestion from the "Selector" dropdown.
Find the Property Path to Data
Let's double-check what data PixieBrix found. In the Data Panel to the right of the field, switch the "Preview" tab and search for "Elea"
We'll see that PixieBrix found two fields restaurantNameTitle and restaurantName for the restaurant. For our tutorial, we'll use the restaurantName because that value typically matches how other sites refer to the restaurant
Click the page icon next to restaurantName to copy its property path to your clipboard: @data.restaurantName
3. Perform an Action
Now that we've selected the data, let's use it to perform a Yelp search
Configure an Action
To add an action, click the + Add button below the data brick we just added
In the brick selection modal, search for the "Yelp search in new tab" brick and choose it
When you add the brick, the Page Editor will automatically select the brick for configuration.
Configure the input using the data path we found in the Read Data step:
To improve your Yelp search we can add a location search parameter.
We can find the restaurant location property path similarly to how we found the restaurantName property path.
Go back to the Component Reader brick, and in the preview tab search "address"
We'll see that PixieBrix found restaurantAddress
Click the page icon next to restaurantAddress to copy its property path to your clipboard: @data.restaurantAddress
Go back to the âYelp Search in New Tabâ brick and configure the input using the additional data path we found for restaurant address:
Test Your Search
Press the Yelp button to test your search. Try it from different restaurant pages to see how the search dynamically changes. Once you're happy with the button, click Save to use this search in the future.