Added Order Status setting to the Top Products Widget.

Author: bymayo

CHANGELOG.md

@@ -1,9 +1,13 @@
 # Commerce Widgets Changelog
 
+## 2.0.11 - 2019-01-07
+### Added
+- Added `Order Status` setting to the Top Products Widget.
+
 ## 2.0.10 - 2019-01-04
 ### Fixed
 - `groupBy` issue with MySQL 5.7 on some widgets
-- Week was showing incorrectly in the Goal widget 
+- Week was showing incorrectly in the Goal widget
 - Installing the plugin now populates the cache setting by default
 
 ### Changed

composer.json

@@ -2,7 +2,7 @@
     "name": "bymayo/commerce-widgets",
     "description": "Insightful dashboard widgets for your Craft Commerce 2 store.",
     "type": "craft-plugin",
-    "version": "2.0.10",
+    "version": "2.0.11",
     "keywords": [
         "craft",
         "cms",

src/assetbundles/commercewidgets/CommerceWidgetsAsset.php

@@ -37,7 +37,7 @@ public function init()
 
         $this->js = [
            'js/plugins/Chart.min.js',
-            'js/CommerceWidgets.js',
+           'js/CommerceWidgets.js',
         ];
 
         $this->css = [

src/assetbundles/commercewidgets/dist/js/CommerceWidgets.js

@@ -0,0 +1,48 @@
+if (typeof CommerceWidgets === typeof undefined) {
+    CommerceWidgets = {};
+}
+
+/**
+ * Class CommerceWidgets.OrderStatuses
+ */
+CommerceWidgets.OrderStatuses = Garnish.Base.extend(
+    {
+        init: function(id, settings) {
+            this.$container = $('#' + id);
+            this.$menuBtn = $('.menubtn', this.$container);
+            this.$statusInput = $('.status-input', this.$container);
+
+            this.menuBtn = new Garnish.MenuBtn(this.$menuBtn, {
+                onOptionSelect: $.proxy(this, 'onSelectStatus')
+            });
+
+            var statusId = this.$statusInput.val();
+
+            var $currentStatus = $('[data-id="' + statusId + '"]', this.menuBtn.menu.$container);
+
+            $currentStatus.trigger('click');
+
+        },
+
+        onSelectStatus: function(status) {
+            this.deselectStatus();
+
+            var $status = $(status);
+            $status.addClass('sel');
+
+            this.selectedStatus = $status;
+
+            this.$statusInput.val($status.data('id'));
+
+            // clone selected status item to menu menu
+            var $label = $('.commerceStatusLabel', $status);
+            this.$menuBtn.empty();
+            $label.clone().appendTo(this.$menuBtn);
+        },
+
+        deselectStatus: function() {
+            if (this.selectedStatus) {
+                this.selectedStatus.removeClass('sel');
+            }
+        }
+    });

src/templates/widgets/ProductsTop/settings.twig

@@ -2,27 +2,59 @@
 
 {% do view.registerAssetBundle("bymayo\\commercewidgets\\assetbundles\\commercewidgets\\CommerceWidgetsAsset") %}
 
-{{
-   forms.selectField(
-      {
-         label: 'Order By',
-         name: 'orderBy',
-         value: widget['orderBy'],
-         options: [
-            { label: 'Ordered Total', value: 'totalOrdered' },
-            { label: 'Revenue Total', value: 'totalRevenue' }
-         ]
-      }
-   )
-}}
+<div id="{{ id }}">
 
-{{
-   forms.textField(
-      {
-         label: 'Limit',
-         id: 'limit',
-         name: 'limit',
-         value: widget['limit']
-      }
-   )
-}}
+   <div class="field">
+       <div class="heading">
+           <label>Order Status</label>
+       </div>
+       <div class="input ltr">
+           <input type="hidden" class="status-input" name="orderStatusId" value="{{ widget['orderStatusId'] }}">
+           <a class="btn menubtn">
+              <span class="status"></span> {{ "All"|t('commerce') }}
+           </a>
+           <div class="menu">
+               <ul class="padded">
+                   <li>
+                      <a>
+                         <span class="commerceStatusLabel">
+                           <span class="status"></span> {{ "All"|t('commerce') }}
+                        </span>
+                     </a>
+                   </li>
+                   {% for status in orderStatuses %}
+                       <li>
+                           <a data-id="{{ status.id }}">{{ status.labelHtml|raw }}</a>
+                       </li>
+                   {% endfor %}
+               </ul>
+           </div>
+       </div>
+   </div>
+
+   {{
+      forms.selectField(
+         {
+            label: 'Order By',
+            name: 'orderBy',
+            value: widget['orderBy'],
+            options: [
+               { label: 'Ordered Total', value: 'totalOrdered' },
+               { label: 'Revenue Total', value: 'totalRevenue' }
+            ]
+         }
+      )
+   }}
+
+   {{
+      forms.textField(
+         {
+            label: 'Limit',
+            id: 'limit',
+            name: 'limit',
+            value: widget['limit']
+         }
+      )
+   }}
+
+</div>

src/widgets/ProductsTop.php

@@ -17,6 +17,7 @@
 use craft\base\Widget;
 use craft\helpers\StringHelper;
 use craft\db\Query;
+use craft\commerce\Plugin as CommercePlugin;
 
 class ProductsTop extends Widget
 {
@@ -26,6 +27,7 @@ class ProductsTop extends Widget
 
     public $limit;
     public $orderBy;
+    public $orderStatusId;
 
     // Static Methods
     // =========================================================================
@@ -69,10 +71,19 @@ public function getProducts()
          ->join(
             'LEFT JOIN', '{{%commerce_variants}} variants', 'variants.id = purchasables.id'
          )
+         ->join(
+            'LEFT JOIN', '{{%commerce_orders}} orders', 'orders.id = items.orderId'
+         )
          ->groupBy(['items.purchasableId'])
          ->orderBy($this->orderBy . ' desc')
          ->limit($this->limit);
 
+      if($this->orderStatusId != null)
+      {
+         $query
+            ->where(['orders.orderStatusId' => $this->orderStatusId]);
+      }
+
       $result = $query->cache(CommerceWidgets::$plugin->getSettings()->cacheDuration)->all();
 
       return $result;
@@ -95,9 +106,10 @@ public function rules()
             $rules,
             [
                 ['orderBy', 'string'],
-                ['limit', 'integer'],
+                [['limit', 'orderStatusId'], 'integer'],
                 ['limit', 'default', 'value' => 5],
-                ['orderBy', 'default', 'value' => 'totalRevenue']
+                ['orderBy', 'default', 'value' => 'totalRevenue'],
+                ['orderStatusId', 'default', 'value' => null]
             ]
         );
 
@@ -106,12 +118,21 @@ public function rules()
 
     public function getSettingsHtml()
     {
-        return Craft::$app->getView()->renderTemplate(
-            'commerce-widgets/widgets/' . StringHelper::basename(get_class($this)) . '/settings',
-            [
-                'widget' => $this
-            ]
-        );
+
+      // Credit - craft/vendor/craftcms/commerce/src/widgets/Orders.php
+      $id = StringHelper::basename(get_class($this)) . '-' . StringHelper::randomString();
+      $namespaceId = Craft::$app->getView()->namespaceInputId($id);
+
+      Craft::$app->getView()->registerJs("new CommerceWidgets.OrderStatuses('" . $namespaceId . "');");
+
+      return Craft::$app->getView()->renderTemplate(
+         'commerce-widgets/widgets/' . StringHelper::basename(get_class($this)) . '/settings',
+         [
+            'id' => $id,
+            'widget' => $this,
+            'orderStatuses' => CommercePlugin::getInstance()->getOrderStatuses()->getAllOrderStatuses()
+         ]
+      );
     }
 
     public function getBodyHtml()