Demo 1.6.1.4; cannot locate source file for div element id="uniform-selectProductSort"

[dudo24]

Hey, I have a problem. I want to customize product sort element in category page. For that, I need to add some code to the html of the element. Problem is that I cannot locate it in the source files. It shows in Firefox element inspector. When I open \themes\default-bootstrap\product-sort.tpl the div with id "uniform-selectProductSort" and class "selector" and the consecutive span element are not there. I was also looking into js files if it's generated there but i din't find anything. I would like to add some data to the html element so I can set it as content to it's :after element. So my question is: in what source files can I find code for these elements?

lines from element inspector (the demo is modified a bit):

<form id="productsSortForm" action="http://localhost/sialena_alena/index.php?id_category=14&controller=category" class="productsSortForm">
  <div class="select selector1">
    <div style="width: 122.667px;" id="uniform-selectProductSort" class="selector">
      <span style="width: 118.667px; -moz-user-select: none;">Name </span>
      <select id="selectProductSort" class="selectProductSort form-control">
        <option value="date_add:desc" data-icon=" ">Date </option>
	<option value="date_add:asc" data-icon=" ">Date </option>
	<option value="name:asc" selected="selected" data-icon="">Name </option>
	<option value="name:desc" data-icon="">Name </option>
      </select>
    </div>
    <div class="selector_arrow">
    </div>
  </div>
</form>

lines from file product-sort.tpl:

<form id="productsSortForm{if isset($paginationId)}_{$paginationId}{/if}" action="{$request|escape:'html':'UTF-8'}" class="productsSortForm">
  <div class="select selector1">
    <select id="selectProductSort{if isset($paginationId)}_{$paginationId}{/if}" class="selectProductSort form-control">
      <option value="date_add:desc" {if $orderby eq 'date_add' AND $orderway eq 'desc'}selected="selected"{/if} data-icon=" ">Date </option>
      <option value="date_add:asc" {if $orderby eq 'date_add' AND $orderway eq 'asc'}selected="selected"{/if} data-icon=" ">Date </option>
      <option value="name:asc"{if $orderby eq 'name' AND $orderway eq 'asc'} selected="selected"{/if} data-icon="">Name </option>
      <option value="name:desc"{if $orderby eq 'name' AND $orderway eq 'desc'} selected="selected"{/if} data-icon="">Name </option>
    </select>
    <div class="selector_arrow">
    </div>
  </div>
</form>

As you can see the two elements are missing and I don't know where to look for them.

I added the whole file product-sort.tpl to the attachments.

Thanks

product-sort.zip

[rocky]

I had a quick look and it seems to be the divSpan function in themes/default-bootstrap/js/autoload/15-jquery.uniform-modified.js that adds the div.

[dudo24]

Thanks, I was totally not looking for a general function like this. But now another problem occurs. I don't know much about JavaScript and jQuery but I guess the function needs to be called from somewhere with some parameters. Could you direct me in which files should I be looking? So far I've looked in all js and tpl files which could somehow relate to this topic, but found no reference to this function.

[rocky]

Perhaps you could change the following in that function:

            attrOrProp($div, 'id', options.idPrefix + '-' + id);

to:

            attrOrProp($div, 'id', options.idPrefix + '-' + id);
            if (id === 'selectProductSort') { $div.addClass('your-class'); }

Change 'your-class' to the class you want to add.

[dudo24]

Thank you very much! I wouldn't have solved it without you! My goal was to get attribute from selected option and paste as an attribute to the generated span so I can inserted using :after selector. So this is my code:

attrOrProp($div, 'id', options.idPrefix + '-' + id);
    if (id === 'selectProductSort') {
        $span.attr('data-icon', $('#' + id).find(':selected').data('icon'));
    }