Adding an interactive Import.io Feed

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:

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:

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

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

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

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:

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

Next highlight everything for the next product like so:

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

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

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:

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

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:

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

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:

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

Now upload it to import.io:

Give the data a suitable name:

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

That will open this page:

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

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

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

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

The Fashion Technologist is brought to you by

The goal of this blog is to show how loving fashion and code can be a natural occurrence for someone. The team behind chloédigital wanted to give insight into what life is like in this new and exciting industry of Fashion and Technology in London... Find Out More