3

Создал тип инфоблока - Слайдер на битриксе и сам инфоблок - слайдер, который включает в себя фоновое изображение слайда (картинка анонса инфоблока слайдер), имя слайда, фотографию автора слайда (строковому свойству PictureUrl анонса задал путь к фотографии автора слайда), имя автора (задал строковому свойству Author анонса), дату создания слайда (задал свойству типа дата DateTime анонса ). (действовал согласно Инструкции) Должно получиться как на скриншоте

введите сюда описание изображения

Шаблон взят с сайта w3layouts.

Есть код из этого шаблона

<!-- main-slider -->

<section class="w3l-main-slider position-relative" id="home">
  <div class="companies20-content">
    <div class="owl-one owl-carousel owl-theme">
      <div class="item">
        <li>
          <div class="slider-info banner-view bg bg2">
            <div class="banner-info">
              <div class="container">
                <div class="banner-info-bg text-center">
                  <a href="#blog-single.html" class="blog_post_title">How to Make Cappuccino without a Machine</a>
                  <ul class="author-date mb-4 d-flex align-items-center mt-4 justify-content-center">
                    <li class="circle avatar"><img src="<?=SITE_TEMPLATE_PATH ?>/assets/images/author1.jpg" alt=""></li>
                    <li>by <a href="#author.html">John Michele</a></li>
                    <li><span class="fa fa-clock-o" aria-hidden="true"></span> Mar 16, 2020</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </li>
      </div>
      <div class="item">
        <li>
          <div class="slider-info  banner-view banner-top1 bg bg2">
            <div class="banner-info">
              <div class="container">
                <div class="banner-info-bg text-center">
                  <a href="#blog-single.html" class="blog_post_title">Create a Stunning Website!</a>
                  <ul class="author-date mb-4 d-flex align-items-center mt-4 justify-content-center">
                    <li class="circle avatar"><img src="<?=SITE_TEMPLATE_PATH ?>/assets/images/author2.jpg" alt=""></li>
                    <li>by <a href="#author.html">Daniel Roberto</a></li>
                    <li><span class="fa fa-clock-o" aria-hidden="true"></span> Jan 22, 2020</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </li>
      </div>
      <div class="item">
        <li>
          <div class="slider-info banner-view banner-top2 bg bg2">
            <div class="banner-info">
              <div class="container">
                <div class="banner-info-bg text-center">
                  <a href="#blog-single.html" class="blog_post_title">See yourself in a New Light.</a>
                  <ul class="author-date mb-4 d-flex align-items-center mt-4 justify-content-center">
                    <li class="circle avatar"><img src="<?=SITE_TEMPLATE_PATH ?>/assets/images/author3.jpg" alt=""></li>
                    <li>by <a href="#author.html">Emma Stone</a></li>
                    <li><span class="fa fa-clock-o" aria-hidden="true"></span> Aug 14, 2020</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </li>
      </div>
    </div>
  </div>

</section>

Подскажите как этот код можно посадить на bitrix?

