ProBG Banner Mobile & Title Control - по-добър контрол върху банерите в OpenCart

Модулът добавя възможност за задаване на:

• отделно мобилно изображение;
  
• различни размери за desktop и mobile версия;
  
• контрол върху показването на заглавието;
  
• отделни mobile настройки за стандартните Banner, Carousel и Slideshow модули;
  
• responsive picture интеграция;
  
• поддръжка на custom OpenCart теми.

Защо беше необходим този модул?

При стандартния OpenCart едно и също изображение се използва както на настолен компютър, така и на мобилен телефон.

Това често води до няколко проблема:

• широк desktop банер изглежда прекалено малък на мобилен екран;
  
• текстът, който е част от изображението, става трудно четим;
  
• важни части от изображението могат да попаднат извън видимата зона;
  
• използването на едно голямо изображение за мобилни устройства натоварва излишно страницата;
  
• дизайнерът няма достатъчно свобода за различна композиция на mobile версията;
  
• различните банер модули често изискват различни размери и пропорции.

С ProBG Banner Mobile & Title Control към всеки стандартен банер може да бъде зададено отделно изображение, оптимизирано специално за мобилни устройства.

Основни възможности

Отделно мобилно изображение

При създаване или редактиране на банер в Design → Banners към стандартното изображение се добавя допълнително поле Мобилно изображение.

Така например може да използвате:

• Desktop банер: 1920 × 720 px
  
• Mobile банер: 772 × 772 px
  

Desktop и mobile изображенията могат да имат напълно различна композиция.

Това е особено полезно при банери, в които има текст, продукти, лого, CTA бутон, декоративни елементи или композиция, оптимизирана за широк екран.

На мобилна версия тези елементи могат да бъдат пренаредени така, че банерът да остане четим и визуално балансиран.

Автоматична смяна на изображението според устройството

На frontend модулът подава отделно:

banner.image
banner.mobile_image

Това позволява използването на стандартния HTML picture елемент:

<picture>
  {% if banner.mobile_image %}
    <source
      media="(max-width: 767.98px)"
      srcset="{{ banner.mobile_image }}"
    >
  {% endif %}
  <img
    src="{{ banner.image }}"
    alt="{{ banner.alt }}"
  >
</picture>

Браузърът сам избира подходящото изображение според ширината на екрана.

Това е по-добро решение от показване и скриване на две отделни изображения чрез CSS, защото браузърът не е необходимо да зарежда и двата файла.

Резултатът е по-малък трафик, по-бързо зареждане, по-добра mobile оптимизация и повече контрол върху дизайна.

Отделни размери за мобилните изображения

Разширението добавя нови настройки към стандартните OpenCart модули:

• Banner
  
• Carousel
  
• Slideshow
  

Освен стандартните Ширина и Височина, вече могат да се задават:

• Ширина на мобилното изображение
  
• Височина на мобилното изображение
  

Например:

Desktop:
1920 × 720 px

Mobile:
772 × 772 px

OpenCart автоматично генерира необходимите изображения чрез стандартната си image resize система.

По този начин всеки модул може да има собствени настройки.

Пример за Slideshow

Desktop:
1920 × 720

Mobile:
772 × 772

Пример за Banner

Desktop:
1200 × 400

Mobile:
600 × 600

Пример за Carousel

Desktop:
300 × 200

Mobile:
300 × 300

Това позволява много по-гъвкаво изграждане на responsive страници.

Скриване на заглавието за конкретен банер

Към всеки банер е добавена и настройка Скрий заглавие.

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

При активирана настройка модулът подава:

banner.hide_title = 1

В custom Twig template може да се използва:

{% if banner.title and not banner.hide_title %}
  <figcaption>
    {{ banner.title }}
  </figcaption>
{% endif %}

Така заглавието няма да бъде визуализирано.

Запазване на ALT текста за SEO и достъпност

Дори когато е активирано Скрий заглавие, оригиналното заглавие на банера не се губи.

То остава налично чрез: banner.alt

Това позволява изображението да има правилен alt атрибут:

<img
  src="{{ banner.image }}"
  alt="{{ banner.alt }}"
>

Така модулът позволява да се отделят две различни функции - визуалното заглавие и ALT текстът на изображението.

Това е важно както за SEO, така и за достъпността на сайта.

Контрол върху HTML title атрибута

title

{% if banner.link %}
<a
  href="{{ banner.link }}"
  {% if banner.title %}title="{{ banner.title }}"{% endif %}
>
{% endif %}

banner.title

title

Поддръжка на Banner, Carousel и Slideshow

Функционалността е налична за трите стандартни OpenCart модула.

Banner

extension/module/banner

Carousel

extension/module/carousel

Slideshow

extension/module/slideshow

И при трите модула frontend получава:

