Home is for the experience. Projects are for the ones who are interested!

How To Override Form.tpl In Prestashop

How To Override Form.tpl In Prestashop

This tutorial will show you all steps you need to do in order to override form.tpl file in prestashop. To achive this we will need to create a new module where we will add our override files to create a new state for form.tpl file. This tutorial is made on Prestashop > 1.7 so, if you have an older version of Prestashop keep in mind that you need to look in Helper.php file which can be finded in classes/helpers/Helper.php. You need to look in this file because in createTemplate() function you can find the names of the folders you need to use on order to prestashop find your override template.

Create files to override form.tpl

Your folder should look like the following:

  • modules
    • mymodule
      • controllers
        • MymoduleController.php¬†
      • mymodule.php
      • views
        • templates
          • admin
            • _customize (this folder can have other name, this depends on your prestashop version, so look in the Helper.php, in createTemplate() function to find out the path and the right name)
              • helpers
                • form
                  • form.tpl

This is the entire module structure. But if you already have a module and you don't have a controller for it there is no problem because you can override the file in your main module file. For this example we will use the controller file, but as I said you can use your module php file. Anyway you must the be carefully at the path which is in the helper.php and the name of the "_customize" folder. The form.tpl should look like the following:

{extends file="helpers/form/form.tpl"}
{block name="field"}
  {if $input.type == 'file_lang'}
    <div class="col-lg-9">
      {foreach from=$languages item=language}
        {if $languages|count > 1}
          <div class="translatable-field lang-{$language.id_lang}" {if $language.id_lang != $defaultFormLanguage}style="display:none"{/if}>
        {/if}
        <div class="form-group">
          <div class="col-lg-6">
            <input id="{$input.name}_{$language.id_lang}" type="file" name="{$input.name}_{$language.id_lang}" class="hide" />
            <div class="dummyfile input-group">
              <span class="input-group-addon"><i class="icon-file"></i></span>
              <input id="{$input.name}_{$language.id_lang}-name" type="text" class="disabled" name="filename" readonly />
              <span class="input-group-btn">
                <button id="{$input.name}_{$language.id_lang}-selectbutton" type="button" name="submitAddAttachments" class="btn btn-default">
                  <i class="icon-folder-open"></i> {l s='Choose a file' d='Modules.Banner.Shop'}
                </button>
              </span>
            </div>
          </div>
          {if $languages|count > 1}
            <div class="col-lg-2">
              <button type="button" class="btn btn-default dropdown-toggle" tabindex="-1" data-toggle="dropdown">
                {$language.iso_code}
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                {foreach from=$languages item=lang}
                <li><a href="javascript:hideOtherLanguage({$lang.id_lang});" tabindex="-1">{$lang.name}</a></li>
                {/foreach}
              </ul>
            </div>
          {/if}
        </div>
        <div class="form-group">
          {if isset($fields_value[$input.name][$language.id_lang]) && $fields_value[$input.name][$language.id_lang] != ''}
          <div id="{$input.name}-{$language.id_lang}-images-thumbnails" class="col-lg-12">
            <img src="{$uri}img/{$fields_value[$input.name][$language.id_lang]}" class="img-thumbnail"/>
          </div>
          {/if}
        </div>
        {if $languages|count > 1}
          </div>
        {/if}
        <script>
        $(document).ready(function(){
          $('#{$input.name}_{$language.id_lang}-selectbutton').click(function(e){
            $('#{$input.name}_{$language.id_lang}').trigger('click');
          });
          $('#{$input.name}_{$language.id_lang}').change(function(e){
            var val = $(this).val();
            var file = val.split(/[\\/]/);
            $('#{$input.name}_{$language.id_lang}-name').val(file[file.length-1]);
          });
        });
      </script>
      {/foreach}
      {if isset($input.desc) && !empty($input.desc)}
        <p class="help-block">
          {$input.desc}
        </p>
      {/if}
    </div>
  {else}
    {$smarty.block.parent}
  {/if}
{/block}

You can use the above example if you want to create a multi language input file. With the above code, if you create a form using Helper form and add as type paramter "file_lang", prestashop will find your override template and will add it for you. So you will have two inputs for your file input. You need to create the form using prestashop helper form in order to achive this override. I will show you in the next tutorial how to implement a form with helper form from scratch.

Leave a Reply

Your email address will not be published. Required fields are marked *