javascript code with php into .tpl prestashop

Question

I'm trying to do a conditional selector with javascript and php. I have already done before, but in wordpress (pure php), now I have to adapt to prestashop (.tpl file).

It is not so easy to write php inside a .tpl, and updated the Smarty to SmartyBC class. But I is still complicated

/public_html/controllers/front/certificadosController.php

class certificadosControllerCore extends FrontController{

      public $php_self = 'certificados';

      public function init(){
         parent::init();
      }
      public function initContent(){
          parent::initContent();
          $this->setTemplate(_PS_THEME_DIR_.'certificados.tpl');
      }
} 

function ConectarBD() {
 // connect to db
}

function TraerProd() {    
//get all products 
}

function TraerAttr($vid_prod) {
 //get atributtes 
}

As is the logic? I'm using the labels {php} php code {/ php} {literal} js code {/ literal}

I show them a piece of my code where prestashop apparently not interpreted well.

/public_html/themes/theme/certificados.tpl

{literal}

var_attr = '<option value="default" selected>Diametro</option>';
sel_attr = $('#attr');

$('select').change(function() {
    switch(this.id) {

    case 'producto':

        sel_attr.find('option').remove();
        sel_attr.append(var_attr);
        sel_attr.show();
        sel_attr.removeAttr('disabled');

        if (this.value == 'Válvula_de_bloqueo_Pead' ) {
            for (i = 0; i < Válvula_de_bloqueo_Pead.length; i++) {
                    $("#attr").append(
                            '<option value="' + Válvula_de_bloqueo_Pead[i] + '">' + Válvula_de_bloqueo_Pead[i] + '</option>'
                    );
            }

        {/literal}
        {php}

$Prod=array(); 
$Prod=TraerProd();

if (!empty($Prod)) { 
    $cntProd=count($Prod); 
}; 

            for ($k = 0; $k < $cntProd; $k++) {

                $_prod = $Prod[$k]['name']; $_prod = str_replace(array(' ', '-', '"', '/', '.', 'ñ'), array('_', '_', '', '_', '_', 'n'), $_prod);

                $Attr=array();
                $id_prod=$Prod[$k]['ID'];
                $Attr=TraerAttr($id_prod);

                if (!empty($Attr)) {

                    echo '} else if (this.value =='.$_prod.') { for (i = 0; i <'.$_prod.'.length; i++) { $("#attr").append("    <option value="\'+'.$_prod.'[i]+\'">\'+'.$_prod.'[i]+\'</option>");}';

                }
            } /* cierre if, for (php) */ 

        {/php}
        {literal}

        } //cierre if (js)
    break;
}

Seeing the results chain shows me the cut, I think that's excessive use of the labels {php} and {literal}

This is the JSFiddle to have an idea of what I want to accomplish, I repeat, as I have in wp, but .tpl file complicates me all :(

I hope you can help me, sorry for my bad English. Thanks!

Answer 1

in tpl you should read your php variable only using smarty (prestashop template system), literal is used to don't read what is inside {} as php variable so you can declare a js object for example.

in your controller you should assign your variable to tpl like this:

$this->context->smarty->assign(
array(
            'link' => $this->context->link,
            'collectionList' => $collectionList, 
            )
);

Even in your loop you need to use "smarty way"

{for $foo=1 to 3}
   <li>{$foo}</li>
{/for}

<script>
   var myVar = {$myPhpVar}; 
</script>