Jump to content
Sign in to follow this  
alinalessioYandex

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

Recommended Posts

В файле 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

 

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

Share this post


Link to post
Share on other sites

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

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

.product-list > div

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
		$('.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" не забывая +=

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Ну...

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

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

один для list

другой для grid

 

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

 

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Исходный код

<div>

<div custom>

<div2>

<div3>

после list

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

после grid

<div>

<div2>

<div3>

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

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Добавил дивы как в 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; ?>

 

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

Share this post


Link to post
Share on other sites

[РЕШЕНО]

 

Решение как и описывал 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> 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.