Introduction

Orange is a modern & responsive theme based on Laravel Livewire and Bootstrap designed for restaurant online ordering TastyIgniter platform. It is a perfect choice for any type of restaurant, cafe, bar, bistro, pizza shop, bakery, food delivery service, or any other food-related business. It's built with a focus on simplicity and ease of use, making it an excellent choice for developers looking to extend the TastyIgniter platform.

TastyIgniter Orange Theme is built with customization in mind. It uses the powerful Blade templating engine, allowing developers to easily modify the layout, appearance, and functionality of the theme.

Features

• Modern and clean design
• Responsive design and Mobile-friendly
• Effortlessly manage and showcase your menu items
• AJAX add-to-cart buttons
• Multiple checkout flow with single or two-page checkout
• Customisable theme options from the Theme Editor
• Lightweight and optimized for speed
• Supports static pages and navigation menus
• Maintained with constant updates
• Compatible with SEO Manager extension

Installation

You can install the theme via composer using the following command:

composer require tastyigniter/ti-theme-orange:"^4.0" -W

Usage

Setting featured items

Bundling theme assets

Components

Orange theme provides several component that are used to display various blocks on the page. These components are available from the Theme Editor and can be configured to display the desired content.

{.grid-3}

• Account Dashboard
• Account Settings
• Address Book
• Banner Preview
• Booking
• Captcha
• Cart Preview
• Cart Box
• Cart Item Modal
• Category List
• Checkout
• Contact
• Featured Items
• Fulfillment
• Fulfillment Modal
• Leave Review
• Local Header
• Local Search
• Location List
• Login
• Menu Item List
• Newsletter Subscribe Form
• Order List
• Order Preview
• Register
• Reservation List
• Reservation Preview
• Reset Password
• Review List
• Slider
• Socialite

Account Dashboard

igniter-orange::account-dashboard component displays the account dashboard of the logged-in customer.

This component has no configurable properties.

Account Settings

igniter-orange::account-settings component displays the settings form to update account details belonging to the logged-in customer.

The following properties can be configured:

• loginPage - (string) The page to redirect to when the customer changes their email address or password. Default is account.login.

Address Book

igniter-orange::address-book component displays a list of addresses belonging to the logged-in customer with options to add, edit, and delete addresses.

The following properties can be configured:

• itemsPerPage - (integer) Number of addresses to display per page.
• sortOrder - (string) Default sort order of addresses. Default is created_at desc.

Banner Preview

igniter-orange::banner-preview component displays the banner created in the admin area.

The following properties can be configured:

• code - (string) The unique banner code to display.
• width - (integer) The width of the banner image.
• height - (integer) The height of the banner image.

Booking

igniter-orange::booking component displays the booking form to make a reservation.

The following properties can be configured:

• useCalenderView - (boolean) Use the calendar view for date selection. Default is true.
• weekStartOn - (integer) Day of the week to start on. Default is 0 (Sunday).
• minGuestSize - (integer) Minimum number of guests allowed for a reservation. Default is 2.
• maxGuestSize - (integer) Maximum number of guests allowed for a reservation. Default is 20.
• noOfSlots - (integer) Number of time slots to display in the reduced timeslots view. Default is 6.
• telephoneIsRequired - (boolean) Require telephone number for booking. Default is true.
• successPage - (string) Page to redirect to when the booking is successful. Default is reservation.success.

Captcha

igniter-orange::captcha component displays the Google reCAPTCHA form field.

This component has no configurable properties.

Cart Preview

igniter-orange::cart-preview component displays the cart preview on the checkout page. The cart preview displays the cart items and totals.

This component has no configurable properties.

Cart Box

igniter-orange::cart-box component displays the cart box. The cart box displays the cart items, coupon form, cart totals, and checkout button.

The following properties can be configured:

• checkoutPage - (string) Page to redirect to when the checkout button is clicked. Default is checkout.checkout.

Cart Item Modal

igniter-orange::cart-item-modal component displays the cart item modal. This component is used to display the cart item details when the user clicks on the cart item or when the user clicks on the add to cart button.

The following properties can be configured:

• showThumb - (boolean) Display menu item image in the popup. Default is false.
• thumbWidth - (integer) Menu item image width. Default is 720.
• thumbHeight - (integer) Menu item image height. Default is 300.
• hideZeroOptionPrices - (boolean) Hide zero prices on options. Default is false.

Category List

igniter-orange::category-list component displays the menu categories navigation.

The following properties can be configured:

• menusPage - (string) Page to redirect to when a category is clicked. Default is local.menus.
• hideEmpty - (boolean) Hide empty categories with no menu items. Default is false.
• useLinkAnchor - (boolean) Use anchor links for category links. Default is true.

Checkout

igniter-orange::checkout component displays the checkout form. The checkout form is used to collect customer and payment details and process the order.

The following properties can be configured:

• isTwoPageCheckout - (boolean) Use two-page checkout. Default is false.
• showAddress2Field - (boolean) Display the address 2 checkout field. Default is true.
• showCityField - (boolean) Display the city checkout field. Default is true.
• showStateField - (boolean) Display the state checkout field. Default is true.
• showPostcodeField - (boolean) Display the postcode checkout field. Default is true.
• showTelephoneField - (boolean) Display the telephone checkout field. Default is true.
• showCountryField - (boolean) Display the country checkout field. Default is false.
• showCommentField - (boolean) Display the comment field. Default is true.
• showDeliveryCommentField - (boolean) Display the delivery comment field. Default is true.
• telephoneIsRequired - (boolean) Require telephone number for checkout. Default is true.
• agreeTermsSlug - (string) Static page for the checkout terms and conditions. Default is terms-and-conditions.
• menusPage - (string) Page to redirect to when checkout is unavailable. Default is local.menus.
• checkoutPage - (string) Page to redirect to when the checkout fails. Default is checkout.checkout.
• successPage - (string) Page to redirect to when the checkout is successful. Default is checkout.success.

Contact

igniter-orange::contact component displays the contact form.

This component has no configurable properties.

Featured Items

igniter-orange::featured-items component displays a list of featured menu items. The featured items are displayed on the home page or any other page where the component is added.

The following properties can be configured:

• title - (string) Title to display.
• items - (array) List of menu item IDs to display.
• limit - (integer) Number of items to display. Default is 6.
• itemsPerRow - (integer) Number of items to display per row. Default is 3.
• showThumb - (boolean) Show menu item images. Default is true.
• itemWidth - (integer) Item width. Default is 400.
• itemHeight - (integer) Item height. Default is 300.

Fulfillment

igniter-orange::fulfillment component displays the order fulfillment options such as the selected order type (delivery or pick-up), date, and time for the order fulfillment.

This component has no configurable properties.

Fulfillment Modal

igniter-orange::fulfillment-modal component displays the order fulfillment modal. The modal is used to select the order type (delivery or collection), date, and time for the order fulfillment and delivery address.

The following properties can be configured:

• defaultOrderType - (string) The default selected order type. Default is delivery.
• menusPage - (string) Page to redirect to when the delivery address changes. Default is local.menus.

Leave Review

igniter-orange::leave-review component displays the leave a review form on the order and reservation detail pages. The form allows customers to leave a review and rating for the order or reservation.

The following properties can be configured:

• type - (string) Leave a review for the order or reservation. Default is order.

Local Header

igniter-orange::local-header component displays the location header. The location header displays the location name, address, schedule and reviews.

• showThumb - (boolean) Display the location image thumb. Default is true.
• localThumbWidth - (integer) Location thumb width. Default is 320.
• localThumbHeight - (integer) Location thumb height. Default is 160.
• reviewPerPage - (integer) Number of reviews to display per page. Default is 10.
• reviewSortOrder - (string) Default sort order of reviews. Default is created_at desc.
• reviewsPage - (string) Page to redirect to when the "see more reviews" link is clicked. Default is local.reviews.

Local Search

igniter-orange::local-search component displays the search form to search for locations. Users can search for locations by full address, city, or postal code.

The following properties can be configured:

• hideSearch - (boolean) Hide the search field and display a view menu button. Default is false.
• menusPage - (string) Page to redirect to when a location is found. Default is local.menus.

Location List

igniter-orange::location-list component displays a list of locations. The component displays the search form, sorting and filter options, and a list of locations matching the search and filters.

The following properties can be configured:

• menusPage - (string) Page to redirect to when a location is clicked. Default is local.menus.
• itemPerPage - (integer) Number of locations to display per page. Default is 20.
• showThumb - (boolean) Display location image thumb. Default is true.
• thumbWidth - (integer) Location thumb width. Default is 95.
• thumbHeight - (integer) Location thumb height. Default is 80.
• sortBy - (string) The default selected sort order. Default is distance.
• orderType - (string) The default selected order type. Default is delivery.

Login

igniter-orange::login component displays the login form. The login form is used to authenticate customers and grant access to the account dashboard, address book, order history, and reservation history.

The following properties can be configured:

• redirectPage - (string) Page to redirect to after login. Default is account.account.

Menu Item List

igniter-orange::menu-item-list component displays a list of menu items. The component displays the menu items and search form. Users can search for menu items by name, description, or category.

The following properties can be configured:

• isGrouped - (boolean) Group menu items by category. Default is true.
• collapseCategoriesAfter - (integer) Collapse categories after the specified number of items in group view. Default is 5.
• itemsPerPage - (integer) Number of menu items to display per page. Default is 200. Set to 0 to disable pagination.
• sortOrder - (string) Default sort order of menu items. Default is menu_priority asc.
• showThumb - (boolean) Display menu item, category and allergen image thumb. Default is true.
• menuThumbWidth - (integer) Menu item image thumb width. Default is 95.
• menuThumbHeight - (integer) Menu item image thumb height. Default is 80.
• categoryThumbWidth - (integer) Category image thumb width. Default is 1240.
• categoryThumbHeight - (integer) Category image thumb height. Default is 256.
• allergenThumbWidth - (integer) Allergen image thumb width. Default is 28.
• allergenThumbHeight - (integer) Allergen image thumb height. Default is 28.
• hideMenuSearch - (boolean) Hide the menu search form. Default is false.

Newsletter Subscribe Form

igniter-orange::newsletter component displays the newsletter subscribe form. The form allows users to subscribe their email address for promotional emails and newsletters. Email addresses are stored in the database and can be added to a mailing list on Mailchimp.

The following properties can be configured:

• listId - (string) The Mailchimp list ID to subscribe users to. Default is null.

Order List

igniter-orange::order-list component displays a list of orders belonging to the logged-in customer. The component displays the order number, date, status, total, and actions to view the order details.

The following properties can be configured:

• itemsPerPage - (integer) Number of orders to display per page. Default is 10.
• sortOrder - (string) Default sort order of orders. Default is created_at desc.
• orderPage - (string) Page to redirect to when an order is clicked. Default is account.order.

Order Preview

igniter-orange::order-preview component displays the order details. The component displays the order details and actions to leave a review, reorder, or cancel the order.

The following properties can be configured:

• hashParamName - (string) URL routing parameter that holds the code used for displaying the order confirmation page. Default is hash.
• loginPage - (string) Page to redirect to when the user clicks the login button. Default is account.login.
• ordersPage - (string) Page to redirect to when viewing as logged in customer and an order is incomplete or not found. Default is account.orders.
• checkoutPage - (string) Page to redirect to when viewing as guest and an order is incomplete or not found. Default is checkout.checkout.
• menusPage - (string) Page to redirect to when the user clicks the reorder button. Default is local.menus.
• hideReorderBtn - (boolean) When rendering the component on the checkout confirmation page, hide the reorder button. Default is false.

Register

igniter-orange::register component displays the registration form to create a new customer account.

The following properties can be configured:

• redirectPage - (string) Page to redirect to after registration. Default is account.account.
• agreeTermsSlug - (string) Static page for the registration terms and conditions. Default is terms-and-conditions.
• activationPage - (string) Page to generate the email verification link. A code parameter will be appended to the URL. Default is account.register.
• loginPage - (string) Page to redirect to when the user clicks the login button. Default is account.login.

Reservation List

igniter-orange::reservation-list component displays a list of reservations belonging to the logged-in customer. The component displays the reservation number, date, time, status, and actions to view the reservation details.

The following properties can be configured:

• itemsPerPage - (integer) Number of reservations to display per page. Default is 20.
• sortOrder - (string) Default sort order of reservations. Default is reserve_date desc.
• reservationPage - (string) Page to redirect to when a reservation is clicked. Default is account.reservation.

Reservation Preview

igniter-orange::reservation-preview component displays the reservation details. The component displays the reservation details and actions to leave a review or cancel the reservation.

The following properties can be configured:

• hashParamName - (string) URL routing parameter that holds the code used for displaying the reservation confirmation page. Default is hash.

Reset Password

igniter-orange::reset-password component displays the reset password form. The form allows users to reset their password if they have forgotten it.

The following properties can be configured:

• resetPage - (string) Page to generate the reset password link. The selected page permalink should contain the code parameter. Default is account.reset.
• loginPage - (string) Page to redirect to after the password has been reset also used to generate the login link. Default is account.login.

Review List

igniter-orange::review-list component displays a list of reviews belonging to a location. The component displays the review rating, comment, and date.

The following properties can be configured:

• itemsPerPage - (integer) Number of reviews to display per page. Default is 20.
• sortOrder - (string) Default sort order of reviews. Default is created_at desc.

Socialite

igniter-orange::socialite component displays the social login buttons for Facebook, Google, Twitter, and GitHub.

The following properties can be configured:

• errorPage - (string) Page to redirect to when an error occurs during social login. Default is account.login.
• successPage - (string) Page to redirect to when the social login is successful. Default is account.account.
• confirm - (boolean) Display the email confirmation form after social login. Default is false.

Slider

igniter-orange::slider component displays the slider carousel.

The following properties can be configured:

• code - (string) The unique slider code to display. Default is home-slider.
• height - (integer) The height of the slider. Default is 60vh.
• effect - (string) The effect to use when transitioning between slides. Default is ease.
• delayInterval - (integer) The delay interval between slides in milliseconds. Default is 5000.
• hideControls - (boolean) Hide the slider controls. Default is false.
• hideIndicators - (boolean) Hide the slider indicators. Default is false.
• hideCaptions - (boolean) Hide the slider captions. Default is false.

Changelog

Please see CHANGELOG for more information on what has changed recently.

Reporting issues

If you encounter a bug in this extension, please report it using the Issue Tracker on GitHub.

Contributing

Contributions are welcome! Please read TastyIgniter's contributing guide.

Security vulnerabilities

For reporting security vulnerabilities, please see our our security policy.

License

TastyIgniter Local extension is open-source software licensed under the MIT license.