Размещение блока последних новостей на главной странице Есть решение


Владимир, добрый день!

Вопрос по теме proStore. Скажите, как разместить на сайте блоки последних новостей различных блогов (например, в блоге есть несколько тем, новости, рецепты и т.д), нужно разместить по одному блоку по каждой теме, с различным количеством новостей в каждой.

9 ответов
  • Владимир Сергеев
    Разработчик
    Решение
    3 июля 2017 15:42

    Откройте приложение сайт - блоки.
    Создайте новый блок с именем prostore.latest_posts.

    В этот блок вставьте этот код и настройти ID блогов и кол-во постов под себя:

    <div class="h2 align-center" style="margin:20px auto;">Последние новости</div>
    
    <div class="prostore-latest-posts">
        
    
    {* Первая цифра ID блога, вторая – кол-во постов из блога *}
    {$latest_posts1 = $wa->blog->posts(1,4)}
    {if !empty($latest_posts1)}
    <div class="col-md-4 col-sm-4 single-blog" style="padding: 0 15px;">
    <div>
    {foreach $latest_posts1 as $post}
    <div class="single-post" style="margin:0 5px 20px;">
      <div class="h4">
        <a href="{$post.link}" style="text-decoration:none;">{$post.title}</a>
        {* @event prepare_posts_frontend.%plugin_id%.post_title *}
        {if !empty($post.plugins.post_title)}
          {foreach $post.plugins.post_title as $plugin => $output}{$output}{/foreach}
        {/if}
      </div>
      <div class="credentials" style="margin: 10px 0;">
        {if $post.user.posts_link}
          <a href="{$post.user.posts_link}" class="username bold" style="text-decoration:none;">{$post.user.name}</a>
        {else}
          <span class="username bold">{$post.user.name}</span>
        {/if}
        <span class="hint">{$post.datetime|wa_datetime:"humandate"}</span>
      </div>
      <p style="padding-bottom: 5px;">
        {$post.text|strip_tags|truncate:150}
      </p>
      <a href="{$post.link}" class="button small gray ">Читать далее</a>
    </div>
    {/foreach}
    </div>
    </div>
    {/if}
    
    
    
    {* Первая цифра ID блога, вторая – кол-во постов из блога *}
    {$latest_posts2 = $wa->blog->posts(3,4)}
    {if !empty($latest_posts2)}
    <div class="col-md-4 col-sm-4 single-blog">
    <div>
    {foreach $latest_posts2 as $post}
    <div class="single-post" style="margin:0 5px 20px;">
      <div class="h4">
        <a href="{$post.link}" style="text-decoration:none;">{$post.title}</a>
        {* @event prepare_posts_frontend.%plugin_id%.post_title *}
        {if !empty($post.plugins.post_title)}
          {foreach $post.plugins.post_title as $plugin => $output}{$output}{/foreach}
        {/if}
      </div>
      <div class="credentials" style="margin: 10px 0;">
        {if $post.user.posts_link}
          <a href="{$post.user.posts_link}" class="username bold" style="text-decoration:none;">{$post.user.name}</a>
        {else}
          <span class="username bold">{$post.user.name}</span>
        {/if}
        <span class="hint">{$post.datetime|wa_datetime:"humandate"}</span>
      </div>
      <p style="padding-bottom: 5px;">
        {$post.text|strip_tags|truncate:150}
      </p>
      <a href="{$post.link}" class="button small gray ">Читать далее</a>
    </div>
    {/foreach}
    </div>
    </div>
    {/if}
    
    
    
    {* Первая цифра ID блога, вторая – кол-во постов из блога *}
    {$latest_posts2 = $wa->blog->posts(4,4)}
    {if !empty($latest_posts2)}
    <div class="col-md-4 col-sm-4 single-blog">
    <div>
    {foreach $latest_posts2 as $post}
    <div class="single-post" style="margin:0 5px 20px;">
      <div class="h4">
        <a href="{$post.link}" style="text-decoration:none;">{$post.title}</a>
        {* @event prepare_posts_frontend.%plugin_id%.post_title *}
        {if !empty($post.plugins.post_title)}
          {foreach $post.plugins.post_title as $plugin => $output}{$output}{/foreach}
        {/if}
      </div>
      <div class="credentials" style="margin: 10px 0;">
        {if $post.user.posts_link}
          <a href="{$post.user.posts_link}" class="username bold" style="text-decoration:none;">{$post.user.name}</a>
        {else}
          <span class="username bold">{$post.user.name}</span>
        {/if}
        <span class="hint">{$post.datetime|wa_datetime:"humandate"}</span>
      </div>
      <p style="padding-bottom: 5px;">
        {$post.text|strip_tags|truncate:150}
      </p>
      <a href="{$post.link}" class="button small gray ">Читать далее</a>
    </div>
    {/foreach}
    </div>
    </div>
    {/if}
    
    
    
    
    </div>
    
    
    <script>
    	$(document).ready(function() {
    
    			var owl_lnews = $('.single-blog > div');
    			owl_lnews.owlCarousel({
    			    singleItem: true,
    			 	navigation: true,
    			    navigationText: ["<i class='fa fa-angle-left'></i>","<i class='fa fa-angle-right'></i>"],
    
    			});
    
    	});
    </script>

    Затем откройте файл home.html в теме для приложения магазин.
    Найдите строку: </div>{*/container*}
    И перед ней вставьте этот код:

    {if $wa->block("prostore.latest_posts")}
    	{$wa->block("prostore.latest_posts")}
    {/if}

    Результат:

    • Григорьев Алексей
      3 июля 2017 15:55

      Спасибо большое!!

      Скажите, а нельзя в доп.параметрах указать thumb="адрес изображения", как в теме "Формула успеха"?

      • Григорьев Алексей
        3 июля 2017 16:00

        Разобрался, скопировал данный код в тему. Сейчас только подверстаю немного)

        {if !empty($post.thumb)}

        <div class="post-info col-md-5">

        <a href="{$post.link}" class="post_thumb">

        {if !empty($theme_settings.blazy)}

        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{$post.thumb}" class="img100 fLazy accent-border" alt="{$post.title}"/>

        {else}

        <img src="{$post.thumb}" class="img100 accent-border" alt="{$post.title}"/>

        {/if}

        </a>

        </div>

        {/if}

        • Владимир Сергеев
          Разработчик
          Решение
          3 июля 2017 22:33

          Это у вас код от Формулы успеха.
          Если вы используете блог на этой теме, то код корректен.

          Если ваш блог работает на proStore, то нужен другой код.
          Перед строкой:

          <a href="{$post.link}" style="text-decoration:none;">{$post.title}</a>

          Добавьте код:

          {if !empty($post.g_thumb)}
              <a href="{$post.link}" class="thumblink">
                  {$post.g_thumb}
              </a>
          {/if}


          Сам же код доп. параметра g_thumb (в самой записи блога) должен выглядеть так:

          g_thumb=<img src="ссылка на изображение" class="post-thumb shadowed" style="max-width:100%;" alt="подпись к изображению"/>
          • Роман
            Решение
            4 июля 2017 13:30

            Что-то у меня этот способ не сработал. Вместо изображения вот что появилось

            • Владимир Сергеев
              Разработчик
              Решение
              4 июля 2017 13:39

              Печаль. Значит там идёт экранирование.
              Тогда нужно заменить код:

              {if !empty($post.g_thumb)}
                  <a href="{$post.link}" class="thumblink">
                      {$post.g_thumb}
                  </a>
              {/if}

              На этот:

              {if !empty($post.latest_thumb)}
                  <a href="{$post.link}" class="thumblink">
                      <img src="{$post.latest_thumb}" class="post-thumb shadowed" style="max-width:100%;" alt="" />
                  </a>
              {/if}

              А в записи поста добавить доп.параметр:

              latest_thumb=ссылка на картинку
    • Роман
      Решение
      4 июля 2017 12:50

      А если на сайте блог всего один, можно ли этот один блог сделать в виде слайдера новостей на всю ширину страницы?

  • Григорьев Алексей
    17 августа 2017 10:04

    Подскажите, а как отображать 4 последних новости в одном блоке?

    Добавил к классу "single-post" классы "col-md-3 col-sm-3", получилось следующее


  • Стас
    Решение
    17 апреля 2018 09:27

    так я уже делал, одна новость на всю ширину страницы, а нельзя сделать один блог и как у вас 4 новости в строчку?

    • Владимир Сергеев
      Разработчик
      Решение
      17 апреля 2018 11:37

      Как у меня – это где? 
      В демо-версии подобного функционала нет. 
      Там только последние отзывы. 

      Так или иначе. Я забыл вам сказать ещё поменять настройки скрипта. 
      Нужно строку: 

      singleItem: true,

      заменить на:

      items : 4,
      itemsDesktop : [1199,4],
      itemsDesktopSmall : [1024,4],
      itemsTablet: [768,2],
      itemsTabletSmall: false,
      itemsMobile : [479,1],

      Данный код отвечает за то, какое кол-во новостей одновременно показывать на экране без прокрутки слайдера. 
      Первая цифра – ширина экрана (и уже), вторая – кол-во элементов.

  • Владимир Сергеев
    Разработчик
    Решение
    17 апреля 2018 08:17

    Здравствуйте!
    Можно увидеть ссылку на страницу, где возникает ситуация?

  • Стас
    Решение
    17 апреля 2018 08:08

    Добрый день! Сделал все по инструкции, появляется только одна новость, всего в блоге 3 новости, если удаляю тег <script> и всё, что между ним в блоке prostore.latest_posts, то новости показывает друг под друго

    • Владимир Сергеев
      Разработчик
      Решение
      17 апреля 2018 09:08

      У вас там три новости в одной колонке в режиме слайдера.
      Поскольку инструкция предназначена для размещения новостей из 3 разных блогов в разных колонках, то здесь всё верно. 

      Найдите в коде последних новостей строки: 

      <div class="col-md-4 col-sm-4 single-blog" style="padding: 0 15px;">

      И замените на:

      <div class="single-blog" style="padding: 0 15px;">

  • Стас
    Решение
    17 апреля 2018 11:55

    еще вопрос, можно ли расположить блок с новостями под каталогом товаров и выводить только название новости и дату публикации?

  • Стас
    Решение
    17 апреля 2018 12:12

    спасибо

  • Арсений
    Решение
    15 ноября 2018 17:26

    Добрый день! Заинтересовался освещаемой тут темой и решил сделать блок с превью новостей и статей, только разместить его не перед подвалом, а под слайдером промокарточек:

    Новости стали некликабельными. Нельзя щелкнуть по кнопке "читать далее" и перейти к материалу. 


    Разместил отображение в home.html вот тут:

    	{* КОНЕЦ: СБОР ДАННЫХ *}
    
    	{if !empty($theme_settings.demo)}
    		{if isset($smarty.cookies.home_slider_position)}
    			{$home_slider_position = $smarty.cookies.home_slider_position}
    		{else}
    			{$home_slider_position = $theme_settings.home_slider_position}
    		{/if}
    	{else}
    		{$home_slider_position = $theme_settings.home_slider_position}
    	{/if}
    
    	{if !empty($theme_settings.home_page_slider_mode) && $home_slider_position == 'content'}
    		{include file="home.slider.html" promocards=$promocards slider_products=$slider_products inline}
    	{/if}
    	{if $wa->block("prostore.latest_posts")}
    	{$wa->block("prostore.latest_posts")}
    {/if}
    
    	<div class="container home-sets" id="start">
    
    		<!-- plugin hook: 'frontend_homepage' -->
    		{* @event frontend_homepage.%plugin_id% *}
    		{foreach $frontend_homepage as $_}{$_}{/foreach}
    
    		{*ПРОМО КАРТОЧКИ*}
    		{if isset($smarty.cookies.inline_promos_all_sidebar_enable)}
    	        {$inline_promos_all_sidebar_enable = $smarty.cookies.inline_promos_all_sidebar_enable}
    	    {else}

    Что я делаю не так? 

    И ещё, можно ли не множить сущности и создавать кучу блогов, а отображать 3 новости одного блога в этом блоке?

    • Владимир Сергеев
      Разработчик
      Решение
      15 ноября 2018 17:30

      Было бы проще, если бы вы ссылку на сайт с проблемой сразу оставляли.

      И ещё, можно ли не множить сущности и создавать кучу блогов, а отображать 3 новости одного блога в этом блоке?

      Там в блоке есть настройка из какого блога брать новости. Так что другие блоги не попадут. 

    • Владимир Сергеев
      Разработчик
      Решение
      15 ноября 2018 17:38

      Добавьте после

      {if $wa->block("prostore.latest_posts")}
      	{$wa->block("prostore.latest_posts")}
      {/if}

      Строку:

      <div class="clearfix"></div>

      Или в конец кода самого блока вставьте эту строку – лишним не будет. 

Добавить ответ
Чтобы добавить комментарий, зарегистрируйтесь или войдите
Мы получаем и обрабатываем персональные данные посетителей нашего сайта в соответствии с официальной политикой.
Если Вы продолжите использовать сайт, мы будем считать, что Вас это устраивает.
Подписывайтесь и получайте скидки!

Узнавайте первым о скидках и специальных предложениях!