Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

[Решено] Помогите оптимизировать код?)

danilsitnikov

Автор: ,
в Загальні питання

 Share

Recommended Posts

danilsitnikov Community Regular

danilsitnikov

Опубліковано:
Опубліковано:

У меня  товары выводятся следующим образом: скрин ниже)

 

 

В Css коде  я это все сделал... Но меня не устраивает отображение... Как-то вобще не айс...

Как мне сделать чтобы продукт выводился вот так:

Название

картинка

Цена

Купить

??

Я пробовал, но ничего не выходит(

  <div class="product-list">
    <?php foreach ($products as $product) { ?>
    <div>
      <?php if ($product['thumb']) { ?>
      <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
      <?php } ?><br/>
      <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div><br/>
      <div class="description"><?php echo $product['description']; ?></div><br/>
      <?php if ($product['price']) { ?>
      <div class="price"><br/>
        <?php if (!$product['special']) { ?>
        <?php echo $product['price']; ?><br/>
        <?php } else { ?>
        <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span><br/>
        <?php } ?>
        <?php if ($product['tax']) { ?><br/>
        <br />
        <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
        <?php } ?>
      </div>
      <?php } ?>
      <?php if ($product['rating']) { ?>
      <div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div><br/>
      <?php } ?>
      <div class="cart">
        <input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" />
      </div>
      <div class="wishlist"><a onclick="addToWishList('<?php echo $product['product_id']; ?>');"><?php echo $button_wishlist; ?></a></div>
      <div class="compare"><a onclick="addToCompare('<?php echo $product['product_id']; ?>');"><?php echo $button_compare; ?></a></div>
    </div>
    <?php } ?>
  </div>

post-667390-0-85864500-1387707897_thumb.png

Надіслати
Поділитися на інших сайтах

xds Veteran

xds

Опубліковано:
Опубліковано:

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

Надіслати
Поділитися на інших сайтах
1

Tom Grand Master

Tom

Опубліковано:
Опубліковано:

Всё это  в большинстве случаев правится стилями.Хотите получить ответ,крепите ссылку на магазин.

Надіслати
Поділитися на інших сайтах
1
1

Baco Grand Master

Baco

Опубліковано:
Опубліковано:

Вам тут править правильность отображения надо:

<script type="text/javascript"><!--
function display(view) {
	if (view == 'list') {
		$('.product-grid').attr('class', 'product-list');
		
		$('.product-list > div').each(function(index, element) {
			html  = '<div class="right">';
			html += '  <div class="cart">' + $(element).find('.cart').html() + '</div>';
			html += '  <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
			html += '  <div class="compare">' + $(element).find('.compare').html() + '</div>';
			html += '</div>';			
			
			html += '<div class="left">';
			
			var image = $(element).find('.image').html();
			
			if (image != null) { 
				html += '<div class="image">' + image + '</div>';
			}
			
			var rating = $(element).find('.rating').html();
			
			if (rating != null) {
				html += '<div class="rating">' + rating + '</div>';
			}
			
			var price = $(element).find('.price').html();
			
			if (price != null) {
				html += '<div class="price">' + price  + '</div>';
			}
					
			html += '<h3 class="name">' + $(element).find('.name').html() + '</h3>';
			html += '<div class="description" unselectable="on" oncopy="return false" oncontextmenu="return false" onselectstart="return false">' + $(element).find('.description').html() + '</div>';
			

				
			html += '</div>';
						
			$(element).html(html);
		});		
		
		$('.display').html('<b><?php echo $text_display; ?></b> <?php echo $text_list; ?> <b>/</b> <a onclick="display(\'grid\');"><?php echo $text_grid; ?></a>');
		
		$.totalStorage('display', 'list'); 
	} else {
...
Надіслати
Поділитися на інших сайтах
1

danilsitnikov Community Regular

danilsitnikov

Опубліковано:
  • Автор
Опубліковано:

 

Вам тут править правильность отображения надо:

<script type="text/javascript"><!--
function display(view) {
	if (view == 'list') {
		$('.product-grid').attr('class', 'product-list');
		
		$('.product-list > div').each(function(index, element) {
			html  = '<div class="right">';
			html += '  <div class="cart">' + $(element).find('.cart').html() + '</div>';
			html += '  <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
			html += '  <div class="compare">' + $(element).find('.compare').html() + '</div>';
			html += '</div>';			
			
			html += '<div class="left">';
			
			var image = $(element).find('.image').html();
			
			if (image != null) { 
				html += '<div class="image">' + image + '</div>';
			}
			
			var rating = $(element).find('.rating').html();
			
			if (rating != null) {
				html += '<div class="rating">' + rating + '</div>';
			}
			
			var price = $(element).find('.price').html();
			
			if (price != null) {
				html += '<div class="price">' + price  + '</div>';
			}
					
			html += '<h3 class="name">' + $(element).find('.name').html() + '</h3>';
			html += '<div class="description" unselectable="on" oncopy="return false" oncontextmenu="return false" onselectstart="return false">' + $(element).find('.description').html() + '</div>';
			

				
			html += '</div>';
						
			$(element).html(html);
		});		
		
		$('.display').html('<b><?php echo $text_display; ?></b> <?php echo $text_list; ?> <b>/</b> <a onclick="display(\'grid\');"><?php echo $text_grid; ?></a>');
		
		$.totalStorage('display', 'list'); 
	} else {
...

я не особо "шарю" в JS... Я больше в PHP и CSS... быть может поожете мне?)

Надіслати
Поділитися на інших сайтах

Tom Grand Master

Tom

Опубліковано:
Опубліковано:

,

.product-grid {
width: 100%;
}
.product-grid > div {
background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 9px 9px 9px 9px;
    display: inline-table;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
    padding: 8px 8px 38px;
    position: relative;
    overflow: auto;
}
#column-left + #content .product-grid > div,
#column-right + #content .product-grid > div {
margin-bottom: 11px;
    width: 240px;
height: 220px;
}
#column-left + #column-right + #content .product-grid > div {
margin-right: 4px;
    width: 284px;
}
.product-grid .right {
float: right;
margin-left: 15px;
}
.product-grid .image {
float: left;
margin-right: 10px;
margin-bottom: 18px;
    position: relative;
}
#column-left + #content .product-grid > div {
    padding: 8px;
}
#column-left + #content .product-grid .image {
    margin-bottom: 30px;
}
#column-left + #column-right + #content .product-grid .image {
margin-right: 4px;
margin-bottom: 42px;
}
.product-grid .image img {
padding: 3px;
border: 1px solid #FFFFFF;
background: #FFFFFF;
position: relative;
    z-index: 9;
}
.product-grid .image .hov-image img {


}
.product-grid .name {
margin-bottom: 3px;
}
.product-grid .name a {
color: #000000;
    font-size: 14px;
    margin-bottom: 4px;
    text-align: center;
    text-decoration: none;
}
.product-grid .description {
color: #727272;
    font-size: 11px;
    line-height: 15px;
    margin-bottom: 5px;
    margin-top: 10px;
}
.product-grid .rating {
color: #7B7B7B;
}
.product-grid > div .price {
    bottom: 6px;
    color: #F60587;
    float: left;
    font-family: icon;
    font-size: 18px;
    margin-top: 15px;
    position: absolute;
    text-align: center;
    width: 178px;
}
#column-left + #content .product-grid > div .price,
#column-right + #content .product-grid > div .price {
margin-top: 18px;
    position: inherit;
    text-align: left;
