How to use the PHP Tags in the Template Customizer?

Since version 4.7.10, the customization has been moved to “ASL Settings”, where you can do all kinds of modifications to the list and the info-window content of the template using the “Customizer” tab. However, the downside of the “Customizer” is that PHP tags are no longer supported within the “Customizer”. In addition, the list of variables that are supported are defined in this guide.

Workaround to use the PHP tags within the Template #

To use the PHP tags in the template we have to move the customization templates into some PHP files. The template file itself is the best location to post the content. Moreover, we can add the given code to the template that you are using and it will override the “Customizer” template. As a result, we will be able to use the PHP tags within the “Customizer”.

Source code to add in the template-frontend-0.php is given below:

<script id="tmpl_list_item" type="text/x-jsrender">
<li class="sl-item" data-id="{{:id}}">
<div class="sl-addr-sec">
   <div class="sl-row addr-loc">
       <h3>Changed template</h3>
       <div class="{{if path}}pol-sm-8 pol-8{{else}}col-12{{/if}}">
           <ul>
               {{if phone}}
               <li class="sl-phone">
                   <i class="icon-mobile"></i>
                   <a href="tel:{{:phone}}">{{:phone}}</a>
               </li>
               {{/if}}
               {{if email}}
               <li class="sl-email">
                   <i class="icon-mail"></i>
                   <a href="mailto:{{:email}}">{{:email}}</a>
               </li>
               {{/if}}
               {{if open_hours}}
               <li class="sl-hours">
                   <i class="icon-clock"></i>
                   <span class="txt-hours">{{:open_hours}}</span>
               </li>
               {{/if}}
               {{if days_str}}
               <li class="sl-days">
                   <i class="icon-calendar"></i>
                   <span class="txt-hours">{{:days_str}}</span>
               </li>
               {{/if}}
               {{if c_names}}
               <li class="sl-categories">
                  <i class="icon-tag"></i>
                  <ul class="inner-cat-list">
                     {{for categories}}
                     <li>
                        <span>{{:name}}</span>
                     </li>
                     {{/for}}
                  </ul>
               </li>
               {{/if}}
           </ul>
       </div>
       {{if path}}
       <div class="pol-sm-4 pol-4">
           <div class="sl-logo-cont">
               <div class="sl-logo-box">
                   <img src="{{:URL}}Logo/{{:path}}">
               </div>
           </div>
       </div>
       {{/if}}
   </div>
   {{if description}}
   <div class="sl-row sl-desc">
     {{if desc_link}}
     <div class="pol-12"><a class="sl-link">[View Description]</a></div>
     {{else}}
     <div class="pol-12"><p>{{:description}}</p></div>
     {{/if}}
   </div>
   {{/if}}
   <div class="sl-act-btns mt-3">
       <div class="sl-row align-items-center no-gutters pl-1">
           <div class="pol sl-direction">
               <a class="btn btn-asl s-direction">[Directions]</a>
           </div>
           {{if link}}
           <div class="pol sl-site-link">
               <a class="s-visit-website" href="{{:link}}">[Website]</a>
           </div>
           {{/if}}
           {{if dist_str}}
           <div class="pol sl-dist text-right">
           <div class="sl-miles">
               <span class="s-distance">{{:dist_str}}</span>
           </div>
           </div>
           {{/if}}
       </div>
   </div>
</div>
</li>
</script>
<script id="asl_too_tip" type="text/x-jsrender">
 {{if path}}
<div class="image_map_popup" style="display:none"><img src="{{:URL}}Logo/{{:path}}" /></div>
{{/if}}
<h3>{{:title}}</h3>
<div class="infowindowContent">
<div class="sl-row sl-addr-sec">
  <div class="{{if path}}pol-sm-8 pol-8{{else}}pol-md-12{{/if}}">
     <span class="sl-tag">{{:address}}</span>
  </div>
  {{if path}}
  <div class="pl-0 pol-md-4 pol-4">
    <div class="img_box" style="display:none">
      <img src="{{:URL}}Logo/{{:path}}" alt="logo">
    </div>
  </div>
  {{/if}}
</div>
<div class="info-addr">
  <div class="sl-row">
     {{if email}}
     <div class="pol-md-12 pol-sm-12">
        <div class="info-addr-inner">
           <i class="icon-at"></i>
           <a href="mailto:{{:email}}">{{:email}}</a>
        </div>
     </div>
     {{/if}}
     {{if dist_str}}
     <div class="pol-6">
        <div class="info-addr-inner">
           <i class="icon-location-1"></i>
           <a>{{:dist_str}}</a>
        </div>
     </div>
     {{/if}}
     {{if phone}}
     <div class="pol-12">
        <div class="info-addr-inner">
           <i class="icon-mobile"></i>
           <a href="tel:{{:phone}}">{{:phone}}</a>
        </div>
     </div>
     {{/if}}
     {{if open_hours}}
     <div class="pol-12">
        <div class="info-addr-inner">
           <i class="icon-clock"></i>
           <span class="txt-hours">{{:open_hours}}</span>
        </div>
     </div>
     {{/if}}
     {{if days_str}}
     <div class="pol-12">
        <div class="info-addr-inner">
           <i class="icon-calendar"></i>
           <span class="txt-hours">{{:days_str}}</span>
        </div>
     </div>
     {{/if}}
  </div>
</div>
{{if description}}
<p class="short-desc">{{:description}}</p>
{{/if}}
<div class="asl-buttons asl-btn-full">
</div>
<div class="arrow-down"></div>
</div>
</script>
<script type="text/javascript">
 document.addEventListener('readystatechange', function() {
   window['asl_tmpls'] = {};
   window['asl_tmpls']['list'] = '#tmpl_list_item';
   window['asl_tmpls'] = {};
   window['asl_tmpls']['infobox'] = '#asl_too_tip';
 });
</script>

The above code needs to be added in the /public/partials/template-frontend-0.php. Once all your changes are ready make sure to back up the template so it doesn’t override with any updates.