Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.laravelshopper.dev/llms.txt

Use this file to discover all available pages before exploring further.

This is documentation for Shopper v1, which is no longer maintained. Please refer to the v2 docs for the latest information.
The control panel may be customized in a number of different ways. You may add new pages, menus, a stylesheet, or maybe you just want to add some arbitrary Javascript. When you need to add features to your Shopper administration, you can first set up some configurations

​
Adding CSS and JS assets

Shopper can load extra stylesheets and Javascript files located in the public/ directory. You may register assets to be loaded in the Control Panel using the scripts and stylesheets keys of the resources in the config/shopper/admin.php config file. This will accept a array of links. You can load the links locally or using cdn. They will be automatically loaded in the control panel 
'resources' => [
  'stylesheets' => [
      '/css/admin.css',
      'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css',
    ],
  'scripts' => [
    'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js',
    '/js/admin.js',
  ],
],
Depending on how you will use your css and js files, the order is important
These commands will make Shopper expect files at public/css/admin.css and public/js/admin.js respectively for local links.

​
Customize Shopper theme

Shopper is built using Tallstack presets, but you are not limited to that because the base css file is already built for production. But if you want to customize your dashboard using Tailwind css you must first install Tailwind in your project. You can read the documentation Shopper using Tailwind CSS, there are some Tailwind plugins you need to install first: Plugin Forms and Typography, Autoprefixer. You can install them via NPM or Yarn: 
yarn add -D tailwindcss @tailwindcss/forms @tailwindcss/typography autoprefixer
After installing Tailwind, you need to create a tailwind.config.js file at the root of your project and add this content 
const colors = require('tailwindcss/colors')

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  presets: [
    require('./vendor/shopper/framework/tailwind.config'),
  ],
  content: [
    './resources/**/*.blade.php',
    './vendor/shopper/framework/**/*.blade.php',
    './vendor/filament/**/*.blade.php',
    './vendor/rappasoft/laravel-livewire-tables/resources/views/**/*.blade.php',
    './vendor/wire-elements/modal/resources/views/*.blade.php',
    './vendor/wireui/wireui/resources/**/*.blade.php',
    './vendor/wireui/wireui/ts/**/*.ts',
    './vendor/wireui/wireui/src/View/**/*.php'
  ],
  theme: {
    extends: {
      colors: {
        primary: colors.blue,
        secondary: colors.slate,
        indigo: colors.blue,
      }
    }
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}
New versions of Laravel come with vite by default so if you want to customize the Shopper admin, you need to switch to Laravel Mix and in your webpack.mix.js file, register Tailwind CSS as a PostCSS plugin: 
const mix = require('laravel-mix')

mix.postCss('resources/css/admin.css', 'public/css', [
  require('tailwindcss'),
])
Just load the default Tailwind CSS directives inside your ./resources/css/admin.css 
@tailwind base;
@tailwind components;
@tailwind utilities;
Then run yarn run dev
Keep in mind the admin.css file must be load on the resources key of your shopper/admin.php config file
And add Tailwind to the postcss.config.js file: 
module.export = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
After update (or not) the colors of your administration theme to reflect your brand. You’ll probably want to change the logo to display By default, Shopper logo is used next to your application name in the administration panel. You can choose between 2 options The first, and simplest, is to modify the value of the brand key in your shopper/admin.php configuration file, by entering the link to your logo. 
  /*
  |--------------------------------------------------------------------------
  | Admin Brand Name
  |--------------------------------------------------------------------------
  |
  | This will be displayed on the login page and in the sidebar's header.
  |
  */

  'brand' => 'img/logo.svg',
This will load using the Laravel asset() helper function. The 2nd option is to create a resources/views/vendor/shopper/components/brand.blade.php file to provide a customized logo:
It can be a simple svg or an image tag.
<img className="w-auto h-12" src="{{ asset('shopper/images/shopper-icon.svg') }}" alt="Shopper" />

​
Adding control panel routes

If you need to have custom routes for the control panel:
  1. Create a routes file. Name it whatever you want, for example: routes/shopper.php
  2. Then add this to your shopper/routes.php file so that all routes are dynamically loaded: 
     'custom_file' => base_path('routes/shopper.php'),
  3. If you want to add middleware to further control access to the routes available in this file you can add in the key middleware of the shopper/routes.php file 
    'middleware' => [
  'my-custom-middleware',
  'permission:can-access',
],