Если действовать согласно Инструкции, то код шаблона компонента Список новостей надо переделать из файла C:\OpenServer\domains\bxsite3.ru\local\templates\blog\components\bitrix\news.list\myowlslider\template.php

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
?>
  <div class="news-list">
    <?if($arParams["DISPLAY_TOP_PAGER"]):?>
      <?=$arResult["NAV_STRING"]?><br />
        <?endif;?>
          <?foreach($arResult["ITEMS"] as $arItem):?>
            <?
    $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
    $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
    ?>
              <?echo '<pre>', var_dump($arItem) ,'</pre>';?>
                <div class="news-item" id="<?=$this->GetEditAreaId($arItem['ID']);?>">
                  <?if($arParams["DISPLAY_PICTURE"]!="N" && is_array($arItem["PREVIEW_PICTURE"])):?>
                    <?if(!$arParams["HIDE_LINK_WHEN_NO_DETAIL"] || ($arItem["DETAIL_TEXT"] && $arResult["USER_HAVE_ACCESS"])):?>
                      <a href="<?=$arItem[" DETAIL_PAGE_URL "]?>"><img
                        class="preview_picture"
                        border="0"
                        src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>"
                        width="<?=$arItem["PREVIEW_PICTURE"]["WIDTH"]?>"
                        height="<?=$arItem["PREVIEW_PICTURE"]["HEIGHT"]?>"
                        alt="<?=$arItem["PREVIEW_PICTURE"]["ALT"]?>"
                        title="<?=$arItem["PREVIEW_PICTURE"]["TITLE"]?>"
                        style="float:left"
                        /></a>
                      <?else:?>
                        <img class="preview_picture" border="0" src="<?=$arItem[" PREVIEW_PICTURE "]["SRC "]?>" width="<?=$arItem[" PREVIEW_PICTURE "]["WIDTH "]?>" height="<?=$arItem[" PREVIEW_PICTURE "]["HEIGHT "]?>" alt="<?=$arItem[" PREVIEW_PICTURE "]["ALT "]?>" title="<?=$arItem["
                          PREVIEW_PICTURE "]["TITLE "]?>" style="float:left" />
                        <?endif;?>
                          <?endif?>
                            <?if($arParams["DISPLAY_DATE"]!="N" && $arItem["DISPLAY_ACTIVE_FROM"]):?>
                              <span class="news-date-time"><?echo $arItem["DISPLAY_ACTIVE_FROM"]?></span>
                              <?endif?>
                                <?if($arParams["DISPLAY_NAME"]!="N" && $arItem["NAME"]):?>
                                  <?if(!$arParams["HIDE_LINK_WHEN_NO_DETAIL"] || ($arItem["DETAIL_TEXT"] && $arResult["USER_HAVE_ACCESS"])):?>
                                    <a href="<?echo $arItem[" DETAIL_PAGE_URL "]?>"><b><?echo $arItem["NAME"]?></b></a><br />
                                    <?else:?>
                                      <b><?echo $arItem["NAME"]?></b><br />
                                      <?endif;?>
                                        <?endif;?>
                                          <?if($arParams["DISPLAY_PREVIEW_TEXT"]!="N" && $arItem["PREVIEW_TEXT"]):?>
                                            <?echo $arItem["PREVIEW_TEXT"];?>
                                              <?endif;?>
                                                <?if($arParams["DISPLAY_PICTURE"]!="N" && is_array($arItem["PREVIEW_PICTURE"])):?>
                                                  <div style="clear:both"></div>
                                                  <?endif?>
                                                    <?foreach($arItem["FIELDS"] as $code=>$value):?>
                                                      <small>
            <?=GetMessage("IBLOCK_FIELD_".$code)?>:&nbsp;<?=$value;?>
            </small><br />
                                                      <?endforeach;?>
                                                        <?foreach($arItem["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?>
                                                          <small>
            <?=$arProperty["NAME"]?>:&nbsp;
            <?if(is_array($arProperty["DISPLAY_VALUE"])):?>
                <?=implode("&nbsp;/&nbsp;", $arProperty["DISPLAY_VALUE"]);?>
            <?else:?>
                <?=$arProperty["DISPLAY_VALUE"];?>
            <?endif?>
            </small><br />
                                                          <?endforeach;?>
                </div>
                <?endforeach;?>
                  <?if($arParams["DISPLAY_BOTTOM_PAGER"]):?>
                    <br />
                    <?=$arResult["NAV_STRING"]?>
                      <?endif;?>
  </div>

в файл

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
  <div class="owl-carousel">
    <?foreach($arResult["ITEMS"] as $arItem):?>
      <?
     $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
     $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" =>GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
    ?>
        <div id="<?=$this->GetEditAreaId($arItem['ID']);?>">
          <img src="<?=$arItem[" PREVIEW_PICTURE "]["SRC "]?>" />
        </div>
        <?endforeach;?>
  </div>
  <script>
    $(document).ready(function() {
      $(".owl-carousel").owlCarousel({
        items: 1,
      })
    });
  </script>

  1. Вопрос состоит в том как именовать классы div-ов в конечном файле template.php (а именно необходимо сопоставить эти классы с классами исходного шаблона сайта). А именно как соотнести класс news-list с классом owl-one owl-carousel owl-theme и т.п.? (эти классы описаны в файле C:\OpenServer\domains\bxsite3.ru\local\templates\blog\assets\css\style-starter.css)
  2. Как получить значения свойств Author, DateTime и PictureUrl инфоблока?
  3. Каким образом можно повесить класс banner-top№ на все слайды, кроме первого?

1 ответ 1

2
  1. Не надо соотносить классы div-ов. Надо писать новые. У вас в шаблоне слайдера итемы обёрнуты в три тега, значит и в шаблоне компонента оберните цикл по итемам в эти три тега.
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
  <section class="w3l-main-slider position-relative" id="home">
    <div class="companies20-content">
      <div class="owl-one owl-carousel owl-theme">
        <?foreach($arResult["ITEMS"] as $arItem):?>
          <?
            $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
            $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" =>GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
          ?>
          <div id="<?=$this->GetEditAreaId($arItem['ID']);?>">
            <img src="<?=$arItem[" PREVIEW_PICTURE "]["SRC "]?>" />
          </div>
        <?endforeach;?>
      </div>
    </div>
  </section>
<?endif;?>

То же касается и итемов внутри цикла.

  1. Не нужно помещать скрипт в шаблон. Поместите его в файл script.js в папке шаблона.
    $(document).ready(function() {
      $(".owl-carousel").owlCarousel({
        items: 1,
      })
    });
  1. Если речь о пользовательских значениях, то их можно получить из $arItem['PROPERTIES]['AUTHOR']['VALUE']. Чтобы пользовательские значения подцепились, необходимо указать в параметрах вызова компонента хотя бы одно из них.
1

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.