Вход / Регистрация

Создайте сайт прямо сейчас!

Зарегистрируйтесь по ссылкам и получите дополнительные бонусы при создании сайта



  • Персональный перечень способов заработка на сайте именно вашей тематики
  • Аудит юзабилити сайта бесплатно $20
  • Набор скриптов на сумму $40 для увеличения продаж
  • Аудит юзабилити интернет магазина бесплатно $60

Как получить бонусы?


Как только вы создадите сайт по одной из указанных ссылок, я увижу это в отчете партнерской программы:

После оплаты одного из пакетов, отправьте запрос на info@ucozmagazines.ru с указанием адреса созданного сайта.

Сортировка товаров на странице заказа с помощью tablesorter

Сергей    31.08.2016    961    5.0 из 5.0 (1)

Оцените материал:

    О чем здесь?

    Сортировка товаров на странице заказа с помощью tablesorter позволит покупателям выстраивать товары по наименованию, категории, количеству, цене, сумме и другим полям.

    Мы воспользуемся плагином tablesorter.

    Зачем это нужно?

    Решение отлично подойдет магазинам с большим количеством позиций в заказах. В некоторых случаях удобно сортировать товары в корзине по артикулу или цене.

    Кроме того, мы подключим сортировку и для страниц заказов, что обеспечит дополнительное удобство при подготовке заказов к отправке.

    Настройка полей товаров

    Зайдите в панель управления и в разделе «Интернет-магазин» найдите пункт «Управление полями заказа»:

    Управление полями заказа

    На открывшейся странице выберите поля, которые будут отображаться в таблице с товарами и по которым пользователи смогут выполнять сортировку:

    Управление полями заказа

    Если испытываете трудности, посмотрите урок про поля заказа.

    Подключение скрипта

    Теперь подключим скрипт в следующих шаблонах:

    • Страница служебных форм. При условии $PAGE_ID$ = 'checkout'
    • Страница заказа

    Подключать будем после $BODY$ в любом удобном месте.

    <script type="text/javascript" src="/js/jquery.tablesorter.js"></script>
    <script>
    $(document).ready(function(){ 
    
     // Перенесем последнюю строку таблицы, так как она не является товаром
     var summ = $("#order-table>table>tbody>tr:last-child").html();
     $("#order-table>table>tbody>tr:last-child").remove();
     $("#order-table").after("<table>" + summ + "</table>");
    
     // Запускаем работу плагина для таблицы с товарами
     $("#order-table>table").tablesorter({sortList: [[0,0]]}); 
    
     }); 
    </script>
    

    Еще потребуется добавить стили, чтобы заголовки таблиц отображались корректно и давали информацию о том, по какой колонке выполнена сортировка в данный момент. Для этого можно использовать классы .headerSortUp и .headerSortDown, которые плагин добавляет автоматически:

    .headerSortUp::after {
     content: "↓";
    }
    .headerSortDown::after {
     content: "↑";
    }
    th.header {
     cursor: pointer;
    }
    
    Плагин tablesorter для интернет магазина uCoz

    Еще для th.header мы задали смену иконки курсора. Так пользователь станет ясно, что на заголовок таблицы можно нажать.

    Статьи по теме

    Обсуждение

    Всего комментариев: 7

    L
    1
    Кодировка у "демо" слетела, у меня иероглифы показывает.
    avatar
    1
    2
    Спасибо за информацию. А сейчас?
    L
    5
    сейчас как надо =)
    s
    3
    Спасибо, штука полезная. К сожалению, по цене и сумме сортирует некорректно. Видимо, считает эти поля строками.
    avatar
    1
    4
    
    Код
    <script>
      $(document).ready(function(){  
      
      // Перенесем последнюю строку таблицы, так как она не является товаром
      var summ = $("#order-table>table>tbody>tr:last-child").html();
      $("#order-table>table>tbody>tr:last-child").remove();
      $("#order-table").after("<table class=\"order-summ\">" + summ + "</table>");
      
      // Запускаем работу плагина для таблицы с товарами
      $("#order-table>table").tablesorter({sortList: [[0,0]],
      headers: {
      6: { sorter: 'digit' },
      8: { sorter: 'digit' },
      10: { sorter: 'digit' }
      }
      });  
      });  
      </script>

    6, 8, 10 - это номера столбцов, которые нужно сортировать как числа
    avatar
    6
    Спасибо Сергей. Красотище!
    avatar
    0
    7
    Думаю, скрипту без разницы, скрыт он или нет. Нумерация, кстати с единицы, а не с нуля.
    Сортировка товаров на странице заказа с помощью tablesorter
    Сортировка товаров на странице заказа с помощью tablesorter