Browse Source

Add item images from BinStack to online store

master
Skylar Ittner 11 months ago
parent
commit
83f9c89a3c

+ 95
- 5
public/lib/item.php View File

@@ -12,11 +12,13 @@ class Item {
12 12
 
13 13
     private $itemid = null;
14 14
     private $itemdata = [];
15
+    private $itemimages = [];
15 16
 
16 17
     function __construct($itemid) {
17 18
         global $binstack;
18 19
         $this->itemdata = $binstack->get('items', ['itemid', 'catid', 'name', 'text1', 'qty', 'want', 'cost', 'price'], ['itemid' => $itemid]);
19 20
         $this->itemid = $itemid;
21
+        $this->itemimages = $binstack->select('images', ['imagename', 'primary', 'imageid'], ['itemid' => $itemid, 'ORDER' => ['primary' => 'DESC']]);
20 22
     }
21 23
 
22 24
     function getId() {
@@ -59,6 +61,68 @@ class Item {
59 61
         return $this->itemdata['catid'];
60 62
     }
61 63
 
64
+    function getImageCount() {
65
+        return count($this->itemimages);
66
+    }
67
+
68
+    function getPrimaryImage(): ItemImage {
69
+        if (count($this->itemimages) > 0) {
70
+            foreach ($this->itemimages as $i) {
71
+                if ($i['primary'] == true) {
72
+                    return new ItemImage($i['imagename'], $i['imageid'], $i['primary'] == true, $this->itemid);
73
+                }
74
+            }
75
+            $i = $this->itemimages[0];
76
+            return new ItemImage($i['imagename'], $i['imageid'], $i['primary'] == true, $this->itemid);
77
+        }
78
+        return null;
79
+    }
80
+
81
+    function getImages(): array {
82
+        $images = [];
83
+
84
+        foreach ($this->itemimages as $i) {
85
+            $images[] = new ItemImage($i['imagename'], $i['imageid'], $i['primary'] == true, $this->itemid);
86
+        }
87
+        return $images;
88
+    }
89
+
90
+}
91
+
92
+class ItemImage {
93
+
94
+    private $url = "";
95
+    private $primary = false;
96
+    private $imageid = 0;
97
+    private $itemid = 0;
98
+
99
+    function __construct(string $url, int $imageid, bool $primary, int $itemid) {
100
+        $this->url = $url;
101
+        $this->imageid = $imageid;
102
+        $this->primary = $primary;
103
+        $this->itemid = $itemid;
104
+    }
105
+
106
+    function getName(): string {
107
+        return $this->url;
108
+    }
109
+
110
+    function getAbsoluteUrl(): string {
111
+        return BINSTACK_URL_IMAGEPHP . "?i=" . $this->url;
112
+    }
113
+
114
+    function isPrimary(): bool {
115
+        return $this->primary == true;
116
+    }
117
+
118
+    function getID(): int {
119
+        return $this->imageid;
120
+    }
121
+
122
+    function getItemID(): int {
123
+        return $this->itemid;
124
+    }
125
+
62 126
 }
63 127
 
64 128
 class RenderItem {
@@ -69,13 +133,29 @@ class RenderItem {
69 133
         $catid = $item->getCategoryId();
70 134
         $catname = $item->getCategoryName();
71 135
         $price = $item->getPrice();
136
+        $image = "";
137
+        if ($item->getImageCount() > 0) {
138
+            $image = '<img class="card-img-top" src="' . $item->getPrimaryImage()->getAbsoluteUrl() . '" alt="' . $name . '" />';
139
+        }
140
+        /* $html = <<<END
141
+          <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3">
142
+          <div class="card mb-4">
143
+          $image
144
+          <div class="card-body d-flex flex-column justify-content-end align-items-center">
145
+          <a href="./?page=item&id=$id" class="font-weight-bold">$name</a><br />
146
+          <span>$$price</span>
147
+          </div>
148
+          </div>
149
+          </div>
150
+          END; */
72 151
         $html = <<<END
73
-<div class="card m-2">
74
-    <div class="card-body text-center">
75
-        <a href="./?page=item&id=$id" class="font-weight-bold">$name</a><br />
76
-        <span>$$price</span>
152
+    <div class="card">
153
+        $image
154
+        <div class="card-body d-flex flex-column justify-content-end align-items-center">
155
+           <a href="./?page=item&id=$id" class="font-weight-bold">$name</a><br />
156
+            <span>$$price</span>
157
+        </div>
77 158
     </div>
78
-</div>
79 159
 END;
80 160
         return $html;
81 161
     }
@@ -86,8 +166,13 @@ END;
86 166
         $catid = $item->getCategoryId();
87 167
         $catname = $item->getCategoryName();
88 168
         $price = $item->getPrice();
169
+        $image = "";
170
+        if ($item->getImageCount() > 0) {
171
+            $image = '<img class="d-inline-block mr-2 item-line-img" src="' . $item->getPrimaryImage()->getAbsoluteUrl() . '" alt="' . $name . '" />';
172
+        }
89 173
         $html = <<<END
90 174
 <div class="list-group-item d-flex flex-wrap">
175
+    $image
91 176
     <div>
92 177
         <h4><a href="./?page=item&id=$id">$name</a></h4>
93 178
         <span>$$price</span>
@@ -116,8 +201,13 @@ END;
116 201
         $catname = $item->getCategoryName();
117 202
         $price = $item->getPrice();
118 203
         $linetotal = number_format($price * $qty, 2);
204
+        $image = "";
205
+        if ($item->getImageCount() > 0) {
206
+            $image = '<img class="d-inline-block mr-2 item-line-img" src="' . $item->getPrimaryImage()->getAbsoluteUrl() . '" alt="' . $name . '" />';
207
+        }
119 208
         $html = <<<END
120 209
 <div class="list-group-item d-flex flex-wrap">
210
+    $image
121 211
     <div>
122 212
         <h4><a href="./?page=item&id=$id">$name</a></h4>
123 213
         <span>$$price</span>

+ 2
- 1
public/parts/footer.php View File

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

+ 1
- 0
public/parts/head.php View File

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

+ 8
- 6
public/parts/home.php View File

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

+ 26
- 2
public/parts/item.php View File

@@ -14,7 +14,31 @@ $item = new Item($_GET['id']);
14 14
 <div class="container">
15 15
     <div class="row">
16 16
         <div class="col-md-4">
17
-            <!-- Item image(s) go here -->
17
+            <?php
18
+            $image = "";
19
+            if ($item->getImageCount() > 0) {
20
+                $primary = $item->getPrimaryImage();
21
+                $image = '<div id="bigImageBox"><img class="mt-4 mb-2" id="bigImage" src="' . $primary->getAbsoluteUrl() . '" alt="" data-imgid="' . $primary->getID() . '" /></div>';
22
+                echo $image;
23
+                ?>
24
+                <div class="d-flex flex-wrap justify-content-center">
25
+                    <?php
26
+                    foreach ($item->getImages() as $img) {
27
+                        ?>
28
+                        <div class="card m-1 item-picker<?php
29
+                        if ($img->getID() == $primary->getID()) {
30
+                            echo " border-primary";
31
+                        }
32
+                        ?>" data-imgid="<?php echo $img->getID(); ?>" data-imgurl="<?php echo $img->getAbsoluteUrl(); ?>">
33
+                            <img class="item-picker-img" src="<?php echo $img->getAbsoluteUrl(); ?>" />
34
+                        </div>
35
+                        <?php
36
+                    }
37
+                    ?>
38
+                </div>
39
+                <?php
40
+            }
41
+            ?>
18 42
         </div>
19 43
 
20 44
         <div class="col-md-8">
@@ -37,7 +61,7 @@ $item = new Item($_GET['id']);
37 61
     </div>
38 62
     <div class="row mt-4 mt-sm-0">
39 63
         <div class="col-12">
40
-            <div class="card">
64
+            <div class="card mt-4">
41 65
                 <div class="card-body">
42 66
                     <h5 class="card-title">Description</h5>
43 67
 

+ 5
- 1
public/parts/nav.php View File

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

+ 12
- 0
public/static/script.js View File

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

+ 23
- 0
public/static/style.css View File

@@ -0,0 +1,23 @@
1
+/*
2
+This Source Code Form is subject to the terms of the Mozilla Public
3
+License, v. 2.0. If a copy of the MPL was not distributed with this
4
+file, You can obtain one at http://mozilla.org/MPL/2.0/.
5
+*/
6
+
7
+.item-line-img {
8
+    height: 4rem;
9
+}
10
+
11
+.item-picker-img {
12
+    height: 4rem;
13
+    width: 4rem;
14
+}
15
+
16
+#bigImage {
17
+    display: block;
18
+    max-height: 18rem;
19
+    max-width: 100%;
20
+    height: auto;
21
+    width: auto;
22
+    margin: 0 auto;
23
+}

+ 3
- 0
settings.template.php View File

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

Loading…
Cancel
Save