width: auto;
}
#column-left + #column-right + #content .product-grid > div .price {
bottom: 15px;
    left: 0;
    position: absolute;
    text-align: center;
    width: 177px;
}
.product-grid .price-old {
color: #000000;
    font-size: 14px;
    text-decoration: line-through;
}
#column-left + #content .product-grid .price-old,
#column-right + #content .product-grid .price-old {
display: block;
}
#column-left + #column-right + #content .product-grid .price-old,
#column-left + #column-right + #content .product-grid .price-new {
display: inline;
}
.product-grid .price-new {


}
#column-left + #content .product-grid .price-new,
#column-right + #content .product-grid .price-new {
display: block;
}
.product-grid .price-tax {
font-size: 12px;
font-weight: normal;
color: #BBBBBB;
}
.product-grid .cart {
margin-bottom: 3px;
}
.product-grid .wishlist, .product-grid .compare {
margin-bottom: 3px;
display: none;
}
.product-grid .wishgrid {
float: left;
}
.product-grid .compare {
float: right;
}
.product-grid .wishlist a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}
.product-grid .compare a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left 60% no-repeat;
}

,

  • +1 1
Надіслати
Поділитися на інших сайтах
1
1

danilsitnikov Community Regular

danilsitnikov

Опубліковано:
  • Автор
Опубліковано:

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

Если я применю ваш CSS это чтото изменит?

Надіслати
Поділитися на інших сайтах

danilsitnikov Community Regular

danilsitnikov

Опубліковано:
  • Автор
Опубліковано:

с этим решен вопрос! Огромнейшее спасибо Вам, Том! Но еще один вопросик есть) Как сделать, чтобы при переходе на product/category сразу применялся стиль вывода grid?)

Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду