Implement feature request issue #84 (#85)

* implemented show more feature * localize show more text * Limit number of visible menu item options * Animate show/hide --------- Co-authored-by: David Huang <david.huang@check24.de> Co-authored-by: Sam Poyigi <6567634+sampoyigi@users.noreply.github.com>
tastyigniter · May 27, 2024 · d2d4fdf · d2d4fdf
1 parent 0fafb81
commit d2d4fdf
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 5 deletions.
diff --git a/assets/js/cartbox.modal.js b/assets/js/cartbox.modal.js
@@ -160,6 +160,7 @@
         $cartItem.on('input', '[name="quantity"]', $.proxy(this.onQuantityOrOptionChanged, this))
         $cartItem.on('change', '[data-option-price]', $.proxy(this.onQuantityOrOptionChanged, this))
         $cartItem.on('input', '[data-toggle="quantity"] input[data-option-price]', $.proxy(this.onQuantityOrOptionChanged, this))
+        $cartItem.on('click', '[data-toggle="more-options"]', $.proxy(this.onToggleMoreOptions, this))
 
         $cartItem.on('submit', 'form', $.proxy(this.onSubmitForm, this))
         $cartItem.on('ajaxDone', 'form', $.proxy(this.onSuccessForm, this))
@@ -170,6 +171,14 @@
         $cartItem.cartItem()
     }
 
+    CartBoxModal.prototype.onToggleMoreOptions = function (event) {
+        var $el = $(event.currentTarget),
+            $container = $el.closest('[data-control="item-option"]')
+
+        $el.fadeOut()
+        $container.find('.hidden-item-options').fadeIn()
+    };
+
     CartBoxModal.DEFAULTS = {
         alias: undefined,
         menuItem: undefined,

diff --git a/components/CartBox.php b/components/CartBox.php
@@ -48,6 +48,12 @@ public function defineProperties()
                 'span' => 'right',
                 'validationRule' => 'nullable|integer',
             ],
+            'limitCartItemOptionsValues' => [
+                'label' => 'Limit number of item option values',
+                'type' => 'number',
+                'default' => 0,
+                'validationRule' => 'nullable|integer',
+            ],
             'checkStockCheckout' => [
                 'label' => 'lang:igniter.cart::default.help_stock_checkout',
                 'type' => 'switch',
@@ -105,6 +111,7 @@ protected function prepareVars()
         $this->page['pageIsCart'] = $this->property('pageIsCart');
         $this->page['pageIsCheckout'] = $this->property('pageIsCheckout');
         $this->page['hideZeroOptionPrices'] = (bool)$this->property('hideZeroOptionPrices');
+        $this->page['limitCartItemOptionsValues'] = $this->property('limitCartItemOptionsValues', 0);
 
         $this->page['checkoutEventHandler'] = $this->getEventHandler('onProceedToCheckout');
         $this->page['updateCartItemEventHandler'] = $this->getEventHandler('onUpdateCart');

diff --git a/components/cartbox/item_options.blade.php b/components/cartbox/item_options.blade.php
@@ -27,11 +27,32 @@ class="small pull-right text-muted">@lang('igniter.cart::default.text_required')
                     value="{{ $menuOption->menu_option_id }}"
                 />
                 <div class="option-group">
-                    @partial('@item_option_'.$menuOption->display_type, [
-                        'index' => $index,
-                        'cartItem' => $cartItem,
-                        'optionValues' => $optionValues->sortBy('priority'),
-                    ])
+                    @if($menuOption->display_type !== 'select' && $limitCartItemOptionsValues && $optionValues->count() >= $limitCartItemOptionsValues)
+                        @partial('@item_option_'.$menuOption->display_type, [
+                            'index' => $index,
+                            'cartItem' => $cartItem,
+                            'optionValues' => $optionValues->sortBy('priority')->slice(0, $limitCartItemOptionsValues),
+                        ])
+
+                        <div class="hidden-item-options" style="display: none;">
+                            @partial('@item_option_'.$menuOption->display_type, [
+                                'index' => $index,
+                                'cartItem' => $cartItem,
+                                'optionValues' => $optionValues->sortBy('priority')->slice($limitCartItemOptionsValues-1),
+                            ])
+                        </div>
+                        <button
+                            type="button"
+                            data-toggle="more-options"
+                            class="btn btn-link"
+                        >@lang('igniter.cart::default.button_show_more_options')</button>
+                    @else
+                        @partial('@item_option_'.$menuOption->display_type, [
+                            'index' => $index,
+                            'cartItem' => $cartItem,
+                            'optionValues' => $optionValues->sortBy('priority'),
+                        ])
+                    @endif
                 </div>
             @endif
         </div>

diff --git a/language/en/default.php b/language/en/default.php
@@ -48,6 +48,7 @@
     'button_apply_coupon' => 'Apply Coupon',
     'button_apply_tip' => 'Apply Tip',
     'button_view_cart' => 'Back to My Order',
+    'button_show_more_options' => 'Show more',
 
     'column_condition_name' => 'Name',
     'column_condition_priority' => 'Priority',