Перейти к содержимому


Как Сделать Вот Такую Всплывающую Корзину?


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 97

#81 Cupuyc

Cupuyc

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 747 сообщений

Отправлено 04 Август 2015 - 14:30

Просмотр сообщенияkarapuzz (04 Август 2015 - 12:10) писал:

Всем привет , а кто подскажет как изменить размер полосы , и сместить её в правый угол!?

Здравствуйте, зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css найдите код:
#float-cart {
				 position: fixed;
				 top: 0;
				 left: 50%;
				 margin: 0 auto;
				 margin-left: -500px;
				 width: 1000px;
				 z-index: 10000;
				 color: #fff;
				 background-color: #27B9DA;
				 padding:10px 0 10px;
				 display: none;
font:10pt arial, helvetics, sens-serif;
border-bottom:1px solid #009900; border-radius:0px 0px 15px 15px; -moz-border-radius:0px 0px 15px 15px; -webkit-border-bottom-right-radius:15px;-webkit-border-bottom-left-radius:15px;
box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
filter:alpha(opacity=80);
				 -moz-opacity: 0.8;
				 opacity: 0.8;
				 -khtml-opacity: 0.8;
				 behavior: url(http://design.xn----7sbahxjlc3aa3b.xn--p1ai/PIE.htc);
}

Изменить размер полосы Вы можете изменяя значение "padding:10px 0 10px;", сместить её в правый угол изменяя значение "margin-left: -500px", например используя значение "margin-left: -325px".

#82 karapuzz

karapuzz

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 77 сообщений

Отправлено 04 Август 2015 - 16:45

Просмотр сообщенияCupuyc (04 Август 2015 - 14:30) писал:

Здравствуйте, зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css найдите код:
#float-cart {
				 position: fixed;
				 top: 0;
				 left: 50%;
				 margin: 0 auto;
				 margin-left: -500px;
				 width: 1000px;
				 z-index: 10000;
				 color: #fff;
				 background-color: #27B9DA;
				 padding:10px 0 10px;
				 display: none;
font:10pt arial, helvetics, sens-serif;
border-bottom:1px solid #009900; border-radius:0px 0px 15px 15px; -moz-border-radius:0px 0px 15px 15px; -webkit-border-bottom-right-radius:15px;-webkit-border-bottom-left-radius:15px;
box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
filter:alpha(opacity=80);
				 -moz-opacity: 0.8;
				 opacity: 0.8;
				 -khtml-opacity: 0.8;
				 behavior: url(http://design.xn----7sbahxjlc3aa3b.xn--p1ai/PIE.htc);
}

Изменить размер полосы Вы можете изменяя значение "padding:10px 0 10px;", сместить её в правый угол изменяя значение "margin-left: -500px", например используя значение "margin-left: -325px".
вроде бы понял что где находится , но всё равно трудновато мне поставить её вот таким образом:

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

  • 76.JPG


#83 karapuzz

karapuzz

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 77 сообщений

Отправлено 05 Август 2015 - 15:43

Просмотр сообщенияkarapuzz (04 Август 2015 - 16:45) писал:

вроде бы понял что где находится , но всё равно трудновато мне поставить её вот таким образом:
кто нибудь знает как поменять текст в этой корзине и её размеры ?

#84 karapuzz

karapuzz

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 77 сообщений

Отправлено 05 Август 2015 - 15:55

с размерами всё ясно , кто нибудь знает как изменить текст в панели ???

#85 Danil

Danil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 05 Август 2015 - 16:57

Просмотр сообщенияkarapuzz (05 Август 2015 - 15:55) писал:

с размерами всё ясно , кто нибудь знает как изменить текст в панели ???
Здравствуйте.
В шаблоне html найдите код
 {% IF cart_count_empty %}	  
												 <li class="cartSumP" style="cursor: pointer;"><a>Корзина пустая&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}</a></li>
								 {% ELSE %}
												 {% FOR cart_sum %}	 
												 <li class="cartSumP" style="cursor: pointer;"><a>Товаров на: {cart_sum.NOW | money_format}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{% IF cart_sum.NOW<SETTINGS_STORE_ORDER_MIN_ORDER_PRICE %}Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}{% ELSE %}Оформить заказ{% ENDIF %}</a></li>
												 {% ENDFOR %}
								 {% ENDIF %}

