Search Yelp Reviews from OpenTable
Last updated
Last updated
🍎 Before you begin this tutorial, make sure you've completed the Developer 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.
Start by opening another tab for Elea's OpenTable listing: Elea. 👈 Click that. Keep that tab open, and then come back over here.
Then, open the PixieBrix Page Editor on the OpenTable/Elea page, NOT this page.
📘 Need help opening the Page Editor? Follow the steps here: Open the Page Editor
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.
Click New Mod in the top left of the Page Editor and choose Button.
Then hover your cursor over the Overview button in the OpenTable actions. If it says button, move your mouse down a bit until it says li or span.
Click, and PixieBrix will add a new custom button called Action at the end of the button group
Don’t see it at the end, or it’s formatting weirdly? Go to the Location field that appears in the middle panel of your page editor, and click the box to the right of the mouse button. Replace the text with this ol:has(> li:contains('Overview'))
To customize the caption, replace the word "Action" in the Caption text box field with "Yelp"
We'll add the Extra from Page brick to select data from the page (even data not directly visible in the interface). Click the + button to add a brick.
Search “extract from page” and select the brick that appears. Search for Jquery Selector Reader if that doesn’t appear.
Next, we'll tell PixieBrix where to read the data on the page.
Click the pointer icon for the selector field to toggle the selection mode.
Hover your mouse to the right of the restaurant name. When the purple overlay looks like the following, click to select the page element:
By default, PixieBrix will choose a selector based on the page's structural layout. To ensure your selector works even if part of the OpenTable restaurant page layout changes, select the #mainContent h1 suggestion from the "Selector" dropdown.
Change the “Property” name to something more descriptive, like restaurantName
Let's double-check what data PixieBrix found. In the Data Panel to the right of the field, switch the "Preview" tab and expand the data. We'll see that restaurantName is “Elea” for this page, which makes sense.
Click the copy icon next to restaurantName to copy its property path to your clipboard: @data.restaurantName
Now that we've selected the data let's use it to perform a Yelp search.
To add an action, click the + button below the data brick we just added
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.
You’re in luck! Head to the marketplace to activate this mod and start using it immediately without building anything.
🙋 Need some help with building? Head over to the Slack Community, and we’ll gladly help you!
In the brick selection modal, search for the "Yelp search in new tab" brick and choose it
Configure the input using the data path we found in the Read Data step:
