🎉 We've been featured on ProductHunt!

Laravel Shopper - A stack e-commerce administration panel for Laravel | Product Hunt

Control Panel

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/system.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/app.css',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css',
],
'scripts' => [
'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js',
'/js/app.js',
],
],
Info!

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/app.css and public/js/app.js respectively for local links.

Adding assets using Tailwind

Shopper is built using Tall Stack presets, but you are not limited to that because the base css file is already built for production.

But if you want to extend your dashboard using Tailwind css you must first install Tailwind in your project. You can read the documentation

Add the following settings to your Tailwind css config tailwind.config.js.

module.exports = {
...
presets: [
...
require('./vendor/wireui/wireui/tailwind.config'),
require('./vendor/shopper/framework/tailwind.config'),
],
purge: [
...
'./vendor/shopper/framework/resources/**/*.blade.php',
'./vendor/wire-elements/modal/resources/views/*.blade.php',
'./vendor/rappasoft/laravel-livewire-tables/resources/views/tailwind/**/*.blade.php',
'./vendor/wireui/wireui/resources/**/*.blade.php',
'./vendor/wireui/wireui/ts/**/*.ts',
'./vendor/wireui/wireui/src/View/**/*.php'
],
...
}
Hot Tip!

When using the shopper and wireui presets you will need to install some tailwind plugins to avoid errors during your builds.

# yarn
yarn add -D @tailwindcss/forms @tailwindcss/line-clamp
 
# npm
npm install -D @tailwindcss/forms @tailwindcss/line-clamp

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',
    ],