Business/NickelBox
2
0
Fork 0
Code Issues 7 Pull Requests Releases Wiki Activity

Add item images from BinStack to online store

Browse Source
This commit is contained in:
Skylar Ittner 2018-09-25 20:27:35 -06:00
parent 29935f27ff
commit 83f9c89a3c
9 changed files with 175 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
public/lib/item.php
View File

@ -12,11 +12,13 @@ class Item {
private $itemid = null;
private $itemdata = [];
private $itemimages = [];
function __construct($itemid) {
global $binstack;
$this->itemdata = $binstack->get('items', ['itemid', 'catid', 'name', 'text1', 'qty', 'want', 'cost', 'price'], ['itemid' => $itemid]);
$this->itemid = $itemid;
$this->itemimages = $binstack->select('images', ['imagename', 'primary', 'imageid'], ['itemid' => $itemid, 'ORDER' => ['primary' => 'DESC']]);
}
function getId() {
@ -59,6 +61,68 @@ class Item {
return $this->itemdata['catid'];
}
function getImageCount() {
return count($this->itemimages);
}
function getPrimaryImage(): ItemImage {
if (count($this->itemimages) > 0) {
foreach ($this->itemimages as $i) {
if ($i['primary'] == true) {
return new ItemImage($i['imagename'], $i['imageid'], $i['primary'] == true, $this->itemid);
}
}
$i = $this->itemimages[0];
return new ItemImage($i['imagename'], $i['imageid'], $i['primary'] == true, $this->itemid);
}
return null;
}
function getImages(): array {
$images = [];
foreach ($this->itemimages as $i) {
$images[] = new ItemImage($i['imagename'], $i['imageid'], $i['primary'] == true, $this->itemid);
}
return $images;
}
}
class ItemImage {
private $url = "";
private $primary = false;
private $imageid = 0;
private $itemid = 0;
function __construct(string $url, int $imageid, bool $primary, int $itemid) {
$this->url = $url;
$this->imageid = $imageid;
$this->primary = $primary;
$this->itemid = $itemid;
}
function getName(): string {
return $this->url;
}
function getAbsoluteUrl(): string {
return BINSTACK_URL_IMAGEPHP . "?i=" . $this->url;
}
function isPrimary(): bool {
return $this->primary == true;
}
function getID(): int {
return $this->imageid;
}
function getItemID(): int {
return $this->itemid;
}
}
class RenderItem {
@ -69,13 +133,29 @@ class RenderItem {
$catid = $item->getCategoryId();
$catname = $item->getCategoryName();
$price = $item->getPrice();
$image = "";
if ($item->getImageCount() > 0) {
$image = '<img class="card-img-top" src="' . $item->getPrimaryImage()->getAbsoluteUrl() . '" alt="' . $name . '" />';
}
/* $html = <<<END
<div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3">
<div class="card mb-4">
$image
<div class="card-body d-flex flex-column justify-content-end align-items-center">
<a href="./?page=item&id=$id" class="font-weight-bold">$name</a><br />
<span>$$price</span>
</div>
</div>
</div>
END; */
$html = <<<END
<div class="card m-2">
<div class="card-body text-center">
<a href="./?page=item&id=$id" class="font-weight-bold">$name</a><br />
<span>$$price</span>
<div class="card">
$image
<div class="card-body d-flex flex-column justify-content-end align-items-center">
<a href="./?page=item&id=$id" class="font-weight-bold">$name</a><br />
<span>$$price</span>
</div>
</div>
</div>
END;
return $html;
}
@ -86,8 +166,13 @@ END;
$catid = $item->getCategoryId();
$catname = $item->getCategoryName();
$price = $item->getPrice();
$image = "";
if ($item->getImageCount() > 0) {
$image = '<img class="d-inline-block mr-2 item-line-img" src="' . $item->getPrimaryImage()->getAbsoluteUrl() . '" alt="' . $name . '" />';
}
$html = <<<END
<div class="list-group-item d-flex flex-wrap">
$image
<div>
<h4><a href="./?page=item&id=$id">$name</a></h4>
<span>$$price</span>
@ -116,8 +201,13 @@ END;
$catname = $item->getCategoryName();
$price = $item->getPrice();
$linetotal = number_format($price * $qty, 2);
$image = "";
if ($item->getImageCount() > 0) {
$image = '<img class="d-inline-block mr-2 item-line-img" src="' . $item->getPrimaryImage()->getAbsoluteUrl() . '" alt="' . $name . '" />';
}
$html = <<<END
<div class="list-group-item d-flex flex-wrap">
$image
<div>
<h4><a href="./?page=item&id=$id">$name</a></h4>
<span>$$price</span>

3
public/parts/footer.php
View File

@ -11,4 +11,5 @@ if (!defined('NICKELBOX')) {
}
?>
<script src="static/jquery-3.3.1.min.js"></script>
<script src="static/bootstrap.min.js"></script>
<script src="static/bootstrap.min.js"></script>
<script src="static/script.js"></script>

1
public/parts/head.php
View File

@ -15,6 +15,7 @@ if (!defined('NICKELBOX')) {
<title><?php echo $settings['sitename']; ?></title>
<link rel="stylesheet" href="themes/<?php echo $settings['theme']; ?>/bootstrap.min.css" />
<link rel="stylesheet" href="static/fa-svg-with-js.css" />
<link rel="stylesheet" href="static/style.css" />
<script nonce="<?php echo $SECURE_NONCE; ?>">
FontAwesomeConfig = {autoAddCss: false};
</script>

14
public/parts/home.php
View File

@ -7,7 +7,7 @@
if (!defined('NICKELBOX')) {
die("Direct access denied.");
}
}
$dbitems = $binstack->select('items', 'itemid', ['AND' => ['price[>]' => 0], 'LIMIT' => 20]);
@ -41,11 +41,13 @@ foreach ($dbitems as $i) {
</div>
<div class="col-md-8 col-xl-9 d-flex flex-wrap">
<?php
foreach ($items as $i) {
echo RenderItem::card($i);
}
?>
<div class="card-columns">
<?php
foreach ($items as $i) {
echo RenderItem::card($i);
}
?>
</div>
</div>
</div>
</div>

28
public/parts/item.php
View File

@ -14,7 +14,31 @@ $item = new Item($_GET['id']);
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- Item image(s) go here -->
<?php
$image = "";
if ($item->getImageCount() > 0) {
$primary = $item->getPrimaryImage();
$image = '<div id="bigImageBox"><img class="mt-4 mb-2" id="bigImage" src="' . $primary->getAbsoluteUrl() . '" alt="" data-imgid="' . $primary->getID() . '" /></div>';
echo $image;
?>
<div class="d-flex flex-wrap justify-content-center">
<?php
foreach ($item->getImages() as $img) {
?>
<div class="card m-1 item-picker<?php
if ($img->getID() == $primary->getID()) {
echo " border-primary";
}
?>" data-imgid="<?php echo $img->getID(); ?>" data-imgurl="<?php echo $img->getAbsoluteUrl(); ?>">
<img class="item-picker-img" src="<?php echo $img->getAbsoluteUrl(); ?>" />
</div>
<?php
}
?>
</div>
<?php
}
?>
</div>
<div class="col-md-8">
@ -37,7 +61,7 @@ $item = new Item($_GET['id']);
</div>
<div class="row mt-4 mt-sm-0">
<div class="col-12">
<div class="card">
<div class="card mt-4">
<div class="card-body">
<h5 class="card-title">Description</h5>

6
public/parts/nav.php
View File

@ -53,7 +53,11 @@ foreach ($cats as $c) {
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="./?page=cart">
<i class="fas fa-shopping-cart"></i> Cart
<i class="fas fa-shopping-cart"></i> Cart<?php
if (!empty($_SESSION['cart'])) {
echo ' (' . count($_SESSION['cart']) . ')';
}
?>
</a>
</li>
<li class="nav-item">

12
public/static/script.js Normal file
View File

@ -0,0 +1,12 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
$(".item-picker").on('click', function () {
$("#bigImage").attr('src', $(this).data('imgurl'));
$(".item-picker").removeClass('border-primary');
$(this).addClass('border-primary');
});

23
public/static/style.css Normal file
View File

@ -0,0 +1,23 @@
/*
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
.item-line-img {
height: 4rem;
}
.item-picker-img {
height: 4rem;
width: 4rem;
}
#bigImage {
display: block;
max-height: 18rem;
max-width: 100%;
height: auto;
width: auto;
margin: 0 auto;
}

3
settings.template.php
View File

@ -25,6 +25,9 @@ define("BINSTACK_DB_USER", "inventory");
define("BINSTACK_DB_PASS", "");
define("BINSTACK_DB_CHARSET", "utf8");
// Absolute path to image.php in the BinStack installation folder
// Required for item images to load
define("BINSTACK_URL_IMAGEPHP", "/binstack/image.php");
// Name of the app.
define("SITE_TITLE", "NickelBox");