Documentation

• Getting Started
• Getting Started with WordPress
• Multiple Listings
• Options and Settings
• Styling
• Setting Up in SquareSpace
• Examples
• Support
• Common Issues

Getting started

1. Include Fetch on your site

Unzip fetch2.zip. You need to include two files on your site: fetch2.js and fetch2.css. How you do this will vary depending on which CMS (NationBuilder, Weebly, Squarespace, etc.) you use.

<link rel="stylesheet" type="text/css" href="/css/fetch.css">
<script src="/js/fetch.js"></script>

2. Add the markup to your page

On the page where you want your Petfinder listings to appear, add a div with the [data-fetch] attribute.

You should include a message for people who’s browsers aren’t supported by Fetch—ideally a link to your listings on Petfinder.

<div data-fetch>
    Whatever you want to show while the pet listings are loading (or if they fail to load).
</div>

Note: you can use any selector, not just [data-fetch]. If you’re not sure what this means or what to use, just copy/paste the example above.

3. Initialize Fetch

In the footer of your page, after the content, initialize a new instance of Fetch.

Pass in your selector ([data-fetch], or a different selector if you used one). You also need to pass in an object with your API key, API secret, and shelter ID.

<script>
	new Fetch('[data-fetch]', {
		key: 'YOUR API KEY',
		secret: 'YOUR API SECRET',
		shelter: 'YOUR SHELTER ID'
	});
</script>

And that’s it, you’re done. Nice work!

Note: Your key, secret, and shelter ID are all case-sensitive. If you don’t have one already, you’ll need to get a Petfinder API key here.

An example

<link rel="stylesheet" type="text/css" href="/css/fetch.css">
<script src="/js/fetch.js"></script>

<div data-fetch>
	<p>Loading...</p>
    <p>If this is taking a while, please see our available pets at <a href="#">https://petfinder.com/search/pets-for-adoption/?shelter_id=AA11</a>.</p>
</div>

<script>
	new Fetch('[data-fetch]', {
		key: "7zQqMRcGFeznhF3BgyH9",
		secret: 'Xb2BphxcUDwmafKFFCEGv',
		shelter: 'AA11'
	});
</script>

Getting started with WordPress

If you’re using WordPress, getting started with Fetch is even easier.

1. From the WordPress Dashboard, upload fetch2.zip under Plugins > Add New > Upload Plugin.
2. Activate Fetch in the Dashboard under Plugins.

3. On the page where you want your Petfinder listings to appear, use the [fetch2][/fetch2] shortcode, passing in your API key, API secret, and shelter ID:

   [fetch2 key="YOUR API KEY" secret="YOUR API SECRET" shelter="YOUR SHELTER ID"]
   Whatever you want to show while the pet listings are loading (or if they fail to load).
   [/fetch2]

A WordPress Example

[fetch2 key="7zQqMRcGFeznhF3BgyH9" secret="Xb2BphxcUDwmafKFFCEGv" shelter="AA11"]
	<p>Loading...</p>
    <p>If this is taking a while, please see our available pets at <a href="#">https://petfinder.com/search/pets-for-adoption/?shelter_id=AA11</a>.</p>
[/fetch2]

Multiple Listings

You may want to show different pet listings on different parts of your site.

For example, you may want to show cats on one page, and dogs on another. Or perhaps you want to show adoptable pets on one page, and successfully adopted ones on another.

Fetch supports this out-of-the-box. To make this work, use a different selector for each listing.

If you use the WordPress plugin, it’s even easier. Just add your desired settings to the shortcode. The plugin handles the rest.

Multiple Listings Example

For this example, let’s show cats on one page and dogs on another.

Cats

<div data-fetch="cats">
	Loading...
</div>

<script>
	new Fetch('[data-fetch="cats"]', {
		key: 'abcd',
		secret: '1234',
		shelter: 'AA11'
	}, {
		oneSpecies: 'Cat'
	});
</script>

Dogs

<div data-fetch="dogs">
	Loading...
</div>

<script>
	new Fetch('[data-fetch="dogs"]', {
		key: 'abcd',
		secret: '1234',
		shelter: 'AA11'
	}, {
		oneSpecies: 'Dog'
	});
</script>

Options and Settings

You can update Fetch defaults and options by passing them in as a third argument when initializing Fetch.

If you’re using WordPress, you can provide them as all-lowercase parameters on the shortcode.

A customization example

For this example, let’s…

1. Turn off filters
2. Change the text for special needs pets
3. Open pet listings in a new tab

JavaScript Example

new Fetch('[data-fetch]', {
	key: 'abcd',
	secret: '1234',
	shelther: 'AA11'
}, {
	showFilters: false,
	specialNeeds: 'Requires Extra Carer',
	newTab: true
});

WordPress Plugin

[fetch2 key="abcd" secret="1234" shelter="AA11" showfilters="false" specialneeds="Requires Extra Care" newtab="true"]
Loading...
[/fetch2]

Styling

Every element in Fetch has a custom class prefixed with .fetch-* that you can hook into to nudge-and-tweak the styling.

This is for advanced users only. Please use your browser’s Developer Tools to explore the available classes and styling hooks and test changes.

Note: I cannot provide support for custom style changes.

Setting Up in SquareSpace

A few customers have found setting this up in SquareSpace a bit unintuitive. Here’s a short video of me walking through a SquareSpace setup in case you get stuck.

Heads up: this video shows the setup for Fetch v1, but it’s more-or-less the same process for v2.

Examples

To see working examples, check out the demos.

Support

Please use the issue tracker to report a bug or ask a question.

There is no included support for Fetch, so I answer these as time allows in my spare time.

Common Issues

If you followed all of the instructions here and your pet listings still aren’t displaying, make sure that you have sharing with other websites and via the API enabled on Petfinder.org.