Так же найдите
<!-- Корзина -->
	  <div id="cartInfo">
		<a href="{CART_URL}">в корзине товаров на</a>:
		<span id="cartSum">
		  {% IF cart_count_empty %}
			<span>0</span> {CURRENCY_NAME}
		  {% ELSE %}
			{% FOR cart_sum %}
			  <span class="num">{cart_sum.NOW_WITH_DISCOUNT | money_format}</span><br />
			{% ENDFOR %}
		  {% ENDIF %}
		</span>
	  </div>
	  <!-- end Корзина -->
изменяйте текст корзины на свой.

#86 karapuzz

karapuzz

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 77 сообщений

Отправлено 05 Август 2015 - 17:05

спасибо!)

#87 karapuzz

karapuzz

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 77 сообщений

Отправлено 05 Август 2015 - 17:05

спасибо!)

#88 Store-rondell

Store-rondell

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 187 сообщений
  • ГородМосква

Отправлено 25 Октябрь 2017 - 13:08

Добрый день. Применил код, но сумма, во всплывающей корзине, меняется только при обновлении страницы. Помогите исправить!
И как переместить "В корзине товаров на"/"минимальная сумма заказа" в правую часть, а ссылки оставить слева, спасибо!

#89 Danil

Danil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 25 Октябрь 2017 - 13:42

Просмотр сообщенияStore-rondell (25 Октябрь 2017 - 13:08) писал:

Добрый день. Применил код, но сумма, во всплывающей корзине, меняется только при обновлении страницы. Помогите исправить!
И как переместить "В корзине товаров на"/"минимальная сумма заказа" в правую часть, а ссылки оставить слева, спасибо!
Здравствуйте.
В конец main.css добавьте
div#float-cart ul {float: right;}
В main.js после строки
$('#cartCount').html($(html).find('.newCartCount').html());
вставьте

$('.cartSumP > a').html('В КОРЗИНЕ товаров на: ' + $(html).find('.newCartSum').html());


#90 Store-rondell

Store-rondell

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 187 сообщений
  • ГородМосква

Отправлено 25 Октябрь 2017 - 13:47

Спасибо большое за оперативную работу! :rolleyes:

#91 Store-rondell

Store-rondell

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 187 сообщений
  • ГородМосква

Отправлено 26 Октябрь 2017 - 13:15

Простите, что не по теме, но есть одна задумка!))
Можно ли реализовать вот такой блок, как на картинке, и разместить его под новостями на главной странице?
Хочется, чтобы товарное предложение обновлялось раз в час-два и была возможность перехода в карточку товара при клике (но, чтобы работало не как слайдер, который можно пролиснуть, а само обновлялось в 1-2часа).
Спасибо!

Изображение

#92 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 27 Октябрь 2017 - 06:51

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

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

#93 Store-rondell

Store-rondell

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 187 сообщений
  • ГородМосква

Отправлено 27 Октябрь 2017 - 09:06

Просмотр сообщенияVaccina (27 Октябрь 2017 - 06:51) писал:

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

Можно установить вывод конкретной группы товаров в определенный час или после обновления страницы радомно выводить товар из заранее имеющегося списка. Вас какой вариант больше устроит?
Доброе утро!
Давайте первый вариант реализуем. Спасибо!)

#94 Store-rondell

Store-rondell

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 187 сообщений
  • ГородМосква

Отправлено 27 Октябрь 2017 - 13:07

И можно ли сделать вот такой каталог? Чтобы при клике он сворачивался и разворачивался. И кнопка раскрытия каталога, одновременно со всплывающей корзиной, появлялась и пропадала, чтобы синхронно было. Спасибо большое!

Изображение

#95 Store-rondell

Store-rondell

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 187 сообщений
  • ГородМосква

Отправлено 30 Октябрь 2017 - 09:12

Добрый день! Вы мне поможете? :unsure: :rolleyes:

#96 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 31 Октябрь 2017 - 09:06

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

Просмотр сообщенияStore-rondell (27 Октябрь 2017 - 09:06) писал:

Доброе утро!
Давайте первый вариант реализуем. Спасибо!)

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

Просмотр сообщенияStore-rondell (27 Октябрь 2017 - 13:07) писал:

