Question 307629 in PHP Question posted in
Official manual can be found here.

Adding gridstackjs to php yii2

Hi I’m having trouble setting up gridstackjs to php yii2 project.

i’ve tried setting up using below methods:

  1. Manual setup with CDN – faced potential conflicts related to managing the library through this approach
  2. Asset Bundle Setup using Yii2’s AssetBundle feature
  3. Composer Installation – issue occured in Yii2 not being able to find or publish the GridStackJS assets.
  4. Yii Asset Command
  5. GridStackAssetConfiguration – Adjusted GridStackAsset class with the $sourcePath property.

Despite these attempts the main problem persisted in getting started as the Yii2 was unable to find or publish the GridStackJS assets, leading to an error indicating that the file or directory to be published does not exist.

I’m still searching through web trying to figure out a way to set it up, however, i’m unable to find any concreate solution to setup.

Till now my setup is as under;
frontend/views/site/about.php

<?php

/** @var yiiwebView $this */

use yiihelpersHtml;
use frontendassetsGridStackAsset;

// Register the GridStackAsset for this specific view
GridStackAsset::register($this);
$this->registerJsFile('@web/js/gridstack-init.js', ['depends' => [GridStackAsset::class]]);

$this->title = 'About';
$this->params['breadcrumbs'][] = $this->title;
?>
<!DOCTYPE html>
<html>

<head>
    <script src="node_modules/gridstack/dist/gridstack-all.js"></script>
    <link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet" />
    <style type="text/css">
        .grid-stack {
            background: #FAFAD2;
        }

        .grid-stack-item-content {
            background-color: #18BC9C;
        }
    </style>
    <script type="text/javascript">
        // var items = [
        //     { content: 'my first widget' }, // will default to location (0,0) and 1x1
        //     { w: 2, content: 'another longer widget!' } // will be placed next at (1,0) and 2x1
        // ];
        var grid = GridStack.init();
        // grid.load(items);
    </script>



</head>

<body>
<div class="grid-stack">
            <div class="grid-stack-item">
                <div class="grid-stack-item-content">Item 1</div>
            </div>
            <div class="grid-stack-item" gs-w="2">
                <div class="grid-stack-item-content">Item 2 wider</div>
            </div>
        </div>
</body>

</html>

frontend/web/js/gridstack-init.js

const options = {
  cellHeight: "11rem",
  maxRow: 3,
};

const grid = GridStack.init(options);

// Add code to dynamically add widgets to the grid
// Example:
const widget1 = grid.addWidget({ w: 4, h: 2, content: '<div class="grid-stack-item-content">Widget 1</div>' });
const widget2 = grid.addWidget({ w: 4, h: 2, content: '<div class="grid-stack-item-content">Widget 2</div>' });

frontend/assets/GridStackAsset.php

<?php

namespace frontendassets;

use yiiwebAssetBundle;

class GridStackAsset extends AssetBundle
{
    public $sourcePath = '@npm/gridstack';

    public $css = [
        'gridstack/dist/gridstack.min.css',
    ];

    public $js = [
        'gridstack/dist/gridstack-all.js',
    ];

    public $depends = [
        'yiiwebYiiAsset', // Yii2 core assets
    ];
}

frontend/config/main.php

<?php
$params = array_merge(
    require __DIR__ . '/../../common/config/params.php',
    require __DIR__ . '/../../common/config/params-local.php',
    require __DIR__ . '/params.php',
    require __DIR__ . '/params-local.php'
);

return [
    'id' => 'app-frontend',
    'basePath' => dirname(__DIR__),
    'bootstrap' => ['log'],
    'controllerNamespace' => 'frontendcontrollers',
    'components' => [
        'request' => [
            'csrfParam' => '_csrf-frontend',
        ],
        'user' => [
            'identityClass' => 'commonmodelsUser',
            'enableAutoLogin' => true,
            'identityCookie' => ['name' => '_identity-frontend', 'httpOnly' => true],
        ],
        'session' => [
            // this is the name of the session cookie used for login on the frontend
            'name' => 'advanced-frontend',
        ],
        'log' => [
            'traceLevel' => YII_DEBUG ? 3 : 0,
            'targets' => [
                [
                    'class' => yiilogFileTarget::class,
                    'levels' => ['error', 'warning'],
                ],
            ],
        ],
        'errorHandler' => [
            'errorAction' => 'site/error',
        ],
        
        'urlManager' => [
            'enablePrettyUrl' => true,
            'showScriptName' => false,
            'rules' => [
                'invoice/generate-invoice' => 'invoice/generate-invoice',
            ],
        ],

        'assetManager' => [
            'bundles' => [
                'frontendassetsGridStackAsset',
            ],
        ],
        
       
    ],
    'params' => $params,
];

frontend/config/asset.php

<?php
return [
    'basePath' => '@webroot', // Specify the root directory containing asset files (in this case, the web directory)
    'baseUrl' => '@web',
    'bundles' => [
        'frontendassetsGridStackAsset',
        // Add other asset bundles if needed
    ],
];

composer.json

{
  "name": "yiisoft/yii2-app-advanced",
  "description": "Yii 2 Advanced Project Template",
  "keywords": [
    "yii2",
    "framework",
    "advanced",
    "project template"
  ],
  "homepage": "https://www.yiiframework.com/",
  "type": "project",
  "license": "BSD-3-Clause",
  "support": {
    "issues": "https://github.com/yiisoft/yii2/issues?state=open",
    "forum": "https://www.yiiframework.com/forum/",
    "wiki": "https://www.yiiframework.com/wiki/",
    "irc": "ircs://irc.libera.chat:6697/yii",
    "source": "https://github.com/yiisoft/yii2"
  },
  "minimum-stability": "stable",
  "require": {
    "php": ">=7.4.0",
    "yiisoft/yii2": "^2.0.34",
    "yiisoft/yii2-bootstrap5": "^2.0",
    "yiisoft/yii2-symfonymailer": "~2.0.3",
    "tecnickcom/tcpdf": "^6.6",
    "npm-asset/gridstack": "^9.5"
  },
  "require-dev": {
    "yiisoft/yii2-debug": "~2.1.0",
    "yiisoft/yii2-gii": "~2.2.0",
    "yiisoft/yii2-faker": "~2.0.0",
    "phpunit/phpunit": "~9.5.0",
    "codeception/codeception": "^5.0.0 || ^4.0",
    "codeception/lib-innerbrowser": "^4.0 || ^3.0 || ^1.1",
    "codeception/module-asserts": "^3.0 || ^1.1",
    "codeception/module-yii2": "^1.1",
    "codeception/module-filesystem": "^3.0 || ^2.0 || ^1.1",
    "codeception/verify": "^3.0 || ^2.2",
    "symfony/browser-kit": "^6.0 || >=2.7 <=4.2.4"
  },
  "autoload-dev": {
    "psr-4": {
      "app\": "app/",
      "common\tests\": [
        "common/tests/",
        "common/tests/_support"
      ],
      "backend\tests\": [
        "backend/tests/",
        "backend/tests/_support"
      ],
      "frontend\tests\": [
        "frontend/tests/",
        "frontend/tests/_support"
      ]
    }
  },
  "config": {
    "allow-plugins": {
      "yiisoft/yii2-composer": true
    },
    "process-timeout": 1800,
    "fxp-asset": {
      "enabled": false
    }
  },
  "repositories": [
    {
      "type": "composer",
      "url": "https://asset-packagist.org"
    }
  ]
}

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks. I resolved the issue by finding CDN through the below link. When i used CDN to setup it worked.

    https://cdnjs.com/libraries/gridstack.js


  2. 0

    In frontend/assets/GridStackAsset.php you have defined a $sourcePath. This means that the asset manager tries to read the files in the @npm/gridstack directory and publish them to a web accessible folder which is @frontend/web/assets by default.

    You have the following options:

    Create a directory assets in @frontend/web and make it writable by php.

    Or copy gridstack.min.css and gridstack-all.js to a web accessible directory and define basePath and baseUrl accordingly. The sourcePath definition must then be omitted.

    More information about assets you can find here: https://www.yiiframework.com/doc/guide/2.0/en/structure-assets

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search