Битрикс листаем новости вперед-назад

0 3.2K

При разработке функционала новостного блока, частенько возникает желание, после прочтения детальной новости, перейти на следующую или предыдущую новость. К сожалению стандартными компонентами такое реализовать не получиться. И так, начнем. Нам необходим будет компонент с детальной новостью, без разницы какой, комплексный или обычный. Сохраняем шаблон компонента и начинаем его править.

В начале докуента вставьте следующий код

<div class="detail-service">
  <div class="detail-service__navigation">
    <?
    $arSelect = Array("ID","NAME", "DETAIL_PAGE_URL");
    $arFilter = Array("IBLOCK_ID"=>$arResult["IBLOCK_ID"], "ACTIVE_DATE"=>"Y", "ACTIVE"=>"Y", "SECTION_ID"=>$arResult['IBLOCK_SECTION_ID']);
    $res = CIBlockElement::GetList(Array(SORT=>asc), $arFilter, false, Array("nPageSize"=>20,"nElementID"=>$arResult['ID']), $arSelect);
    while($ob = $res->GetNext()) {
      $links[]=$ob;
    }
    $linkCount = count($links);
    foreach($links as $link){
      if($link['ID'] === $arResult['ID']) {
        $linkPos = $link["RANK"] - 1;
        if($link["RANK"] == $linkCount){
          echo '
          <a href="'.$links[$linkPos - 1]["DETAIL_PAGE_URL"].'#detail-service" class="detail-service__arrow">
          <svg class="detail-service__icon detail-service__icon--left" aria-hidden="true"><use xlink:href="#arrow"/></svg>
          <span class="detail-service__link-desc">'.$links[$linkPos - 1]["NAME"].'</span>
          </a>
          <a href="'.$links[0]["DETAIL_PAGE_URL"].'#detail-service" class="detail-service__arrow">
          <span class="detail-service__link-desc">'.$links[0]["NAME"].'</span>
          <svg class="detail-service__icon detail-service__icon--right" aria-hidden="true"><use xlink:href="#arrow"/></svg>
          </a>';
        }
        elseif($linkPos == 0) {
          echo '
          <a href="'.$links[$linkCount - 1]["DETAIL_PAGE_URL"].'#detail-service" class="detail-service__arrow">
          <svg class="detail-service__icon detail-service__icon--left" aria-hidden="true"><use xlink:href="#arrow"/></svg>
          <span class="detail-service__link-desc">'.$links[$linkCount - 1]["NAME"].'</span>
          </a>
          <a href="'.$links[$linkPos + 1]["DETAIL_PAGE_URL"].'#detail-service" class="detail-service__arrow">
          <span class="detail-service__link-desc">'.$links[$linkPos + 1]["NAME"].'</span>
          <svg class="detail-service__icon detail-service__icon--right" aria-hidden="true"><use xlink:href="#arrow"/></svg>
          </a>';
        }
        else {
          echo '
          <a href="'.$links[$linkPos - 1]["DETAIL_PAGE_URL"].'#detail-service" class="detail-service__arrow">
          <svg class="detail-service__icon detail-service__icon--left" aria-hidden="true"><use xlink:href="#arrow"/></svg>
          <span class="detail-service__link-desc">'.$links[$linkPos - 1]["NAME"].'</span>
          </a>
          <a href="'.$links[$linkPos + 1]["DETAIL_PAGE_URL"].'#detail-service" class="detail-service__arrow">
          <span class="detail-service__link-desc">'.$links[$linkPos + 1]["NAME"].'</span>
          <svg class="detail-service__icon detail-service__icon--right" aria-hidden="true"><use xlink:href="#arrow"/></svg>
          </a>';
        }
      }
    }
    ?>
  </div>
</div>

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

Что касается стилей то тут не все так однозначно, я использовал svg стрелки и пытался стилизовать в виде слайдера.

.detail-service {
  position: relative;
}
.detail-service__navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.detail-service__arrow {
  height: 3rem;
  text-decoration: none;
}
.detail-service__arrow:hover {
  text-decoration: none;
}
.detail-service__icon {
  display: inline-block;
  width: 3.1rem;
  height: 3.1rem;
  vertical-align: middle;
  fill: #fff;
  padding: 5px;
  background: #000;
  -webkit-transition: background .4s;
  transition: background .4s;
}
.detail-service__arrow:hover .detail-service__icon {
  background: #a63e6c;
}
.detail-service__icon--left {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.detail-service__link-desc {
  height: 100%;
  vertical-align: middle;
  background: #fff;
  line-height: 3.1rem;
  padding: 0 1rem;
  display: inline-block;
  -webkit-transform: translate(10px, 0);
  transform: translate(10px, 0);
  opacity: 0;
  -webkit-transition: opacity .4s, -webkit-transform .4s;
  transition: opacity .4s, -webkit-transform .4s;
  transition: transform .4s, opacity .4s;
  transition: transform .4s, opacity .4s, -webkit-transform .4s;
}
.detail-service__arrow:hover .detail-service__link-desc {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: 1;
}

Код самой svg картинки.

<path d="M10 467.6h729c-32.5-48.6-48.7-81-56.8-129.6 81 81 186.3 121.5 307.8 162-121.5 40.5-226.8 81-307.8 162 8-48.6 16.2-81 56.7-137.7H10v-56.7z"></path>

На этом все, в результате должно получиться что то вроде этого.

Комментарии