Adding a Trailing Slash to CMS Pages in Magento 2

Published by John on October 9, 2019 Under Magento

While working on a migration from Magento 1 to Magento 2 for one of my clients, one of the issues I ran into was adding a trailing slash to the end of the URL for CMS Pages.

For both categories and products, there is an option for adding a Suffix to the URL, which can be found Under Admin -> Stores -> Configuration -> Catalog -> Search Engine Optimization.

Then, adjust the Product URL Suffix or Category URL Suffix as needed.

However, I do not believe there is a similar option for CMS Pages. Instead, when you save a page, it uses the identifier of the page to create a URL Rewrite, then on the front end of the website, it first checks for a redirect with the trailing slash, then if it doesn’t find it, searches for one without the trailing slash, adding a redirect.

So, for example, if you had a page with a title of ‘About Us’, when the page is saved, it will automatically set the identifier as ‘about-us’, unless you manually change it.

When someone visits your website and goes to ‘about-us/’, they will get automatically redirected to the ‘about-us’.

As a result of this process, which I believe is the default Magento 2 behavior, if you were to add a trailing slash using your .htaccess file or nginx conf, you will get a ‘too many redirects’ warning.

I believe there are probably a few different ways to address this, but I think the easiest and least obtrusive in terms to code changes is to simply add a trailing slash to the identifier of each page.

Of course, you can’t really expect your end client to remember to add a trailing slash each time they create a new CMS Page, so I created a simple event observer that ties into the cms_page_prepare_save event, checks the identifier for a trailing slash, and if it is not present, adds it.

Disclaimer / Prerequisites

You should make a backup of your site and database, see below.

You should do this on a development site first and test for bugs, before using on a live website. I make no guarantees that this is the best solution to this problem.

This assumes you already have a working Magento module setup already.

Make Note of default pages under Stores -> Configuration -> Web -> Default Pages (You may need to set these back up)

Backup Your Site

Before continuing, please make a backup of your website files and database. For the database, I would recommend backing up both your full database, then additionally the url_rewrites and cms_page tables, like so:


mysqldump -u root -p magento_2_database | gzip > ~/magento_2_database_2019-10-09.sql.gz

mysqldump -u root -p magento_2_database url_rewrite cms_page | gzip > ~/magento_2_database_small_2019-10-09.sql.gz

Update your Module to add Observer

First, we will create a new observer: app/code/Your_Company/Module/Observer/CmsPrepareSave.php

<?php

namespace Your_Company\Module\Observer;

class CmsPrepareSave implements \Magento\Framework\Event\ObserverInterface
{
	public function execute(\Magento\Framework\Event\Observer $observer)
	{
		
		$skip_routes = array('no-route');
		
		$page_data = $observer->getData('page');
		
		if(!is_object($page_data)){
			return $this;
		}
		
		$page_identifier = $page_data->getIdentifier();
		
		if(empty($page_identifier) || in_array($page_identifier, $skip_routes)){
			return $this;
		}
		
		if(substr($page_identifier, (strlen($page_identifier) - 1)) != '/'){
			$page_data->setIdentifier("{$page_identifier}/");
		}

		return $this;
	}
}


Make sure to change ‘Your_Company\Module’ to the correct values for your custom magento 2 module.

The execute function checks that it is not the ‘no-route’ page, using the skip_routes variable, then checks to see the identifier has a trailing slash and if not, adds it.

Next, we will add(or update) your modules events.xml file for the adminhtml section: app/code/Your_Company/Module//etc/adminhtml/events.xml


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="cms_page_prepare_save">
        <observer name="kcr_cms_page_prepare_save" instance="Your_Company\Module\Observer\CmsPrepareSave" />
    </event>
</config>

This adds a hook into the cms_page_prepare_save event using our newly created Observer.

Again, make sure to update Your_Company\Module to the correct values for your plugin.

Finally, make sure your website is in development mode and then clear your Magento 2 cache:


php bin/magento deploy:mode:set developer

php bin/magento cache:clean

Now, save a page and it should automatically add the trailing slash.

Fixing Existing Pages

Going forward, any time you save a page, the trailing slash should be automatically added to the URL, prior to the product saving. However, to keep from having to manually change the pages, you can use the below queries.

As noted above, after making these changes, you may need to adjust your default pages again.

Check for existing cms_pages without a trailing slash


select page_id, title, identifier from cms_page where identifier not like '%/' and identifier != 'no-route';

Update existing CMS Pages to add a trailing slash


update cms_page set cms_page.identifier = concat(identifier, '/') where identifier not like '%/' and identifier != 'no-route';

Find existing Rewrites that need to be changed


select request_path from url_rewrite where url_rewrite.request_path not like '%/' and entity_type = 'cms-page' and url_rewrite.request_path != 'no-route';

Update existing Rewrites to add a trailing slash.


update url_rewrite set request_path = concat(request_path, '/') where url_rewrite.request_path not like '%/' and entity_type = 'cms-page' and request_path != 'no-route';

If you get a duplicate entry warmning, uuse the below and then re-run the select query to find ones that did not change. For this site, there were several pages that had the same URL as a category.


update IGNORE url_rewrite set request_path = concat(request_path, '/') where url_rewrite.request_path not like '%/' and entity_type = 'cms-page' and request_path != 'no-route';

If you took your site out of production mode, you should probably clear cache, update, then set back to production:


php bin/magento cache:clean
php bin/magento setup:upgrade
php bin/magento deploy:mode:set production

Fixing Layout Handles

If you have overridden any of these pages using layout handles, they will need to be updated.

By default, magento 2 replaces a forward slash / with an underscore _

So, if your page identifier is: about-us/

Your Handle would be: about-us_

And so in your view/frontend/layout folder, your handle might look like: cms_page_view_id_about-us_.xml

Wrapping Up

If all went well, whenever you save a page, the trailing slash should get added to the page.

Not a Developer? If you are not a developer or otherwise need help getting this setup on your Magento 2 site, please contact me and I can quickly get you setup with my base Magento 2 plugin, which includes this feature.


No Comments |

Add a Comment