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

alinalessioYandex · 4 грудня 2013

В файле 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']) { ?>

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

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

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

chukcha · 4 грудня 2013

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

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

.product-list > div

alinalessioYandex · 4 грудня 2013

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

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

chukcha · 4 грудня 2013

		$('.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" не забывая +=

alinalessioYandex · 5 грудня 2013

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

alinalessioYandex · 6 грудня 2013

Может кто-нибудь помочь? :)

chukcha · 6 грудня 2013

Ну...

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

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

один для list

другой для grid

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

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

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

alinalessioYandex · 6 грудня 2013

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

chukcha · 6 грудня 2013

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

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

Исходный код

<div>

<div2>

<div3>

после list

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

после grid

<div>

<div2>

<div3>

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

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

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

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

alinalessioYandex · 7 грудня 2013

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

alinalessioYandex · 8 грудня 2013

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

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

alinalessioYandex · 9 грудня 2013

[РЕШЕНО]

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

Вхід

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

Recommended Posts

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

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

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

Вхід

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

Покупцям

Розробникам

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

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

Important Information