Git Product home page Git Product logo

laravel-shop-menu's Introduction

Menu manager like Wordpress using Laravel and Nestable

See demo at: http://laravel-menu-builder.gopagoda.com/admin/menu Tutorial coming up at: http://maxoffsky.com

This application demonstrates usage of Nestable plugin jQuery plugin to provide the user with nice menu ordering experience without a page refresh: menu ordering in action

The menu controller is in app/controllers/Admin/MenuController.php The menu model is in app/models/Menu.php

A note on the data structure for the menu

The important columns of the "menus" table are:

  • id
  • parent_id
  • order

With these 3 fields we can build nested menus as many levels deep as you want. The Nestable plugin helps modify the values of these fields for the appropriate rows of data.

Use of recursion

The hard part that took me a looong time to build is a very small function inside of app/models/Menu.php:

public function buildMenu($menu, $parentid = 0) 
{ 
  $result = null;
  foreach ($menu as $item) 
    if ($item->parent_id == $parentid) { 
      $result .= "<li class='dd-item nested-list-item' data-order='{$item->order}' data-id='{$item->id}'>
      <div class='dd-handle nested-list-handle'>
        <span class='glyphicon glyphicon-move'></span>
      </div>
      <div class='nested-list-content'>{$item->label}
        <div class='pull-right'>
          <a href='".url("admin/menu/edit/{$item->id}")."'>Edit</a> |
          <a href='#' class='delete_toggle' rel='{$item->id}'>Delete</a>
        </div>
      </div>".$this->buildMenu($menu, $item->id) . "</li>"; 
    } 
  return $result ?  "\n<ol class=\"dd-list\">\n$result</ol>\n" : null; 
} 

This function uses recursion to display the menu to the user even if the menu is many many levels deep. This function alone can save you a bunch of time.

Installation instructions:

  • Download this repo
  • Set up a MySQL DB named 'shop-menu' and import install.sql file into it, make sure you edit credentials in app/config/database.php to match yours
  • Open up terminal and CD into the folder of this repo
  • Run "php artisan serve" to run the application
  • Open up the browser and navigate to "localhost:8000" to see it in action

Star this repo!

The more people star my repos - the more I will give back to the community.

Read more on my blog and follow on Twitter

I post tutorials all the time on my blog : http://maxoffsky.com, stay updated on my Twitter: http://twitter.com/msurguy

License

The Laravel menu manager is open-sourced software licensed under the MIT license

laravel-shop-menu's People

Contributors

msurguy avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.