Перейти к содержанию
alinalessioYandex

Не добавляется div внутрь <div class="product-list">

Рекомендуемые сообщения

В файле catalog\view\theme\flowershop\template\product\category.tpl

в этом месте:

<div class="product-list">
    <?php foreach ($products as $product) { ?>
    <div>
      <?php if ($product['thumb']) { ?>

хочу добавить <div class="spacer"> внуртри <div>, чтобы получилось так:

<div class="product-list">
    <?php foreach ($products as $product) { ?>
    <div>
	<div class="spacer">
      <?php if ($product['thumb']) { ?>

Проблема в том, что несмотря на то, что в шаблон новый див я добавил, браузер его не видит.

Вот так генерируется этот кусок кода:

d0a1d0bdd0b8d0bcd0bed0ba103.png

 

Вопрос: Как правильно добавить дополнительный див внутри дива товара?

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


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

Если посмотрите код страницы, то ваш код там присутствует

Но в шаблоне есть скрипт под названием display(). Вот он и переписывает

.product-list > div

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


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

Похоже вы правы. Я пытался добавить изменения в этот скрипт, но синтексис не знаю.

Подскажите пожалуйста как добавить этот див и в скрипт тоже.

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


Ссылка на сообщение
Поделиться на другие сайты
		$('.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 price = $(element).find('.price').html();
			
			if (price != null) {
				html += '<div class="price">' + price  + '</div>';
			}
					
			html += '  <div class="name">' + $(element).find('.name').html() + '</div>';
			html += '  <div class="description">' + $(element).find('.description').html() + '</div>';
			
			var rating = $(element).find('.rating').html();
			
			if (rating != null) {
				html += '<div class="rating">' + rating + '</div>';
			}
				
			html += '</div>';
						
			$(element).html(html);

Теперь...

есть переменная html и в ней находится все разметка  заново сгенерированного кода

Попробуйте "объединить" все html по принципу "один html - одна строка" и вы увидите готовый код, Добавив нужный блок в нужное место

и сделав обратное

"один строка - одна html" не забывая +=

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


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

chukcha, Спасибо. Помогло

 

Но нужно решить еще одну проблему. Помогите пожалуйста.

 

Сейчас сделал так, что <div class="spacer"> добавляется только при обновлении страницы, если стоит "Список", но стоит переключиться на "Сетка" и вернуться на "Список", как исходный код показывает, что этого дива уже нет.

 

Сделал так:

Вместо строчек:

<div class="product-list">
    <?php foreach ($products as $product) { ?>
<div>

добавил еще один открывающий div с классом spacer и добавил класс к div без класса. Получилось:

<div class="product-list">
    <?php foreach ($products as $product) { ?>
    <div class="product_category">
	<div class="spacer">

Ниже строк

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

 

В скрипте, который ниже изменил это:

<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">';
			var price = $(element).find('.price').html();

на это:

<script type="text/javascript"><!--
function display(view) {
	if (view == 'list') {
		$('.product-grid').attr('class', 'product-list');
		
		$('.product-list > div.product_category').each(function(index, element) {
			html += '<div class="spacer">';
			html  = '<div class="right">';
			var price = $(element).find('.price').html();

в этом месте добавил закрывающий </div>

if (rating != null) {
				html += '<div class="rating">' + rating + '</div>';
			}
				
			html += '</div>';
			html += '</div>';			
			$(element).html(html);
		});	

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


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

Ну...

так посмотри чуть ниже в код скрипта

В скрипте два блока

один для list

другой для grid

 

по аналогии...

 

Не ничего страшного сложного

 

Глаза боятся - руки делают.

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


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

grid впорядке. Дело в том, что пока стоит list див есть, но когда переключаюсь на grid дива нет, но в grid его и не должно быть. Потом после grid снова перехожу на list и тут уже и в list нет этого дива.

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


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

так понятно... его ж неоткуда брать...

вот смотрите...

Исходный код

<div>

<div custom>

<div2>

<div3>

после list

он остается почти таким же, возможно, видоизмененным

после grid

<div>

<div2>

<div3>

custom пропадает из dom

и вы переключаетесь в в list

а там требуется custom, но, увы, его нет

поэтому и для grid его нужно "прятать"

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


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

Ага, понятно. Прописать и в grid тоже, но стилями его не показывать? Спасибо. Попробую. 

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


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

Добавил дивы как в list так и в grid. После чего исходный код действительно показывает нужные дивы и там и там, но после переключения с list на grid и обратно нужный див снова исчезает.
 
Посмотрите пожалуйста вот сайт: http://unionflowers.reklama-dinamit.ru/index.php?route=product/category&path=59
Вот страница category.tpl

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>
<div id="content"><?php echo $content_top; ?>
  <div class="breadcrumb">
    <?php foreach ($breadcrumbs as $breadcrumb) { ?>
    <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
    <?php } ?>
  </div>
  <div class="content-indent">
  <h1><?php echo $heading_title; ?></h1>
  <?php if ($thumb || $description) { ?>
  <div class="category-info">
    <?php if ($thumb) { ?>
    <div class="image"><img src="<?php echo $thumb; ?>" alt="<?php echo $heading_title; ?>" /></div>
    <?php } ?>
    <?php if ($description) { ?>
    <div class="category_description"><?php echo $description; ?></div>
    <?php } ?>
  </div>
  <?php } ?>
  <?php if ($categories) { ?>
  <h2><?php echo $text_refine; ?></h2>
  <div class="category-list">
    <?php if (count($categories) <= 5) { ?>
    <ul>
      <?php foreach ($categories as $category) { ?>
      <li><a href="<?php echo $category['href']; ?>"><img src="<?php echo $category['thumb']; ?>"><span><?php echo $category['name']; ?></a></span></li>
      <?php } ?>
    </ul>
    <?php } else { ?>
    <?php for ($i = 0; $i < count($categories);) { ?>
    <ul>
      <?php $j = $i + ceil(count($categories) / 4); ?>
      <?php for (; $i < $j; $i++) { ?>
      <?php if (isset($categories[$i])) { ?>
      <li><a href="<?php echo $categories[$i]['href']; ?>"><img src="<?php echo $categories[$i]['thumb']; ?>"><span><?php echo $categories[$i]['name']; ?></span></a></li>
      <?php } ?>
      <?php } ?>
    </ul>
    <?php } ?>
    <?php } ?>
  </div>
  <?php } ?>
  <?php if ($products) { ?>
  <div class="product-filter">
    <div class="display"><b><?php echo $text_display; ?></b> <?php echo $text_list; ?> <b>/</b> <a onclick="display('grid');"><?php echo $text_grid; ?></a></div>
    <div class="limit"><b><?php echo $text_limit; ?></b>
      <select onchange="location = this.value;">
        <?php foreach ($limits as $limits) { ?>
        <?php if ($limits['value'] == $limit) { ?>
        <option value="<?php echo $limits['href']; ?>" selected="selected"><?php echo $limits['text']; ?></option>
        <?php } else { ?>
        <option value="<?php echo $limits['href']; ?>"><?php echo $limits['text']; ?></option>
        <?php } ?>
        <?php } ?>
      </select>
    </div>
    <div class="product-compare"><a href="<?php echo $compare; ?>" id="compare-total"><?php echo $text_compare; ?></a></div>
    <div class="sort"><b><?php echo $text_sort; ?></b>
      <select onchange="location = this.value;">
        <?php foreach ($sorts as $sorts) { ?>
        <?php if ($sorts['value'] == $sort . '-' . $order) { ?>
        <option value="<?php echo $sorts['href']; ?>" selected="selected"><?php echo $sorts['text']; ?></option>
        <?php } else { ?>
        <option value="<?php echo $sorts['href']; ?>"><?php echo $sorts['text']; ?></option>
        <?php } ?>
        <?php } ?>
      </select>
    </div>
  </div>
  <div class="product-list">
    <?php foreach ($products as $product) { ?>
    <div>
    <div class="spacer">
      <?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 } ?>
      <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
      <div class="description"><?php echo $product['description']; ?></div>
      <?php if ($product['price']) { ?>
      <div class="price">
        <?php if (!$product['special']) { ?>
        <?php echo $product['price']; ?>
        <?php } else { ?>
        <span class="price-new"><?php echo $product['special']; ?></span> <span class="price-old"><?php echo $product['price']; ?></span>
        <?php } ?>
        <?php if ($product['tax']) { ?>
        <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>
      <?php } ?>
      <div class="cart">
        <input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" />
      </div>
      <div class="podrobnee"><a href="<?php echo $product['href']; ?>">Подробнее</a></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>
    </div>
    <?php } ?>
  </div>
  <div class="pagination"><?php echo $pagination; ?></div>
  <?php } ?>
  <?php if (!$categories && !$products) { ?>
  <div class="content"><?php echo $text_empty; ?></div>
  <div class="buttons">
    <div class="right"><a href="<?php echo $continue; ?>" class="button"><?php echo $button_continue; ?></a></div>
  </div>
  <?php } ?>
  <?php echo $content_bottom; ?></div></div>
<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="spacer">';
            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 price = $(element).find('.price').html();
            
            if (price != null) {
                html += '<div class="price">' + price  + '</div>';
            }
                    
            html += '  <div class="name">' + $(element).find('.name').html() + '</div>';
            html += '  <div class="description">' + $(element).find('.description').html() + '</div>';
            html += '<div class="podrobnee">' + $(element).find('.podrobnee').html() + '</div>';
            
            var rating = $(element).find('.rating').html();
            
            if (rating != null) {
                html += '<div class="rating">' + rating + '</div>';
            }
                
            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 {
        $('.product-list').attr('class', 'product-grid');
        
        $('.product-grid > div').each(function(index, element) {
            
            html = '';
            
            var image = $(element).find('.image').html();
            html += '<div class="spacer">';
            if (image != null) {
                html += '<div class="image">' + image + '</div>';
            }
            
            html += '<div class="name">' + $(element).find('.name').html() + '</div>';
            html += '<div class="description">' + $(element).find('.description').html() + '</div>';
            
            var price = $(element).find('.price').html();
            
            if (price != null) {
                html += '<div class="price">' + price  + '</div>';
            }
            
            var rating = $(element).find('.rating').html();
            
            if (rating != null) {
                html += '<div class="rating">' + rating + '</div>';
            }
                        
            html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
            html += '<div class="podrobnee">' + $(element).find('.podrobnee').html() + '</div>';
            //html += '<div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
            //html += '<div class="compare">' + $(element).find('.compare').html() + '</div>';
            
            html += '</div>';
            
            $(element).html(html);
        });    
                    
        $('.display').html('<b><?php echo $text_display; ?></b> <a onclick="display(\'list\');"><?php echo $text_list; ?></a> <b>/</b> <?php echo $text_grid; ?>');
        
        $.totalStorage('display', 'grid');
    }
}

view = $.totalStorage('display');

if (view) {
    display(view);
} else {
    display('list');
}
//--></script>
<?php echo $footer; ?>

 

Посмотрите пожалуйста, почему див исчезает при переключении?

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


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

[РЕШЕНО]

 

Решение как и описывал chukcha

Проблемы были в том, что не туда вставил дополнительный див для grid

 

Вот код скрипта с добавиленым div-ом, который работает и для list и для grid.

<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="spacer">';			html  += '<div class="right">';			var price = $(element).find('.price').html();						if (price != null) {				html += '<div class="price">' + price  + '</div>';			}			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>';									var image = $(element).find('.image').html();						if (image != null) { 				html += '<div class="image">' + image + '</div>';			}			html += '<div class="left">';								html += '  <div class="name">' + $(element).find('.name').html() + '</div>';			html += '  <div class="description">' + $(element).find('.description').html() + '</div>';			html += '<div class="podrobnee">' + $(element).find('.podrobnee').html() + '</div>';						var rating = $(element).find('.rating').html();						if (rating != null) {				html += '<div class="rating">' + rating + '</div>';			}							html += '</div>';			html += '</div>';									$(element).html(html);		});						$('.display').html('<b><?php echo $text_display; ?></b> <div id="list_a"><?php echo $text_list; ?></div> <b>/</b> <a id="grid_b" onclick="display(\'grid\');"><?php echo $text_grid; ?></a>');				$.totalStorage('display', 'list'); 	} else {		$('.product-list').attr('class', 'product-grid');				$('.product-grid > div').each(function(index, element) {						html = '';						var image = $(element).find('.image').html();			html += '<div class="spacer">';			if (image != null) {				html += '<div class="image">' + image + '</div>';			}						html += '<div class="name">' + $(element).find('.name').html() + '</div>';			html += '<div class="description">' + $(element).find('.description').html() + '</div>';						var price = $(element).find('.price').html();						if (price != null) {				html += '<div class="price">' + price  + '</div>';			}						var rating = $(element).find('.rating').html();						if (rating != null) {				html += '<div class="rating">' + rating + '</div>';			}									html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';			html += '<div class="podrobnee">' + $(element).find('.podrobnee').html() + '</div>';			//html += '<div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';			//html += '<div class="compare">' + $(element).find('.compare').html() + '</div>';						html += '</div>';						$(element).html(html);		});								$('.display').html('<b><?php echo $text_display; ?></b> <a id="list_b" onclick="display(\'list\');"><?php echo $text_list; ?></a> <b>/</b> <div id="grid_a"><?php echo $text_grid; ?></div>');				$.totalStorage('display', 'grid');	}}view = $.totalStorage('display');if (view) {	display(view);} else {	display('list');}//--></script> 

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


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

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

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

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

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

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

Войти

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

Войти

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

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

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.