Jump to content

Recommended Posts

в mobile версиях opencart прячет колонки для экономии места, следовательно все модули в этих колонках исчезают.

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

 

первым делом нужно определить, открылся магазин в mobile устройстве или нет

        var isMobile = false; 
        // device detection
        if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
        || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
            isMobile = true;
        }

далее мы вытаскиваем свой модуль из display:none колонки и для удобства задаем ему класс mobile-view

        if (isMobile){
            $('#panel-seofilter0').detach().appendTo($('#column-left').parent()).addClass("mobile-view");

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

я добавил простой div с backgroud-image и код к нему

            
            $heading = $('.panel-seofilter .panel-heading');
            $('#panel-seofilter0 div.arrow').click( function (){
                if ($heading.hasClass('hidden-filter')){
                    $('#panel-seofilter0').animate({opacity: 1,left: "+=200"});
                } else {
                    $('#panel-seofilter0').animate({opacity: 0.75,left: "-=200"});
                }
                $heading.toggleClass('hidden-filter');
            });
        }

стили

.panel-seofilter.mobile-view {
    width: 200px;
    position: fixed;
    z-index: 1000;
    top: 0;
}

.panel-seofilter.mobile-view .arrow {
    background-image: url(../image/arr1.png);
    width: 22px;
    height: 22px;
    position: absolute;
    left: 186px;
    top: 8px;
}
.panel-seofilter.mobile-view .hidden-filter .arrow {
    background-image: url(../image/arr2.png);
    left: 191px;
}

как это выглядит

nib3RbclRcCLBAR8bPWdAg.png

http://opencart2020.orcart.ru/test-1/

 

 

Share this post


Link to post
Share on other sites

Не первой демке если блок фильтров достаточно длинный, то он не скроллится и нижние опции фильтра недоступны.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By Sha
      450.00 руб
      Скачать/Купить дополнение


      Layout Type, ускорение мобильной версии.
      DEMO
      Подробней:
      Как сделать шаблон адаптивным? на мобильной версии скрыть "лишние" элементы.
      Как, что-бы при этом не пострадало usability? переместить модули и виджеты на другие позиции.
       
      Даже топовые шаблоны, поступают именно таким образом, элементы которые "не нужны" или наоборот необходимы только в мобильной версии: либо скрываются посредством css (display:none); либо перемещаются, хорошо если flexbox или bootstrap pull push но часто с помощью навешивания множества слушателей событий javascript. Даже адаптивность bootstrap основана на таких принципах.
      Всё это создаёт лишний "вес" и нагрузку, что конечно же замедляет работу сайта и заставляет процессор пользователя работать с повышенной нагрузкой шумя как майнинг ферма.
      Мы в наших продуктах пропагандируем использовать только то, что необходимо сейчас. И исходя из этих принципов нами был разработан
       
      модуль Мобильные схемы который позволит:
      уменьшить объём страницы (предотвратить чрезмерную нагрузку на сеть),  сократить размер структуры DOM, ускорить время окончания работы ЦП, избавится от лишнего JavaScript кода (сократить время выполнения кода JavaScript), избавится от css костылей,       а так-же:
      Устранить ресурсы, блокирующие отображение, Сократить время ответа сервера (время до получения первого байта, TTFB), Использовать подходящий размер изображений,  
           и др.
           при этом даже улучшив
       
      адаптивность, гибкость в настройке и дружелюбность Вашего сайта!  
       
      Поддерживает встроенные схемы популярных модулей, например поддерживает SEOCMS.
      Большие скидки, для постоянных покупателей.
       
      Бесплатно модуль получить можно вместе с шаблоном Roundshop.
       
      Техническая поддержка
      доступна пользователям из списка покупателей.
      Если вы обращаетесь с просьбой разобраться в проблеме, то для экономии времени укажите:
      адрес сайта доступ в админ-панель доступ на FTP-сервер  
      По любым вопросам вы можете связаться с нами через:
      Личные сообщения на форуме; Режим работы с 10-00 до 18-00 по киевскому времени за исключением выходных и праздничных дней.
       
      Добавил Sha Добавлено 13.03.2018 Категория Кэширование, сжатие, ускорение Системные требования Сайт разработчика zeKit.pro Старая цена 450 Метод активации Автоматическая активация Ioncube Loader Нет OpenCart 2.3
      2.2
      2.1 ocStore 2.3
      2.2
      2.1 OpenCart.Pro, ocShop Opencart.pro 2.3
      Opencart.pro 2.1
      OcShop 2.0.3.х Обращение к серверу разработчика Нет  
    • By Sha
      DEMO
      Подробней:
      Как сделать шаблон адаптивным? на мобильной версии скрыть "лишние" элементы.
      Как, что-бы при этом не пострадало usability? переместить модули и виджеты на другие позиции.
       
      Даже топовые шаблоны, поступают именно таким образом, элементы которые "не нужны" или наоборот необходимы только в мобильной версии: либо скрываются посредством css (display:none); либо перемещаются, хорошо если flexbox или bootstrap pull push но часто с помощью навешивания множества слушателей событий javascript. Даже адаптивность bootstrap основана на таких принципах.
      Всё это создаёт лишний "вес" и нагрузку, что конечно же замедляет работу сайта и заставляет процессор пользователя работать с повышенной нагрузкой шумя как майнинг ферма.
      Мы в наших продуктах пропагандируем использовать только то, что необходимо сейчас. И исходя из этих принципов нами был разработан
       
      модуль Мобильные схемы который позволит:
      уменьшить объём страницы (предотвратить чрезмерную нагрузку на сеть),  сократить размер структуры DOM, ускорить время окончания работы ЦП, избавится от лишнего JavaScript кода (сократить время выполнения кода JavaScript), избавится от css костылей,       а так-же:
      Устранить ресурсы, блокирующие отображение, Сократить время ответа сервера (время до получения первого байта, TTFB), Использовать подходящий размер изображений,  
           и др.
           при этом даже улучшив
       
      адаптивность, гибкость в настройке и дружелюбность Вашего сайта!  
       
      Поддерживает встроенные схемы популярных модулей, например поддерживает SEOCMS.
      Большие скидки, для постоянных покупателей.
       
      Бесплатно модуль получить можно вместе с шаблоном Roundshop.
       
      Техническая поддержка
      доступна пользователям из списка покупателей.
      Если вы обращаетесь с просьбой разобраться в проблеме, то для экономии времени укажите:
      адрес сайта доступ в админ-панель доступ на FTP-сервер  
      По любым вопросам вы можете связаться с нами через:
      Личные сообщения на форуме; Режим работы с 10-00 до 18-00 по киевскому времени за исключением выходных и праздничных дней.
       
    • By Alexander86
      Приветствую!  
      Подскажите пожалуйста, где искать данные для управления отображения Slideshow в web и mob версиях? Хочу исключить из отображения слайдшоу в мобильной версии. В данном случае Magic Slider. 
       
      Спасибо.
    • By bylkka
      Добрый день,
       
      Выручите пожалуйста на моем сайте http://mybirka.ru/himchistka-online&view=mobile
       
      в категориях "быстрый просмотр" около каждого из товаров, не понимаю как его убрать, перерыл вроде все, а не могу его найти.
    • By biverb
      Хочу приобрести модуль: http://www.opencart.com/index.php?route=extension/extension/info&extension_id=4168&filter_search=mobile%20theme. Дизайн только не нравится. Планирую под себя написать, да в качестве темы залить и поставить.
       
      Кто пользовался модулем, напишите, какие впечатления? советуете - не советуете?! Буду очень признателен. 
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.