Перейти к содержанию
Официальный форум поддержки Simpla

Краткое описание в модальном окне

Suprun4uk
 Поделиться Подписчики 0

Рекомендуемые сообщения

Suprun4uk

Suprun4uk

Опубликовано
Опубликовано

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

 

Вроде как получилось все за исключением того что описание в модальном окне не может найти свой товар а берет какой то посторонний !

 

Направьте на путь истинный пожалуйста чего сделать нужно ?

 

<!-- Описание товара -->
	<div class="annotation">
               {$product->annotation|truncate:150:'<a href="#info-annotation" data-toggle="modal">[...]</a>':true}
        </div>
<!-- Описание товара (The End) -->

<div class="modal fade" id="info-annotation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <h3>{$product->name|escape}</h3>
           $product->annotation}
</div>

 

Ссылка на сообщение
Поделиться на другие сайты
yr4ik

yr4ik

Опубликовано
Опубликовано 
id="info-annotation"

Как я полагаю, таких блоков с этим ид - куча.

ид - это идентификатор элемента. И даже по сути слова идентификатор - предусматривается что он должен быть на странице уникальным!

 

Поэтому и ошибки

 

Должно быть хотя бы так. Можете что то другое придумать...

..... id="info-annotation{$product->id}".....


...<a href="#info-annotation{$product->id}"......
Ссылка на сообщение
Поделиться на другие сайты
mishanya

mishanya

Опубликовано
Опубликовано

 

id="info-annotation"

Как я полагаю, таких блоков с этим ид - куча.

ид - это идентификатор элемента. И даже по сути слова идентификатор - предусматривается что он должен быть на странице уникальным!

 

Поэтому и ошибки

 

Должно быть хотя бы так. Можете что то другое придумать...

..... id="info-annotation{$product->id}".....


...<a href="#info-annotation{$product->id}"......

 

можно делать инлайн-модальное окно по скласу впринципе. или подгружать аяксом информацию из карточки.

Ссылка на сообщение
Поделиться на другие сайты
Suprun4uk

Suprun4uk

Опубликовано
  • Автор
Опубликовано

 

id="info-annotation"

Как я полагаю, таких блоков с этим ид - куча.

ид - это идентификатор элемента. И даже по сути слова идентификатор - предусматривается что он должен быть на странице уникальным!

 

Поэтому и ошибки

 

Должно быть хотя бы так. Можете что то другое придумать...

..... id="info-annotation{$product->id}".....


...<a href="#info-annotation{$product->id}"......

<a href="#info-annotation" эта функция модальное окно вызывает, оно открывается а внутри лежит {$product->annotation} вот оно и берет черти пойми какое описание совсем другого товара 

Ссылка на сообщение
Поделиться на другие сайты
mishanya

mishanya

Опубликовано
Опубликовано

<a href="#info-annotation" эта функция модальное окно вызывает, оно открывается а внутри лежит {$product->annotation} вот оно и берет черти пойми какое описание совсем другого товара 

 

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

Ссылка на сообщение
Поделиться на другие сайты
Suprun4uk

Suprun4uk

Опубликовано
  • Автор
Опубликовано

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

 

Извиняюсь что то у меня повылазило совсем, я вроде сделал как посоветовали.

 

  <div class="annotation">{$product->annotation|truncate:150:'<a href="#info-annotation{$product->id}" data-toggle="modal">[...]</a>':true}</div>

 


<div class="modal fade"  id="info-annotation{$product->id}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  
{$product->annotation}


</div>

в результати при клике переходит на страницу http://landing.ru/#info-annotation{$product->id} и не открывает окно (

Ссылка на сообщение
Поделиться на другие сайты
mishanya

mishanya

Опубликовано
Опубликовано

Извиняюсь что то у меня повылазило совсем, я вроде сделал как посоветовали.

 

  <div class="annotation">{$product->annotation|truncate:150:'<a href="#info-annotation{$product->id}" data-toggle="modal">[...]</a>':true}</div>

 

в результати при клике переходит на страницу http://landing.ru/#info-annotation{$product->id} и не открывает окно (

 

покажите код страници, блок 

<div class="modal fade"  id="info-annotation{$product->id}"

также должен быть в цикле по товарам

Ссылка на сообщение
Поделиться на другие сайты
Suprun4uk

Suprun4uk

Опубликовано
  • Автор
Опубликовано (изменено) 




{* Список товаров *}



{* Канонический адрес страницы *}

{if $category && $brand}

{$canonical="/catalog/{$category->url}/{$brand->url}" scope=parent}

{elseif $category}

{$canonical="/catalog/{$category->url}" scope=parent}

{elseif $brand}

{$canonical="/brands/{$brand->url}" scope=parent}

{elseif $keyword}

{$canonical="/products?keyword={$keyword|escape}" scope=parent}

{else}

{$canonical="/products" scope=parent}

{/if}



<!-- Хлебные крошки /-->

<ul class="breadcrumb">

	<li><a href="/">Главная</a><span class="divider"></li>

	{if $category}

	{foreach from=$category->path item=cat}

	<li><a href="catalog/{$cat->url}">{$cat->name|escape}</a><span class="divider"></li>

	{/foreach}

	{if $brand}

	<li><a href="catalog/{$cat->url}/{$brand->url}">{$brand->name|escape}</a><span class="divider"></li>

	{/if}

	{elseif $brand}

	<li class="active"><a href="brands/{$brand->url}">{$brand->name|escape}</a></li>

	{elseif $keyword}

	→ Поиск

	{/if}

</ul>

<!-- Хлебные крошки #End /-->



{* Заголовок страницы *}

{if $keyword}

<h1>Поиск {$keyword|escape}</h1>

{elseif $page}

<h1>{$page->name|escape}</h1>

{else}

<div class="products-text">

	<h1 class="inline">{$category->name|escape} {$brand->name|escape} {$keyword|escape}</h1>

	<h3>

		{if $current_page_num==1}

		{* Описание категории *}

		{$category->description}

		{/if}

	</h3>

</div>



{/if}





{* Описание страницы (если задана) *}

{$page->body}



<!--Каталог товаров-->

{if $products}



{include file='pagination.tpl'}



<!-- Список товаров-->

<div class="products">



	{foreach $products as $product}

	<!-- Товар-->

	<li class="product">



          <!-- Фото товара -->

		{if $product->image}

		<div class="image">

			<a id="single_1" href="{$product->image->filename|resize:600:600}"  title="{$product->name|escape}"   alt="{$product->name|escape}"/>

			<img src="{$product->image->filename|resize:200:200}" alt="" />

			</a>

		</div>

		{/if}

		<!-- Фото товара (The End) -->



		<div class="product_info">

		<!-- Название товара -->

		<h3>{$product->name|escape}</h3>

		<!-- Название товара (The End) -->



    <div class="annotation">{$product->annotation|truncate:150:'<a href="#info-annotation{$product->id}" data-toggle="modal">[...]</a>':true}</div>







		<!-- Описание товара (The End) -->



		{if $product->variants|count > 0}

		<!-- Выбор варианта товара -->

		<form class="variants" action="/cart">



			{foreach $product->variants as $v}



					<input id="variants_{$v->id}" name="variant" value="{$v->id}" type="radio" class="variant_radiobutton" {if $v@first}checked{/if} {if $product->variants|count<2}style="display:none;"{/if}/>



					{if $v->name}<label class="variant_name" for="variants_{$v->id}">{$v->name}</label>{/if}



					{if $v->compare_price > 0}<span class="compare_price">{$v->compare_price|convert}</span>{/if}

					<span class="price">{$v->price|convert} <span class="currency">{$currency->sign|escape}</span></span>



			{/foreach}



			<input type="submit" class="button variants-btn" value="Заказать" data-result-text="добавлено"/>

		</form>

		<!-- Выбор варианта товара (The End) -->

		{else}

			Нет в наличии

		{/if}



		</div>



	</li>

	<!-- Товар (The End)-->

	{/foreach}



</div>



{include file='pagination.tpl'}

<!-- Список товаров (The End)-->



{else}

Товары не найдены

{/if}

<!--Каталог товаров (The End)-->



<!-- Modal -->

<div class="modal fade"  id="info-annotation{$product->id}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

  <div class="modal-dialog">

    <div class="modal-content">

    <div class="closed-modal">

          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

    </div>

      <div class="modal-body">



{$product->annotation}







</div>







      </div>

    </div>

  </div>

</div>
Изменено пользователем Suprun4uk
Ссылка на сообщение
Поделиться на другие сайты
mishanya

mishanya

Опубликовано
Опубликовано

 


{* Список товаров *}

{

 

то что я и говорил, этот блок:

 

<!-- Modal -->
<div class="modal fade"  id="info-annotation{$product->id}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
    <div class="closed-modal">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    </div>
      <div class="modal-body">

{$product->annotation}
</div>

должен быть внутри цикла. например поставьте после этого:

 

<div class="annotation">{$product->annotation|truncate:150:'<a href="#info-annotation{$product->id}" data-toggle="modal">[...]</a>':true}</div>

и все будет подгружать те описания которые нужно

Ссылка на сообщение
Поделиться на другие сайты
mishanya

mishanya

Опубликовано
Опубликовано

К сожалению не вышло так же переходит на другую страницу /#info-annotation{$product->id}

 

покажите код который вышел в результате

Ссылка на сообщение
Поделиться на другие сайты
Suprun4uk

Suprun4uk

Опубликовано
  • Автор
Опубликовано (изменено)

покажите код который вышел в результате

<style type="text/css">
	.art-content,
	.art-content-3,
	.art-content-4,
	.art-content-5,
	.art-content-6{
		display: none;
	}
</style>



{* Список товаров *}

{* Канонический адрес страницы *}
{if $category && $brand}
{$canonical="/catalog/{$category->url}/{$brand->url}" scope=parent}
{elseif $category}
{$canonical="/catalog/{$category->url}" scope=parent}
{elseif $brand}
{$canonical="/brands/{$brand->url}" scope=parent}
{elseif $keyword}
{$canonical="/products?keyword={$keyword|escape}" scope=parent}
{else}
{$canonical="/products" scope=parent}
{/if}

<!-- Хлебные крошки /-->
<ul class="breadcrumb">
	<li><a href="/">Главная</a><span class="divider"></li>
	{if $category}
	{foreach from=$category->path item=cat}
	<li><a href="catalog/{$cat->url}">{$cat->name|escape}</a><span class="divider"></li>
	{/foreach}
	{if $brand}
	<li><a href="catalog/{$cat->url}/{$brand->url}">{$brand->name|escape}</a><span class="divider"></li>
	{/if}
	{elseif $brand}
	<li class="active"><a href="brands/{$brand->url}">{$brand->name|escape}</a></li>
	{elseif $keyword}
	→ Поиск
	{/if}
</ul>
<!-- Хлебные крошки #End /-->

{* Заголовок страницы *}
{if $keyword}
<h1>Поиск {$keyword|escape}</h1>
{elseif $page}
<h1>{$page->name|escape}</h1>
{else}
<div class="products-text">
	<h1 class="inline">{$category->name|escape} {$brand->name|escape} {$keyword|escape}</h1>
	<h3>
		{if $current_page_num==1}
		{* Описание категории *}
		{$category->description}
		{/if}
	</h3>
</div>

{/if}


{* Описание страницы (если задана) *}
{$page->body}

<!--Каталог товаров-->
{if $products}

{include file='pagination.tpl'}

<!-- Список товаров-->
<div class="products">

	{foreach $products as $product}
	<!-- Товар-->
	<li class="product">

          <!-- Фото товара -->
		{if $product->image}
		<div class="image">
			<a id="single_1" href="{$product->image->filename|resize:600:600}"  title="{$product->name|escape}"   alt="{$product->name|escape}"/>
			<img src="{$product->image->filename|resize:200:200}" alt="" />
			</a>
		</div>
		{/if}
		<!-- Фото товара (The End) -->

		<div class="product_info">
		<!-- Название товара -->
		<h3>{$product->name|escape}</h3>
		<!-- Название товара (The End) -->

		<!-- Описание товара -->
		    <div class="annotation">{$product->annotation|truncate:150:'<a href="#info-annotation{$product->id}" data-toggle="modal" >[...]</a>':true}

<div class="modal fade"  id="info-annotation{$product->id}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="closed-modal">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        </div>
		    {$product->annotation}
	</div>
   </div>
</div>

		<!-- Описание товара (The End) -->

		{if $product->variants|count > 0}
		<!-- Выбор варианта товара -->
		<form class="variants" action="/cart">

			{foreach $product->variants as $v}

					<input id="variants_{$v->id}" name="variant" value="{$v->id}" type="radio" class="variant_radiobutton" {if $v@first}checked{/if} {if $product->variants|count<2}style="display:none;"{/if}/>

					{if $v->name}<label class="variant_name" for="variants_{$v->id}">{$v->name}</label>{/if}

					{if $v->compare_price > 0}<span class="compare_price">{$v->compare_price|convert}</span>{/if}
					<span class="price">{$v->price|convert} <span class="currency">{$currency->sign|escape}</span></span>

			{/foreach}

			<input type="submit" class="button variants-btn" value="Заказать" data-result-text="добавлено"/>
		</form>
		<!-- Выбор варианта товара (The End) -->
		{else}
			Нет в наличии
		{/if}

		</div>

	</li>
	<!-- Товар (The End)-->
	{/foreach}

</div>

{include file='pagination.tpl'}
<!-- Список товаров (The End)-->

{else}
Товары не найдены
{/if}
<!--Каталог товаров (The End)-->
Изменено пользователем Suprun4uk
Ссылка на сообщение
Поделиться на другие сайты
yr4ik

yr4ik

Опубликовано
Опубликовано

Завтыкал что там truncate...

<div class="annotation">{$product->annotation|truncate:150:'<a href="#info-annotation'|cat:$product->id|cat:'" data-toggle="modal">[...]</a>'}</div>
Ссылка на сообщение
Поделиться на другие сайты
mishanya

mishanya

Опубликовано
Опубликовано

К сожалению не вышло так же переходит на другую страницу /#info-annotation{$product->id}

 

так нельзя:

<div class="annotation">{$product->annotation|truncate:150:'<a href="#info-annotation{$product->id}" data-toggle="modal" >[...]</a>':true}

попробуйте так

<div class="annotation">{$product->annotation|truncate:150:'':true}<a href="#info-annotation{$product->id}" data-toggle="modal" >[...]</a>
Ссылка на сообщение
Поделиться на другие сайты
Suprun4uk

Suprun4uk

Опубликовано
  • Автор
Опубликовано

 

Завтыкал что там truncate...

<div class="annotation">{$product->annotation|truncate:150:'<a href="#info-annotation'|cat:$product->id|cat:'" data-toggle="modal">[...]</a>'}</div>

 

Заработала, но выскочил косяк у товаров которых описание менее 150 символов появляться у всех  data-toggle="modal">[...]

Ссылка на сообщение
Поделиться на другие сайты
Suprun4uk

Suprun4uk

Опубликовано
  • Автор
Опубликовано

 

так нельзя:

<div class="annotation">{$product->annotation|truncate:150:'<a href="#info-annotation{$product->id}" data-toggle="modal" >[...]</a>':true}

попробуйте так

<div class="annotation">{$product->annotation|truncate:150:'':true}<a href="#info-annotation{$product->id}" data-toggle="modal" >[...]</a>

Работает, но у всех товаров появился значок [...] даже у кого описание менее 150 символов

Ссылка на сообщение
Поделиться на другие сайты
mishanya

mishanya

Опубликовано
Опубликовано

Работает, но у всех товаров появился значок [...] даже у кого описание менее 150 символов

 

<div class="annotation">
{if $product->annotation|mb_strlen>150}
	{$product->annotation|truncate:150:'':true}<a href="#info-annotation{$product->id}" data-toggle="modal" >[...]</a>
{else}
	{$product->annotation}
{/if}
</div>
Ссылка на сообщение
Поделиться на другие сайты
yr4ik

yr4ik

Опубликовано
Опубликовано

Ну тогда кавычки поменять и можно так:

{$product->annotation|truncate:150:"<a href='#info-annotation{$product->id}' data-toggle='modal'>[...]</a>"}
Ссылка на сообщение
Поделиться на другие сайты
Suprun4uk

Suprun4uk

Опубликовано
  • Автор
Опубликовано 
<div class="annotation">
{if $product->annotation|mb_strlen>150}
	{$product->annotation|truncate:150:'':true}<a href="#info-annotation{$product->id}" data-toggle="modal" >[...]</a>
{else}
	{$product->annotation}
{/if}
</div>

1 решение работает идеально.

 

{$product->annotation|truncate:150:"<a href='#info-annotation{$product->id}' data-toggle='modal'>[...]</a>"}

2 решение работает так же хорошо за исключением делит 150 сим. на 2.

 

Огромное спасибо, мир не без добрых людей, очень помогли, при много благодарен ++++

Ссылка на сообщение
Поделиться на другие сайты
yr4ik

yr4ik

Опубликовано
Опубликовано (изменено)

 

{$product->annotation|truncate:150:"<a href='#info-annotation{$product->id}' data-toggle='modal'>[...]</a>"}
2 решение работает так же хорошо за исключением делит 150 сим. на 2.

 

Огромное спасибо, мир не без добрых людей, очень помогли, при много благодарен ++++

Это из за того что длинна html кода ссылки [...] так же учитывается в этих 150и символах прописанных в truncate.

Так что можете просто банально накинуть к 150 длинну ссылки и все будет ок.

 

Пожалуйста ;)

Изменено пользователем yr4ik
Ссылка на сообщение
Поделиться на другие сайты
Kors

Kors

Опубликовано
Опубликовано

Вообще-то решение на основе $product->annotation|truncate:150 - довольно рискованное. Если в описании есть теги, то обрезка может произойти по живому тегу, в результате верстка может съехать совершенно непредсказуемым образом...

Ссылка на сообщение
Поделиться на другие сайты
Suprun4uk

Suprun4uk

Опубликовано
  • Автор
Опубликовано

Вообще-то решение на основе $product->annotation|truncate:150 - довольно рискованное. Если в описании есть теги, то обрезка может произойти по живому тегу, в результате верстка может съехать совершенно непредсказуемым образом...

 

а если {$product->body|strip_tags|truncate:100} ? таким образом ? 

Ссылка на сообщение
Поделиться на другие сайты
Suprun4uk

Suprun4uk

Опубликовано
  • Автор
Опубликовано

получилось исправить, пропадали линии так как были прописаны в стилях для <p></p> прописал для отдельного блока все заработала логично.

Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
 Поделиться
Подписчики 0
Перейти к списку тем
×
×
  • Создать...