Add item images from BinStack to online store
This commit is contained in:
parent
29935f27ff
commit
83f9c89a3c
@ -12,11 +12,13 @@ class Item {
|
|||||||
|
|
||||||
private $itemid = null;
|
private $itemid = null;
|
||||||
private $itemdata = [];
|
private $itemdata = [];
|
||||||
|
private $itemimages = [];
|
||||||
|
|
||||||
function __construct($itemid) {
|
function __construct($itemid) {
|
||||||
global $binstack;
|
global $binstack;
|
||||||
$this->itemdata = $binstack->get('items', ['itemid', 'catid', 'name', 'text1', 'qty', 'want', 'cost', 'price'], ['itemid' => $itemid]);
|
$this->itemdata = $binstack->get('items', ['itemid', 'catid', 'name', 'text1', 'qty', 'want', 'cost', 'price'], ['itemid' => $itemid]);
|
||||||
$this->itemid = $itemid;
|
$this->itemid = $itemid;
|
||||||
|
$this->itemimages = $binstack->select('images', ['imagename', 'primary', 'imageid'], ['itemid' => $itemid, 'ORDER' => ['primary' => 'DESC']]);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getId() {
|
function getId() {
|
||||||
@ -59,6 +61,68 @@ class Item {
|
|||||||
return $this->itemdata['catid'];
|
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 {
|
class RenderItem {
|
||||||
@ -69,13 +133,29 @@ class RenderItem {
|
|||||||
$catid = $item->getCategoryId();
|
$catid = $item->getCategoryId();
|
||||||
$catname = $item->getCategoryName();
|
$catname = $item->getCategoryName();
|
||||||
$price = $item->getPrice();
|
$price = $item->getPrice();
|
||||||
$html = <<<END
|
$image = "";
|
||||||
<div class="card m-2">
|
if ($item->getImageCount() > 0) {
|
||||||
<div class="card-body text-center">
|
$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 />
|
<a href="./?page=item&id=$id" class="font-weight-bold">$name</a><br />
|
||||||
<span>$$price</span>
|
<span>$$price</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
END; */
|
||||||
|
$html = <<<END
|
||||||
|
<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>
|
||||||
END;
|
END;
|
||||||
return $html;
|
return $html;
|
||||||
}
|
}
|
||||||
@ -86,8 +166,13 @@ END;
|
|||||||
$catid = $item->getCategoryId();
|
$catid = $item->getCategoryId();
|
||||||
$catname = $item->getCategoryName();
|
$catname = $item->getCategoryName();
|
||||||
$price = $item->getPrice();
|
$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
|
$html = <<<END
|
||||||
<div class="list-group-item d-flex flex-wrap">
|
<div class="list-group-item d-flex flex-wrap">
|
||||||
|
$image
|
||||||
<div>
|
<div>
|
||||||
<h4><a href="./?page=item&id=$id">$name</a></h4>
|
<h4><a href="./?page=item&id=$id">$name</a></h4>
|
||||||
<span>$$price</span>
|
<span>$$price</span>
|
||||||
@ -116,8 +201,13 @@ END;
|
|||||||
$catname = $item->getCategoryName();
|
$catname = $item->getCategoryName();
|
||||||
$price = $item->getPrice();
|
$price = $item->getPrice();
|
||||||
$linetotal = number_format($price * $qty, 2);
|
$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
|
$html = <<<END
|
||||||
<div class="list-group-item d-flex flex-wrap">
|
<div class="list-group-item d-flex flex-wrap">
|
||||||
|
$image
|
||||||
<div>
|
<div>
|
||||||
<h4><a href="./?page=item&id=$id">$name</a></h4>
|
<h4><a href="./?page=item&id=$id">$name</a></h4>
|
||||||
<span>$$price</span>
|
<span>$$price</span>
|
||||||
|
@ -12,3 +12,4 @@ if (!defined('NICKELBOX')) {
|
|||||||
?>
|
?>
|
||||||
<script src="static/jquery-3.3.1.min.js"></script>
|
<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>
|
@ -15,6 +15,7 @@ if (!defined('NICKELBOX')) {
|
|||||||
<title><?php echo $settings['sitename']; ?></title>
|
<title><?php echo $settings['sitename']; ?></title>
|
||||||
<link rel="stylesheet" href="themes/<?php echo $settings['theme']; ?>/bootstrap.min.css" />
|
<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/fa-svg-with-js.css" />
|
||||||
|
<link rel="stylesheet" href="static/style.css" />
|
||||||
<script nonce="<?php echo $SECURE_NONCE; ?>">
|
<script nonce="<?php echo $SECURE_NONCE; ?>">
|
||||||
FontAwesomeConfig = {autoAddCss: false};
|
FontAwesomeConfig = {autoAddCss: false};
|
||||||
</script>
|
</script>
|
||||||
|
@ -41,6 +41,7 @@ foreach ($dbitems as $i) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-8 col-xl-9 d-flex flex-wrap">
|
<div class="col-md-8 col-xl-9 d-flex flex-wrap">
|
||||||
|
<div class="card-columns">
|
||||||
<?php
|
<?php
|
||||||
foreach ($items as $i) {
|
foreach ($items as $i) {
|
||||||
echo RenderItem::card($i);
|
echo RenderItem::card($i);
|
||||||
@ -48,4 +49,5 @@ foreach ($dbitems as $i) {
|
|||||||
?>
|
?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
@ -14,7 +14,31 @@ $item = new Item($_GET['id']);
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-4">
|
<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>
|
||||||
|
|
||||||
<div class="col-md-8">
|
<div class="col-md-8">
|
||||||
@ -37,7 +61,7 @@ $item = new Item($_GET['id']);
|
|||||||
</div>
|
</div>
|
||||||
<div class="row mt-4 mt-sm-0">
|
<div class="row mt-4 mt-sm-0">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="card">
|
<div class="card mt-4">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5 class="card-title">Description</h5>
|
<h5 class="card-title">Description</h5>
|
||||||
|
|
||||||
|
@ -53,7 +53,11 @@ foreach ($cats as $c) {
|
|||||||
<ul class="navbar-nav">
|
<ul class="navbar-nav">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="./?page=cart">
|
<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>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
|
12
public/static/script.js
Normal file
12
public/static/script.js
Normal 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
23
public/static/style.css
Normal 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;
|
||||||
|
}
|
@ -25,6 +25,9 @@ define("BINSTACK_DB_USER", "inventory");
|
|||||||
define("BINSTACK_DB_PASS", "");
|
define("BINSTACK_DB_PASS", "");
|
||||||
define("BINSTACK_DB_CHARSET", "utf8");
|
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.
|
// Name of the app.
|
||||||
define("SITE_TITLE", "NickelBox");
|
define("SITE_TITLE", "NickelBox");
|
||||||
|
Loading…
x
Reference in New Issue
Block a user