И можно ли сделать вот такой каталог? Чтобы при клике он сворачивался и разворачивался. И кнопка раскрытия каталога, одновременно со всплывающей корзиной, появлялась и пропадала, чтобы синхронно было. Спасибо большое!

Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<script>
$(document).ready(function(){
				 window.onscroll = function(){
												 if(window.pageYOffset>100){
																				 $('#float-cart').fadeIn();
												 } else{
																				 $('#float-cart').fadeOut();
												 }
				 }
});
function calculateDeliveryCost(itemsCost) {
				 $("#deliveryRate, #float-cart .delivery-rate").html(html);
}
</script>

замените на:
<script>
$(document).ready(function () {
  window.onscroll = function () {
	if (window.pageYOffset > 100) {
	  $('#float-cart').fadeIn();
	  $('#catalog').fadeIn();
	} else {
	  $('#float-cart').fadeOut();
	  $('#catalog').fadeOut();
	}
  }
});
function calculateDeliveryCost(itemsCost) {
  $('#deliveryRate, #float-cart .delivery-rate').html(html);
}
</script>


далее найдите:
<p id="back-top">
		<a href="#top"><span></span></a>
</p>

после него пропишите:
<div id="catalog">
   <a href="#"></a>
   <!-- Каталог -->
   <ul id="subNavigation">
	  {%IFNOT catalog_empty %}
	  {% FOR catalog %}
	  {% IFNOT catalog.HIDE %}
	  <li>
		 <a href="{catalog.URL}"
			{% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
		 {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
		 >{catalog.NAME}</a>
	  </li>
	  {% ENDIF %}
	  {% ENDFOR %}
	  {% ENDIF %}
   </ul>
   <!-- end Каталог -->
</div>


Далее зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.form-inline {
		display: inline-block;
}
.form-inline ul li {
		display: inline-block;
}
.form-inline.OrderFilterForm * {
display: inline-block;
margin-left: 10px;
}

перед ним пропишите:
#catalog > a {
  display: block;
  position: fixed;
  height: 30px;
  width: 30px;
  border: 1px solid #BD1548;
  left: 0;
  top: 100px;
  background: url("https://store-rondell.storeland.ru/design/cat.jpg?4502") no-repeat center center #fff;
}
#catalog #subNavigation{display: none;position: fixed;background: #fff;left: 31px;padding: 0 10px;top: 100px;border: 1px solid #BD1548;}
#catalog #subNavigation.active{display: block;}


Далее зайдите в раздел Сайт - Редактор шаблонов - main.js - в самом конце пропишите:
$(document).ready(function(){
 $("#catalog > a").click(function(){
   $("#catalog #subNavigation").toggle();
   return false;
 });
});


#97 Store-rondell

Store-rondell

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 187 сообщений
  • ГородМосква

Отправлено 31 Октябрь 2017 - 09:10

Наборы посуды, Кастрюли, Сковороды - 1 час показа;
    Ковши, Сотейники, Кухонные аксессуары - 2 час показа;
    Ножи, Столовая сервировка, Столовые приборы - 3 час показа;
    Чайники, Френч-прессы, Кофеварки - 4 час показа;
    Термокружки, Термосы, Формы для выпечки, Крышки - 5 час показа.

И далее по кругу, так получится?

#98 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 03 Ноябрь 2017 - 07:19

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

Цитата

Применил Ваш код по корзине. Все хорошо. Но есть небольшая проблемка, при обновлении страницы кнопка сразу видна и при пролистовании вниз исчезает, и далее появляется снова, как всплывает корзина. Как сделать так, чтобы при обновлении она сразу не выскакивала, а только потом, как пролистнуть страницу вниз? Спасибо.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#catalog > a {
  display: block;
  position: fixed;
  height: 30px;
  width: 30px;
  border: 1px solid #BD1548;
  left: 0;
  top: 100px;
  background: url("https://store-rondell.storeland.ru/design/cat.jpg?4502") no-repeat center center #fff;
}

перед ним пропишите:
#catalog{display: none;}

Просмотр сообщенияStore-rondell (31 Октябрь 2017 - 09:10) писал:

Наборы посуды, Кастрюли, Сковороды - 1 час показа;
Ковши, Сотейники, Кухонные аксессуары - 2 час показа;
Ножи, Столовая сервировка, Столовые приборы - 3 час показа;
Чайники, Френч-прессы, Кофеварки - 4 час показа;
Термокружки, Термосы, Формы для выпечки, Крышки - 5 час показа.

И далее по кругу, так получится?
Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
<!-- Список товаров -->
  <tr>
		<td colspan="2">
		  <table style="padding:0px;margin:0px;">
          
