Magento 1: How to Add Splash Page for Magento

HOW TO ADD SPLASH PAGE FOR MAGENTO

This tutorial will show you how to make a splash or landing page to your Magento site. The splash page is immensely useful to deliver a welcome message, provide a coupon code or ask customers to accept conditions before accessing the site.

By following this tutorial, you will be able to create a simple extension with these features:
- Admin can enable/ disable the splash page
- Configure a CMS page for the splash page
- Use cookie time to disable the splash page to return customers

Here is how it will show when the customers visit your website in the first time:

How-to-add-splash-page-for-magento

Now, let’s get started!

Step 1: Create an extension
Assuming that you have already known how to make this step; I call this extension Magebuzz_Splashpage. The extension will have following files:
app/etc/modules/Magebuzz_Splashpage.xml
app/code/local/Magebuzz/Splashpage/etc/config.xml
app/code/local/Magebuzz/Splashpage/etc/system.xml
app/code/local/Magebuzz/Splashpage/Helper/Data.php
app/code/local/Magebuzz/Splashpage/Model/Observer.php
app/design/frontend/base/default/template/page/splash.phtml

Step 2: We need to use event “controller_action_predispatch” to check and show the splash page. Hence, in the config.xml, you need to add this:

<events>
 <controller_action_predispatch>
 <observers>
 <magebuzz_splash_controller_action_predispatch>
 <type>singleton</type>
 <class>splashpage/observer</class>
 <method>showSplashPage</method>
 </magebuzz_splash_controller_action_predispatch>
 </observers>
 </controller_action_predispatch>
 </events>

In this module, I also define a new page layout that will be used for splash page. So I add this in config.xml as well:

 

<page>
 <layouts>
 <splash module="splashpage" translate="label">
 <label>Splash</label>
 <template>page/splash.phtml</template>
 <layout_handle>splash_page</layout_handle>
 </splash> 
 </layouts>
</page>

 

 

And in Observer.php, we add showSplashPage function:

 

public function showSplashPage($observer) {
 $helper = Mage::helper('splashpage'); 
 if (!$helper->canShowSplashPage()) {
 return $this;
 } 
 $request = $observer->getEvent()->getControllerAction()->getRequest();
 $requestString = ltrim($request->getRequestString(), '/'); 
 $splashPageRequest = $helper->getSplashpageRouter();
 if ($splashPageRequest != $requestString) {
 $splashBeforeUrl = Mage::getBaseUrl() . $requestString;
 Mage::getSingleton('core/session')->setSplashBeforeUrl($splashBeforeUrl);
 
 $redirectUrl = Mage::getUrl() . $splashPageRequest;
 Mage::app()->getResponse()->setRedirect($redirectUrl);
 Mage::app()->getResponse()->sendResponse();
 exit;
 } 
 }
 

 

What we do in this function is to check if splash can be displayed (if it is enabled and satisfy cookie condition). And then, we only redirect to splash page if current page is a different one. All checking functions are written in Helper file.

Step 3: As mentioned above, functions are in Helper file. And here are they:

 

public function enableSplashpage() {
 $storeId = Mage::app()->getStore()->getId(); 
 return (bool) Mage::getStoreConfig('web/splashpage/is_active', $storeId);
 }
 
 public function canShowSplashPage() {
 if (!$this->enableSplashpage()) {
 return false;
 }
 $cookie = Mage::getModel('core/cookie')->get('splashpage_confirm');

 if ($cookie && $cookie == 'splashpage') {
 return false;
 }
 return true;
 }
 
 public function getSplashpageRouter() {
 $storeId = Mage::app()->getStore()->getId(); 
 return (string) Mage::getStoreConfig('web/splashpage/splash_page', $storeId);
 }
 
 public function getCookieExpiry() {
 $storeId = Mage::app()->getStore()->getId(); 
 return Mage::getStoreConfig('web/splashpage/cookie_time', $storeId);
 }
 

 

Step 4: To create the layout page, I have already added a new layout in previous step, which will be added in this html file: app/design/frontend/base/default/template/page/splash.phtml.

It is up to you to make changes for this file so I will not share it here.
If you are not willing to do it step by step, just simply download it from our GITHUB and customize as you want.

Comments