Search Yelp Reviews from OpenTable

🍎 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.

0. Start here

Start by opening another tab for Elea's OpenTable listing: Elea. 👈 Click that. Keep that tab open, and then come back over here.

1. Place a Button

Open the Page Editor

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

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 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'))

Customize the Caption

To customize the caption, replace the word "Action" in the Caption text box field with "Yelp"

2. Read the Data

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.

Select the Page Element

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:

Optional: Choose a More Robust Selector

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.

Rename the Property

Change the “Property” name to something more descriptive, like restaurantName

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 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

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 + 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

Configure the input using the data path we found in the Read Data step:

4. 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.