🐟

Search Yelp Reviews from OpenTable (5 min)

🍎

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

🚨

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.
image
  • Then hover your cursor over any of the OpenTable buttons in the button group that includes [Overview, Photos, Popular Dishes, Menu, Reviews]
  • image
    ℹī¸

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

  • Click and PixieBrix will add a new custom button "Action" at the end of the button group
image

Customize the Caption

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

image

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:

No action required! - PixieBrix automatically detects the front-end framework the site was built in
No action required! - PixieBrix automatically detects the front-end framework the site was built in

☑ī¸

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

image

Hover your mouse to the right of the restaurant name. When the purple overlay looks like thee following, click to select the page element:

image

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.

image

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:

image

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:

image

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.