Opencart 2.x - Улучшаем Мобильную Версию Сайта

Тема в разделе "Шаблоны, дизайн и оформление магазина", создана пользователем admin, 1 май 2017.

  1. TopicStarter Overlay
    Online

    admin Команда форума Администратор

    Сообщения:
    2.609
    Симпатии:
    114.919
    Репутация:
    180
    Всем привет, многие просили меня написать статью об улучшении мобильной версии сайта (стандартный шаблон – default), раз просили – делаю.

    OpenCart-20-2.jpg
    Список задач на сегодня:

    1. Правим модуль Рекомендуемые (так-же правятся все остальные модули – хиты продаж, последние и т.д.)

    2. Правим подвал сайта (footer)

    3. Правим страницу категорий, результатов поиска и т.д.

    Приступим:

    1. Откроем файл ../catalog/view/theme/default/template/extension/module/featured.tpl и вместо этой строки (4):

    Код:
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    вставляем эту:

    Код:
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-6">
    (P.S.эта правка выводит на экране телефона два товара в ряд, вместо одного)

    Аналогично правим файлы bestseller.tpl, latest.tpl, special.tpl

    2. Откроем файл ../catalog/view/theme/default/template/common/footer.tpl и вместо этих строк:

    5 — <div class="col-sm-3">
    14 — <div class="col-sm-3">
    22 — <div class="col-sm-3">
    31 — <div class="col-sm-3">
    вставим эти:

    5 — <div class="col-sm-3 col-xs-6">
    14 — <div class="col-sm-3 col-xs-6">
    22 — <div class="col-sm-3 col-xs-6">
    31 — <div class="col-sm-3 col-xs-6">
    2.1. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и в конец файла вставим этот код:

    Код:
    @media (max-width: 768px) {
    footer .col-xs-6 {
    min-height: 140px;
    }
    }
    (P.S.Если у колонок разная высота – разное количество ссылок и футер смещает колонки просто измените 140px на большее значение, пока не добьётесь приемлемого результата)

    3. Откроем файл ../catalog/view/javascript/common.js и вместо этих строк:

    101 — $('#content .product-list').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-12');
    103 — $('#content .product-list').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12');
    105 — $('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
    вставим эти:

    101 — $('#content .product-list').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-6');
    103 — $('#content .product-list').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-6');
    105 — $('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-6');
    Чистим кеш системы, изображений, браузера и кеш ocmod (если конечно ocmod’ы установлены)

    Результат:

    Модули и категории:

    mobile_catalog_1.png

    Подвал:

    mobile_catalog_2-1.png

    На сегодня всё, следите за нашими новостями и до новых встреч.
     
  2. Offline

    vladimir1988 Пользователь

    Сообщения:
    10
    Симпатии:
    19
    Репутация:
    5
    @admin, Держи
    HTML:
    <?xml version="1.0" encoding="utf-8"?>
    <modification>
      <code>Mobile Version Repair</code>
      <name>Исправление дизайна мобильной версии</name>
      <version>1.0</version>
      <author>Админ форума, но мод собрал Fiker</author>
      <link>http://lowenet.biz/threads/opencart-2-x-uluchshaem-mobilnuju-versiju-sajta.1375/</link>
       
      <!-- эта правка выводит на экране телефона два товара в ряд, вместо одного -->
      <!-- Правим featured -->
      <file path="catalog/view/theme/default/template/extension/module/featured.tpl">
      <operation>
      <search><![CDATA[<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">]]></search>
      <add position="replace"><![CDATA[<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-6">]]></add>
      </operation>
      </file>
    
      <!-- Правим latest -->
      <file path="catalog/view/theme/default/template/extension/module/latest.tpl">
      <operation>
      <search><![CDATA[<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">]]></search>
      <add position="replace"><![CDATA[<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-6">]]></add>
      </operation>
      </file>
       
      <!-- Правим special -->
      <file path="catalog/view/theme/default/template/extension/module/special.tpl">
      <operation>
      <search><![CDATA[<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">]]></search>
      <add position="replace"><![CDATA[<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-6">]]></add>
      </operation>
      </file>   
       
      <!-- Правим bestseller -->
      <file path="catalog/view/theme/default/template/extension/module/bestseller.tpl">
      <operation>
      <search><![CDATA[<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">]]></search>
      <add position="replace"><![CDATA[<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-6">]]></add>
      </operation>
      </file>
      <!-- Правим featured -->
      <file path="catalog/view/theme/default/template/module/featured.tpl">
      <operation>
      <search><![CDATA[<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">]]></search>
      <add position="replace"><![CDATA[<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-6">]]></add>
      </operation>
      </file>
    
      <!-- Правим latest -->
      <file path="catalog/view/theme/default/template/module/latest.tpl">
      <operation>
      <search><![CDATA[<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">]]></search>
      <add position="replace"><![CDATA[<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-6">]]></add>
      </operation>
      </file>
       
      <!-- Правим special -->
      <file path="catalog/view/theme/default/template/module/special.tpl">
      <operation>
      <search><![CDATA[<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">]]></search>
      <add position="replace"><![CDATA[<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-6">]]></add>
      </operation>
      </file>   
       
      <!-- Правим bestseller -->
      <file path="catalog/view/theme/default/template/module/bestseller.tpl">
      <operation>
      <search><![CDATA[<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">]]></search>
      <add position="replace"><![CDATA[<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-6">]]></add>
      </operation>
      </file>
       
      <!-- Правим стили -->
       <!-- Если у колонок разная высота – разное количество ссылок и футер смещает колонки просто измените 140px на большее значение, пока не добьётесь приемлемого результата)-->
      <file path="catalog/view/theme/default/stylesheet/stylesheet.css">
      <operation>
      <search><![CDATA[/* footer */]]></search>
      <add position="before"><![CDATA[
           @media (max-width: 768px) {
             footer .col-xs-6 {
               min-height: 140px;
             }
           }]]></add>
      </operation>
      </file>
       
      <!-- Правим футер (Нулевой индекс под некоторые версии opencart) -->
      <file path="catalog/view/theme/default/template/common/footer.tpl">
      <operation>
      <search trim="true" index='0'>
      <![CDATA[<div class="col-sm-3">]]>
      </search>
      <add position="replace">
      <![CDATA[<div class="col-sm-3 col-xs-6">]]>
      </add>
      </operation>
      <operation>
      <search trim="true" index='1'>
      <![CDATA[<div class="col-sm-3">]]>
      </search>
      <add position="replace">
      <![CDATA[<div class="col-sm-3 col-xs-6">]]>
      </add>
      </operation>
      <operation>
      <search trim="true" index='2'>
      <![CDATA[<div class="col-sm-3">]]>
      </search>
      <add position="replace">
      <![CDATA[<div class="col-sm-3 col-xs-6">]]>
      </add>
      </operation>
      <operation>
      <search trim="true" index='3'>
      <![CDATA[<div class="col-sm-3">]]>
      </search>
      <add position="replace">
      <![CDATA[<div class="col-sm-3 col-xs-6">]]>
      </add>
      </operation>
      <operation>
      <search trim="true" index='4'>
      <![CDATA[<div class="col-sm-3">]]>
      </search>
      <add position="replace">
      <![CDATA[<div class="col-sm-3 col-xs-6">]]>
      </add>
      </operation>
      </file>
    
      <!-- Правим JS (Если у кого-то уже испралены, как у меня, то вручную подготоняйте под себя) -->
      <file path="catalog/view/javascript/common.js">
      <operation>
      <search>
      <![CDATA[$('#content .product-list').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-12');]]>
      </search>
      <add position="replace">
      <![CDATA[$('#content .product-list').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-6');]]>
      </add>
      </operation>
      <operation>
      <search>
      <![CDATA[$('#content .product-list').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12');]]>
      </search>
      <add position="replace">
      <![CDATA[$('#content .product-list').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-6');]]>
      </add>
      </operation>
      <operation>
      <search>
      <![CDATA[$('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');]]>
      </search>
      <add position="replace">
      <![CDATA[$('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-6');]]>
      </add>
      </operation>
      </file>
    
    
    </modification>
    
     
    admin нравится это.