Important : To use this plugin you need to have redis enabled in your nop commerce project and active redis server running.
BladeCMS is a powerful and flexible content management system (CMS) plugin for nopCommerce, developed by the Xiphias team. This plugin allows you to easily manage and inject dynamic content into your nopCommerce site using Redis as a storage backend. With BladeCMS, you can seamlessly integrate HTML, CSS, and JavaScript into specific sections of your website, enhancing your storefront's functionality and design.
Before installing and using BladeCMS, ensure the following requirements are met:
nopCommerce Version: 4.6 and above
Redis:
Redis must be enabled and configured in your nopCommerce project.
An active Redis server must be running and accessible.
This page will guide you through the installation process for plugins developed by Xiphias team.
This document is designed to describe the plugin installation process for nopCommerce version 4.6 and above.
Please download the plugin package from TO BE ADDED or download package from link above
Go to the Admin side and Navigate to the Configuration > Local plugins in your nopCommerce admin panel as shown below.
you click on Local plugins a page will be displayed in right pane of the website as shown in the image below.
On the local plugins page, please click on the Upload plugin or theme button as shown in the image below.
Once you click on the Upload plugin or theme a pop-up will be displayed as shown in the image below.
6 On the pop-up screen, please click Choose File button and select the download packages(step1) then click on upload plugin or theme button, after clicking that button,there is showing notification like plugin and themes have been uploaded, then click on Restart application to apply changes button as shown in the image below.
After the application is re-started and the local plugins page is fully loaded, you can navigate to the plugin(s) you have just uploaded or you can filter our plugins by filtering from Group drop-down by the name BladeCMS.
After plugin is installed go to configuration as shown in image:
Redis Connection: This field is automatically populated with the Redis connection string used by your nopCommerce site.
Redis Database: Specify the Redis database where BladeCMS content will be stored.
Keys in redis look like this:
Content is stored in Redis with keys structured as follows:
URL##Placeholder |
The URL is the full URL of the page where the content should be displayed.
The Placeholder specifies the HTML class or ID where the content will be injected.
BladeCMS offers flexible placeholder options to control content injection:
Class or ID:
##footer: Injects content into the HTML element with the class or ID footer.
##footer.before: Injects content before the footer element.
##footer.after: Injects content after the footer element.
##footer.const: Injects content into every page containing the footer element. This is ideal for consistent elements like headers or footers.
The value stored in Redis is the HTML, CSS, or JavaScript content to be injected.
BladeCMS does not sanitize the content, allowing for complete design and functionality control.
Full Page Override:
Key: https://example.com/about-us Value: <h1>Custom About Us Page</h1><p>This is fully managed by BladeCMS.</p> |
Partial Content Injection:
Key: https://example.com/about-us##footer Value: <p>Additional footer information for About Us page.</p> |
Consistent Footer Across Site:
Key: https://example.com##footer.const Value: <p>Company Information and Social Links</p> |
Result Example
With the following key-value pair:
Key: https://example.com/o-nama##footer
Value:
"<link href=\"//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css\" rel=\"stylesheet\" id=\"bootstrap-css\">\r\n<script src=\"//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js\"></script>\r\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js\"></script>\r\n<!------ Include the above in your HEAD tag ---------->\r\n\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <title>Footer</title>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css\">\r\n <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>\r\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js\"></script>\r\n <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js\"></script>\r\n <link href=\"https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\">\r\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700\" rel=\"stylesheet\">\r\n</head>\r\n<style>\r\n body {\r\n font-family: 'Signika', sans-serif;\r\n }\r\n .bg-grey {\r\n background: #292929;\r\n }\r\n .logo-footer {\r\n margin-bottom: 40px;\r\n }\r\n footer {\r\n color: grey;\r\n }\r\n footer p, a {\r\n font-size: 12px;\r\n font-family: 'Roboto', sans-serif;\r\n}\r\nfooter h6 {\r\n font-family: 'Playfair Display', serif;\r\n margin-bottom: 40px;\r\n position: relative;\r\n}\r\nfooter h6:after {\r\n position: absolute;\r\n content: \"\";\r\n background: grey;\r\n width: 12%;\r\n height: 1px;\r\n left: 0;\r\n bottom: -20px;\r\n}\r\n .btn-footer {\r\n color: grey;\r\n \r\n text-decoration: none;\r\n border: 1px solid;\r\n border-radius: 43px;\r\n font-size: 13px;\r\n padding: 7px 30px;\r\n line-height: 47px;\r\n }\r\n .btn-footer:hover {\r\n \r\n text-decoration: none;\r\n \r\n }\r\n .form-footer input[type=\"text\"] {\r\n border: none;\r\n border-radius: 16px 0 0 16px;\r\n outline: none;\r\n padding-left: 10px;\r\n \r\n}\r\n::placeholder {\r\n font-size: 10px;\r\n padding-left: 10px;\r\n font-style: italic;\r\n}\r\n .form-footer input[type=\"button\"] {\r\n border: none;\r\n background:#232323;\r\n margin-left: -5px;\r\n color: #fff;\r\n outline: none;\r\n border-radius: 0 16px 16px 0;\r\n padding: 2px 12px;\r\n}\r\n .social .fa {\r\n color: grey;\r\n font-size: 22px;\r\n padding: 10px 15px;\r\n background: #3c3c3c;\r\n}\r\n footer ul li {\r\n list-style: none;\r\n display: block;\r\n}\r\n footer ul {\r\n padding-left: 0;\r\n}\r\nfooter ul li a{\r\n text-decoration: none;\r\n color: grey;\r\n text-decoration:none;\r\n}\r\na:hover {\r\n text-decoration: none;\r\n color: #f5f5f5 !important;\r\n \r\n}\r\n.logo-part {\r\n border-right: 1px solid grey;\r\n height: 100%;\r\n }\r\n \r\n/* Credit to https://bootsnipp.com/snippets/M56El */ \r\n</style>\r\n<footer class=\"container-fluid bg-grey py-5\">\r\n<div class=\"container\">\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <div class=\"row\">\r\n <div class=\"col-md-6 \">\r\n <div class=\"logo-part\">\r\n <img src=\"https://i.ibb.co/sHZz13b/logo.png\" class=\"w-50 logo-footer\" >\r\n <p>7637 Laurel Dr. King Of Prussia, PA 19406</p>\r\n <p>Use this tool as test data for an automated system or find your next pen</p>\r\n </div>\r\n </div>\r\n <div class=\"col-md-6 px-4\">\r\n <h6> About Company</h6>\r\n <p>But horizontal lines can only be a full pixel high.</p>\r\n <a href=\"#\" class=\"btn-footer\"> More Info </a><br>\r\n <a href=\"#\" class=\"btn-footer\"> Contact Us</a>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"row\">\r\n <div class=\"col-md-6 px-4\">\r\n <h6> Help us</h6>\r\n <div class=\"row \">\r\n <div class=\"col-md-6\">\r\n <ul>\r\n <li> <a href=\"#\"> Home</a> </li>\r\n <li> <a href=\"#\"> About</a> </li>\r\n <li> <a href=\"#\"> Service</a> </li>\r\n <li> <a href=\"#\"> Team</a> </li>\r\n <li> <a href=\"#\"> Help</a> </li>\r\n <li> <a href=\"#\"> Contact</a> </li>\r\n </ul>\r\n </div>\r\n <div class=\"col-md-6 px-4\">\r\n <ul>\r\n <li> <a href=\"#\"> Cab Faciliy</a> </li>\r\n <li> <a href=\"#\"> Fax</a> </li>\r\n <li> <a href=\"#\"> Terms</a> </li>\r\n <li> <a href=\"#\"> Policy</a> </li>\r\n <li> <a href=\"#\"> Refunds</a> </li>\r\n <li> <a href=\"#\"> Paypal</a> </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-6 \">\r\n <h6> Newsletter</h6>\r\n <div class=\"social\">\r\n <a href=\"#\"><i class=\"fa fa-facebook\" aria-hidden=\"true\"></i></a>\r\n <a href=\"#\"><i class=\"fa fa-instagram\" aria-hidden=\"true\"></i></a>\r\n </div>\r\n <form class=\"form-footer my-3\">\r\n <input type=\"text\" placeholder=\"search here....\" name=\"search\">\r\n <input type=\"button\" value=\"Go\" >\r\n </form>\r\n <p>That's technology limitation of LCD monitors</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n</footer>\r\n\r\n\r\n<!-- Credit to https://bootsnipp.com/snippets/M56El -->" |
Result of custom footer from CMS:
BladeCMS is designed to support:
Multi-Site: Since keys are full URLs, content can be tailored for each site.
Multi-Language: Localized content is injected based on the URL structure.
Class or ID Matching: Content is injected into the first matching element found on the page.
Placeholder Positioning:
.before: Before the matching element.
.after: After the matching element.
.const: Injects consistently across all pages containing the specified class or ID.
Full Page Override:
URL: https://example.com/about-us Result: Page content is completely replaced by the Redis value. |
Localized Content:
URL: https://example.com/hr/o-nama##footer Result: Injects localized content for Croatian language users. |
Content Not Showing:
Check if Redis is connected and running.
Verify the correct key structure and URL.
Incorrect Placement:
Double-check the placeholder syntax (.before, .after, .const).
Caching Issues:
Clear nopCommerce and Redis cache for immediate changes.
For additional help, documentation, and best practices, visit:
nopCommerce Community Forums
Compatible with nopCommerce 4.6 and above.
Requires Redis for content storage.
For questions, feedback, or technical support:
Contact the Xiphias Team via mail x@xiphias.hr.
BladeCMS is a powerful and flexible plugin designed to enhance your nopCommerce site with dynamic and customizable content. With Redis integration, it provides efficient and scalable content delivery, making it an ideal solution for modern eCommerce websites.
Start customizing your site today with BladeCMS and unlock new possibilities in content management!