How to add a new page + add it in the menu [customer's end]

vladmedv · Jan 18, 2015

Hi,

So I have 2 simple questions:

1) How can I add a new page in the customer area, where I could add custom html/php?

2) How can I add a page to the menu in customer area, with drop-down sub-pages as well?

I also have a question on how I could add the payment page functionality to my custom created page. But I can open that thread separately.

Thanks

twisted1919 · Jan 18, 2015

Code coming up in a few minutes, stay tuned

twisted1919 · Jan 18, 2015

Please see attached, pages.zip.
Download it, then go to Backend -> Extend -> Extensions and upload it then enable it.
After enable, go to your customer area, you will see a new menu item with a few submenus, click on then to see the pages.
You can inspect the code that makes this happen by looking at the extension files which is stored in apps/extensions/pages folder and adjust it as needed, is pretty simple.

Let me know if any questions.
Thanks.

vladmedv · Jan 18, 2015

This is great! Thanks so much for the help

Works perfectly.

I have 1 issue however;
I'd like to copy the "Price plans" page as an html code, so that I can work with it and customize it. Right now I have 2 test plans on my site http://prntscr.com/5u196j

I copied the code of the plans and the modal to my new page, and it appeared the same. When I click "purchase" the modal appears and I select PayPal. But then when I click "Proceed to payment" it sends me to the price plans page, instead of the payment page..

What can I do so that it works from my custom page too? This way I would be able to customize the design completely.
I understand that I still need to make the price plans in the admin panel and I will link them from the custom page (using the correct data-plan-uid="xxxxxx"). I just want them to appear differently - not the way it is on the current price plans page.. Thanks buddy!

p.s. If you will help me accomplish this, I will be so thankful to you

I'll post a step-by-step guide on the forum, on how people can customize the payments page and add nice looking packages

twisted1919 · Jan 18, 2015

Why not override the price plans controller all together and add your own logic/display into the mix ?
I think this would be even better for customization and it's not that hard to be accomplished following below steps:

In your current extension, you now have this piece of code at line 42:

PHP:

        Yii::app()->controllerMap['ext_pages'] = array(
            'class'     => 'ext-pages.customer.controllers.Ext_pagesController',
        );

You can make it something like:

PHP:

        Yii::app()->controllerMap['ext_pages'] = array(
            'class'     => 'ext-pages.customer.controllers.Ext_pagesController',
        );
        // override the price plans controller
        Yii::app()->controllerMap['price_plans'] = array(
            'class'     => 'ext-pages.customer.controllers.Ext_pages_price_plansController',
        );

Next, in your extension customer/controllers folder, create the file "Ext_pages_price_plansController.php" with following contents:

PHP:

<?php defined('MW_PATH') || exit('No direct script access allowed');

// include the base price plans controller to extend it.
require_once Yii::getPathOfAlias('customer.controllers.Price_plansController') . '.php';
class Ext_pages_price_plansController extends Price_plansController
{
    // move the view path
    public function getViewPath()
    {
        return Yii::getPathOfAlias('ext-pages.customer.views.price_plans');
    }
}

Then take the price_plans folder from apps/customer/views and put it into your extension folder, in the customer/views/ folder.
Now you can freely edit the way price plans are displayed by editing your extension view files without altering mailwizz core files.

Any change you do to these files will be visible when you click on Price plans from left side menu (make sure you activate the feature and it is visible in customer area before you start doing changes)

Makes any sense ?

vladmedv · Jan 18, 2015

Hey buddy, thanks for all the help. It does make sense, and I've done those changes. But am still new to coding, and my knowledge is limited to HTML, CSS, and a few other basics. Am not so good with PHP, and it's easier for me to work with the actually outcome of the pricing tables in their HTML form, rather than the PHP code that creates those tables. In HTML I can design something nice, as long as those buttons would link and work with the payment.php page, it would be great. I can hide the default "Price Plans" page from the menu, without touching it's code. Thanks for your understanding buddy!

twisted1919 · Jan 18, 2015

Got it,
Well at least you can't say i haven't tried

Back to your thing, you say you get redirected when you submit the form, right?
Do you get any error message after redirect?

If not, then it means you are missing either the "plan_uid" or "payment_gateway" form params.
Can you confirm these are passed along when you submit your form ?

vladmedv · Jan 18, 2015

Yes you definitely did! am sure people would find it useful

Okay so am playing with the /pages/index.php you helped to create
I copied there these 2 divs completely:
<div class="box box-primary">
and
<div class="modal fade"...
The pricing tables appeared as they do on the Price plans page. I checked and both the purchase buttons contain "plan_uid" and the gateway form contains "payment_gateway". So I click 'purchase' and the gateway form appears, I select PayPal and click 'Proceed to payment' and then it redirects me back to the Price plans page. I don't get any errors. Of course if I do the same operation on that page, it would transfer me to /payment where I can proceed further.

Upon review of both pages I realized that my /pages/index.php is missing the following javascript:
<script type="text/javascript" src="/customer/assets/js/price-plans.js"></script>

However, I have no idea how to implement it in the /pages/index.php since it only adds my code in the <section> tags.

Am not sure how missing that javascript would result in me being redirected to the price plans page, but maybe that's the only thing missing.

twisted1919 · Jan 18, 2015

I guess that's actually the only thing missing, because that does a bit of magic

In your Ext_pagesController.php, right before the

PHP:

    // move the view path
    public function getViewPath()
    {
        return Yii::getPathOfAlias('ext-pages.customer.views');
    }

add:

PHP:

public function init()
{
     $this->getData('pageScripts')->add(array('src' => AssetsUrl::js('price-plans.js')));
     parent::init();
}

That will make sure the javascript file is loaded and will execute before you submit the form.

vladmedv · Jan 19, 2015

Crazy how it all works, but now this works prefectly

I am so content, you have no idea

I'll be working on designs now for the payments page.

Thank you so much for all the help! I really feel like paying you or something for being so helpful ^^ Once am done I'll post a nice guide on this forum, so people can do this too or apply it on other pages.

One last thing though, I guess a small bug in my case. On my custom page (in this case /pages/index.php) if you click "Purchase" and then you don't select any payment provider and click 'Proceed to payment', then it redirects you to the Price plans page. Where and what change do I make so it doesn't redirect people there?

Oh, and how can I put my pages higher in the menu, right now they're at the bottom.. ? Thanks!
I promise I won't ask any more questions

vladmedv · Jan 19, 2015

Ok I've actually solved the first issue by implementing a redirect in /apps/customer/views/price_plans/list.php
Now it sends people to the new custom page. I used this code, not sure if it's good:

PHP:

<?php function redirect($url, $statusCode = 303)
{
   header('Location: ' . $url, true, $statusCode);
   die();
}

Redirect('/customer/index.php/pages', false);
?>

______________

So now the only question is how can I put my new pages higher in the menu?

twisted1919 · Jan 19, 2015

For the order, you can replace the _addMenuItems() method from PagesExt.php file with :

PHP:

public function _addMenuItems(array $items = array())
    {
        $newItems = array();
        $route    = Yii::app()->getController()->getRoute();
        $newItem  = array(
            'name'   => Yii::t('app', 'Pages'),
            'icon'   => 'glyphicon-book',
            'active' => 'ext_pages',
            'route'  => null,
            'items'  => array(
                array('url' => Yii::app()->apps->getAppUrl('frontend', 'articles'), 'label' => Yii::t('app', 'Articles'), 'active' => false),
                array('url' => array('ext_pages/index'), 'label' => Yii::t('app', 'Index'), 'active' => strpos($route, 'ext_pages/index') === 0),
                array('url' => array('ext_pages/hello'), 'label' => Yii::t('app', 'Hello'), 'active' => strpos($route, 'ext_pages/hello') === 0),
            ),
        );
       
        foreach ($items as $name => $value) {
            $newItems[$name] = $value; 
            if ($name == 'dashboard') {
                $newItems['pages'] = $newItem;    
            }
        }
       
        if (!isset($newItems['pages'])) {
            $newItems['pages'] = $newItem;
        }
       
        return $newItems;
    }

And it will insert it right after dashboard

P.S: A note about your redirect, placing code there means that at updates that code will go away, but since it's about just one file, make sure you remember it after updating your app and you change it accordingly.
However, instead of your:

PHP:

<?php function redirect($url, $statusCode = 303)
{
   header('Location: ' . $url, true, $statusCode);
   die();
}
Redirect('/customer/index.php/pages', false);?>

In your view, you should do:

PHP:

<?php $this->redirect(array('pages/index'));?>

Thanks.

vladmedv · Jan 19, 2015

Thank you for the tips! I added the new code to PagesExt.php and it switched to being right below the Dashboard

Now it's all prefect!

However, I replaced the old redirect code with yours and it gave me this error:
Error 404!
Unable to resolve the request "pages/index".

Maybe something is missing in it?

twisted1919 · Jan 19, 2015

Right, the controoler id is "ext_pages" not "pages", my bad.
Try

PHP:

<?php $this->redirect(array('ext_pages/index'));?>

vladmedv · Jan 19, 2015

Perfect, that worked

and sorry, as you know I have to remove the old price plans from the menu. Better even if I just hide it, and not remove it, just in case..
since menu items don't have any ids/classes, I can use the following direct css
body > div.wrapper.row-offcanvas.row-offcanvas-left > aside.left-side.sidebar-offcanvas > section > ul > li.treeview.active {
visibility: hidden;}

but maybe there is a better way? and I think this should be the end of it ^^

twisted1919 · Jan 19, 2015

There's a better way for this

See "// ADD THIS:" in below code:

PHP:

public function _addMenuItems(array $items = array())
    {
        $newItems = array();
        $route    = Yii::app()->getController()->getRoute();
        $newItem  = array(
            'name'   => Yii::t('app', 'Pages'),
            'icon'   => 'glyphicon-book',
            'active' => 'ext_pages',
            'route'  => null,
            'items'  => array(
                array('url' => Yii::app()->apps->getAppUrl('frontend', 'articles'), 'label' => Yii::t('app', 'Articles'), 'active' => false),
                array('url' => array('ext_pages/index'), 'label' => Yii::t('app', 'Index'), 'active' => strpos($route, 'ext_pages/index') === 0),
                array('url' => array('ext_pages/hello'), 'label' => Yii::t('app', 'Hello'), 'active' => strpos($route, 'ext_pages/hello') === 0),
            ),
        );
       
        foreach ($items as $name => $value) {
            $newItems[$name] = $value; 
            if ($name == 'dashboard') {
                $newItems['pages'] = $newItem;    
            }
        }
       
        if (!isset($newItems['pages'])) {
            $newItems['pages'] = $newItem;
        }
       // ADD THIS:
       if (isset($newItems['price_plans'])) {
          unset($newItems['price_plans']);
        }
        return $newItems;
    }

vladmedv · Jan 19, 2015

Thanks buddy! I added that code in PagesExt.php but the old price page is still there

vladmedv · Jan 19, 2015

But it's ok, I'll figure something out. You've helped me sooo much already!

twisted1919 · Jan 20, 2015

Sorry for the late reply.
It's weird, that should have been working.
Can you maybe post here the contents of the PagesExt.php file to see how it looks ?
make sure you put the contents in [ php ][ /php ] blocks (without spaces)

vladmedv · Jan 20, 2015

It's ok buddy, am glad you wrote back. Because you told me it should be working, I checked it again more thoroughly and it turns out I didn't include it inside the _addMenuItems tags.

So now everything works perfectly

Thank you so much for all the help, you're amazing!

If you want, you can check out the looks of the new pricing page on my panel, feel free

https://panel.vazex.com/customer/plans/
user: demo
pass: demo123

You can use the drop-down on each package to switch the options/pricing, and the purchase button will change accordingly. Upon clicking, people will be transferred to the proper payment page. But I will add that functionality tomorrow, coz I'll have to add like 30 different plans in the admin panel

Once it all works properly, I'll post a detailed guide so other people can custimize their payment pages

How to add a new page + add it in the menu [customer's end]

New Member

Administrator

Administrator

Attachments

New Member

Administrator

New Member

Administrator

New Member

Administrator

New Member

New Member

Administrator

New Member

Administrator

New Member

Administrator

New Member

New Member

Administrator

New Member