замените на:
<!-- Список товаров -->
  <tr>
		<td colspan="2">
		  <table id="items" style="padding:0px;margin:0px;">
          
          
Далее зайдите в шаблон HTML - найдите:
<div id="contentWrap">
		<div id="content">
		
		  <table id="contentMainTb">
	   	 <tr>
	   	   <td id="leftMenuBlockWrap">
	   		 <div id="leftMenuBlock">	
					  <!-- Каталог -->
					  <h4 class="contentTbodyCatalogHeader"><b>Категории</b></h4>
			  <ul id="subNavigation">
						{%IFNOT catalog_empty %}
				  {% FOR catalog %}
					{% IFNOT catalog.HIDE %}
					  <li>
						<a href="{catalog.URL}"
						  {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
						  {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
						>{catalog.NAME}</a>
					  </li>
					{% ENDIF %}
				  {% ENDFOR %}
				{% ENDIF %}
					  </ul>
					  <!-- end Каталог -->
                    
                    
после него вставьте:
<table class="bought"><tbody><tr><td style="color: #C54A4A;font-family: 'Puritan20Normal';font-size: 17px;">Только что купили</td></tr><tr id="bought_item"></tr></tbody></table>
<script>
$(document).ready(function () {
  var id = '#bought_item';
  var date = new Date();
  if (date.getHours() == 1 || date.getHours() == 17) {
	var url = 'http://xn----8sbkec3aeakekxj4a.xn--p1ai/catalog/Nabory-posudy';
  }
  if (date.getHours() == 2 || date.getHours() == 18) {
	var url = 'http://xn----8sbkec3aeakekxj4a.xn--p1ai/catalog/Kastryuli';
  }
  if (date.getHours() == 3 || date.getHours() == 19) {
	var url = 'http://xn----8sbkec3aeakekxj4a.xn--p1ai/catalog/Skovorody';
  }
  if (date.getHours() == 4 || date.getHours() == 20) {
	var url = 'http://xn----8sbkec3aeakekxj4a.xn--p1ai/catalog/Kovshi';
  }
  if (date.getHours() == 5 || date.getHours() == 21) {
	var url = 'http://xn----8sbkec3aeakekxj4a.xn--p1ai/catalog/Sotejniki';
  }
  if (date.getHours() == 6 || date.getHours() == 22) {
	var url = 'http://xn----8sbkec3aeakekxj4a.xn--p1ai/catalog/Kuhonnye-aksessuary';
  }
  if (date.getHours() == 7 || date.getHours() == 23) {
	var url = 'http://xn----8sbkec3aeakekxj4a.xn--p1ai/catalog/Nozhi';
  }
  if (date.getHours() == 8) {
	var url = 'http://xn----8sbkec3aeakekxj4a.xn--p1ai/catalog/Stolovaya-servirovka';
  }
  if (date.getHours() == 9) {
	var url = 'http://xn----8sbkec3aeakekxj4a.xn--p1ai/catalog/Stolovye-pribory';
  }
  if (date.getHours() == 10) {
	var url = 'http://xn----8sbkec3aeakekxj4a.xn--p1ai/catalog/Chajniki';
  }
  if (date.getHours() == 11) {
	var url = 'http://xn----8sbkec3aeakekxj4a.xn--p1ai/catalog/French-pressy';
  }
  if (date.getHours() == 12) {
	var url = 'http://xn----8sbkec3aeakekxj4a.xn--p1ai/catalog/Kofevarki';
  }
  if (date.getHours() == 13) {
	var url = 'http://xn----8sbkec3aeakekxj4a.xn--p1ai/catalog/Termokruzhki';
  }
  if (date.getHours() == 14) {
	var url = 'http://xn----8sbkec3aeakekxj4a.xn--p1ai/catalog/Termosy';
  }
  if (date.getHours() == 15) {
	var url = 'http://xn----8sbkec3aeakekxj4a.xn--p1ai/catalog/Formy-dlya-vypechki';
  }
  if (date.getHours() == 16) {
	var url = 'http://xn----8sbkec3aeakekxj4a.xn--p1ai/catalog/Kryshki';
  }
  if (id && $(id).length) {
	$.get(url, function (html) {
	  var item = $(html).find('#items td');
	  var div = item.eq(Math.floor(Math.random() * item.length));
	  $(id).html(div);
	});
  }
});
</script>





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных