Как создать дополнительно поле для баннера?

Тема в разделе "Инструкции и FAQ", создана пользователем solunski.d, 12 янв 2016.

  1. solunski.d

    solunski.d Эксперт

    Сообщения:
    1.569
    Симпатии:
    432
    Часто случается так что, есть слайдер или баннер с красивыми эффектами: "fadeIn", "slideInLeft", "slideInRight" и т.д
    Но так сложилось что эффект всего лишь один, для всех изображений, потому что нет поля, где мы могли бы вписать название эффекта для изображения.
    Поэтому в данном посте я расскажу, как создать это замечательное поле.

    Создание ячейки/поля в базе данных

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

    Выбираем базу данных на которую установлен ваш магазин, в левом или в правом списке мы ищем таблицу *_banner_image , там где * , это префикс таблицы, по умолчанию "oc", создается на этапе установки движка. Нажимаем на таблицу *_banner_image и открывается новая страница где мы видим содержимое ячеек имеющихся баннеров, смотрим на верх и видим разные вкладки, переходим во вкладку "Структура", здесь сами ячейки и их "конфигурация". На этой странице мы находим кнопку "OK", а с лева от нее есть список и круглые кнопки (Радиокнопка) выбираем из кнопок кнопку "после" а в списке выбираем "image" после чего жмем кнопку "OK". Открывается новая страница где мы создаем ячейку и её "конфигурацию".

    1) Настраиваем сами
    1. В ячейку "имя" мы впишем например "effect".
    2. В ячейке "тип" мы выбираем из списка "VARCHAR".
    3 В ячейку "Длина/значение" мы впишем "255"
    4. В ячейке "Сравнения" мы выбираем из списка "utf8_generil_ci". (Почти в конце списка)
    5. Жмем кнопку "Сохранить".​

    2) За нас все сделает "SQL" код.
    Выбираем базу данных, жмем на вкладку "SQL" , открывается страница где мы вставим "SQL" код.
    PHP:
    ALTER TABLE  `oc_banner_imageADD  `effectVARCHAR255 CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL AFTER  `image` ;
    Не забудьте указать ваш префикс в базе данных `*_banner_image`
    На этом этапе мы закончили работу с "БД" (базой данных).

    Создаем функционал для Администратора в административной панели.

    На этом этапе мы создадим поле в административной панели, на странице редактирования баннера.
    Используйте для редактирования, например редактор "notepad++", не в коем случае не редактор windows.

    Первое что мы сделаем это функционал получение значения ячейки.
    Идем в папку "admin/model/design/" и открываем для редактирования файл "banner.php".

    Тут есть 7 функций (public function), из которых мы подредактируем 3.

    1.
    PHP:
    public function addBanner($data) {...}
    В этой функции ищем условие.
    PHP:
    if (isset($data['banner_image'])) {
        foreach (
    $data['banner_image'] as $banner_image) {
            
    $this->db->query("INSERT INTO " DB_PREFIX "banner_image SET banner_id = '" . (int)$banner_id "', link = '" .  $this->db->escape($banner_image['link']) . "', image = '" .  $this->db->escape($banner_image['image']) . "', sort_order = '" . (int)$banner_image['sort_order'] . "'");

            
    $banner_image_id $this->db->getLastId();

            foreach (
    $banner_image['banner_image_description'] as $language_id => $banner_image_description) {
                
    $this->db->query("INSERT INTO " DB_PREFIX "banner_image_description SET banner_image_id = '" . (int)$banner_image_id "', language_id = '" . (int)$language_id "', banner_id = '" . (int)$banner_id "', title = '" .  $this->db->escape($banner_image_description['title']) . "'");
            }
        }
    }
    И редактируем условие как тут:
    PHP:
    if (isset($data['banner_image'])) {
        foreach (
    $data['banner_image'] as $banner_image) {
            
    $this->db->query("INSERT INTO " DB_PREFIX "banner_image SET banner_id = '" . (int)$banner_id "', link = '" .  $this->db->escape($banner_image['link']) . "', image = '" .  $this->db->escape($banner_image['image']) . "', effect = '" .  $this->db->escape($banner_image['effect']) . "', sort_order = '" . (int)$banner_image['sort_order'] . "'");

            
    $banner_image_id $this->db->getLastId();

            foreach (
    $banner_image['banner_image_description'] as $language_id => $banner_image_description) {
                
    $this->db->query("INSERT INTO " DB_PREFIX "banner_image_description SET banner_image_id = '" . (int)$banner_image_id "', language_id = '" . (int)$language_id "', banner_id = '" . (int)$banner_id "', title = '" .  $this->db->escape($banner_image_description['title']) . "'");
            }
        }
    }
    Как видите мы добавили вот эту строку
    PHP:
    effect '" .  $this->db->escape($banner_image['effect']) . "',
    2.
    PHP:
    public function editBanner($banner_id$data) {...}
    Проделываем все тоже самое что и для первой функции.

    3.
    PHP:
    public function getBannerImages($banner_id) {...}
    В последней функции мы в массив загоняем переменную и присваиваем ей "ключ".
    PHP:
    $banner_image_data[] = array(
        
    'banner_image_description' => $banner_image_description_data,
        
    'link'                     => $banner_image['link'],
        
    'effect'                   => $banner_image['effect'], // Вот это строку добавил
        
    'image'                    => $banner_image['image'],
        
    'sort_order'               => $banner_image['sort_order']
    );
    Тут мы и закончили работу с файлом для получения значений из "БД".

    Второе нам нужно в контроллере прописать в массиве переменную.
    Идем в папку "admin/controller/design/" и открываем для редактирования файл "banner.php".
    Находим в этом файле функцию
    PHP:
    protected function getForm() {...}
    А теперь посмотрите что мы делали чуть выше в функции
    PHP:
    public function getBannerImages($banner_id) {...}
    Находим такой же самый блок и вставляем тут такую же строку.
    Тут мы и закончили работу с контроллером.

    Теперь визуальная часть, куда мы будем вписывать название эффекта.
    Идем в папку "admin/view/template/design/" и открываем для редактирования файл "banner.tpl".
    В этом файле мы в теге <table> находим два дочерних тега <thead> и <tbody>.
    1. В <thead> мы добавляем
    HTML:
    <td class="text-center">Эффект</td>
    2. В <tbody> мы добавляем
    HTML:
    <td class="text-left" style="width: 20%;"><input type="text" name="banner_image[<?php echo $image_row; ?>][effect]" value="<?php echo $banner_image['effect']; ?>" placeholder="Эффект" class="form-control"></td>
    Проверяем сохраняется ли наше значение или нет, если да, вы все верно сделали, нет еще раз перечитайте этап.
    Ну вот, мы добавили функционал, этот этап закончен, теперь остался самый простой вывод в шаблон нашу переменную.

    Вывод переменной в шаблон.

    На последнем этапе мы добавим в контроллер модуля "Слайдшоу" или "Баннер", выбирать какой вам, прицеп тот же самый.

    Идем в папку "catalog/cantroller/module/" и открываем для редактирования файл "slideshow.php".
    Ищем перебор массива
    PHP:
    foreach ($results as $result) {
        if (
    is_file(DIR_IMAGE $result['image'])) {
            
    $data['banners'][] = array(
                
    'title' => $result['title'],
                
    'link'  => $result['link'],
                
    'effect'  => $result['effect'], // Вот эту строку я добавил
                
    'image' => $this->model_tool_image->resize($result['image'], $setting['width'], $setting['height'])
            );
        }
    }
    С контроллером мы закончили работу, теперь остался вывод переменной.

    Идем в папку "catalog/view/theme/*/template/module/" и открываем для редактирования файл "slideshow.tpl". Как вы видите здесь есть условие if, если ссылка указанна значит мы будем выводить так, если нет, значит вот так.
    Добавляем для обоих случаев для тега <img>
    HTML:
    class="img-responsive <?php echo $banner['effect']; ?>"
    Ну вот, мы наконец то закончили как и я. Функционал готов!
     
    gvz, paulittop, Slait и 3 другим нравится это.
  2. paulittop

    paulittop Новичок

    Сообщения:
    16
    Симпатии:
    0
    Добрый день.

    Благодарю за отличную статью.

    У меня не получается реализовать под 2.3.0.2

    Вот такой массив $banner_images в контроллере после добавления поля:

    Array
    (
    [2] => Array
    (
    [0] => Array
    (
    [title] => Акция
    [link] => google.com
    [image] => catalog/demo/apple_logo.jpg
    [sort_order] =>
    )

    )

    [0] => Array
    (
    [effect] => qwdawd
    )

    )

    и туча ошибок:

    Warning: Illegal string offset 'title' in /home/chromakey/hydro.chromakey-production.com.ua/admin/controller/design/banner.php on line 416
    Notice
    : Undefined index: effect in /home/chromakey/hydro.chromakey-production.com.ua/admin/controller/design/banner.php on line 389
    Warning
    : Illegal string offset 'image' in /home/chromakey/hydro.chromakey-production.com.ua/admin/controller/design/banner.php on line 376
    Warning
    : Illegal string offset 'title' in /home/chromakey/hydro.chromakey-production.com.ua/admin/controller/design/banner.php on line 385
    Warning
    : Illegal string offset 'link' in /home/chromakey/hydro.chromakey-production.com.ua/admin/controller/design/banner.php on line 386
    Warning
    : Illegal string offset 'effect' in /home/chromakey/hydro.chromakey-production.com.ua/admin/controller/design/banner.php on line 389
    Warning
    : Illegal string offset 'sort_order' in /home/chromakey/hydro.chromakey-production.com.ua/admin/controller/design/banner.php on line 390

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

    Благодарю.
     
  3. paulittop

    paulittop Новичок

    Сообщения:
    16
    Симпатии:
    0
    Прошу прощения за беспокойство, нашел ошибку:

    в banner_form.tpl в функцию addImage(language_id) нужно было добавить

    html += ' <td class="text-left" style="width: 20%;"><input type="text" name="banner_image[' + language_id + '][' + image_row + '][effect]" value="" placeholder="Эффект" class="form-control"></td>';

    вместо

    <td class="text-left" style="width: 20%;"><input type="text" name="banner_image[<?php echo $image_row; ?>][effect]" value="<?php echo $banner_image['effect']; ?>" placeholder="Эффект" class="form-control"></td>

    Благодарю за внимание.
     
  4. Vipsaler

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

    Сообщения:
    77
    Симпатии:
    1
    А подскажите как добавить дополнительное изображение к баннеру, чтобы из админки помимо изображений баннера, можно было загрузить еще одну картинку, которая будет являться фоном баннера (для каждого баннера разный фон).
     
  5. karpov

    karpov Продвинутый пользователь

    Сообщения:
    1.519
    Симпатии:
    241
    В так же как и описано, только нужно применить и добавить поле изображения, такое же как и есть и прописать действие в js
     
  6. Vipsaler

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

    Сообщения:
    77
    Симпатии:
    1
    Сколько будет стоить такая доработка?
     
  7. Derill

    Derill Новичок

    Сообщения:
    16
    Симпатии:
    0
    Добрый вечер.
    Подскажите пожалуйста, как возможно вынести слайдшоу за пределы контейнера, что бы сделать его на всю ширину страници?
     
  8. solunski.d

    solunski.d Эксперт

    Сообщения:
    1.569
    Симпатии:
    432
    В файле "home.tpl" есть HTML разметка кода, там надо вынести $content_top или $content_bottom за пределы .container
     
  9. Derill

    Derill Новичок

    Сообщения:
    16
    Симпатии:
    0
    в opencart 2.3, если вынести $content_top за .container, то перенесутся и все блоки новинок и рекомендуемие товары, и все остальное что добавлено через "схемы".
    А хотелось бы вынести сам баннер!
     
  10. solunski.d

    solunski.d Эксперт

    Сообщения:
    1.569
    Симпатии:
    432
    Вынесутся, можно же перейти в раздел схемы макетов и перенести их в низ, а вверху оставить только слайдер