Adding an interactive Import.io Feed

Amy Marsh Is A Fashion Technologist In Training

Screen Shot

 

 

In this task I will be using import.io an application that has interested the team at chloédigital for some time and well we decided this week was the week and we had a little test of it, fell in love, created a christmas banner full of its data and well the rest is history. Import.io I approve!

 

Let’s get started!

 

 

To start with you need to download and sign up to import.io. In order to do this go onto to import.io site here, sign up and then download the application. Once downloaded it will appear on your desktop, Open up the application and search for a URL of a website who’s data you wish to use:

 

Screen Shot

 

 

I have chosen to use some of ASOS’s data, once on the ASOS website select the pink ‘io’ button on the right handside of the URL bar and that display the import.io bottom boxes:

 

Screen Shot

 

I have decided to create a banner containing Christmas jumpers, therefore I selected the Novelty Jumpers page on ASOS and then pressed the ‘Let’s get cracking!’ button on. This then gave me these three options, I select the first option ‘Extractor':

 

Screen Shot

 

Now you need to select ‘I’m there':

 

Screen Shot

 

Since we are on a product page, chose the option ‘Multiple':

Screen Shot

 

After this select ‘Detect optimal settings’, it will refresh the page and ask if you are still on the correct page you wish to extract if you are select yes:

 

Screen Shot

 

Now you notice when you hover over a section on the page it highlights. First highlight everything belonging to one product and select ‘Train rows':Screen Shot

 

Next highlight everything for the next product like so:

Screen Shot

Select ‘Train rows’, this time every product should automatically become highlighted:

 

Screen Shot

 

Once everything has been highlighted select ‘I’ve got all 26 rows!’ button:

 

Screen Shot

 

Now start to add columns, the data I wish to collect from this page is the product image, name and URL, therefore first click on the name of the product when highlighted and then select ‘Add column’ button:

 

Screen Shot

 

Highlight the product image and enter in these details after pressing train again, making sure it is set to image:

Screen Shot

 

Go through and add each column of data once you have added five products it should automatically select the rest of the products, like so:

 

Screen Shot

 

 

Do the same for the product title and enter in these details, making sure it is set to text:

 

Screen Shot

 

Do the same for the product url (highlight the product title again as this is a link on ASOS) and enter in these details, making sure it is set to link:

Screen Shot

 

 

 

Now you can click ‘I’ve got what I need’ which will then display this screen, click ‘I’m done training':

Screen Shot

 

Now upload it to import.io:

 

Screen Shot

 

 

Give the data a suitable name:

Screen Shot

 

Now it will show you your collected data, now we want to integrate the data so select ‘Integrate’ in this sidebar:

Screen Shot

 

That will open this page:

Screen Shot

 

Scroll down the left-hand side bar and select PHP, that should bring up this screen:

Screen Shot

 

Enter in your password to create an API key, it is likely this message will appear, go ahead and create an API key:

 

Screen Shot

You should now have been given an API key that looks similar to this:

Screen Shot

Now it is time to add the HTML and PHP to the site. Copy and paste the code given to you on import.io and open up your header.php file, just before the page div, add a new div with an id header-fun, copy this code below into your header file and change the import.io code to match yours:

 

I will now go through this code to make changing it easier and so you understand it.

 

This section of code is your personal user GUID and API key names:

 

 

This section of code that import.io give you, you will not need to change this:

 

This is another section of code import.io give you only it has been altered slightly by changing ‘$result’ to ‘$rawresultasossource':

 

 

I have also decided to add an extra feed from boohoo as well therefore I have added this section too. I have done this by following all the steps I did in order to add asos data but then when importio.io gave me the generate code I have only used these 3 lines from it:

 

 

Next this section sets up the array for each of the data tables which have been added:

 

The ‘product_title’, ‘product_image’ and ‘product_url’ match what titles I gave the table columns when collecting the data.

 

This section of code is the loop which sets up the html of how each image will come out from the data:

 

 

This section of code adds the welcome message in the middle of the image by asking if the next image is number 16 add this div instead:

 

 

Now we can add the css for the banner layout:

 

In order to add the flashing images you need to use jQuery, add this section of code to your main.js file:

 

Each of the four cycles decides which image it is going to highlight by picking a number at random and then checking whether or not it is already being highlighted by another cycle:

 

 

This section of code give each cycle a time of which to appear and disappear:

 

 

To make each of them a different colour and fade at different speeds change each active1, active2, active3 and active4 class in the styling by adding this to the css:

The fade in time should match the time you have set it in the main.js file.
 
View live example here
 

Complete!

 

Stay Updated

If you enjoyed this post, subscribe to the Fashion Technologist for updates

What are you interested in?

Discover more:
email course
(blog)Random Banner Ad Featured Image
Screen Shot 2014-06-10 at 17.43.10
two ways to make your site more secure
(feat) theFEED Profiles- RooftopAntics.com
How to change the default media linking option in wordpress
Why I do not like blog posts being By Admin
how to create a wordpress plugin

2 thoughts on “Adding an interactive Import.io Feed

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">