Ето го кода който извежда резултатите от API-то
PHP:
<?php
header('content-type:text/html;charset=utf-8');
function getApiData($url, $cacheFile) {
$cacheTime = is_file($cacheFile) ? filemtime($cacheFile) : 0;
$diff = time() - $cacheTime;
if($diff < 60*60) {
$results = file_get_contents($cacheFile);
} else {
$results = file_get_contents($url);
file_put_contents($cacheFile, $results);
}
$results = json_decode($results, true);
if($results['status']) {
return $results['result'];
} else {
return array();
}
}
function getCollections() {
$collectionsUrl = "URL-na-API-to";
$cacheFile = 'collecitons.json';
return getApiData($collectionsUrl, $cacheFile);
}
function getCollectionProducts(array $collection) {
return getApiData($collection['api_products'], 'collection_'.$collection['id'].'.json');
}
$_GET['collection'] = 88; // тип на колекцията
$collections = getCollections();
if(isset($_GET['collection']) && $_GET['collection']) {
$collection = false;
foreach($collections as $c) {
if($c['id'] == $_GET['collection']) {
$collection = $c;
break;
}
}
$collectionProducts = getCollectionProducts($c);
foreach($collectionProducts as $product) {
}
} else {
foreach($collections as $collection) {
echo '<a href="?collection='.$collection['id'].'">'.$collection['title'].' discount: '.$collection['discount'].'%</a><br/>';
}
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo Api</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<div id="w">
<h1>Demo API</h1>
<div id="products" class="clearfix">
<?php
foreach($collectionProducts as $product) {
//var_dump($product);
//break;
echo "<div class=\"product\">\n";
echo "<h2><a href=\"".$product['url']."\" target=\"_blank\">".$product['product_name']."</a></h2>\n";
echo "<center><a href=\"".$product['url']."\" target=\"_blank\"><img src=\"".$product['main_image']['thumbnail']."\" alt=\"".$product['product_name']." featured image\" class=\"thumb\"></a></center>\n";
echo "<p>Цена: <span class=\"price\">$".$product['regular_price']."</span></p>\n";
echo "<p>Количество: ".$product['quantity']."</p>\n";
echo "</div>\n";
}
?>
</div>
</div>
</body>
</html>
Ето и стилизирането
[css]html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
h1 { font-family: "Galindo", Tahoma, Arial, sans-serif; font-weight: normal; font-size: 2.6em; line-height: 1.4em; color: #565656; margin-bottom: 10px; }
h2 { font-family: "Galindo", Tahoma, Arial, sans-serif; font-weight: normal; }
p { font-size: 1.1em; color: #555; line-height: 1.25em; margin-bottom: 11px; }
#w { max-width: 950px; min-width: 720px; padding-top: 15px; margin: 0 auto; background: #fff; }
#products { display: block; padding: 5px 9px; }
#products .product {
display: block;
float: left;
box-sizing: border-box;
border: 1px solid #fff;
padding: 4px 5px;
width: 220px;
margin-right: 6px;
margin-bottom: 20px;
height: 260px;
overflow: hidden;
}
#products .product:hover { border-color: #bcbcbc; background: #f5f5f5; }
#products .product h2 { font-size: 1.4em; line-height: 1.25em; margin-bottom: 3px; text-shadow: 1px 1px 0px #fff; }
#products .product h2 a { display: block; text-decoration: none; color: #536ba8; }
#products .product h2 a:hover { background: #d2dcf6; }
#products .product p { font-weight: bold; color: #666; margin-bottom: 3px; }
#products .product .price { color: #629c5f; }
#products .product .thumb {
display: block;
padding: 2px;
margin-bottom: 5px;
background: #fff;
box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }[/css]
Не е нещо голямо, но пак казвам - Back end-a за мен е сложно
Успех
