Add images, finally closes #1

Basically adds all the stuff for product images in the plugin. Removes the old product container class, instead using the row class that's also used on other components. Adds a few new properties for image sizes and classes as well. Also adds the necessary stuff to get the uploader running in the backend product editor and tweaks the component view to display mutiple images.
quangtrongonline · Nov 9, 2014 · 377fcb2 · 377fcb2
1 parent c66ecbd
commit 377fcb2
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 9 deletions.
diff --git a/components/Product.php b/components/Product.php
@@ -30,6 +30,12 @@ public function defineProperties()
             'addButtonText' => [
                 'title' => 'Buy button text',
             ],
+            'mainImageSize' => [
+                'title' => 'Main Image Size',
+            ],
+            'subImageSize' => [
+                'title' => 'Secondary Image Size',
+            ],
             'rowClass' => [
                 'title' => 'Row',
                 'group' => 'CSS Classes',
@@ -39,8 +45,20 @@ public function defineProperties()
                 'title' => 'Image',
                 'group' => 'CSS Classes',
             ],
-            'productContainerClass' => [
-                'title' => 'Product container',
+            'imageLinkClass' => [
+                'title' => 'Image Link',
+                'group' => 'CSS Classes',
+            ],
+            'mainImageContainerClass' => [
+                'title' => 'Main Image Container',
+                'group' => 'CSS Classes',
+            ],
+            'subImageContainerClass' => [
+                'title' => 'Secondary Image Containers',
+                'group' => 'CSS Classes',
+            ],
+            'imagesetContainerClass' => [
+                'title' => 'Imageset Container',
                 'group' => 'CSS Classes',
             ],
             'detailContainerClass' => [
@@ -95,8 +113,12 @@ public function prepareVars()
         $this->addButtonText = $this->page['addButtonText'] = $this->property('addButtonText');
         $this->rowClass = $this->page['rowClass'] = $this->property('rowClass');
         $this->imageClass = $this->page['imageClass'] = $this->property('imageClass');
-        $this->imageContainerClass = $this->page['imageContainerClass'] = $this->property('imageContainerClass');
-        $this->productContainerClass = $this->page['productContainerClass'] = $this->property('productContainerClass');
+        $this->imageLinkClass = $this->page['imageLinkClass'] = $this->property('imageLinkClass');
+        $this->mainImageSize = $this->page['mainImageSize'] = $this->property('mainImageSize');
+        $this->mainImageContainerClass = $this->page['mainImageContainerClass'] = $this->property('mainImageContainerClass');
+        $this->subImageSize = $this->page['subImageSize'] = $this->property('subImageSize');
+        $this->subImageContainerClass = $this->page['subImageContainerClass'] = $this->property('subImageContainerClass');
+        $this->imagesetContainerClass = $this->page['imagesetContainerClass'] = $this->property('imagesetContainerClass');
         $this->detailContainerClass = $this->page['detailContainerClass'] = $this->property('detailContainerClass');
         $this->qtyClass= $this->page['qtyClass'] = $this->property('qtyClass');
         $this->qtyWrapperClass= $this->page['qtyWrapperClass'] = $this->property('qtyWrapperClass');
@@ -112,7 +134,10 @@ public function loadProduct()
     {
         $productId = $this->propertyOrParam('idParam');
 
-        return ShopProduct::whereSlug($productId)->first();
+        return ShopProduct::whereSlug($productId)->with(['images' => function($query)
+        {
+            $query->orderBy('sort_order', 'asc');
+        }])->first();
     }
 
 }
diff --git a/components/product/default.htm b/components/product/default.htm
@@ -1,6 +1,20 @@
-<div class="{{ productContainerClass }}">
-    <div class="{{ imageContainerClass }}">
-        <img class="{{ imageClass }}" alt="{{ product.title }}" src="http://placehold.it/500/500" />
+<div class="{{ rowClass }}">
+    <div class="{{ imagesetContainerClass }}">
+        <div class="{{ rowClass }}">
+            {% for image in product.images %}
+            <div class="{{ image.sort_order == '1' ? mainImageContainerClass : subImageContainerClass }}">
+                <a href="{{ image.getPath() }}" class="{{ imageLinkClass }}">
+                    <img class="{{ imageClass }}" alt="{{ product.title }}"
+                        {% if image.sort_order == '1' %}
+                         src="{{ product.getSquareThumb(mainImageSize, image) }}"
+                        {% else %}
+                         src="{{ product.getSquareThumb(subImageSize, image) }}"
+                        {% endif %}
+                    />
+                </a>
+            </div>
+            {% endfor %}
+        </div>
     </div>
     <div class="{{ detailContainerClass }}">
 

diff --git a/models/Product.php b/models/Product.php
@@ -36,13 +36,20 @@ class Product extends Model
     public $morphOne = [];
     public $morphMany = [];
     public $attachOne = [];
-    public $attachMany = [];
+    public $attachMany = [
+        'images' => ['System\Models\File']
+    ];
 
     public function getCategoryIdOptions($keyValue = null)
     {
         return Category::lists('title', 'id');
     }
 
+    public function getSquareThumb($size, $image)
+    {
+        return $image->getThumb($size, $size, ['mode' => 'crop']);
+    }
+
     public function setUrl($pageName, $controller)
     {
         $params = [

diff --git a/models/product/fields.yaml b/models/product/fields.yaml
@@ -33,3 +33,10 @@ tabs:
             label: Description
             type: Backend\FormWidgets\RichEditor
             tab: Details
+
+        images:
+            type: Backend\FormWidgets\FileUpload
+            mode: image
+            imageHeight: 260
+            imageWidth: 260
+            tab: Images