ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Вид материалов интернет магазина для uCoz

Вид материалов интернет магазина для uCoz

Для тематики интернет магазин, нужен оригинальный вид материалов, чтоб по функциям он полностью соответствовал этой площадке. Что теперь вы можете поставить такой, который однозначно настроен под этот портал. Где идет изначально изображение и название прописано внизу в отдельном боксе. Но когда только наводите курсор, то появляется кнопку с надписью "Купить" хотя цена по умолчанию при открытии уже стоит, чтоб потенциальному покупателю известно было.

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

Снято с тестового и проверено на работоспособность.

Вид материалов в колонку интернет магазина

HTML - полностью меняем на этот:

Код

<div data-item-category="steam" class="viewn">
  <div class="viewn-link"><a href="$ENTRY_URL$"></a></div>
  <div class="viewn-rub"><span>$AUTHOR_EMAIL$.</span>$AUTHOR_EMAIL$ Деньги в руб.</div>
  <div class="viewn-images"><img src="$IMG_URL1$"width="450" height="100" alt=""></div>
  <div class="viewn-name ellipsis">$TITLE$</div>
  </div>

CSS:

Код

.viewn-rub {
  z-index: 98;
  }
  .ellipsis {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  }
  .full {
  width:1000px;
  margin:0 auto;
  }
  .viewn:hover .viewn-images:after {
  opacity:1;
  }

  .viewn:hover .viewn-name {
  background: #1f70d7;
  color:#fff;
  }

  .viewn:hover .viewn-link {
  opacity:1;
  }

  .viewn {
  float:left;
  width:188px;
  height:302px;
  position:relative;
  margin:10px 6px 10px 6px;
  }

  .viewn-images {
  width:188px;
  height:268px;
  position:relative;
  }

  .viewn-images:after {
  background:rgba(11,22,35, 0.9);
  width:186px;
  height:266px;
  border:1px solid #1f6bd7;
  border-radius:5px 5px 0 0;
  content:'';
  position:absolute;
  top:0;
  left:0;
  z-index:10;
  opacity:0;
  }

  .viewn-images img {
  width:188px;
  height:268px;
  border-radius:5px 5px 0 0;
  }

  .viewn-name {
  width: 100%;
  height:34px;
  line-height:34px;
  padding:0 10px;
  background:#fff;
  border-radius:0 0 5px 5px;
  color:#17273b;
  }

  .viewn-rub {
  position:absolute;
  width:127px;
  height:35px;
  line-height:36px;
  text-align:center;
  background:#1f78d7;
  border-radius:5px;
  top:11px;
  right:9px;
  color:#fff;
  }

  .viewn-rub span {
  font-size:10px;
  margin:0 5px 0 0;
  text-decoration:line-through;
  }

  .viewn-link-2 {
  background:url(http://zornet.ru/Aben/ABGDA/viewn-link2.png) no-repeat 0 0 !important;
  }

  .viewn-link-3 {
  background:url(http://zornet.ru/Aben/ABGDA/viewn-link3.png) no-repeat 0 0 !important;
  }

  .viewn-link {
  background:url(http://zornet.ru/Aben/ABGDA/viewn-link.png) no-repeat 0 0;
  width:118px;
  height:38px;
  position:absolute;
  top:111px;
  left:34px;
  z-index:30;
  opacity:0;
  }

  .viewn-link a {
  width:118px;
  height:38px;
  display:block;
  }
  /* Only for that shitty template */
  .kouti-system.missing {
  background-image: url('http://zornet.ru/Aben/ABGDA/viewn-link2.png');
  }
  .kouti-system.purchase {
  background-image: url('http://zornet.ru/Aben/ABGDA/viewn-link3.png');
  }

Есть идея добавить шрифтовые иконки, что разнообразит на привлекательность.
Идея: milan_shubin, админа: turbo-s.ucoz.ru

14 Октября 2017 Просмотров: 2086 Комментариев: (9)

Поделиться в социальных сетях

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 9
Порядок вывода комментариев: milan_shubin 14 Октября 2017 21:46¹ 0 Спасибо за источник ) Kosten 14 Октября 2017 21:53² 0 Чужой труд нужно уважать, просто в описание прочел, что вы выставили его на конструктор, потому и написал, что идея ваша. admin8242 05 Ноября 2019 07:32³ 0 Доброго времени суток! Не могу разобраться, где изменить код HTML, в каком именно шаблоне. Пожалуйста, подскажите Kosten 05 Ноября 2019 09:38⁴ 0 А что именно вам нужно в этом вид материале изменить? admin8242 05 Ноября 2019 11:53⁵ 0 Я самоучка и не могу понять, куда именно ставить код <div data-item-category="steam" class="viewn"> <div class="viewn-link"><a href="$ENTRY_URL$"></a></div> <div class="viewn-rub"><span>$AUTHOR_EMAIL$.</span>$AUTHOR_EMAIL$ Деньги в руб.</div> <div class="viewn-images"><img src="$IMG_URL1$"width="450" height="100" alt=""></div> <div class="viewn-name ellipsis">$TITLE$</div> </div> Пробовала в: Главная страница магазина Каталог товаров Вид товара в каталоге Kosten 05 Ноября 2019 16:13⁶ 0 Вид материалов, это не главная, на счет раздела товаров, возможно там по другому называется. admin8242 07 Ноября 2019 07:28⁸ 0 Спасибо! -SAM- 05 Ноября 2019 23:45⁷ 0 Это для сайтов uCoz, где не задействован модуль интернет-магазина. Просто в качестве магазина выступает другой модуль... цена за товар указывается в поле e-mail автора (можно активировать дополнительное поле и заполнять туда; у кого интернет-магазин, то придётся подставлять переменные от этого модуля... а цена там в коде два раза, так как первый раз должно идти и быть перечеркнуто, а после идёт цена со скидкой). Код прописывается в шаблон вида материалов выбранного модуля. Шаблон вида материалов Steam-Extra для uCoz Нет там авторства milan_shubin и его сайта. "Труд" - смешно, рипнуть нормально и подать не смогли в очередной раз (в этом и авторство, что не он сделал). Это коряво адаптированный или рипнутый код, с довесками (идут стили, которые вовсе не используются в виде материала). Собственно, код взят из шаблона по продаже ключей Steam, вот (пусть не смущают скрины и описание материала того - они там от другого шаблона, как и написал в комментарии; если глянуть скрины шаблона этого на другом сайте, то всё очевидно). admin8242 07 Ноября 2019 07:28⁹ 0 Спасибо!