KoolReport is not only used for data report, it can be used to create beautiful product catalog as you see above. With the help from BarCode package, each product has its own barcode attached. It is very useful when you want to integrate products catalog with checkout machine supported barcode reader. BarCode package supports all most all types of barcodes available.
Beside,This package also support QRCode generation. You may see the QRCode appeared on the top right of the product catalogs. You may try to use your smart phone to read what it shows.
<?php
require_once "Products.php";
$products = new Products();
$products->run()->render();
?>
<?php
require_once "../../../load.koolreport.php";
use \koolreport\processes\Filter;
class Products extends koolreport\KoolReport
{
function settings()
{
return array(
"dataSources"=>array(
"products"=>array(
'filePath' => '../../../databases/products.csv',
'fieldSeparator' => '|',
'class' => "\koolreport\datasources\CSVDataSource"
),
)
);
}
function setup()
{
$node = $this->src('products')
->pipe(new Filter(array(
array('productLine', '=', 'Ships'),
)))
->pipe($this->dataStore('products'));
}
}
<?php
use \koolreport\widgets\koolphp\Table;
use \koolreport\barcode\BarCode;
use \koolreport\barcode\QRCode;
?>
<div class="report-content">
<style type="text/css">
a.pk
{
color:#333 !important;
text-decoration:none !important;
}
div.thumbnail:hover
{
box-shadow: 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12), 0 3px 5px -1px rgba(0,0,0,.2);
}
div.thumbnail div.img img
{
width:200px;
}
div.thumbnail div.img
{
text-align:center;
padding-top:15px;
}
div.thumbnail span.price
{
margin-top:2px;
font-weight:bold;
}
div.thumbnail .pk-info h3
{
text-align:center;
margin-top: 0;
}
div.thumbnail .pk-info p
{
color: #888;
font-size: 14px;
}
div.barcode {
margin-top: 10px;
text-align:center;
color:#777;
font-size:14px;
font-weight:bold;
letter-spacing: 3px;
}
div.vendor {
text-align: right;
font-weight: bold;
}
div.kreport-title {
// text-align: center;
}
div.website {
text-align: center;
margin-bottom: 20px;
}
</style>
<div class='kreport-title'>
<table style="width:100%;">
<tr>
<td style="vertical-align:bottom"><h1>Product Catalogs</h1></td>
<td class="text-right">
<?php
QRCode::create(array(
"format" => "svg",
"value"=>"https://www.koolreport.com",
'size' => 100
));
?>
</td>
</tr>
</table>
</div>
<div class='row kreport-horizontal-line-0'> </div>
<?php
// Table::create(array(
// "dataStore"=>$this->dataStore('products'),
// ));
$data = $this->dataStore('products')->data();
$len = count($data);
$numRow = floor($len / 3);
for ($i=0; $i<$numRow; $i++) {
?>
<div class='row'>
<?php
for ($j=0; $j<3; $j++) {
$index = $i * 3 + $j;
$row = $data[$index];
$productCode = $row['productCode'];
$code = (string)str_replace('_', '', substr($productCode, 1));
// echo $code;
?>
<div class="col-md-4">
<a href="#" class="pk">
<div class="card">
<img class="card-img-top" src="img/<?php echo $code;?>.jpg" alt="...">
<div class='barcode'>
<?php
BarCode::create(array(
"format" => "svg",
"value"=>$code,
"type"=>"TYPE_EAN_8"
));
echo '<br>' . $code;
?>
</div>
<div class="card-body">
<div class="pk-info">
<h3><strong><?php echo $row['productName']; ?></strong></h3>
<p><?php echo $row['productDescription']; ?></p>
</div>
<table style="width:100%;">
<tbody>
<tr>
<td><b><?php echo $row['productVendor']; ?></b></td>
<td class="text-right text-primary" style="vertical-align:bottom;"><b><?php echo '$' . $row['buyPrice']; ?></b></td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-xs-8"></div>
<div ></div>
</div>
</div>
</div>
</a>
</div>
<?php
}
?>
</div>
<?php
}
?>
</div>
productCode | productName | productLine | productScale | productVendor | productDescription | quantityInStock | buyPrice | MSRP |
S10_1678 |
1969 Harley Davidson Ultimate Chopper |
Motorcycles |
1:10 |
Min Lin Diecast |
This replica features working kickstand, front suspension, gear-shift lever, footbrake lever, drive chain, wheels and steering. All parts are particularly delicate due to their precise scale and require special care and attention. |
7933 |
48.81 |
95.7 |
S10_1949 |
1952 Alpine Renault 1300 |
Classic Cars |
1:10 |
Classic Metal Creations |
Turnable front wheels; steering function; detailed interior; detailed engine; opening hood; opening trunk; opening doors; and detailed chassis. |
7305 |
98.58 |
214.3 |
S10_2016 |
1996 Moto Guzzi 1100i |
Motorcycles |
1:10 |
Highway 66 Mini Classics |
Official Moto Guzzi logos and insignias, saddle bags located on side of motorcycle, detailed engine, working steering, working suspension, two leather seats, luggage rack, dual exhaust pipes, small saddle bag located on handle bars, two-tone paint with chrome accents, superior die-cast detail , rotating wheels , working kick stand, diecast metal with plastic parts and baked enamel finish. |
6625 |
68.99 |
118.94 |
S10_4698 |
2003 Harley-Davidson Eagle Drag Bike |
Motorcycles |
1:10 |
Red Start Diecast |
Model features, official Harley Davidson logos and insignias, detachable rear wheelie bar, heavy diecast metal with resin parts, authentic multi-color tampo-printed graphics, separate engine drive belts, free-turning front fork, rotating tires and rear racing slick, certificate of authenticity, detailed engine, display stand, precision diecast replica, baked enamel finish, 1:10 scale model, removable fender, seat and tank cover piece for displaying the superior detail of the v-twin engine |
5582 |
91.02 |
193.66 |
S10_4757 |
1972 Alfa Romeo GTA |
Classic Cars |
1:10 |
Motor City Art Classics |
Features include: Turnable front wheels; steering function; detailed interior; detailed engine; opening hood; opening trunk; opening doors; and detailed chassis. |
3252 |
85.68 |
136 |
S10_4962 |
1962 LanciaA Delta 16V |
Classic Cars |
1:10 |
Second Gear Diecast |
Features include: Turnable front wheels; steering function; detailed interior; detailed engine; opening hood; opening trunk; opening doors; and detailed chassis. |
6791 |
103.42 |
147.74 |
S12_1099 |
1968 Ford Mustang |
Classic Cars |
1:12 |
Autoart Studio Design |
Hood, doors and trunk all open to reveal highly detailed interior features. Steering wheel actually turns the front wheels. Color dark green. |
68 |
95.34 |
194.57 |
S12_1108 |
2001 Ferrari Enzo |
Classic Cars |
1:12 |
Second Gear Diecast |
Turnable front wheels; steering function; detailed interior; detailed engine; opening hood; opening trunk; opening doors; and detailed chassis. |
3619 |
95.59 |
207.8 |
S12_1666 |
1958 Setra Bus |
Trucks and Buses |
1:12 |
Welly Diecast Productions |
Model features 30 windows, skylights & glare resistant glass, working steering system, original logos |
1579 |
77.9 |
136.67 |
S12_2823 |
2002 Suzuki XREO |
Motorcycles |
1:12 |
Unimax Art Galleries |
Official logos and insignias, saddle bags located on side of motorcycle, detailed engine, working steering, working suspension, two leather seats, luggage rack, dual exhaust pipes, small saddle bag located on handle bars, two-tone paint with chrome accents, superior die-cast detail , rotating wheels , working kick stand, diecast metal with plastic parts and baked enamel finish. |
9997 |
66.27 |
150.62 |