P9 CMS Cheat Sheet


Display a gallery
<!--CMS VARIABLE DECLARATION--> <p9><!--wcms/gallery/index1--></p9> <!--/CMS VARIABLE DECLARATION-->
<!--**************************************-->   <article>
    {%for gal in parser.getGallery(page,1,210,210)%}
    <div class="product_gallery_item">
        <a title="{{gal.title}}" href="{{ parser.image_gethref(gal.idimg, 900, 600, true, 'jpg' ) }}">
            <img title="{{gal.title}}" src="{{gal.href}}"  />
    </div>       {% if loop.index % 3 == 0 %}
    <div class="column-clear">&nbsp;</div>
    {% endif %}     {%endfor%}


    Returns a gallery of image
    page : current page
    1 : the richlist #1 on this page, one page can have many richlist
    210 210 : width and height required
gal.title : the image title
gal.href : the link to the image
parser.image_gethref(gal.idimg, 900, 600, true )
    Create a link to an image at the specified dimensions
    gal.idimg : access the unique ID of the image
    900 600 : width and height required
    true : make the resizing lazy
    'jpg' : jpg is the default parameter, you can omit it, the other option is png, and is used only when you need partial transparency on the image that the client will upload, like a logo, or other specific case -->


Link to another page
<a href="{{ pages['contact.html'].content.href }}">{{pages['contact.html'].content.name}}</a>


pages['contact.html'].content.name : the name variable is not modifiable by the client, only by the CMS admin

Depending on the context, you could also use the h1 of the target page or any other field :


<a href="{{ pages['contact.html'].content.href }}">{{pages['contact.html'].content.h1}}</a>


Use Section Data
 <p class="address">{{ s.addr }}<br />{{ s.addr_city }}, {{ s.addr_cp }}</p>
 <p class="phone"><strong>Téléphone : </strong> {{ s.phone }}</p>
 <p class="email"><strong>Email : </strong> 
     <a href="" data-mailcrypt="{{ parser.emailcrypt(s.email) }}" class="p9mailcrypt"></a>


The anchor with the data-mailcrypt attribute will be transformed into a mailto:client@client.com anchor

{{ parser.emailcrypt(s.email) }} will echo an "encrypted" version of the email

the class .p9mailcrypt will make the cms JS decrypt the email, and set the href attribute to "mailto:client@client.com"

The encryption is really simple, it's just to prevent bot harvesting.


Google Maps

Basic Example
<script type="text/javascript">
  $(function(){     var mymap = new app9.googlemap('.google-map');
      //mymap.panToPointIndex(0,true) //you can use this to control the map, and make it zoom on any point
    });   })
<div class="google-map"> </div>
<div class="app9googlemapconfig" style="display:none">   <section class="config">
    <input type="hidden" class="zoom" value="12">
    <input type="hidden" class="lat" value="48.879443">
    <input type="hidden" class="lng" value="2.179156">
  </section>   <section class="points">     <article class="point"> <!-- You can add as many article.point as you wish -->
      <input type="hidden" class="lat" value="48.879443">
      <input type="hidden" class="lng" value="2.179156">
      <input type="hidden" class="zoom" value="12">
      <input type="hidden" class="title" value="{{page.content.h1.index1}}">       <aside class="infowindow">
        <div class="marker-wrapr">
          <strong>{{ s.brandname }}</strong>
          <div class="addr-marker">             {{ s.addr }}<br/>             {{ s.addr_cp }} {{ s.addr_city }}<br/>           </div>
          <div class="clear"></div>
          <div class="marker-link">
            <a target="_blank" href="https://www.google.fr/maps/search/{{ s.addr }} {{ s.addr_cp }} {{ s.addr_city }}" class="btn btn-primary btn-sm">Voir sur google map</a>


section.config contains the default zoom and point to position the google map

section.points contains 1 or many article.point

Each point will be added on the map, and each one can be made clickable by including an aside.infowindow 



Contact Form

Basic Example
<script type="text/javascript">
  $(function(){     new window.app9.cmsform({
      'div_sender':'#contact-form .sender',
      'div_loader':'#contact-form .loader',
      'div_success':'#contact-form .success',
      'mandatory':'Nom, Email, Telephone, Message'
    });   })
</script> <style type="text/css">
  .formmessage{display: none;}
<form id="contact-form" action="" method="post">
  <input type="hidden" name="wcms-section" value="">
  <input type="hidden" name="wcms-usehtml" value="__mailclient">
  <div class="sender">
    <input name="Nom" type="text" value="" placeholder="Nom &amp; Prénom">
    <input name="Telephone" type="phone" value="" placeholder="Téléphone">
    <input class="mydatepicker" name="date" type="text" value="" placeholder="Date de l’évènement ">     <input name="Email" type="email" value="" placeholder="Email">
    <textarea name="Message" rows="4" value="" placeholder="Message"></textarea>     <input type="submit" value="Envoyer" id="submit">
  <div class="formmessage loader">
      <img src="/res/img/loader.gif" alt=""><br>
  <div class="formmessage success"><p>Thank you. Your message was delivered successfully. </p></div>


When sending, 
div.sender will he hidden
div.loader is shown When the sending is complete
div.loader is hidden
div.success appears --> <!--The following code will make the email use an html template stored in html/__mailclient.html You'll find more detail in the the next item in the doc --> <input type="hidden" name="wcms-section" value="">
<input type="hidden" name="wcms-usehtml" value="__mailclient">  
<!-- this file is used with the contact form, please read the documentation of both entries -->

<!--New 2014 november design bellow-->

