php - using select2 in a prestashop module

960

I would like to use select2.js in a prestashop module that I am customizing. Every solution I tried gave a blank page each time I tried to initialize selec2 to tell him on how select I want it.

I found one admin page that uses select2 : AdminModulesPositionController.php, but if I copy what's inside it failed.

Is anybody could help me to find the correct way to have a select2 list in my module admin page ?

Thanks in advance for your help

EDIT : what I did

1) the module I want to modify uses the AdminController.php, that calls plugins, so I modified it :

    $this->addJquery();
    $this->addjQueryPlugin(array('scrollTo', 'alerts', 'chosen', 'autosize', 'fancybox', 'select2' ));

.../...

$this->addJS(array(
    _PS_JS_DIR_.'admin.js?v='._PS_VERSION_,
    _PS_JS_DIR_.'tools.js?v='._PS_VERSION_,
    _PS_JS_DIR_.'jquery/plugins/timepicker/jquery-ui-timepicker-addon.js',
    _PS_JS_DIR_.'jquery/plugins/select2/select2_locale_'.$this->context->language->iso_code.'.js'
));

I checked in the debugger and select2 with locale are called by the module page : good

2) I added a class to the select I want to enhance 3) then I tried to initialize select by several ways : -like the documentation says in the html part of my module :

<script type="text/javascript">
  $('select').select2();
</script>

Blank page for all the shop

-by trying to do the same than AdminModulesPositionController.php / modulePosition.js :

var show_modules = $("#show_modules");
        show_modules.select2();

same problem.

In fact, I'm a poor developper, so I don't know how prestashop machine work, and I don't find the way to do a simple php thing (I use select2 in my "simple" php website) in this complex system..

