Сообщений в теме: 65

[Юля123]

Ingleest (06 Май 2016 - 12:09) писал:

Да, вот у этого: /goods/Eastwood

Изменяйте цвет текста в main.css в коде:

.old-price {color: #6e6e6e;font-size: 90%;text-decoration: line-through;}

[Ingleest]

Спасибо. Начал менять и появилось понимание, как должно быть. Сейчас вот так:

А хотелось бы вот так:


То есть: 1. Чтобы цены были в своем блоке, сверху справа, вместе с рейтингом.
2. Чтобы у краткого описания был свой блок, который не залезает под цену. Лучше - вниз.
3. Чтобы у названия было вот такое поле, а то длинное уходит далеко. Пусть уходит вниз на 2 строку.

Извините. что так сбивчиво написал, не знаю, как это все называется. Картинки помогут.
Спасибо.

[Юля123]

Ingleest (06 Май 2016 - 12:44) писал:

Спасибо. Начал менять и появилось понимание, как должно быть. Сейчас вот так:

А хотелось бы вот так:


То есть: 1. Чтобы цены были в своем блоке, сверху справа, вместе с рейтингом.
2. Чтобы у краткого описания был свой блок, который не залезает под цену. Лучше - вниз.
3. Чтобы у названия было вот такое поле, а то длинное уходит далеко. Пусть уходит вниз на 2 строку.

Извините. что так сбивчиво написал, не знаю, как это все называется. Картинки помогут.
Спасибо.

Если Вам нужно так, как на скриншоте, тогда попробуйте следующее. В конце main.css добавьте код:

.short-description { width: 80%;}

далее код:

.product-shop .price-box .special-price {display: inline-block;vertical-align: middle;margin: 0;font-weight: 600;font-size: 22px;line-height: 26px;color: #e4e4e4;}

замените на код:

.product-shop .price-box .special-price {vertical-align: middle;margin: 0;font-weight: 600;font-size: 22px;line-height: 26px;color: #e4e4e4;}

[Ingleest]

Юля123 (06 Май 2016 - 14:40) писал:

Если Вам нужно так, как на скриншоте, тогда попробуйте следующее. В конце main.css добавьте код:

.short-description { width: 80%;}

далее код:

.product-shop .price-box .special-price {display: inline-block;vertical-align: middle;margin: 0;font-weight: 600;font-size: 22px;line-height: 26px;color: #e4e4e4;}

замените на код:

.product-shop .price-box .special-price {vertical-align: middle;margin: 0;font-weight: 600;font-size: 22px;line-height: 26px;color: #e4e4e4;}

Большое спасибо.

[assa]

Помогите пожалуйста с отображением.

1. Когда выбираю модификацию, у меня картинка становится громадной и размер меняется в зависимости от размера фото в модификации, там стоит параметр авто, если его меняю, то меньше становится и главное фото в товаре.
В общем как привязать фото модификации, что бы оно было по низу на одном уровне с главным фото, отметил красной линией на принскрине.

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

Прикрепленные изображения

• 

[Vaccina]

В main.css найдите:

.blockquote {
	padding: 0 0 0 20px;
	margin: 0 0 22px;
	border-left: 2px solid #e1e1e1;
	list-style: none;
}

после него пропишите:

.blockquote > img {
	height: 100%;
	width: auto;
}

Инструкция по реализации подставки фото модификации место главного фото:
http://forum.storela...__20#entry52966

[assa]

Vaccina (27 Июль 2016 - 04:21) писал:

В main.css найдите:

.blockquote {
padding: 0 0 0 20px;
margin: 0 0 22px;
border-left: 2px solid #e1e1e1;
list-style: none;
}

после него пропишите:

.blockquote > img {
height: 100%;
width: auto;
}

Инструкция по реализации подставки фото модификации место главного фото:
http://forum.storela...__20#entry52966

Не помогло, кеш обновлял в разных браузерах смотрел...

Прикрепленные изображения

• 

[assa]

Как сделать смену главной фотки при выборе маленькой фотки?
Как на этом сайте:
http://pmusa.ru/good...od_id=105365202

[Stasya]

assa (20 Сентябрь 2016 - 12:44) писал:

Как сделать смену главной фотки при выборе маленькой фотки?
Как на этом сайте:
http://pmusa.ru/good...od_id=105365202

Сейчас у Вас реализован такой функционал. Т.е. при клике по маленькой картинке, изменяется и большое изображение товара.

[assa]

Stasya (20 Сентябрь 2016 - 14:56) писал:

Сейчас у Вас реализован такой функционал. Т.е. при клике по маленькой картинке, изменяется и большое изображение товара.

Тогда возникает вопрос, как сделать как в примере? То есть не было бы выбора категории, а внизу были бы загруженный фотки по клике на которые основное поменяется... Как реализовать? Я если я ещё тупо добавляю фотки, то по клике по нему, основное не меняется...

[Stasya]

assa (20 Сентябрь 2016 - 16:50) писал:

Тогда возникает вопрос, как сделать как в примере? То есть не было бы выбора категории, а внизу были бы загруженный фотки по клике на которые основное поменяется... Как реализовать? Я если я ещё тупо добавляю фотки, то по клике по нему, основное не меняется...

Извините, видимо не правильно прочитала Ваше сообщеине.
Чтобы это реализовать на Вашем шаблоне Вам необходимо
1) В шаблоне Товар найти блок

<div class="general-img popup-gallery">
		{% IF GOODS_IMAGE_EMPTY %}
		  <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=dark" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/>
		{% ELSE %}
		  <a href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}">
			<div class="ico-product">
			  {% IF GOODS_IS_NEW %}
				<span class="ico-new">Новинка</span>
			  {% ELSEIF GOODS_IS_TOP %}
				<span class="ico-best">Хит</span>
			  {% ENDIF %}
			  {% IF GOODS_MOD_MAX_DISCOUNT %}
				<span class="ico-sale">Скидка</span>
			  {% ENDIF %}
			</div>
			<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" class="goods-image-medium" itemprop="image"/>
		  </a>
		{% ENDIF %}
	  </div><!-- END основное изображение товара -->
	  <div class="thumblist-box" {% FOR goods_images %}{% IF goods_images.length <= 1 %}style="display:none;"{% ENDIF %}{% ENDFOR %}>
		<span class="prev"><i class="fa fa-angle-left"></i></span>
		<span class="next"><i class="fa fa-angle-right"></i></span>
		<!-- Другие изображения товара. Отображаются если есть изображения товара -->
		{% IFNOT goods_images_empty %}
		  <ul id="thumblist" class="thumblist popup-gallery">
			{% FOR goods_images %}
			  {% IFNOT goods_images.first %}
				<li><a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li>
			  {% ENDIF %}
			{% ENDFOR %}
		  </ul>
		{% ENDIF %}
	  </div><!-- END другие изображение товара -->

и заменить его на

div class="general-img popup-gallery">
		{% IF GOODS_IMAGE_EMPTY %}
		  <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=sport" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/>
		{% ELSE %}
		  <a href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id="zoom1" rel="position:'inside',adjustX:0,adjustY:0" title="Увеличить {GOODS_NAME}">
			<div class="ico-product">
			  {% IF GOODS_IS_NEW %}
				<span class="ico-new">Новинка</span>
			  {% ELSEIF GOODS_IS_TOP %}
				<span class="ico-best">Хит</span>
			  {% ENDIF %}
			  {% IF GOODS_MOD_MAX_DISCOUNT %}
				<span class="ico-sale">Скидка</span>
			  {% ENDIF %}
			</div>
			<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" class="goods-image-medium" itemprop="image"/>
		  </a>
		  <center class="goodsImageZoom" data="{GOODS_IMAGE_ID}">Увеличить изображение</center>
		{% ENDIF %}
	  </div><!-- END основное изображение товара -->
	  {% IFNOT goods_images_empty %}
		<div class="goodsImageList" style="display: none;">
		{% FOR goods_images %}
		  <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" rel="gallery"><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
		{% ENDFOR %}
		</div>
	  {% ENDIF %}
	  <div class="thumblist-box navigation" {% FOR goods_images %}{% IF goods_images.length <= 1 %}style="display:none;"{% ENDIF %}{% ENDFOR %}>
		<span class="prev"><i class="fa fa-angle-left"></i></span>
		<span class="next"><i class="fa fa-angle-right"></i></span>
		<!-- Другие изображения товара. Отображаются если есть изображения товара -->
		{% IFNOT goods_images_empty %}
		  <ul id="thumblist" class="thumblist popup-gallery">
			{% FOR goods_images %}
			  <li><a href="{goods_images.LARGE}" title="{goods_images.NAME}" data="{goods_images.ID}" class="cloud-zoom-gallery" rel="useZoom:'zoom1',smallImage:'{goods_images.LARGE}'"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li>
			{% ENDFOR %}
		  </ul>
		{% ENDIF %}
	  </div><!-- END другие изображение товара -->

2) В файле main. js найдите блок

// Скрипты для карточки товара Галерея изображения и Фильтры
function goodspage() {
// Открытие изображения товара при клике
$(document).ready(function() {
  $('.popup-gallery').magnificPopup({
	delegate: 'a',
	type: 'image',
   tLoading: 'Загружаем изображение #%curr%...',
  mainClass: 'mfp-img-mobile',
  gallery: {
   enabled: true,
   navigateByImgClick: true,
   preload: [0,1] // Will preload 0 - before current, and 1 after the current image
  },
  image: {
   tError: '<a href="%url%">Изображение #%curr%</a> не загружено.',
   titleSrc: function(item) {
	return item.el.attr('title') + '<small>StoreLand.ru</small>';
   }
  }
});
});
// Другие изображение товара
$(document).ready(function(){
  var $ = jQuery;
 
  if ($('#thumblist').length) {
	$('#thumblist').carouFredSel({
	  prev  : '.thumblist-box .prev',
	  next  : '.thumblist-box .next',
	  width : '100%',
	  auto  : false,
	  padding: [0, 20],
	  swipe : {
	  onMouse : false,
	  onTouch : true
	}
	}).parents('.thumblist-box').removeClass('load');
  }
});

и замените его на

// Функция определения ширины экрана пользователя
function getClientWidth() {return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;}

// Скрипты для карточки товара Галерея изображения и Фильтры
function goodspage() {
 
// Открытие изображения товара при клике
$(document).ready(function() {
  $('.popup-gallery').magnificPopup({
	delegate: 'a',
	type: 'image',
	tLoading: 'Загружаем изображение #%curr%...',
  mainClass: 'mfp-img-mobile',
  gallery: {
   enabled: true,
   navigateByImgClick: true,
   preload: [0,1] // Will preload 0 - before current, and 1 after the current image
  },
  image: {
   tError: '<a href="%url%">Изображение #%curr%</a> не загружено.',
   titleSrc: function(item) {
	return item.el.attr('title') + '<small>StoreLand.ru</small>';
   }
  }
});
});
// Увеличение изображения в карточке товара при наведении если ширина экрана больше 992px
$(document).ready(function(){
  if(getClientWidth() > 992){
	$(".cloud-zoom, .cloud-zoom-gallery").CloudZoom()
  }
});
// Увеличение изображения в карточке товара
$(function() {
  $('a[rel="gallery"]').fancybox();
  // Увеличение изображение при клике на него и открытие галереи изображений
  $('.goodsImageZoom, .thumblist a').click(function(){
	if($(this).closest('.thumblist').length) {
	  $('.goodsImageZoom').attr('data', $(this).attr('data'));
	  return(true);
	}
	$('.goodsImageList a[data="' + $('.goodsImageZoom').attr("data") + '"]').trigger('click');
	return(false);
  });
});
// Другие изображение товара
jQuery(document).ready(function ($) {
  if ($('#thumblist').length) {
	$('#thumblist').carouFredSel({
	  prev  : '.thumblist-box .prev',
	  next  : '.thumblist-box .next',
	  width : '100%',
	  auto  : false,
	  padding: [0, 20],
	  swipe : {
	  onMouse : false,
	  onTouch : true
	}
	}).parents('.thumblist-box').removeClass('load');
  }
});
// Выделение других изображений
jQuery(document).ready(function ($) {
$(".thumblist li a").click(function () {
  //add active class
  $(".thumblist li").removeClass('active');
  $(this).parent().addClass('active');
});
});

3) В конец файла forall.js добавьте блок

/*
* Cloud Zoom V1.0.3 Увеличение товара при наведении
* (c) 2010-2012 by R Cecco. <http://www.professorcloud.com>
*/
(function($){var scripts=document.getElementsByTagName("script");var last=scripts[scripts.length-1].src.lastIndexOf("/");var scriptPath=scripts[scripts.length-1].src.slice(0,last);function format(str){for(var i=1;i<arguments.length;i++){str=str.replace("%"+(i-1),arguments[i])}return str}function CloudZoom(jWin,opts){var sImg=$("img",jWin);var img1;var img2;var zoomDiv=null;var $mouseTrap=null;var lens=null;var $tint=null;var softFocus=null;var $ie6Fix=null;var zoomImage;var controlTimer=0;var cw,ch;var destU=0;var destV=0;var currV=0;var currU=0;var filesLoaded=0;var mx,my;var ctx=this,zw;setTimeout(function(){if($mouseTrap===null){var w=jWin.width();jWin.parent().append(format('<div style="width:%0px;position:absolute;top:75%;left:%1px;text-align:center" class="cloud-zoom-loading" >Loading...</div>',w/3,(w/2)-(w/6)));$("cloud-zoom-loading",jWin.parent()).css("opacity",0.5)}},200);var ie6FixRemove=function(){if($ie6Fix!==null){$ie6Fix.remove();$ie6Fix=null}};this.removeBits=function(){if(lens){lens.remove();lens=null}if($tint){$tint.remove();$tint=null}if(softFocus){softFocus.remove();softFocus=null}ie6FixRemove();$(".cloud-zoom-loading",jWin.parent()).remove()};this.destroy=function(){jWin.data("zoom",null);if($mouseTrap){$mouseTrap.unbind();$mouseTrap.remove();$mouseTrap=null}if(zoomDiv){zoomDiv.remove();zoomDiv=null}this.removeBits()};this.fadedOut=function(){if(zoomDiv){zoomDiv.remove();zoomDiv=null}this.removeBits()};this.controlLoop=function(){if(lens){var x=(mx-sImg.offset().left-(cw*0.5))>>0;var y=(my-sImg.offset().top-(ch*0.5))>>0;if(x<0){x=0}else{if(x>(sImg.outerWidth()-cw)){x=(sImg.outerWidth()-cw)}}if(y<0){y=0}else{if(y>(sImg.outerHeight()-ch)){y=(sImg.outerHeight()-ch)}}lens.css({left:x,top:y});lens.css("background-position",(-x)+"px "+(-y)+"px");destU=(((x)/sImg.outerWidth())*zoomImage.width)>>0;destV=(((y)/sImg.outerHeight())*zoomImage.height)>>0;currU+=(destU-currU)/opts.smoothMove;currV+=(destV-currV)/opts.smoothMove;zoomDiv.css("background-position",(-(currU>>0)+"px ")+(-(currV>>0)+"px"))}controlTimer=setTimeout(function(){ctx.controlLoop()},30)};this.init2=function(img,id){filesLoaded++;if(id===1){zoomImage=img}if(filesLoaded===2){this.init()}};this.init=function(){$(".cloud-zoom-loading",jWin.parent()).remove();$mouseTrap=$(".mousetrap",jWin.parent());if(!$mouseTrap.length){var $m=$("<div class='mousetrap' style='background-image:url(\""+scriptPath+"/blank.png\")'></div>");$mouseTrap=jWin.parent().append($m).find(":last");$mouseTrap=$(".mousetrap",jWin.parent())}$mouseTrap.css({width:sImg.outerWidth(),height:sImg.outerHeight(),top:0,left:0,position:"absolute",zIndex:9999});$mouseTrap.bind("mousemove",this,function(event){mx=event.pageX;my=event.pageY});$mouseTrap.bind("mouseleave",this,function(event){clearTimeout(controlTimer);if(lens){lens.fadeOut(299)}if($tint){$tint.fadeOut(299)}if(softFocus){softFocus.fadeOut(299)}zoomDiv.fadeOut(300,function(){ctx.fadedOut()});return false});$mouseTrap.bind("mouseenter",this,function(event){mx=event.pageX;my=event.pageY;zw=event.data;if(zoomDiv){zoomDiv.stop(true,false);zoomDiv.remove()}var xPos=opts.adjustX,yPos=opts.adjustY;var siw=sImg.outerWidth();var sih=sImg.outerHeight();var w=opts.zoomWidth;var h=opts.zoomHeight;if(opts.zoomWidth=="auto"){w=siw}if(opts.zoomHeight=="auto"){h=sih}var appendTo=jWin.parent();switch(opts.position){case"top":yPos-=h;break;case"right":xPos+=siw;break;case"bottom":yPos+=sih;break;case"left":xPos-=w;break;case"inside":w=siw;h=sih;break;default:appendTo=$("#"+opts.position);if(!appendTo.length){appendTo=jWin;xPos+=siw;yPos+=sih}else{w=appendTo.innerWidth();h=appendTo.innerHeight()}}zoomDiv=$(".cloud-zoom-big",appendTo);if(zoomDiv.length){zoomDiv.replaceWith(format('<div id="cloud-zoom-big" class="cloud-zoom-big" style="display:none;position:absolute;left:%0px;top:%1px;width:%2px;height:%3px;background-image:url(\'%4\');z-index:99;"></div>',xPos,yPos,w,h,zoomImage.src)).find(":last")}else{zoomDiv=appendTo.append(format('<div id="cloud-zoom-big" class="cloud-zoom-big" style="display:none;position:absolute;left:%0px;top:%1px;width:%2px;height:%3px;background-image:url(\'%4\');z-index:99;"></div>',xPos,yPos,w,h,zoomImage.src)).find(":last")}zoomDiv=$(".cloud-zoom-big",appendTo);if(sImg.attr("title")&&opts.showTitle){zoomDiv.append(format('<div class="cloud-zoom-title">%0</div>',sImg.attr("title")));$(".cloud-zoom-title",zoomDiv).css("opacity",opts.titleOpacity)}if($.browser&&$.browser.msie&&$.browser.version<7){$ie6Fix=$('<iframe frameborder="0" src="#"></iframe>').css({position:"absolute",left:xPos,top:yPos,zIndex:99,width:w,height:h}).insertBefore(zoomDiv)}zoomDiv.fadeIn(500);if(lens){lens.remove();lens=null}cw=(sImg.outerWidth()/zoomImage.width)*zoomDiv.width();ch=(sImg.outerHeight()/zoomImage.height)*zoomDiv.height();lens=$(".cloud-zoom-lens",jWin);if(lens.length){lens.replaceWith(format("<div class = 'cloud-zoom-lens' style='display:none;z-index:98;position:absolute;width:%0px;height:%1px;'></div>",cw,ch)).find(":last")}else{lens=jWin.append(format("<div class = 'cloud-zoom-lens' style='display:none;z-index:98;position:absolute;width:%0px;height:%1px;'></div>",cw,ch)).find(":last")}lens=$(".cloud-zoom-lens",jWin);$mouseTrap.css("cursor",lens.css("cursor"));var noTrans=false;if(opts.tint){lens.css("background",'url("'+sImg.attr("src")+'")');$tint=jWin.append(format('<div class="cloud-zoom-tint" style="display:none;position:absolute; left:0px; top:0px; width:%0px; height:%1px; background-color:%2;" />',sImg.outerWidth(),sImg.outerHeight(),opts.tint)).find(":last");$tint=$(".cloud-zoom-tint",jWin);$tint.css("opacity",opts.tintOpacity);noTrans=true;$tint.fadeIn(500)}if(opts.softFocus){lens.css("background",'url("'+sImg.attr("src")+'")');jWin.append(format('<div class="cloud-zoom-soft" style="position:absolute;display:none;top:2px; left:2px; width:%0px; height:%1px;" />',sImg.outerWidth()-2,sImg.outerHeight()-2,opts.tint));softFocus=$(".cloud-zoom-soft",jWin);softFocus.css("background",'url("'+sImg.attr("src")+'")');softFocus.css("opacity",0.5);noTrans=true;softFocus.fadeIn(500)}if(!noTrans){lens.css("opacity",opts.lensOpacity)}if(opts.position!=="inside"){lens.fadeIn(500)}zw.controlLoop();return})};img1=new Image();$(img1).load(function(){ctx.init2(this,0)});img1.src=sImg.attr("src");img2=new Image();$(img2).load(function(){ctx.init2(this,1)});img2.src=jWin.attr("href")}$.fn.CloudZoom=function(options){try{document.execCommand("BackgroundImageCache",false,true)}catch(e){}this.each(function(){var relOpts,opts;eval("var  a = {"+$(this).attr("rel")+"}");relOpts=a;if($(this).is(".cloud-zoom")){$(this).css({position:"relative",display:"inline-block"});$("img",$(this)).css({display:"block"});if($(this).parent().attr("id")!="wrap"){$(this).wrap('<div id="wrap" style="top:0px;z-index: 7;position:relative;"></div>')}opts=$.extend({},$.fn.CloudZoom.defaults,options);opts=$.extend({},opts,relOpts);$(this).data("zoom",new CloudZoom($(this),opts))}else{if($(this).is(".cloud-zoom-gallery")){opts=$.extend({},relOpts,options);$(this).data("relOpts",opts);$(this).bind("click",$(this),function(event){var data=event.data.data("relOpts");$("#"+data.useZoom).data("zoom").destroy();$("#"+data.useZoom).attr("href",event.data.attr("href"));$("#"+data.useZoom+" img").attr("src",event.data.data("relOpts").smallImage);$("#"+event.data.data("relOpts").useZoom).CloudZoom();return false})}}});return this};$.fn.CloudZoom.defaults={zoomWidth:"auto",zoomHeight:"auto",position:"right",tint:false,tintOpacity:0.5,lensOpacity:0.5,softFocus:false,smoothMove:3,showTitle:true,titleOpacity:0.5,adjustX:0,adjustY:0}})(jQuery);

[admin]

Здравствуйте!
Необходимо в товаре внизу разместить блок (на скрине)
SL-171870

Скрин

Прикрепленные изображения

• 

[Vaccina]

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - Товар - в необходимом месте, например перед:

<div class="related clear">
<!-- С этим товаром смотрят -->
{% IFNOT related_views_goods_empty %}
<div class="related-views clear">

вставьте:

<div class="promise">
<h2>Преимущества покупки</h2>
<div>
<a href="#" target="_blank">Удобная доставка</a>
	 <p>Сделали заказ до 20.00? Доставим завтра</p>
	 <i class="fa fa-truck"></i>
</div>
<div>
<a href="#" target="_blank">Лучшая цена</a>
	 <p>Нашли дешевле? Снизим цену!</p>
	 <i class="fa fa-thumbs-up"></i>
</div>
<div>
<a href="#" target="_blank">Готовое решение</a>
	 <p>Установим, настроим, покажем, обучим.</p>
	 <i class="fa fa-wrench"></i>
</div>
<div>
<a href="#" target="_blank">30 дней на обмен</a>
	 <p>Не понравилась покупка? Обменяем без проблем.</p>
	 <i class="fa fa-exchange"></i>
</div>
</div>

Далее зайдите в main.css - найдите:

/*** Информационный блок ***/
#block-info {padding: 20px 0;border-top: 1px solid #dddddd;position: relative;}

перед ним вставьте:

/*** Преимущества покупки ***/
.promise div{
margin-right: 1%;
display: inline-block;
font-size: 14px;
vertical-align: top;
width: 23.8%;
height: 250px;
border: 1px solid #CCC;
border-radius: 4px;
box-sizing: border-box;
padding: 2rem;
overflow: hidden;
color: #333;
position: relative;
}
.promise div:last-child{
margin-right: 0;
}
.promise div a{
font-size: 18px;
font-weight: 700;
line-height: 26px;
border-bottom: 1px solid #C4C4C4;
margin-bottom: 10px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-decoration: none;
}
.promise div a:hover{
color: #ed1c24;
}
.promise div p{
color: #333;
font-size: 16px;
line-height: 20px;
}
.promise div i{
position: absolute;
right: 20px;
bottom: 20px;
font-size: 80px;
color: #EBEBEB;
}

Далее найдите:

@media all and (max-width: 481px) {

после него пропишите:

.promise div{
margin-right: 0%;
width: 100%;
}

Результат должен быть следующий:

[admin]

Vaccina (07 Сентябрь 2017 - 08:09) писал:

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - Товар - в необходимом месте, например перед:

<div class="related clear">
<!-- С этим товаром смотрят -->
{% IFNOT related_views_goods_empty %}
<div class="related-views clear">

вставьте:

<div class="promise">
<h2>Преимущества покупки</h2>
<div>
<a href="#" target="_blank">Удобная доставка</a>
	 <p>Сделали заказ до 20.00? Доставим завтра</p>
	 <i class="fa fa-truck"></i>
</div>
<div>
<a href="#" target="_blank">Лучшая цена</a>
	 <p>Нашли дешевле? Снизим цену!</p>
	 <i class="fa fa-thumbs-up"></i>
</div>
<div>
<a href="#" target="_blank">Готовое решение</a>
	 <p>Установим, настроим, покажем, обучим.</p>
	 <i class="fa fa-wrench"></i>
</div>
<div>
<a href="#" target="_blank">30 дней на обмен</a>
	 <p>Не понравилась покупка? Обменяем без проблем.</p>
	 <i class="fa fa-exchange"></i>
</div>
</div>

Далее зайдите в main.css - найдите:

/*** Информационный блок ***/
#block-info {padding: 20px 0;border-top: 1px solid #dddddd;position: relative;}

перед ним вставьте:

/*** Преимущества покупки ***/
.promise div{
margin-right: 1%;
display: inline-block;
font-size: 14px;
vertical-align: top;
width: 23.8%;
height: 250px;
border: 1px solid #CCC;
border-radius: 4px;
box-sizing: border-box;
padding: 2rem;
overflow: hidden;
color: #333;
position: relative;
}
.promise div:last-child{
margin-right: 0;
}
.promise div a{
font-size: 18px;
font-weight: 700;
line-height: 26px;
border-bottom: 1px solid #C4C4C4;
margin-bottom: 10px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-decoration: none;
}
.promise div a:hover{
color: #ed1c24;
}
.promise div p{
color: #333;
font-size: 16px;
line-height: 20px;
}
.promise div i{
position: absolute;
right: 20px;
bottom: 20px;
font-size: 80px;
color: #EBEBEB;
}

Далее найдите:

@media all and (max-width: 481px) {

после него пропишите:

.promise div{
margin-right: 0%;
width: 100%;
}

Результат должен быть следующий:
Аналог 100Вт а потребляет всего 11Вт низкие цены.png

Отлично, только в малых разрешениях блоки сужаются и вплотную друг к другу.
Требуется :
Размер блоков должен быть одинаковый на всех разрешениях (пусть переносятся ниже если экрана не хватает)
До блока С ЭТИМ ТОВАРОМ ПОКУПАЮТ сделать отступ
Сделать отступ по высоте (при переносе сливаются)

[admin]

admin (07 Сентябрь 2017 - 10:17) писал:

Отлично, только в малых разрешениях блоки сужаются и вплотную друг к другу.
Требуется :
Размер блоков должен быть одинаковый на всех разрешениях (пусть переносятся ниже если экрана не хватает)
До блока С ЭТИМ ТОВАРОМ ПОКУПАЮТ сделать отступ
Сделать отступ по высоте (при переносе сливаются)

Сделал.
Как сделать что бы блоки размещались по центру?

[MikDark]

admin (07 Сентябрь 2017 - 10:36) писал:

Сделал.
Как сделать что бы блоки размещались по центру?

Здравствуйте. Вам нужно в шаблоне main.css заменить код:

.promise div{margin: 10px;display: inline-block;font-size: 14px;vertical-align: top;width: 260px;height: 250px;border: 1px solid #CCC;border-radius: 4px;box-sizing: border-box;padding: 2rem;overflow: hidden;color: #555;position: relative;}

на

.promise {text-align:center;}
.promise div{margin: 10px;display: inline-block;font-size: 14px;vertical-align: top;width: 260px;height: 250px;border: 1px solid #CCC;border-radius: 4px;box-sizing: border-box;padding: 2rem;overflow: hidden;color: #555;position: relative;float:none;}

[admin]

Здравствуйте!
Не могу самостоятельно решить задачу:
Как изменить цвет "border" у таблицы на #e1e1e1 и толщину в 1 пиксель сделать (пример страницы ..... /page/Ceny-na-montazh-svetodiodnoj-lenty )

[Vaccina]

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:

.htmlDataBlock {padding: 10px 0 20px;}
.htmlDataBlock a{text-decoration: underline;}

после него пропишите:

.htmlDataBlock table {border:none;}
.htmlDataBlock table td {border:1px solid #e1e1e1;}

[admin]

Vaccina (15 Сентябрь 2017 - 08:16) писал:

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:

.htmlDataBlock {padding: 10px 0 20px;}
.htmlDataBlock a{text-decoration: underline;}

после него пропишите:

.htmlDataBlock table {border:none;}
.htmlDataBlock table td {border:1px solid #e1e1e1;}

А как сделать внутри border тоже 1 пиксель (сейчас только очертание таблицы в 1 пиксель)

[Danil]

admin (15 Сентябрь 2017 - 08:52) писал:

А как сделать внутри border тоже 1 пиксель (сейчас только очертание таблицы в 1 пиксель)

Здравствуйте.
border - это и есть граница таблицы(в данном случае 1px).
Сейчас у каждой ячейки таблицы, есть border 1px. Уточните, пожалуйста, что именно Вы хотите изменить?