-------------------FILE BEGINNING------------------ <!DOCTYPE html>
<body style="background-color: #f2f2f2;">
<table style="background-color:#ffffff;width:600px;margin-left: auto;margin-right: auto;border: 1px solid #e1e1e1;padding: 36px;" cellpadding="0" cellspacing="0">
    <tr cellpadding="0" cellspacing="0">
        <th style="color:#444444;background-color: #fff;font-size:24px;line-height:64px;width:100%;text-align: left;padding-bottom: 12px;border-bottom: 0px solid #ccc;">Nouveau message du site</th>
    <tr style="width:90%;margin-left: auto;margin-right: auto;" cellpadding="0" cellspacing="0"> 
        <td style="padding:12px 0;background:white;width:90%;margin-left: auto;margin-right: auto;text-align:left;font-size: 16px;">
            Vous avez reçu un nouveau message via votre site.<br><br>Voici le message :<br><br>
            <table cellpadding="0" cellspacing="1">
                <tr cellspacing="1">
                    <th width="80" style="padding:6px 12px; border-bottom:0px dashed #e8e8e8; font-size: 13px; text-align: right;margin-bottom: 12px;" cellspacing="1">{pd:field} <br></th>
                    <td width="450" style="padding:6px 12px; border-bottom:1px dotted #ccc; font-size: 13px; text-align:left;margin-bottom: 12px;">{pd:value} <br> </td>                    
            <br><br><br>Bonne journée ! <br><br>
    <tr cellpadding="0" cellspacing="0">
        <th style="color:lime">&nbsp;  </th>


The templating language use in the file is an old proprietary language, you dont have to learn how to use it, just copy paste the code !


CMS Blocks initialization

TextBloc, RichBloc, Image
<!--You can declare these variables anywhere on the page, as long as they are within the <body></body> tag !

Usually, choose to initialize them in the beginning of the page




<p9 name="mytextbloc"><!--wcms/textbloc/1--></p9>
<p9 name="mytextbloc2"><!--wcms/textbloc/2--></p9>
<p9 name="myrichbloc"><!--wcms/richbloc/1--></p9>
<p9 name="myimage1">
<img wcms-src="wcms/image/1:src(100,100)">



    {% for page in parser.getGroup_bytemplatename( '/_service.html' ) %}
        <img src="{{ parser.image_gethref(page.content.image.index1.idimg, 400, 400 ) }}">
        <a href="{{page.content.href}}"><h2>{{page.content.h1}}</h2></a>
    {%endfor%} </section>


Note the need of the / in the template name, it s bug and will be fixed soon so that both way works

with and without the first slash



Si la page de "détail" d'un groupe ne doit pas s'afficher, voilà le code a mettre sur le page : 

<meta HTTP-EQUIV="Refresh" CONTENT="0; URL={{pages['tarifs.html'].content.href}}">





<p9 name="partners">        
        <div name="name"><!--wcms/textbloc/index1--></div>
        <img name="photo" wcms-src="wcms/image/1:src(100,100)">
        <div name="description"><!--wcms/richbloc/index1--></div>





    {%for entry in parser.getRichList(page,1)%}
        <img src="{{parser.image_gethref(entry.image.index1.idimg, 320, 240, true ) }}">

Si la page est renomé dans le CMS (exemple la page s'appel a-propos.html sur le serveur et on la renomme en qui-sommes-nous via le champs URL), il faut appelé la richlist comme ça : 


 {%for entry in parser.getRichList(pageconfig.filename,1)%}


Social links

{{ s['social-facebook'] }}

{{ s['social-twitter'] }}

{{ s['social-google+'] }}

{{ s['social-linkedin'] }}


<ul class="list-inline">


    {% if s['social-facebook'] %}
    <li><a href="{{ s['social-facebook'] }}"><i class="fa fa-facebook"></i> </a></li>
    {% endif %}       {% if s['social-twitter'] %}
    <li><a href="{{ s['social-twitter'] }}"><i class="fa fa-twitter"></i> </a></li>
    {% endif %}       {% if s['social-google+'] %}
    <li><a href="{{ s['social-google+'] }}"><i class="fa fa-google-plus"></i> </a></li>
    {% endif %}       {% if s['social-linkedin'] %}
    <li><a href="{{ s['social-linkedin'] }}"><i class="fa fa-linkedin"></i> </a></li>
    {% endif %}   </ul>



<!--Activation d'un datepicker simple-->


});   </script>



Create a syntax highliter

<!--remove space between { and % at start of the code -->

{ % set highliter=parser.getFunc('        
        return preg_replace("@\\*(.+?)\\*@", $start."\\\\1".$end, $string);
    ' ,'$string,$start,$end' )%}


<h1>{{highliter.exec(c.h1, '<span class=colored>', '</span>')}}</h1>

<!--Result  when

c.h1 = bonjour *tout* le monde


<h1>bonjour <span class=colored>tout</span> le monde




Create a richlist for another page
            <div class="title"><!--wcms/textbloc/1--></div>
            <div class="description"><!--wcms/textbloc/2--></div>    
            <div class="iconclass"><!--wcms/textbloc/3--></div>    



Variables custom
<!--Exemple d'utilisation-->

<div class="formulaire hidden" data-paypal="@post.custom_fields.code_paypal@">

Préparation en BDD

bdd : wcms

table : blog_customfields

ajouter une entrée pour le blog id concerné(ne psa oublier de faire EN/FR si necessaire) et le champs apparaitra sur le CMS en version client(les champs custom n'apparaissent pas connecté en admin)