🐟

Search Yelp Reviews from OpenTable (6 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. There is a video at the end of of this tutorial demonstrating what’s covered in the text.

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, and grant PixieBrix access to the page.

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, Menu, Specials, Reviews]
  • ℹ️

    (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, click the Page Editor Menu Item tab. Then replace the word "Action" in the Caption text box with "Yelp"

image

2. Select Data

Select the Page Element

  • Start by clicking the Data tab in the Page Editor
  • PixieBrix should detect React as website's Framework. If React is not detected, select it from the Framework dropdown
image
  • Click the pointer icon next to the Selector, then click on "Elea"
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 suggestion from the "Selector" dropdown.

image

Locate the Property Path to Data

We're now going to locate the property paths for the restaurant name and it's address.

To locate the path to the restaurant name, search for "elea" in the Page Editor Search field. You should see the following results:

image

We'll use the restaurant name for our Yelp search. Its property path is restaurantName

Next, search for "address" in the Page Editor Search field, and you should see the following results:

image

We'll use the restaurant address for our Yelp search. Its property path is restaurantAddress

πŸ’‘

You can click the πŸ“ƒ icon next to the property path to copy it to your clipboard. This will come in handy when configuring your search in the next section of this tutorial.

3. Perform an Action

Configure the Search

  • Go to the Effect tab of the Page Editor and click Add a Block
  • Search "yelp" and choose the Yelp Search in a new tab
image
  • For query, add the property path to restaurant name: restaurantName
  • For location, add the property path to restaurant address: restaurantAddress
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.