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

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

Подскажите как вывести товар как тут http://demo.smartaddons.com/#sj-vm-extra-slider
и так и сяк пытаюсь не получается.

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

За основу взял - слайдер http://ruseller.com/lessons/les1050/final.html

http://s3.hostingkartinok.com/uploads/images/2013/03/9e45437362f1e07c58f53201841c4954.png
http://s3.hostingkartinok.com/uploads/images/2013/03/899b004a13ed6fd103fc6d6ccba23173.png

index.tpl перед head >

<style type="text/css">
/** 
* Slideshow style rules.
*/
#slideshow {
margin:0 auto;

}
#slideshow #slidesContainer {
 margin:0 auto;
 
 overflow:auto; /* allow scrollbar */
 position:relative;
}
#slideshow #slidesContainer .slide {
 margin:0 auto;
 
}

/** 
* Slideshow controls style rules.
*/


#slideshow span.control {
display:block;
width:39px;
height:39px;
text-indent:-9999px;
border:0;
}
span#rightControl {
background:url(design/{$settings->theme|escape}/image/next.png) right 0 no-repeat;
cursor: pointer;
position: absolute;
right: -20px;
top: 548px;
}
span#leftControl {
background:url(design/{$settings->theme|escape}/image/prev.png) right bottom no-repeat;
cursor: pointer;
position: absolute;
left: -50px;
top: 548px;
}
span#leftControl:hover, span#rightControl:hover {
background-position:0 0;
cursor: pointer;

}



</style>

<script type="text/javascript">
$(document).ready(function(){
 var currentPosition = 0;
 var slideWidth = 932;
 var slides = $('.slide');
 var numberOfSlides = slides.length;

 // Remove scrollbar in JS
 $('#slidesContainer').css('overflow', 'hidden');

 // Wrap all .slides with #slideInner div
 slides
   .wrapAll('<div id="slideInner"></div>')
   // Float left to display horizontally, readjust .slides width
.css({
     'float' : 'left',
     'width' : slideWidth
   });

 // Set #slideInner width equal to total width of all slides
 $('#slideInner').css('width', slideWidth * numberOfSlides);

 // Insert controls in the DOM
 $('#slideshow')
   .prepend('<span class="control" id="leftControl">Назад</span><span class="control" id="rightControl">Вперед</span>');

 // Hide left arrow control on first load
 manageControls(currentPosition);

 // Create event listeners for .controls clicks
 $('.control')
   .bind('click', function(){
   // Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
   
// Hide / show controls
   manageControls(currentPosition);
   // Move slideInner using margin-left
   $('#slideInner').animate({
     'marginLeft' : slideWidth*(-currentPosition)
   });
 });

 // manageControls: Hides and Shows controls depending on currentPosition
 function manageControls(position){
   // Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
   if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
 }	
});
</script>



products.tpl

{foreach $products as $product} {if $product@first}
    {/if}
  • {if $product->image} {/if}
    {$product->annotation|truncate:300}
    {if $product->variants|count > 0}
    {foreach $product->variants as $v} {/foreach} {if $v->compare_price > 0}{$v->compare_price|convert} {$currency->sign|escape}{/if}{$v->price|convert} {$currency->sign|escape}
    {else}
    {/if}
  • {if $product@iteration%8 == 0}
{if $product@last}{else}
    {/if}{/if} {/foreach}
{else}Товары не найдены{/if} {include file='pagination.tpl'}
Ссылка на сообщение
Поделиться на другие сайты
  • 4 недели спустя...

в продуктс тпл поменял рекомендуемые на

{* Рекомендуемые товары *}{get_featured_products var=featured_products}{if $featured_products}<!-- Список товаров--><h1>Рекомендуемые товары</h1><ul class="tiny_products"><div class="product-grid"><div id="slideshow"><div id="slidesContainer">	{foreach $featured_products as $product}	<!-- Товар-->	<li class="product">				<!-- Фото товара -->		{if $product->image}		<div class="image">			<a href="products/{$product->url}"><img src="{$product->image->filename|resize:200:200}" alt="{$product->name|escape}"/></a>		</div>		{/if}		<!-- Фото товара (The End) -->		<!-- Название товара -->		<h3><a data-product="{$product->id}" href="products/{$product->url}">{$product->name|escape}</a></h3>		<!-- Название товара (The End) -->				{if $product->variants|count > 0}		<!-- Выбор варианта товара -->		<form class="variants" action="/cart">			<table>			{foreach $product->variants as $v}			<tr class="variant">				<td>					<input id="featured_{$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}/>				</td>				<td>					{if $v->name}<label class="variant_name" for="featured_{$v->id}">{$v->name}</label>{/if}				</td>				<td>					{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>				</td>			</tr>			{/foreach}			</table>			<input type="submit" class="button" value="в корзину" data-result-text="добавлено"/>		</form>		<!-- Выбор варианта товара (The End) -->		{else}			Нет в наличии		{/if}	</li>        {if $product@iteration%8 == 0}</ul></div>{if $product@last}{else}<div class="slide"><ul class="overview">{/if}{/if}	<!-- Товар (The End)-->	{/foreach}	</div></div></div>{else}Товары не найдены{/if}	 {include file='pagination.tpl'} </div>                        </ul>


так - не валится сайт, но и не слайдятся слайды.
скрипт засунул "под одно крыло" форич в хед к аякс корзине
что не так? и да, цсс залил
Ссылка на сообщение
Поделиться на другие сайты

В моем случай, я сделал для блока "Рекомендуемые" на главной странице.
качаешь архив от сюда: http://kevinbatdorf.github.com/codaslider
заливаешь файлы к себе в шаблон и соединяешь в index.tpl.
и там где код Рекомендуемые вставляешь вот это:

<div id="recomend">					<h2>Популярные</h2>			{* Рекомендуемые товары *}        {get_featured_products var=featured_products  limit=12}        {if $featured_products}        <div class="coda-slider"  id="slider-id">      <div>       <p> <!-- Список товаров-->        <ul class="tiny_products1">                    {foreach name="fproducts" from=$featured_products item=product}            <!-- Товар-->            <li class="product">				<!-- Фото товара -->		{if $product->image}		<div class="image">           {if $product->featured}<div class="hit-main"></div>{/if}			<div><a href="products/{$product->url}"><img src="{$product->image->filename|resize:100:100}" alt="{$product->name|escape}"/></a></div>		</div>		{/if}		<!-- Фото товара (The End) -->		<!-- Название товара -->		<h3><a data-product="{$product->id}" href="products/{$product->url}">{$product->name|escape}</a></h3>		<!-- Название товара (The End) -->				{if $product->variants|count > 0}		<!-- Выбор варианта товара -->		<form class="variants" action="/cart">			<table>			{foreach $product->variants as $v}			<tr class="variant">				<td>					<input id="featured_{$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}/>				</td>				<td>					{if $v->name}<label class="variant_name" for="featured_{$v->id}">{$v->name}</label>{/if}				</td>				<td>					{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>				</td>			</tr>			{/foreach}			</table>          <div id="addcart">               <div class="colich"><input type=button value="" class="add1" onClick="javascript:this.form.amount.value= this.form.amount.value<=1 ? 1 :parseInt(this.form.amount.value)-1 ;"><input class="add3" type="text" style="width:20px" name="amount" value="1"><input type=button value="" class="add2" onClick="javascript:this.form.amount.value= this.form.amount.value>=100 ? 100 :parseInt(this.form.amount.value)+1 ;"></div><input type="submit" class="addcart" value=" " data-result-text=" "/>	</div>	</form>		<!-- Выбор варианта товара (The End) -->		{else}			Нет в наличии		{/if}	</li>	<!-- Товар (The End)-->    {if $smarty.foreach.fproducts.iteration%3 == 0} 					</div> 					{if $smarty.foreach.fproducts.iteration != $featured_products|@count} 					<div> 					{/if} 					{/if} 	{/foreach}			</ul> </p></div>{/if}<div class="all-other"><a href="hits">Посмотреть все...</a></div>			</div>


Далее, по своему вкусу правишь файл CSS
Ссылка на сообщение
Поделиться на другие сайты
  • 2 недели спустя...

в индекс добавили этот скрипт?

 <script>
    $(function(){

      /* Here is the slider using default settings */
      $('#slider-id').codaSlider();
      /* If you want to adjust the settings, you set an option
         as follows:

          $('#slider-id').codaSlider({
            autoSlide:true,
            autoHeight:false
          });
      
      */
    });

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

Если Вы хотите, чтобы вот так отображались товары на главной, то я сделал и для "Рекомендуемые", "Новинок" и "Скидки" в этом стиле.


Вот, тут все готовое и инструкция внутри: Slider.rar

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

Сорри, забыл в инструкции добавить .. В <head> добавьте еще вот эти строки:

<link rel="stylesheet" type="text/css" media="screen" href="design/{$settings->theme|escape}/css/coda-slider.css">
    <link rel="stylesheet" type="text/css" media="screen" href="design/{$settings->theme|escape}/css/coda-slider2.css">
    <link rel="stylesheet" type="text/css" media="screen" href="design/{$settings->theme|escape}/css/coda-slider3.css">
Ссылка на сообщение
Поделиться на другие сайты
  • 2 месяца спустя...

Добрый день, кто-нибудь может подсказать как вывести в coda slider 4 изображения.
Изображения у меня выводятся так:

<div class="production">



	<div class="production-block">
			<a href="http://сайт/catalog/suhoj-korm_2"><img src="design/{$settings->theme|escape}/images/banners/production/catfood.jpg" title="" alt="Сухие корма для кошек"/></a>	
	</div>
	
	<div class="production-block">
		<a href="http://сайт/catalog/kletki-dlya-gryzunov"><img src="design/{$settings->theme|escape}/images/banners/production/klgr.jpg" title="" alt="Клетки для грызунов"/></a>
	</div>
	
	<div class="production-block">
		<a href="http://сайт/catalog/igrovye-kompleksy-kogtetochki"><img src="design/{$settings->theme|escape}/images/banners/production/igrk.jpg" title="" alt="Игровые комплексы"/></a>
	</div>
	
	<div class="production-block">
		<a href="http://сайт/catalog/perenoski"><img src="design/{$settings->theme|escape}/images/banners/production/perenoski.jpg" title="" alt="Переноски"/></a>
	</div>
	

</div>

 

Залил все файлы coda slider на сервер, обернул код, который выше в <div class="coda-slider"  id="slider-id"> </div>

Слайдер работает, но выводит по одному изображению, то есть те 4 что у меня есть прокручивает по очереди. А нужно чтобы они крутились по 4 сразу (естественно я добавлю в файл еще изображения)

 

Буду благодарен за любую помощь...

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

если Вы скачали то что было до этого, т.е. вот это - Slider

и сделали все по инструкции, что внутри архива, и добавили в index.tpl шаблона в head

<link rel="stylesheet" type="text/css" media="screen" href="design/{$settings->theme|escape}/css/coda-slider.css">
    <link rel="stylesheet" type="text/css" media="screen" href="design/{$settings->theme|escape}/css/coda-slider2.css">
    <link rel="stylesheet" type="text/css" media="screen" href="design/{$settings->theme|escape}/css/coda-slider3.css">

то должно работать. обратите внимание в коде, где будет отображаться слайдер товаров перед {/foreach}, есть момент:

<!-- Товар (The End)-->
    {if $smarty.foreach.fproducts.iteration%3 == 0} 
					</div> 
					{if $smarty.foreach.fproducts.iteration != $featured_products|@count} 
					<div> 
					{/if} 
					{/if} 

цифра 3 и показывает количество отображаемых товаров. Остальное дело рук CSS, хотя и css-файлы присутствуют.

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

Да, я скачал ваш архив, все работает.

Большое спасибо за ответ! Но дело в том что я не для товаров делаю, а для изображений-баннеров. Их у меня 4 помещается по ширине страницы (код выше) и подключены в main.tpl с помощью include, так вот надо чтобы сразу по 4 штуки прокручивались они...

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

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

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

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

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

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

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

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

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

Загрузка...
×
×
  • Создать...