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    70

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Tom    2 090

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Tom    2 090

Что за шаблон?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

да я редактирую стандартный под себя

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Baco    395

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

<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 {
...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

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

<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    2 090

,

.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;
}

,

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

ну или подскажите, как прописать в файле, чтобы сразу применялся вывод "grid"??( очень нужно(

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Кому интересно:

 

if (view) {

display(view);
} else {
display('grid');
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу