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

Discussion in 'Tips and tricks' started by vladmedv, Jan 18, 2015.

  1. vladmedv

    vladmedv New Member

    Joined:
    Jan 18, 2015
    Messages:
    26
    Likes Received:
    23
    S.E:
    Expired
    L.T:
    Regular
    L.C:
    1
    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 :)
     
  2. twisted1919

    twisted1919 Administrator Staff Member

    Joined:
    Dec 27, 2014
    Messages:
    10,254
    Likes Received:
    2,382
    Code coming up in a few minutes, stay tuned :)
     
    vladmedv likes this.
  3. twisted1919

    twisted1919 Administrator Staff Member

    Joined:
    Dec 27, 2014
    Messages:
    10,254
    Likes Received:
    2,382
    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.
     

    Attached Files:

    dintchev, Carlos Franco and vladmedv like this.
  4. vladmedv

    vladmedv New Member

    Joined:
    Jan 18, 2015
    Messages:
    26
    Likes Received:
    23
    S.E:
    Expired
    L.T:
    Regular
    L.C:
    1
    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 ;)
     
  5. twisted1919

    twisted1919 Administrator Staff Member

    Joined:
    Dec 27, 2014
    Messages:
    10,254
    Likes Received:
    2,382
    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 likes this.
  6. vladmedv

    vladmedv New Member

    Joined:
    Jan 18, 2015
    Messages:
    26
    Likes Received:
    23
    S.E:
    Expired
    L.T:
    Regular
    L.C:
    1
    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!
     
  7. twisted1919

    twisted1919 Administrator Staff Member

    Joined:
    Dec 27, 2014
    Messages:
    10,254
    Likes Received:
    2,382
    Got it,
    Well at least you can't say i haven't tried :D

    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 ?
     
  8. vladmedv

    vladmedv New Member

    Joined:
    Jan 18, 2015
    Messages:
    26
    Likes Received:
    23
    S.E:
    Expired
    L.T:
    Regular
    L.C:
    1
    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.
     
  9. twisted1919

    twisted1919 Administrator Staff Member

    Joined:
    Dec 27, 2014
    Messages:
    10,254
    Likes Received:
    2,382
    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 likes this.
  10. vladmedv

    vladmedv New Member

    Joined:
    Jan 18, 2015
    Messages:
    26
    Likes Received:
    23
    S.E:
    Expired
    L.T:
    Regular
    L.C:
    1
    Crazy how it all works, but now this works prefectly :) I am so content, you have no idea :D 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 :rolleyes:
     
  11. vladmedv

    vladmedv New Member

    Joined:
    Jan 18, 2015
    Messages:
    26
    Likes Received:
    23
    S.E:
    Expired
    L.T:
    Regular
    L.C:
    1
    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: ' $urltrue$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? :)
     
    Last edited: Jan 19, 2015
  12. twisted1919

    twisted1919 Administrator Staff Member

    Joined:
    Dec 27, 2014
    Messages:
    10,254
    Likes Received:
    2,382
    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: ' $urltrue$statusCode);
       die();
    }
    Redirect('/customer/index.php/pages'false);?>
    In your view, you should do:
    PHP:
    <?php $this->redirect(array('pages/index'));?>
    Thanks.
     
  13. vladmedv

    vladmedv New Member

    Joined:
    Jan 18, 2015
    Messages:
    26
    Likes Received:
    23
    S.E:
    Expired
    L.T:
    Regular
    L.C:
    1
    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?
     
  14. twisted1919

    twisted1919 Administrator Staff Member

    Joined:
    Dec 27, 2014
    Messages:
    10,254
    Likes Received:
    2,382
    Right, the controoler id is "ext_pages" not "pages", my bad.
    Try
    PHP:
    <?php $this->redirect(array('ext_pages/index'));?>
     
  15. vladmedv

    vladmedv New Member

    Joined:
    Jan 18, 2015
    Messages:
    26
    Likes Received:
    23
    S.E:
    Expired
    L.T:
    Regular
    L.C:
    1
    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 ^^
     
  16. twisted1919

    twisted1919 Administrator Staff Member

    Joined:
    Dec 27, 2014
    Messages:
    10,254
    Likes Received:
    2,382
    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;
        }
     
  17. vladmedv

    vladmedv New Member

    Joined:
    Jan 18, 2015
    Messages:
    26
    Likes Received:
    23
    S.E:
    Expired
    L.T:
    Regular
    L.C:
    1
    Thanks buddy! I added that code in PagesExt.php but the old price page is still there :eek:
     
  18. vladmedv

    vladmedv New Member

    Joined:
    Jan 18, 2015
    Messages:
    26
    Likes Received:
    23
    S.E:
    Expired
    L.T:
    Regular
    L.C:
    1
    But it's ok, I'll figure something out. You've helped me sooo much already! ;)
     
    Last edited: Jan 20, 2015
  19. twisted1919

    twisted1919 Administrator Staff Member

    Joined:
    Dec 27, 2014
    Messages:
    10,254
    Likes Received:
    2,382
    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)
     
  20. vladmedv

    vladmedv New Member

    Joined:
    Jan 18, 2015
    Messages:
    26
    Likes Received:
    23
    S.E:
    Expired
    L.T:
    Regular
    L.C:
    1
    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 :D
     

Share This Page