banner.image
banner.mobile_image
banner.title
banner.alt
banner.hide_title
banner.link

Това означава, че една и съща логика може да бъде използвана във всички custom Twig templates.

Поддръжка на custom OpenCart теми

Една от основните цели на ProBG Banner Mobile & Title Control е да не налага собствен frontend дизайн.

Модулът подава необходимите данни към Twig, а разработчикът запазва пълен контрол върху markup-а.

Например:

{% set image_alt = banner.alt ? banner.alt : banner.title %}
<figure>
  {% if banner.link %}
  <a
    href="{{ banner.link }}"
    {% if banner.title %}title="{{ banner.title }}"{% endif %}
  >
  {% endif %}
    <picture>
      {% if banner.mobile_image %}
        <source
          media="(max-width: 767.98px)"
          srcset="{{ banner.mobile_image }}"
        >
      {% endif %}
      <img
        src="{{ banner.image }}"
        alt="{{ image_alt }}"
        class="img-fluid"
      >
    </picture>
  {% if banner.link %}
  </a>
  {% endif %}
  {% if banner.title and not banner.hide_title %}
    <figcaption>
      {{ banner.title }}
    </figcaption>
  {% endif %}
</figure>

Това позволява модулът да бъде използван с custom Bootstrap теми, Bootstrap 5, Bootstrap 4, Tailwind CSS, Owl Carousel, Swiper, собствен JavaScript slider или напълно custom frontend.

Интеграция със стандартната OpenCart система

Едно от важните предимства на ProBG Banner Mobile & Title Control е, че не създава собствена система за управление на банери.

Продължавате да използвате стандартното Design → Banners и стандартните Extensions → Extensions → Modules.

Модулът само разширява съществуващата функционалност.

Това означава:

• не е необходимо повторно създаване на банерите;
  
• стандартните OpenCart модули продължават да работят;
  
• съществуващите банери са съвместими;
  
• няма отделна административна структура;
  
• интеграцията с custom теми остава лесна.

Данни, които модулът добавя към банерите

Модулът използва две допълнителни стойности към стандартните banner image записи:

mobile_image
hide_title

Те се добавят към стандартната таблица:

banner_image

Така данните остават свързани директно със стандартния OpenCart банер.

Автоматична подготовка на базата данни

При необходимост модулът може автоматично да създаде липсващите колони:

mobile_image
hide_title

Това е особено полезно при обновяване от по-стара версия, прехвърляне на модула между сайтове или инсталация върху вече работещ OpenCart магазин.

Целта е да се избегнат SQL грешки при запис на банерите.

Какво се случва, ако няма зададено мобилно изображение?

Не е задължително всеки банер да има отделна mobile версия.

Ако mobile_image липсва, модулът използва desktop изображението като fallback и го resize-ва според зададените mobile размери.

Така модулът може да бъде внедрен постепенно.

Например основният slideshow може да има custom mobile изображения, докато второстепенните банери продължат да използват desktop изображенията. По-късно mobile версии могат да бъдат добавени и към тях.

Пример за реална responsive конфигурация

За голям slideshow на началната страница може да използвате:

Desktop:
1920 × 720 px

Mobile:
772 × 772 px

При desktop версията изображението може да бъде широко и хоризонтално.

При mobile версията продуктът може да бъде центриран, текстът да бъде увеличен, CTA елементът да бъде преместен, а декоративните елементи да бъдат опростени.

Това позволява дизайнът да бъде адаптиран към устройството, вместо просто да бъде умален.

Ползи за дизайна

С отделните mobile изображения могат да се разработят значително по-добри responsive банери.

Основните предимства са:

• по-добра композиция;
  
• по-добра четимост;
  
• повече контрол върху фокуса на изображението;
  
• по-добър mobile UX;
  
• възможност за различен дизайн при desktop и mobile;
  
• по-добро представяне на продукти и промоции.

Ползи за производителността

Responsive изображенията могат да помогнат и за оптимизацията на сайта.

Вместо мобилният телефон да зарежда голям desktop банер, може да получи файл с подходящ размер и пропорции.

Това може да намали:

• размера на страницата;
  
• времето за зареждане;
  
• ненужния image transfer;
  
• натоварването при мобилна връзка.

Особено при начални страници с няколко големи slideshow изображения разликата може да бъде съществена.

По-добра основа за Core Web Vitals

Използването на правилно оразмерени изображения може да помогне и при оптимизацията на показатели като:

• LCP;
  
• общ page weight;
  
• mobile loading performance.

Самият модул не гарантира автоматично висок PageSpeed резултат, но предоставя необходимата инфраструктура за по-добра работа с responsive изображения.

Използване с HTML picture

Препоръчителният начин за интеграция е чрез HTML picture.

Пример:

<picture class="d-block">
  {% if banner.mobile_image %}
    <source
      media="(max-width: 767.98px)"
      srcset="{{ banner.mobile_image }}"
    >
  {% endif %}
  <img
    src="{{ banner.image }}"
    alt="{{ banner.alt }}"
    class="img-fluid w-100 d-block"
  >
</picture>

Така браузърът сам избира правилния ресурс.

Пример с custom Slideshow template

Модулът може да се използва и в по-сложен custom slideshow:

{% set banner_count = banners|length %}
{% set has_multiple_banners = banner_count > 1 %}
<section class="szd-banner szd-slideshow">
  <div class="owl-carousel">
    {% for banner in banners %}
      {% set image_alt = banner.alt ? banner.alt : banner.title %}
      <div class="szd-slider--slideshow__item">
        <figure>
          {% if banner.link %}
            <a
              href="{{ banner.link }}"
              {% if banner.title %}
                title="{{ banner.title }}"
              {% endif %}
            >
          {% endif %}
            <picture>
              {% if banner.mobile_image %}
                <source
                  media="(max-width: 767.98px)"
                  srcset="{{ banner.mobile_image }}"
                >
              {% endif %}
              <img
                src="{{ banner.image }}"
                alt="{{ image_alt }}"
                class="img-fluid w-100"
              >
            </picture>
          {% if banner.link %}
            </a>
          {% endif %}
          {% if banner.title and not banner.hide_title %}
            <figcaption>
              <h2>
                {{ banner.title }}
              </h2>
            </figcaption>
          {% endif %}
        </figure>
      </div>
    {% endfor %}
  </div>
</section>

Това показва, че модулът може да бъде интегриран без зависимост от стандартния OpenCart Swiper template.

Съвместимост

ProBG Banner Mobile & Title Control е разработен за OpenCart 3 и е съобразен със стандартната структура на:

• OpenCart 3.0.2.x
  
• OpenCart 3.0.3.x

Функционалността е реализирана чрез OCMOD, което позволява използването ѝ без директна редакция на основните OpenCart файлове.

Без директна промяна на OpenCart core файловете

Модулът използва OCMOD за разширяване на стандартните:

admin/model/design/banner.php
admin/controller/design/banner.php
admin/view/template/design/banner_form.twig

както и стандартните module controller-и за:

extension/module/banner
extension/module/carousel
extension/module/slideshow

Това означава, че няма нужда от ръчно редактиране на OpenCart core файлове.

Текуща версия

Актуалната версия е ProBG Banner Mobile & Title Control 1.2.4.

В последните версии бяха подобрени:

• записването на мобилното изображение;
  
• записването на настройката „Скрий заглавие“;
  
• зареждането на записаните стойности;
  
• Mobile Width / Mobile Height настройките;
  
• поддръжката на Banner;
  
• поддръжката на Carousel;
  
• поддръжката на Slideshow;
  
• подаването на mobile_image към custom Twig теми;
  
• подаването на hide_title;
  
• подаването на alt;
  
• съвместимостта с други OCMOD модификации;
  
• устойчивостта на frontend OCMOD операциите.

За кого е подходящ модулът?

ProBG Banner Mobile & Title Control е подходящ за:

• OpenCart магазини с custom дизайн;
  
• сайтове с големи начални slideshow банери;
  
• магазини с промоционални кампании;
  
• магазини, при които mobile трафикът е важен;
  
• frontend разработчици;
  
• OpenCart агенции;
  
• собственици на магазини, които искат по-добра responsive визия.
  

Основни предимства

Накратко модулът предоставя:

• отделно desktop изображение;
  
• отделно mobile изображение;
  
• custom mobile размери;
  
• поддръжка на Banner;
  
• поддръжка на Carousel;
  
• поддръжка на Slideshow;
  
• Hide Title настройка;
  
• отделен ALT текст;
  
• responsive picture поддръжка;
  
• fallback към desktop изображението;
  
• съвместимост с custom теми;
  
• OCMOD интеграция;
  
• без отделна banner система;
  
• без директна редакция на OpenCart core.

Заключение

ProBG Banner Mobile & Title Control решава един сравнително малък, но много често срещан проблем при OpenCart - използването на един и същ банер за всички устройства.

С разширението получавате по-прецизен responsive дизайн, по-добър контрол върху изображенията и възможност да оптимизирате всеки Banner, Carousel или Slideshow спрямо устройството на потребителя.

Модулът остава максимално близо до стандартната OpenCart архитектура и не заменя стандартната система за банери, а я надгражда.

Това го прави подходящ както за стандартни OpenCart магазини, така и за напълно custom frontend решения.

С ProBG Banner Mobile & Title Control можете да използвате различни изображения за desktop и mobile, да контролирате размерите им, да управлявате показването на заглавието и да изграждате по-добри responsive банери без необходимост от промяна на OpenCart core файловете.