ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Вид материалов интернет магазина для 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 Просмотров: 1993 Комментариев: (9)

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

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

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

Комментарии: 9
milan_shubin
milan_shubin 14 Октября 2017 21:461
0
Спасибо за источник ) 09a
Kosten
Kosten 14 Октября 2017 21:532
0
Чужой труд нужно уважать, просто в описание прочел, что вы выставили его на конструктор, потому и написал, что идея ваша.
noavatar
admin8242 05 Ноября 2019 07:323
0
Доброго времени суток! Не могу разобраться, где изменить код HTML, в каком именно шаблоне. Пожалуйста, подскажите
Kosten
Kosten 05 Ноября 2019 09:384
0
А что именно вам нужно в этом вид материале изменить?
noavatar
admin8242 05 Ноября 2019 11:535
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
Kosten 05 Ноября 2019 16:136
0
Вид материалов, это не главная, на счет раздела товаров, возможно там по другому называется.
noavatar
admin8242 07 Ноября 2019 07:288
0
Спасибо!
-SAM-
-SAM- 05 Ноября 2019 23:457
0
Это для сайтов uCoz, где не задействован модуль интернет-магазина. Просто в качестве магазина выступает другой модуль... цена за товар указывается в поле e-mail автора (можно активировать дополнительное поле и заполнять туда; у кого интернет-магазин, то придётся подставлять переменные от этого модуля... а цена там в коде два раза, так как первый раз должно идти и быть перечеркнуто, а после идёт цена со скидкой). Код прописывается в шаблон вида материалов выбранного модуля.

Шаблон вида материалов Steam-Extra для uCoz
noavatar
admin8242 07 Ноября 2019 07:289
0
Спасибо!
avatar