Here is the complete function where I try to use select2 :

    public function displayinputid($return=0){
   if ($this->psversion()==5 || $this->psversion()==6){
       $verps="";
   } else {
       $verps="14";
   }

      $resultemp= Db::getInstance(_PS_USE_SQL_SLAVE_)->ExecuteS('SELECT * FROM `ps_employee` WHERE id_profile=4');

    //idemploye
    $selectemp="<select name=\"idemp\" id=\"idemp\">";

     $selectemp .= "<option value =\"0\" hidden>Employee</option>";
     foreach ($resultemp as $k) {
     $selectemp .= "<option value=".$k["id_employee"].">".$k["firstname"]." ".$k["lastname"]."</option>" ;
    }

     $selectemp.="</select >";
     if (Shop::getContextShopID() !=0) {
        $resultcustomer = Db::getInstance(_PS_USE_SQL_SLAVE_)->ExecuteS('SELECT * FROM `ps_customer` WHERE id_shop='.Shop::getContextShopID().'');

     }
     else {
        $resultcustomer = Db::getInstance(_PS_USE_SQL_SLAVE_)->ExecuteS('SELECT * FROM `ps_customer`');

     }

    //idcustomer
    $selectCustomer="<select name=\"idcus\" id=\"idcus\" class=\"idcus\">";

      $selectCustomer .= "<option value =\"0\" hidden>Client</option>";
     foreach ($resultcustomer as $k) {
     $selectCustomer .= "<option value=".$k["id_customer"].">".$k["firstname"]." ".$k["lastname"]." - ".$k["company"]."</option>" ;
    }

     $selectCustomer.="</select >";

      //idcustomer
    $selectCustomerdel="<select name=\"delcus\" id=\"delcus\">";
    $selectCustomerdel .= "<option value =\"0\" hidden>Client</option>";       

     foreach ($resultcustomer as $k) {
     $selectCustomerdel .= "<option value=".$k["id_customer"].">".$k["firstname"]." ".$k["lastname"]."</option>" ;
    }

     $selectCustomerdel.="</select >";






      $resultlistcusemp = Db::getInstance(_PS_USE_SQL_SLAVE_)->ExecuteS('SELECT  pe.firstname as nomemploi ,
        pe.lastname as nomemploi2 ,
        ps.id_customer as idclient,
        ps.firstname as nomclien ,
        ps.lastname as nomcl2 
        FROM ps_personalsalesmen p
        INNER JOIN ps_customer ps 
        ON p.id_customer=ps.id_customer
        INNER JOIN ps_employee pe 
        ON pe.id_employee  = p.id_employee');

    //idcus
    $listecusemp="<table id=\"example\" class=\"table table-striped table-bordered\" cellspacing=\"0\" width=\"100%\"> <tr><thead><td style=\"color:green\">Employee</td> <td style=\"color:green\">Customer</td> <td style=\"color:green\">ID Customer</td></tr></thead>";


     foreach ($resultlistcusemp as $k) {
     $listecusemp .= "<tr><td>".$k["nomemploi"]."".$k["nomemploi2"]."</td> <td>".$k["nomclien"]." ".$k['nomcl2'] ." </td><td>".$k['idclient']."</td></tr>" ;
    }

     $listecusemp .="</table>



     ";





    $ret= "
      <style>
                  table {
            border-collapse: collapse;
        }

        table, th, td {
            border: 1px solid ;
            padding: 5px;
            width: 400px;
        }
        select {
            width: 288px!important;
            text-align: center!important;
        }
        select:invalid { color: gray; }

    </style>
        <script>
                     $(document).ready(function() {
            $('#example').DataTable();
        } );

        function linkcustomerbyid(id,msg){


                    document.getElementById(\"linkbyid\").submit();

        }           
    </script>
    <fieldset style = \" width: 800px;\">
        <div align=\"center\" style=\"margin-bottom:20px;\">
        <h3>".$this->l('Link a customer to a employee.')."</h3>
            <form action=\"index.php?tab=personalsalestab$verps&token={$_GET['token']}\" method=\"post\" id=\"linkbyid\" name=\"linkbyid\">

            <strong>".$this->l('Select customer :')."<br/></strong><br>
            ".$selectCustomer."<br/><br/>

            <strong>".$this->l('Select employee:')."<br/></strong><br>
            ".$selectemp."<br/><br/>

            <img src=\"../modules/personalsalesmen/save.png\" onClick=\"linkcustomerbyid(document.getElementById('idcus'),'".$this->l('Are you sure you want link this customer:')." #"."'+document.getElementById('idcus').value+'"." ".$this->l('to this employee: ')." #"."'+document.getElementById('idemp').value+'"."');\" style=\"cursor:pointer;\" >
            <br> <br> <br> <br>
            <strong>".$this->l('Delete all of the linked employees of a customer.')."<br/></strong>
            <br> 

            ".$selectCustomerdel."<br/><br/>

            <img src=\"../modules/personalsalesmen/delete.gif\" onClick=\"linkcustomerbyid(document.getElementById('delcus'),'".$this->l('Are you sure you want delete this customers links:')." #"."'+document.getElementById('delcus').value+'"."');\" style=\"cursor:pointer;\" >            
            </form>
        </div>
        <br>
        <br>
        <br>
        <center>
            <h3>List of linked customers/employees .</h3>
           ".$listecusemp."
           </center>
    </fieldset>
    ";

    if ($return==0){
        echo $ret;
    } else {
        return $ret;
    }
}   
108

Answer

Solution:

If you are using the admin controller then, add the select2.js using the addJQueryPlugin in the setMedia() function

public function setMedia()
{
    parent::setMedia();
    $this->context->controller->addJQueryPlugin('select2');
}

In the below example, I have applied select2 on the select field

 <select name="country[]" multiple id="country_select">
      <option value="us">US</option>
      <option value="france">France</option>
      <option value="italy">Italy</option>
      <option value="india">India</option>
 </select>

Add the below code in the JS file to apply select2:

$(document).ready(function(){
   $('#country_select').select2({
        placeholder: 'select',
        formatNoMatches: 'no match found',
        allowClear: true
    });
});

People are also looking for solutions to the problem: php - Wordpress -> Admin -> List All content on a single list (post & custom post type) and set order

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.