frontend/views/goods/index.php

<?php
use yii\data\Sort;
use \yii\helpers\Html;
$sort = new Sort([
    'attributes' => [
        'box' => ['label' => 'Наличие'],
        'delivery' => ['label' => 'Срок'],
        'price' => ['label' => 'Цена'],
    ],
]);
$this->registerCssFile('/css/BC2_catalog_zapchasti.css');
$this->registerJsFile('/js/jquery.tablesorter.min.js');
$this->params['breadcrumbs'][] = $this->title;
\yii\widgets\Pjax::begin();
?>
<div class='vin table '>
    <a href="" class='navigation'>Италавто</a>
    <img src="/images/arrow_dots.png">
    <a href="" class='navigation'>Расходные материалы</a>
    <img src="/images/arrow_dots.png">
    <a href="" class='navigation'>Электрооборудование</a>
    <img src="/images/arrow_dots.png">
    <a href="" class='navigation'>Акамуляторы(АКБ)</a>
    <img src="/images/arrow_dots.png">
    <span>Аккумулятор<span class='detail_name'> 0 092 S30 120: BOSCH</span></span>
        <p class="vin_article">Аккумулятор 0 092 S30 120: BOSCH</p>
    <div class="tovar_card">
        <div class="search_span zapchasti">
            <img src="/images/car1.png" id="zapchasti_car">
            <p>Укажите свой автомобиль
                и мы предложим вам
                еще Аккумуляторы (АКБ)</p>
            <div class="selectize_item2">
                <select class="area">
                    <option value="" disabled="" selected="">Марка</option>
                    <option value="2">Выбери меня!</option>
                    <option value="3">Выбери меня!</option>
                    <option value="5">Меня!</option>
                    <option value="4">Меня</option>
                </select>
            </div>
            <button class="purple">Есть еще?</button>
        </div>
        <div class='note'>
            <span id="modal_close_tip"><img src="/images/close_form.png"></span>
            <p>
                У нас есть еще<br>
                45 Аккумуляторы (АКБ)<br>
                Возможно что-то вам<br>
                подойдет
            </p>
        </div>
        <table class='detail'>
            <tr>
                <td>
                    <img src="/images/acamulator_big.png">
                    <img src="/images/small_plus.png">
                </td>
                <td>
                    <p class='bold_line'>0 092 S30 120: BOSCH</p>
                    <p class="thin_line">12V 88Ah 740A</p>
                    <p class='bold_line space'>Емкость, А/Ч:<span class='thin_line'> 88</span></p>
                    <p class="bold_line">Полярность: Правая (-/+)</p>
                </td>
            </tr>
            <tr class="galery">
                <td><img src="/images/acamulator_small_gallery.png"><img src="/images/acamulator_small_gallery.png"></td>
            </tr>
        </table>
        <img src="/images/arrow_rounded.png" class='arrow_rounded'>
    </div>
</div>
<div class="vin href">
    <p class="button_grey" id="button_grey_card">Скрыть карточку товара</p>
</div>
<div class="vin tables">
    <div class="first_section">
        <p class="bold_line">12V 88Ah 740A Bosch 0092s30120</p>
        <p class="currency  opposite" id="dollars">грн</p>
        <p class="currency active_button_purple1" id="grivna">$</p>
        <table class="tovar_table" cellspacing="0" cellpadding="0" border="0">
            <tbody><tr class="name">
                <td class="small_width row_name">Фирма</td>
                <td class="medium_width row_name">Номер детали</td>
                <td class="large_width row_name">Описание</td>
                <td class="row_select1 row_name"></td>
                <td class="right_large row_name link_sort arrow_up"><?= $sort->link('box') ?></td>
                <td class="right_small row_name link_sort arrow_up"><?= $sort->link('delivery') ?></td>
                <td class="right_medium row_name link_sort arrow_up"><?= $sort->link('price') ?></td>
            </tr>
            <?php
                echo \yii\widgets\ListView::widget([
                    'dataProvider' => $goods_data_provider,
                    'itemView' => 'one_item',
                    'summary' => '',
                    'layout' => "{items}"
                ]);
            ?>
            </tbody></table>
    </div>
    <div class="second_section">
        <p class="bold_line">Замены искомого производителя</p>
        <p class="currency1  opposite1" id="dollars">грн</p>
        <p class="currency1 active_button_purple11" id="grivna">$</p>
        <table class="tovar_table" cellspacing="0" cellpadding="0" border="0">
            <tbody>
            <tr class="name">
                <td class="small_width row_name">Фирма</td>
                <td class="medium_width row_name">Номер детали</td>
                <td class="large_width row_name">Описание</td>
                <td class="row_select1 row_name"></td>
                <td class="right_large row_name link_sort arrow_up">Наличие</td>
                <td class="right_small row_name link_sort arrow_up">Срок</td>
                <td class="right_medium row_name link_sort arrow_up">Цена</td>
            </tr>
            <?php
                echo \yii\widgets\ListView::widget([
                    'dataProvider' => $crosses_data_provider,
                    'itemView' => 'one_item',
                    'summary' => '',
                    'layout' => "{items}"
                ]);
            ?>
            </tbody></table>
        <div class="yellow_stock">
            <img src="/images/yellow_squere.jpg"><p>В наличии на центральном складе ItalAuto, в Киеве</p>
        </div>
    </div>
</div>
</div>
<script type="text/javascript">
    function changeText() {
        e = document.getElementById('button_grey_card');
        e.innerHTML = e.innerHTML == "Скрыть карточку товара" ? "Открыть карточку товара" : "Скрыть карточку товара";
    }
  $('#button_grey_card').click(function(){
      changeText();
      $(this).toggleClass('change_b');
      $('.tovar_card').toggleClass('tovar_card_visible');
      $('.table').toggleClass('table_height');
  });
  $('.link_sort').click(function(){
    $(this).find('.desc').toggleClass('arrow_downA');
  })
</script>
<?php
\yii\widgets\Pjax::end();
?>
<div class="modal fade" id="details_content_block" >
    <div class="modal-dialog table_details">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div id="details_content">
            </div>
        </div>
    </div>
</div>