P9 CMS Cheat Sheet

<!--**************************************-->

<!--**************************************-->

<!--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}}"  />

        </a>

        <label>{{gal.title}}</label>

    </div>

 

    {% if loop.index % 3 == 0 %}

    <div class="column-clear">&nbsp;</div>

    {% endif %}

    {%endfor%}

</article>

 

<!--

parser.getGallery(page,1,210,210)

    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

-->

<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>

 

 

 <p>{{s.brandname}}</p>

 <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>

 </p>

<--

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.

-->

<script type="text/javascript">

  $(function(){

    var mymap = new app9.googlemap('.google-map');

    mymap.onload(function(){

      mymap.loadDataFromHtml('.app9googlemapconfig');

      //mymap.panToPointIndex(0,true) //you can use this to control the map, and make it zoom on any point

    });

  })

</script>



<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>

          </div>

        </div>

      </aside>

    </article>

 



  </section>



</div>

<!--

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 

 

-->

<script type="text/javascript">

  $(function(){

    new window.app9.cmsform({

      'form':'#contact-form',

      '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;}

</style>



<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>

  

  

  <div class="formmessage loader">

    <p>

      <img src="/res/img/loader.gif" alt=""><br>

      Sending... 

    </p>

  </div>

  

  <div class="formmessage success"><p>Thank you. Your message was delivered successfully. </p></div>

  

</form>

<!--

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>

<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>

    

    <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">

                <!--listing:fields-->

                <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>                    

                </tr>

                

                <!--/listing-->

            </table>

            <br><br><br>Bonne journée ! <br><br>

        </td>

        

    </tr>

    

    <tr cellpadding="0" cellspacing="0">

        

        <th style="color:lime">&nbsp;  </th>

        

    </tr>

    

</table>

<!--

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 !

-->

<!--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)">

</p9>

<section>

    {% for page in parser.getGroup_bytemplatename( '/_service.html' ) %}

    

    <article>

        <img src="{{ parser.image_gethref(page.content.image.index1.idimg, 400, 400 ) }}">

        <a href="{{page.content.href}}"><h2>{{page.content.h1}}</h2></a>

        <h3>{{page.content.textbloc}}</h3>

    </article>

    

    {%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}}">

-->

<!--**************************************-->

<!--**************************************-->

<!--CMS VARIABLE DECLARATION-->

<p9 name="partners">        

    <!--wcms/richlist/1-->

    <article>

        <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>

    </article>    

</p9>    

<!--/CMS VARIABLE DECLARATION-->

<!--**************************************-->

<!--**************************************-->

 

 



<h1>{{c.h1}}</h1>



<section>

    

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

    

    <article>

        <h2>{{entry.textbloc}}</h2>

        <img src="{{parser.image_gethref(entry.image.index1.idimg, 320, 240, true ) }}">

        <div>{{entry.richbloc}}</div>

    </article>

    

    {%endfor%}

    

</section>

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)%}

{%endfor%}

{{ 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>

$(function(){

    app9.datepicker.enable('#date');

});

 

</script>

<!--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

 

<div>

        <!--wcms/page/_prestations.html/richlist/1-->

        <div>

            <div class="title"><!--wcms/textbloc/1--></div>

            <div class="description"><!--wcms/textbloc/2--></div>    

            <div class="iconclass"><!--wcms/textbloc/3--></div>    

        </div>

    </div>

<!--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)