Ошибка при подключении Bootstrap-4

Тема в разделе "Создание шаблона", создана пользователем immortal727, 23.05.2018.

  1. immortal727
    Offline

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

    Регистрация:
    08.10.2017
    Сообщения:
    83
    Симпатии:
    0
    Пол:
    Мужской
    Решил создать шаблон с нуля.
    Отключаю ненужные файлы
    // Отключаем ненужные
    Код (CODE):
    1. $headlink = $this->getHeadData();
    2. unset($headlink['scripts']['/media/jui/js/bootstrap.min.js']);
    3. $this->setHeadData($headlink);


    А затем подключаю уже сам бутстрап
    Код (CODE):
    1. $doc = JFactory::getDocument ();
    2.  
    3. // Add JavaScript Frameworks
    4. $doc->addScript ( $this->baseurl . '/templates/' . $this->template . '/bootstrap/js/bootstrap.min.js' );
    5.  
    6. // Load Bootstrap CSS
    7. $doc->addStyleSheet ( $this->baseurl . '/templates/' . $this->template . '/bootstrap/css/bootstrap.min.css' );


    И ещё доп. вещи в head как написано у разработчика
    Код (CODE):
    1. <head>
    2.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    3.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    4.     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    5.     <jdoc:include type="head" />


    Но когда захожу на сайт, то вижу, что он подключен.
    Но идет ошибка

    Код (CODE):
    1. disk-button.min.js:1 Uncaught TypeError: Cannot read property 'defaultView' of null
    2.     at Object._getElementStyles (disk-button.min.js:1)
    3.     at Object._isTrimmingByOverflow (disk-button.min.js:1)
    4.     at Object.findTrimmingParent (disk-button.min.js:1)
    5.     at Object.getTrimmedBounds (disk-button.min.js:1)
    6.     at Object._appendOpaque (disk-button.min.js:1)
    7.     at Object.getAllOpaques (disk-button.min.js:1)
    8.     at Object._getImageUnder (disk-button.min.js:1)
    9.     at Object._updateImage (disk-button.min.js:1)
    10.     at Object.imageUnderCursor (disk-button.min.js:1)
    11.     at Object.imgUnderCursor (disk-button.min.js:1)


    Что такое не пойму. Помогите пожалуйста. Думал из за того что я в head подгрузил, да нет, не влияет на это дело никак. Та же самая ошибка идет и с ними и без.

     
  2.  
  3. Лучший ответ:
    Сообщение #9 от 24.05.2018, автор Septdir
  4. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 566
    Симпатии:
    702
    Пол:
    Мужской
    Яваскрипты подключают после CSS. И пробуй пока без яваскрипт.
    Код (html):
    1. <jdoc:include type="head" />
    2. <!-- Подключаю Bootstrap 4 -->
    3. <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/bootstrap.min.css" >
     
  5. immortal727
    Offline

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

    Регистрация:
    08.10.2017
    Сообщения:
    83
    Симпатии:
    0
    Пол:
    Мужской
    Путем отключения и включения, так как Joomla 3.8 использует js старую, еще 1 версии
    Код (CODE):
    1. // Отключаем ненужные
    2. $headlink = $this->getHeadData();
    3. unset($headlink['scripts']['/media/system/js/caption.js']);
    4. unset($headlink['scripts']['/media/system/js/validate.js']);
    5. unset($headlink['scripts']['/media/jui/js/jquery.min.js']);
    6. unset($headlink['scripts']['/media/jui/js/jquery-migrate.min.js']);
    7. unset($headlink['scripts']['/media/jui/js/bootstrap.min.js']);
    8. unset($headlink['scripts']['/media/jui/js/jquery-noconflict.js']);
    9. $this->setHeadData($headlink);


    И подключения последней
    Код (CODE):
    1. <head>
    2.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    3.     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    4.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    5.     <jdoc:include type="head" />


    Ошибки стали вида
    Код (CODE):
    1. Uncaught TypeError: Cannot read property 'push' of undefined
    2.     at widgetkit-54e5a887.js:3
    3.     at widgetkit-54e5a887.js:3
    4. (anonymous) @ widgetkit-54e5a887.js:3
    5. (anonymous) @ widgetkit-54e5a887.js:3
    6. (index):55 Uncaught ReferenceError: JCaption is not defined
    7.     at (index):55
    8.     at dispatch (jquery-3.3.1.min.js:2)
    9.     at y.handle (jquery-3.3.1.min.js:2)


    ну с первой понятно. Я вообще поубираю сейчас widgetkit, он просто в сборке моей стоял и сейчас я его не применяю
    --- добавлено: 23.05.2018, первое сообщение размещено: 23.05.2018 ---
    После подключения обычных css снова вышла ошибка первого уровня
    Код (CODE):
    1. Uncaught ReferenceError: JCaption is not defined
    2.     at (index):52
    3.     at dispatch (jquery-3.3.1.min.js:2)
    4.     at y.handle (jquery-3.3.1.min.js:2)
    5. (anonymous) @ (index):52
    6. dispatch @ jquery-3.3.1.min.js:2
    7. y.handle @ jquery-3.3.1.min.js:2
    8. load (async)
    9. add @ jquery-3.3.1.min.js:2
    10. (anonymous) @ jquery-3.3.1.min.js:2
    11. each @ jquery-3.3.1.min.js:2
    12. each @ jquery-3.3.1.min.js:2
    13. De @ jquery-3.3.1.min.js:2
    14. on @ jquery-3.3.1.min.js:2
    15. (anonymous) @ widgetkit-54e5a887.js:3
    16. (anonymous) @ widgetkit-54e5a887.js:3
    17.  
    18. disk-button.min.js:1 Uncaught TypeError: Cannot read property 'defaultView' of null
    19.     at Object._getElementStyles (disk-button.min.js:1)
    20.     at Object._isTrimmingByOverflow (disk-button.min.js:1)
    21.     at Object.findTrimmingParent (disk-button.min.js:1)
    22.     at Object.getTrimmedBounds (disk-button.min.js:1)
    23.     at Object._appendOpaque (disk-button.min.js:1)
    24.     at Object.getAllOpaques (disk-button.min.js:1)
    25.     at Object._getImageUnder (disk-button.min.js:1)
    26.     at Object._updateImage (disk-button.min.js:1)
    27.     at Object.imageUnderCursor (disk-button.min.js:1)
    28.     at Object.imgUnderCursor (disk-button.min.js:1)

    --- добавлено: 23.05.2018 ---
    бутстраповские данные у меня в папке бутстрап, но это не суть важно. не пойму как же правильно сделать. Проще решил выслать сам index.php
     

    Вложения:

    • klass.zip
      Размер файла:
      41.8 КБ
      Просмотров:
      1
  6. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 566
    Симпатии:
    702
    Пол:
    Мужской
    Код (html):
    1. <?php
    2.  
    3. defined('_JEXEC') or die;
    4.  
    5. /** @var JDocumentHtml $this */
    6.  
    7. $app  = JFactory::getApplication();
    8. $user = JFactory::getUser();
    9.  
    10. // Output as HTML5
    11. $this->setHtml5(true);
    12.  
    13. // Getting params from template
    14. $params = $app->getTemplate(true)->params;
    15.  
    16. // Detecting Active Variables
    17. $option  = $app->input->getCmd('option', '');
    18. $view  = $app->input->getCmd('view', '');
    19. $layout  = $app->input->getCmd('layout', '');
    20. $task  = $app->input->getCmd('task', '');
    21. $itemid  = $app->input->getCmd('Itemid', '');
    22. $sitename = $app->get('sitename');
    23.  
    24. if ($task === 'edit' || $layout === 'form')
    25. {
    26.   $fullWidth = 1;
    27. }
    28. else
    29. {
    30.   $fullWidth = 0;
    31. }
    32.  
    33. $doc = JFactory::getDocument ();
    34.  
    35. // Logo file or site title param
    36. if ($this->params->get('logoFile'))
    37. {
    38.   $logo = '<img src="' . JUri::root() . $this->params->get('logoFile') . '" alt="' . $sitename . '" />';
    39. }
    40. elseif ($this->params->get('sitetitle'))
    41. {
    42.   $logo = '<span class="site-title" title="' . $sitename . '">' . htmlspecialchars($this->params->get('sitetitle'), ENT_COMPAT, 'UTF-8') . '</span>';
    43. }
    44. else
    45. {
    46.   $logo = '<span class="site-title" title="' . $sitename . '">' . $sitename . '</span>';
    47. }
    48. ?>
    49. <!DOCTYPE html>
    50. <html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
    51. <head>
    52.    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    53.   <jdoc:include type="head" />
    54.   <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/<?php echo $this->template ?>/bootstrap/css/bootstrap.min.css" />
    55.   <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/<?php echo $this->template ?>/css/main.css" />
    56.  
    57. </head>
    Не могу загрузить архив, даю нужный кусок кода без яваскрипт.
     
  7. immortal727
    Offline

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

    Регистрация:
    08.10.2017
    Сообщения:
    83
    Симпатии:
    0
    Пол:
    Мужской
    Ошибок нет. Но я не могу понять. Вы вообще отключили бутстраповские js, и получается работает только на бутстраповском css. Тогда зачем рекомендуют разработчики подключать их js?
     
  8. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 566
    Симпатии:
    702
    Пол:
    Мужской
    Не знаю как другие разработчики, но мне достаточно было и встроенных js в Джумла . Так что с яваскрипт не помогу.
     
  9. immortal727
    Offline

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

    Регистрация:
    08.10.2017
    Сообщения:
    83
    Симпатии:
    0
    Пол:
    Мужской
    Можно конечно и так работать. Но мне скажем понадобятся некоторые вещи из js бутстрапа, то как-тогда. Может кто-нибудь сможет понять ошибку при подключении бутстраповских js
    --- добавлено: 23.05.2018, первое сообщение размещено: 23.05.2018 ---
    Не понимаю что за мистика. Снова подключил js бутстраповские и всё нормально в консоли, никаких ошибок. Кэш почистил, ошибок нет. Тогда тему можно считать закрытой
     
  10. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 566
    Симпатии:
    702
    Пол:
    Мужской
    Ну так пробуй подключать.
    Код (html):
    1. <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/<?php echo $this->template ?>/css/main.css" />
    2.   <script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/js/bootstrap.min.js"></script>
    3. </head>
     
  11. Septdir
    Offline

    Septdir Пользователь => Cпециалист <=

    Регистрация:
    27.11.2017
    Сообщения:
    172
    Симпатии:
    16
    Пол:
    Мужской
    Лучший ответ
    Скрипты стоит хранить в папке js а стили в папке css. Подключать же стоить при помощи Jhtml он же htmlHepler если мы говорим о 3.8.x и более новых версиях.
    Подключение через Jhtml позволяет не только подключать скрпты и файлы только 1 раз(если проверки) но так же кешировать их.

    Код (PHP):
    1. use Joomla\CMS\HTML\HTMLHelper;
    2. HTMLHelper::_('stylesheet', 'main.css', array('version' => 'auto', 'relative' => true));
    3. HTMLHelper::_('script', 'bootstrap.min.js', array('version' => 'auto', 'relative' => true));


    Что же касается jQuery то подключая его так (то бишь снося старый и подключая снизу новый) вы нарушаете порядок скриптов. Что может привести не ошибка js. Я еще не очень придумал правильный метод подмены jQuery т.к по факту в большинстве случаев хватает и родного, который подключается при помощи
    Код (PHP):
    1. HTMLHelper::_('jquery.framework');

    что позволяет избегать конфликтов скриптов. Но пару раз пытался https://github.com/JoomlaZen/tpl_joomlazen/blob/master/helper.php#L58-L79

    Кстати от старого bs в head еще будут попадаться скрипты инициализации tooltip и т.п

    P.S BS не торт UIkit рулит
     
  12. immortal727
    Offline

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

    Регистрация:
    08.10.2017
    Сообщения:
    83
    Симпатии:
    0
    Пол:
    Мужской
    Превосходно. Огромное спасибо за такую полезную вещь.
    P.S. Я на ukit делал раньше (больше нравиться). Но к сожалению все сейчас на бутстрап переходят и многие вещи только на нем делают. На ukit я так и не смог найти такой вещи как container-fluid на бутстрапе, т.е. во весь экран чтоб было. У него нет процентных соотношений блоков, а лишь фиксированные. Если подскажите где можно взять такие css для ukit буду очень признателен. Самому писать нет времени
     
  13. Septdir
    Offline

    Septdir Пользователь => Cпециалист <=

    Регистрация:
    27.11.2017
    Сообщения:
    172
    Симпатии:
    16
    Пол:
    Мужской
    просто делаете без uk-container в uikit2 сетка просто пишеться прям в div без контейнеров. Либо сделайте свой класс типа
    Код (css):
    1. .uk-container.uk-container-full {
    2. max-width: 100%;
    3. }


    В uikit 3

    uk-container-expand https://getuikit.com/docs/container
    --- добавлено: 24.05.2018, первое сообщение размещено: 24.05.2018 ---
    Хотя я бы не рекомендовал делать сайт со 100% шириной на 4к(а сейчас такое даже в ноутбуках средней ценовой категории бывает) экранах это будет выглядеть просто ужастно
     
  14. immortal727
    Offline

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

    Регистрация:
    08.10.2017
    Сообщения:
    83
    Симпатии:
    0
    Пол:
    Мужской
    Да я сам не люблю резиновую верстку, но многие хотят, чтоб во всю ширину было
     
  15. Septdir
    Offline

    Septdir Пользователь => Cпециалист <=

    Регистрация:
    27.11.2017
    Сообщения:
    172
    Симпатии:
    16
    Пол:
    Мужской
    Я это лечу присылая скрин в 4к расширении где sidebar размером в пол руки =)
    --- добавлено: 24.05.2018 ---
    Ну да ладно . Использование uikit или bs личный выбор каждого. ИМХО кончено но хоть bs4 и получил более широкие возможности, но до uikit3 ему как до луны
     
  16. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 566
    Симпатии:
    702
    Пол:
    Мужской
    Для шаблона нет необходимости. Не выделяются ресурсы памяти на объект, не зависит от подключения и будущих изменений ядра Джумла .
     

Поделиться этой страницей

Загрузка...