Theme Documentation Request

Discussion in 'aMember Pro v.4' started by stockguy22, Nov 25, 2011.

  1. stockguy22

    stockguy22 Member

    Joined:
    Jan 18, 2010
    Messages:
    56
    As we all know, alex has done wonders on aMember 4. It is so much more organized, done using MVC, and is really beautiful all around. We all want to create beautiful looking websites to please existing clients and possibly attract new ones. This being said, maybe we need to help out a little with the documentation - a little community effort on the wiki?

    Would anyone be interested in collectively working on documenting the theme creation process? In MVC, you have the object that holds the form data, the form, and the controller. These basics of creating a theme are here: http://v4.amember.com/docs/Themes_and_Templates

    However, when it comes to say, the signup form specifically, I'm a little confused as to how to actually completely customize the styles of the form. Can anyone lend some insight?

    In application/default/views, I see _form.phtml, then in /signup I see signup.phtml and in application/default/controllers I see SignupController.php. The drawback with something like PHP vs JAVA is documentation: it's a tough time to find where all the hidden gems are to fully customize.

    Maybe this is already done and I'm just rambling now. Looking forward to any responses.
  2. gswaim

    gswaim CGI-Central Partner

    Joined:
    Jul 2, 2003
    Messages:
    641
    Yes, Version 4 is good stuff! The level of commitment the aMember staff has put into V4 is amazing. I have seen Alex and Alexander in the forums as early as 8:00 AM and as late as 2:00 AM. Where else can you get the lead programmers that are willing to personally fix your site?

    I can't code so I helped (around 20 hours or so) with the WordPress documentation so they could keep coding. They were extremely appreciative. Let Alex know what you have in mind. We would likely set you up with authoring rights in the Wiki.
  3. boernerrha

    boernerrha aMember Pro Customer

    Joined:
    Nov 16, 2011
    Messages:
    28
    After spending a couple of days studying the code I'm starting to realize how this all works.

    Everything depends on mod_rewrite to redirect requesting urls to the appropriate controller files through the file amember/public.php.

    There are a number of controller classes that are sub-classed from a parent Zend object. If I have it right, these controllers build and feed content ($content) to a template file that acts as the final compositor for the output page by attaching headers and footers and scripts. We only get to control the final compositor by creating a theme file which subclasses the template file.

    So I think the first thing we need is a flow chart to show which template manage which data, and especially which pseudo-url's go with which templates.

    Me too, and by the cart form too. It looks, though, like maybe the cart functionality is not finished. Are there cart form templates that we can edit? I mean for 'cart/index/view-baske't and 'cart/index/checkout' for instance.

    Also, can we eliminate or edit jscript? For instance, the first product input field(s) on the signup form is 'required' by javascript so my user cannot submit a multi-product form based on that signup form without always buying the first product.

    What are the rules we must obey when we edit forms?

    Great system, tough to figure out.
  4. stockguy22

    stockguy22 Member

    Joined:
    Jan 18, 2010
    Messages:
    56
    I would like to contribute somehow. If we can get some discussion going here, I wouldn't mind compiling a master page (tutorial style?) start to finish on customizing a theme. As long as we can get some real modification suggestions here. Modifying the login page template, signup forms, CSS, and pretty much anything that needs to be modified in order to create a custom user experience.

    It's not that I don't like the default aMember, but the style isn't for everyone...

    I think you are completely right. After looking through myself, this seems to definitely be the case. Can you post your findings about templates to data along with URLs? I'm more concerned with the client side templates more than admin for now.

    I have also found saved_form table in the database which is controlled by http://members.stockguy22.com/admin-saved-form if you're looking for editing the GUI. The default signup form "fields" has:

    Code:
    [{"id":"product-0","class":"product"},{"id":"paysystem","class":"paysystem"},{"id":"name","class":"name","hide-if-logged-in":true},{"id":"email","class":"email","hide-if-logged-in":true},{"id":"login","class":"login","hide-if-logged-in":true},{"id":"password","class":"password","hide-if-logged-in":true}]
    It seems once we can get this down on paper or documented, theme creation will be pretty simple.

    This is what I want to know.
  5. gswaim

    gswaim CGI-Central Partner

    Joined:
    Jul 2, 2003
    Messages:
    641
    Due to the technical nature of this subject, it might be better to draft up the documentation and have someone from aMember go over it before it goes into the Wiki.

    If you have technical questions about this, I am sure Alex, or someone from the aMember staff, would help with this. If he doesn't reply to this thread, I would suggest you send him a PM.
  6. stockguy22

    stockguy22 Member

    Joined:
    Jan 18, 2010
    Messages:
    56
    The original reason for posting this was to get some community effort in to the theme development documentation. I have reached out about it a few nights ago but I realize they are both working hard on completing the development of aMember 4. That being the case, I am taking it upon myself to reach out to the community, give my input, ideas, and findings, and hopefully get something in return.

    They do a lot of work on this for such a small price, so I thought it would be helpful to compile something and I know that they would review it for inaccuracies or clarifications.
  7. stockguy22

    stockguy22 Member

    Joined:
    Jan 18, 2010
    Messages:
    56
    Bump

    Looking for signup theme documentation. I got a very thin response from support, and I do understand that they are busy.

    Relevant files:

    /library/Am/Form/*
    /library/Am/Form.php

    These are core files with all of the functions needed by aMember for forms.

    /application/default/views/signup/*

    signup.phtml should be the template.

    This is the default view, which can be upgraded during a core upgrade.

    Now on to your custom theme in /application/default/themes/YOURTHEME

    Anything you create in this directory will override the /application/default/views/ file. So I created a signup directory in my themes directory, so /application/default/themes/YOURTHEME/signup

    Also in the root is the _forms.phtml, which is the form renderer I believe.

    Now, to actually customize this form (CSS, add divs, modify AJAX messages, I suppose I'm a little lost.
  8. stockguy22

    stockguy22 Member

    Joined:
    Jan 18, 2010
    Messages:
    56
    Bumping this again. I can't be the only one who wants to customize the theme...

    I'm taking a look in /library/Am/Form.php. This is the total user signup form controller. This file, from what I can tell, is used to generate a membership type radio button randomly. Below you will find the function to generate the radio button:

    Start at line 238 in /library/Am/Form.php:

    PHP:
        function renderRadios() {
            
    $out "";
            
    $num 0;
            foreach (
    $this->optionContainer as $option) {
                
    $id $this->getName() . '---' $num++;
                
    $attrs "";
                foreach (
    $option['attr'] as $k => & $v)
                    
    $attrs .= "$k=\"".Am_Controller::escape($v)."\" ";
    [
    B]            $out .= sprintf('<input type="radio" name="%s" %s id="%s"%s>'.[/B]
    [
    B]                    '<label for="%s" class="radio">%s</label>',[/B]
    [
    B]                    htmlentities($this->getName()),[/B]
    [
    B]                    $attrs,[/B]
    [
    B]                    $id$option['attr']['value'] == $this->getValue() ? ' checked="checked"' '',[/B]
    [
    B]                    htmlentities($id), $option['text'][/B]
                );
                
    $out .= $this->separator;
            }
            return 
    $out '<br />';
        }
        function 
    setSeparator($string) {
            
    $this->separator $string;
        }
    }
    The lines with
    PHP:
     [B
    next to them are used to print hte radio button and also its value. All the radio buttons and text box values are returned to the below code in the same file:

    Start at line 936 in /library/Am/Form.php

    PHP:
            $this->setJavascriptBuilder(new Am_Form_JavascriptBuilder);
            
    $this->setTemplateForClass('html_quickform2_element''<div class="row" id="row-{id}"><div class="element-title"><label for="{id}"><qf:required><span class="required">* </span></qf:required>{label}</label><qf:label_2><div class="comment">{label_2}</div></qf:label_2></div><div class="element<qf:error> error</qf:error>">{element}<qf:error><br /><span class="error">{error}</span></qf:error></div></div>'."\n");
            
    $this->setTemplateForClass('html_quickform2_container_group''<div class="row" id="row-{id}"><div class="element-title"><label><qf:required><span class="required">* </span></qf:required>{label}</label><qf:label_2><div class="comment">{label_2}</div></qf:label_2></div><div class="element group<qf:error> error</qf:error>">{content}<qf:error><br /><span class="error">{error}</span></qf:error></div></div>'."\n");
            
    $this->setTemplateForClass('html_quickform2''<div class="am-form">{errors}<form{attributes}>{content}{hidden}</form><qf:reqnote><div class="reqnote">{reqnote}</div></qf:reqnote></div>'."\n");
            
    $this->setTemplateForClass('html_quickform2_container_fieldset''<fieldset{attributes}><qf:label><legend id="{id}-legend">&nbsp;&nbsp;{label}</legend></qf:label>{content}</fieldset>'."\n");
    I can modify these lines in /application/default/themes/stockguy/_form.phtml by setting the $renderer variable and echoing $renderer to create the form.

    Now my question is, I want to customize the form by adding divs, changing styles. I still haven't found a way to make it happen...
  9. boerner

    boerner New Member

    Joined:
    Oct 25, 2011
    Messages:
    13
    >> can't be the only one who wants to customize the theme

    I'm working on it too but first I want to help the developers to make it work properly. It's a little rough in a couple of places and feeding back these issues is more of a priority than skinning it.

    >>I want to customize the form by adding divs, changing styles.

    Have you tried adding them in the form editor? It takes html. Maybe make a custom css and reference the classes in the page editor.
  10. boernerrha

    boernerrha aMember Pro Customer

    Joined:
    Nov 16, 2011
    Messages:
    28
    Sorry, meant the protected page editor not the form editor.
  11. stockguy22

    stockguy22 Member

    Joined:
    Jan 18, 2010
    Messages:
    56
    Where is the protected page editor? I know where the form editor is in the admin GUI.
  12. boernerrha

    boernerrha aMember Pro Customer

    Joined:
    Nov 16, 2011
    Messages:
    28
    Products | Protect Content | Pages

    You don't get bricks with amember fields but you can at least make some pages that look and feel the same. The only problem is your use has to be logged in to see them.
  13. stockguy22

    stockguy22 Member

    Joined:
    Jan 18, 2010
    Messages:
    56
    Definitely not what I want to do.

    http://members.stockguy22.com

    Customized for the most part, but we want to customize our signup form.. and other things. Like when users login, etc.

    edit:

    Signup form is at http://members.stockguy22.com/signup/index/c/

    I am currently printing $renderer so I can see the output and try to find out how to theme it :p
  14. boernerrha

    boernerrha aMember Pro Customer

    Joined:
    Nov 16, 2011
    Messages:
    28
    NMB but wouldn't you be better off hiring one of the amember developers to theme it for you and spend your time trading instead of programming?

    Anyway, good approach to figuring it out.
  15. stockguy22

    stockguy22 Member

    Joined:
    Jan 18, 2010
    Messages:
    56
    There's 3 of us. Two trade, 2 program. I deal with server administration and infrastructure, along with minimal coding. Like figuring this out, which should be trivial IMO.
  16. alex

    alex aMember Pro Customer Staff Member

    Joined:
    Jan 24, 2004
    Messages:
    6,021
    aMember Pro uses HTML_QuickForm2 library to create, render and validate forms.
    It makes editing forms via GUI easy task, I hope you already love this ability :) However, it also makes editing form templates not as easy as it has been in version 3.
    If you know PHP, and you ready to deal with problems, I am ready to describe what to do.

    I will talk here about signup form. Other forms are similar.

    aMember Pro assigns $form object (it is an HTML_QuickForm2 instance) to the views/signup/signup.phtml template.
    It is then rendered to a string and displayed (it happens inside views/_form.phtml).

    If you REALLY want to heavily customize the output, there it the hard way:
    We can force form to output labels, errors, and HTML for each form element into an array. Then you can output the array, determine elements and insert these elements where and as you wish. There is a short example showing how to do that:
    DISCLAIMER: Do not try to copy/paste this code if you do not understand its meaning and if you do not know PHP basics. It will simply do not work. Customize CSS or ask CGI-Central team instead.

    The customized file application/default/views/signup/signup.phtml :
    PHP:
    <?php
    if (empty($title)) $title=___('Sign-up');
    $this->setLayout('layout.phtml');
    include 
    $this->_script('_error.phtml');

    $this->headScript()
            ->
    appendFile(REL_ROOT_URL '/application/default/views/public/js/jquery/jquery.validate.js');
    ?>
    <div class="am-signup">
    <?php echo $this->blocks('signup/login/before'?>
    <?php 
    include $this->_script('signup/_login.phtml'); ?>
    <?php 
    echo $this->blocks('signup/login/after'?>

    <?php echo $this->blocks('signup/form/before'?>
    <?php
    // we commented out default form rendering (next line):
    //include $this->_script('_form.phtml');

    $renderer HTML_QuickForm2_Renderer::factory('array');
    $formArray $form->render($renderer)->toArray(); // render to array
    // print_rr($formArray); // uncomment this line to review array elements
    // now you can display your HTML as you want and insert the input elements as below:
    echo "<form " $formArray['attributes'] . '>'// start form tag
    echo implode("\n"$formArray['hidden']);  // echo hidden elements

    foreach ($formArray['elements'] as $el)
    {
        if (!empty(
    $el['elements']))
        { 
    // this element contains nested elements without labels
            
    printf("[ %s ] %s ", @$el['label'], @$el['error']);
            foreach (
    $el['elements'] as $ell)
                echo 
    $ell['html'];
            echo 
    "<br />";
        } else { 
    // output simple element
            
    printf("[ %s ] %s %s<br />", @$el['label'], @$el['error'], $el['html']);
        }
    }
    echo 
    '</form>';
    ?>
    <?php 
    echo $this->blocks('signup/form/after'?>

    </div>
    <?php include $this->_script('js.country_state.js'); ?>
  17. alex

    alex aMember Pro Customer Staff Member

    Joined:
    Jan 24, 2004
    Messages:
    6,021
    However, I do not think there is a good usage for the code I shown above. Please describe me your needs, i.e. what exactly would you like to customize in form HTML and I will be happy to explain how to do it with CSS, or will add ability to this customization into aMember core. I appreciate any feedbacks regarding this, feel free to PM me.
  18. stockguy22

    stockguy22 Member

    Joined:
    Jan 18, 2010
    Messages:
    56
    Alex - thank you so much for your post. I know it will be easier if I actually knew the Zend framework. Zend is a language in itself, so much is done automatically and tracing code without knowing Zend is very difficult.

    It looks like the formArray is an array of the elements in the form. I am going to look at those elements and do things based on their names because there are different elements in different places.

    Do you recommend I do it your way (this is an obvious answer), or say, since I don't quite understand this yet - I create my own form, dump $form_array, find the IDs to the fields I want (paysys_id, name_f-0, name_l-0, e-mail-0, etc), and just make my own form? I have sent you an e-mail to support about what I want it to look like ...
  19. stockguy22

    stockguy22 Member

    Joined:
    Jan 18, 2010
    Messages:
    56
    Alex, can you provide anymore insight on how to fully customize the output of the HTML / CSS without modifying core files? That is the goal.
  20. nphaskins

    nphaskins New Member

    Joined:
    Dec 6, 2011
    Messages:
    24

Share This Page