GUIDE: Drupal x Glisser Elements

Hi all,

We’ve had a couple of enquiries as to whether Glisser Elements can be used in conjunction with Drupal based websites. Yes, as far as we have tested, you can.

Below are some sites/videos which we think could be helpful in making this work:

We will continue to test Drupal and Elements ourselves. If anyone has any advice in this area feel free to share it below!

Hi all, just a quick follow up to my previous post, we’ve implemented Elements into Drupal as a proof of concept and found that it all works well, please see the below guide we’ve put together, which we’ll soon be adding to our Storybook.

Run Elements on Drupal application

Before jumping into the Drupal configuration, it’s important to have a React application running the Elements wanted so it can be used within a Drupal application. This application is a wrapper to be used as a module in Drupal. You can read more about how to create simple React application and add the Elements to it in our storybook.

Installing the modules

Once your React app is finished then you can move to integrate with Drupal. Assuming you Drupal application is running, it can have Glisser Elements available as content block. There may be a few ways to run React in your project however the quickest is by installing JS Component as a module under ‘Extend’. This will allow your React app with the Elements to also be run as a module.With the JS Component installed, we can move to install your React app. Simply place the contents of your app into modules/custom/custom_react_app (this is a suggested path, feel free to place whenever is necessary). If you prefer, you can create the react app directly in the module folder rather than move the contents there.Now with your custom React project in modules folder, you need to add two files in order to make the custom modules available to Drupal.The first step is to create an info file. The name of the file needs to follow the pattern This file needs to be at the root of modules/custom/custom_react_app. Here’s a suggested content of your info file:

type: module 
name: Glisser Elements 
description: A Glisser Elements module for Drupal 
core_version_requirement: ^8.7.7 || ^9 
package: React Drupal Sample 
               - js_component

Then the other yml file required is the one which will connect your custom Elements React app build javascript file to be bundled with your Drupal application.
Again, following the same name pattern, it needs to be named custom_react_app.yml and the content will be:

    label: Glisser Elements
    description: Glisser Elements with Drupal App
    root_id: root 
            /components/build/static/js/build.js: {}

Note that the /build/static/js/main.js points to the name of your React Elements build entry point. This name will vary depending on the javascript bundler (webpack, parcel, etc) used. It’s very likely that you will need to manually change this everytime you build either because some bundlers may hash the file name or the build entry point is not main.js.

Install modules in Drupal

After all the files are in the correct place and the configuration is matching with the file names, we can move to Drupal dashboard to install the modules.Go to your ‘Extend’ tab and search for ‘JS Component’ to install. Tick the box next to it and click on install. It should take a few minutes. Once it’s installed, we can do the same for the custom Elements React app.

Add the content block to a page

With both modules installed, now it’s time to add the actual React app to the page. There may be a number of ways to do this so you can choose how to add it. You can do it by going to ‘Structure’ and ‘Block layout’. Now find the area in the page where you want to add the custom Elements React app and click ‘Place Block’. This should list all available blocks. Find your custom app there and add the block. Now you can save the blocks and the custom app with Glisser Elements should be available in your page.

1 Like