Open and view many recommendations with one click

Correct recommendations are the key to the progress of any online store. If the user is uncomfortable running around the site - he quickly leaves him to the competitor.

A typical store provides us with products in lists or long columns:



The disadvantage is that in the search process a lot of time is spent looking at all the options. Even having the necessary details in the list, people want to see a full description of the product, since there may be important information needed to make a decision: to buy, or not to buy.

Typically, the process goes something like this: I saw the list, clicked on the first name I liked, waited until the page loaded, scanned, returned, opened another product, waited until the page loaded, ... after 10 views, reopened the first option ... and so on. etc. ... a lot of clicks, a lot of time is spent waiting and reloading pages.

Personally, I go over the list, open everything in tabs, and then probe, so as not to run back and forth and do not wait for extra races. But then again, opening 20 titles is 20 clicks. Tires. And even opening each page in a separate tab is not just a click, but: i) or the right button and then “open in a new tab”, ii) or Ctrl + Click, iii) or another combination.

Recently, a new service has appeared that allows you to forward many sites with one link- And I thought, but let's use it to visually accelerate the work of other sites.

I used to focus on algorithms improving the quality of the recommendations themselves ( article 1 and article 2 ), but this time the improvement is not so much in the method of selecting recommendations as in their visualization.

If you sometimes send a bunch of links, you can compact them for sending via Twitter, for example, these 12 popular names on Ozone .

But if you have millions of such kits on your site, do not glue them with your hands. It is necessary to automate the process.

Generate tabs on the go with PHP

Let's take a simple example in PHP, when the links to products that the client would need to see right away are collected in an array $entry_array:

1.  
3. $n = count ( $entry_array );
4. $parameters = '';
5.  
6. for ( $i= 0; $i<$n; $i++ ) {
7.   if ( $url = trim ( $entry_array [$i] ) ) {
8.     $parameters .= '&url' . ($i+1) . '=' . urlencode ( $url ) .
9.                    '&caption' . ($i+1) . '=' . urlencode ( 'Предмет ' . ($i+1) );
10.   }
11. }
12.  
13. if ( $parameters ) {
14.   $bundled_link = 'http://many.at/links2tabs/?toc=' . urlencode ( 'Меню' ) . $parameters;
15.   echo '' . 'открыть весь список одним кликом' . '';
16. }
17. ?>

As a result, in addition to the standard already used by all menus “here 1, 2, 3, ... there” a useful link appears:

“Here 1, 2, 3, ... there” “ open the whole list with one click ”

...
... lists and pictures between the upper and lower navigation menu
...

“here 1, 2, 3, ... there” “ open the whole list with one click ”

By clicking on it, the user can view eight portable disks on WikiMart.

The table of contents menu can be hidden completely, for this you need to call in the request toc=off. You can select an arbitrary tab so that it opens by default using the parameter selected. Tabah signature set via the API, so that they can monitor changing caption1, caption2... You can also change the color scheme and other signatures. More details on the API page .

Of course, as always, there are drawbacks, you have to wait a few seconds for all the pages to load, but then everything is viewed without any wait and it is very nice to jump between the tabs.

Viewing in tabs should be considered as an additional opportunity, in no case as a replacement for lists, but as an extra button or link in the navigation of the Internet site.

Work with newsletters

Another area of ​​improvement should be considered email newsletters. Here is the last email with recommendations that came to my mailbox on Gmail:



Google somehow tightly chopped off all the pictures, and to see the products, I still had to click on each link. It would be much more convenient if the email was short with one link like this:

Hello, Dima!

We are sending you today's recommendations. Click this link to open all the items at once in separate tabs .

Sincerely,
your OZON.ru

And now I can see everything at once with one click.

Since the API is flexible, sub-tabs can also be generated. Here is such a newsletter, 5 categories with 4 recommendations:



you can turn it into one URL with all the names in tabs 5 x 4 by running through this PHP code:

2.  
3. // Структура данных
4. $categories = array ();
5. $categories [] = array (
6.   "name" => "Книжные новинки весны",
7.   "products" => array (
8.     array ( "url" => "http://www.ozon.ru/context/detail/id/5561766/",
9.             "name" => "И. Ильф, Е. Петров. Двенадцать стульев (подарочное издание)" ),
10.     array ( "url" => "http://www.ozon.ru/context/detail/id/5813135/",
11.             "name" => "Мэри Роуч. Обратная сторона космонавтики" ),
12.     array ( "url" => "http://www.ozon.ru/context/detail/id/5505592/",
13.             "name" => "Милена Сигаева. Странности животной сексуальности. Как они делают это...?" ),
14.     array ( "url" => "http://www.ozon.ru/context/detail/id/5801663/",
15.             "name" => "Стивен Джуан. Могут ли поцелуи продлить жизнь?" ),
16.   ),
17. );
18. // ...
19. $categories [] = array (
20.   "name" => "Свежие предложения электроники ",
21.   "products" => array (
22.     array ( "url" => "http://www.ozon.ru/context/detail/id/5592866/",
23.             "name" => "Мобильный телефон Nokia N8" ),
24.     array ( "url" => "http://www.ozon.ru/context/detail/id/5862823/",
25.             "name" => "Мобильный телефон LG P500 Optimus One" ),
26.     array ( "url" => "http://www.ozon.ru/context/detail/id/5623463/",
27.             "name" => "Ноутбук MSI Megabook CX620-292" ),
28.     array ( "url" => "http://www.ozon.ru/context/detail/id/5819885/",
29.             "name" => "Настольный жесткий диск Iomega Prestige 1TB, USB" ),
30.   ),
31. );
32.  
33. // Код
34. $top_parameters = '';
35. $i = 1;
36.  
37. foreach ( $categories as $key => $category ) {
38.   $parameters = '';
39.   $j = 1;
40.   foreach ( $category["products"] as $product ) {
41.     if ( $url = trim ( $product["url"] ) ) {
42.       $parameters .= '&url' . $j . '=' . urlencode ( $url ) .
43.                      '&caption' . $j . '=' . urlencode ( $product["name"] );
44.       $j++;
45.     }
46.   }
47.   if ( $parameters ) {
48.     $categories [$key] ["bundled_link"] = 'http://ozon.cheap.ly/?toc=off&title=OZON.ru&description=' .
49.       urlencode ( $category["name"] ) . $parameters;
50.     $categories [$key] ["bundled_shortlink"] = bit_ly_shorten ( $categories [$key] ["bundled_link"] );
51.     $top_parameters .= '&url' . $i . '=' . urlencode ( $categories [$key] ["bundled_shortlink"] ) .
52.                        '&caption' . $i . '=' . urlencode ( $categories [$key] ["name"] );
53.     $i++;
54.   }
55. }
56.  
57. if ( $top_parameters ) {
58.   $bundled_link = 'http://ozon.what-el.se/?toc=' . urlencode ( 'Меню' ) . $top_parameters;
59.   echo '' . 'открыть весь список одним кликом' . '';
60. }
61. ?>

And send a simple but convenient letter:

Hello, Dima!

We send you today's recommendations in five categories. Click this link to open all the items at once in separate tabs .

Sincerely,
your OZON.ru

After clicking on this link, we get to a site with 20 pages in tabs:



If the basic URLs that are used in the examples do not fit, you can change the page to your API, put a personal logo, prescribe other colors. In the settings, you can limit from which domains to accept API links so that no one can substitute pages of others. Here is a check that link c ozon.ruwill go to the tab, and link c d3.ruwill be ignored.

Instructions for creating a basic API link can be found here (so far only in English). You can even use your own domain and Google Analytics. Here's how it turned out to open Russian books on Amazon on the sub.domain super.cheap.ly .

Bonus - Feed Insertion

If you have a feed, you can open the latest news with one click too. For example, here is a link that downloads the latest 10 news from Lenta.ru .