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

[РЕШЕНО] Как сделать разные стили цены для видов list и grid в category.tpl

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

Здравствуйте. Не могу понять принцип работы скрипта, который выводит товары в виды grid и list. В php вообще ничего не смыслю.

Итак, есть вид grid, в котором меня все устраивает:

Изображение

Но если переключиться на list, то товар с акцией получается перекошенным:

Изображение

Необходимо:

1. Сделать чтобы после старой цены был перенос на новую строку (br) новой цены. Когда пытаюсь менять div price в category.tpl, отображение цены меняется и в виде grid.

2. Поменять стиль для картинки с акцией так, чтобы она была на изображении товара, по аналогии с видом grid. (Но тут я думаю принцип тот же, что и в пункте 1, мне главное понять логику.)

3. Поменять стиль для рейтинга, чтобы он залезал на картинку по аналогии с видом grid. (Если пойму логику - сам сделаю)

Помогите пожалуйста разобраться, файл category.tpl прикрепляю.

category.zip

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


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

Здравствуйте. Не могу понять принцип работы скрипта, который выводит товары в виды grid и list. В php вообще ничего не смыслю.

Итак, есть вид grid, в котором меня все устраивает:

Изображение

Но если переключиться на list, то товар с акцией получается перекошенным:

Изображение

Необходимо:

1. Сделать чтобы после старой цены был перенос на новую строку (br) новой цены. Когда пытаюсь менять div price в category.tpl, отображение цены меняется и в виде grid.

2. Поменять стиль для картинки с акцией так, чтобы она была на изображении товара, по аналогии с видом grid. (Но тут я думаю принцип тот же, что и в пункте 1, мне главное понять логику.)

3. Поменять стиль для рейтинга, чтобы он залезал на картинку по аналогии с видом grid. (Если пойму логику - сам сделаю)

Помогите пожалуйста разобраться, файл category.tpl прикрепляю.

Тут нужно верстку смотреть, ссылку на сайт!

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


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

Вроде list и grid в таблице стилей.

  • +1 1

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


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

Вроде list и grid в таблице стилей.

Спасибо, некоторые элементы подвинул, осталась проблема с ценой:

Изображение

В category.tpl такая картина:

Наверху идет код:

	  <?php if ($product['price']) { ?>
	  <div class="price">
		<?php if (!$product['special']) { ?>
		<?php echo $product['price']; ?>
		<?php } else { ?>
		<span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
		<?php } ?>
		<?php if ($product['tax']) { ?>
		<br />
		<span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
		<?php } ?>
	  </div>
	  <?php } ?>

Ниже скрипт, который выводит div price в список:

if (price != null) {
				html += '<div class="price" style="margin-bottom:10px;">' + price + '</div>';
			}

Если менять верхний код и добавлять вместо nbsp тег br вот в этом месте:

<span class="price-old"><?php echo $product['price']; ?></span>    <span class="price-new"><?php echo $product['special']; ?>

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

Вопрос: Как это реализовать? В php не шарю и все мои чаяния оказались бесполезными, надеюсь на вашу помощь, друзья.

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


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

Здесь не php, а javascript :) Тут надо писать функцию, которая бы вставляла тег переноса или правила классы.

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


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

Как?)

А ссылка есть на сайт?

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


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

Выше ссылка есть http://maoshop.ru

Что бы перенести цену на вторую строку нужно зайти в файл

catalogviewthemedefaulttemplateproductcategory.tpl

найти строки и вставить <br> выделил жирным где.

<div class="price">

<?php if (!$product['special']) { ?>

<?php echo $product['price']; ?>

<?php } else { ?>

<span class="price-old"><?php echo $product['price']; ?></span><br><span class="price-new"><?php echo $product['special']; ?></span>

а если поменять местами <span class="price-new"><?php echo $product['special']; ?></span><br><span class="price-old"><?php echo $product['price']; ?></span> то сразу будет новая цена, а ниже старая перечеркнутая

Я бы еще кнопку купить с ценой куда-то подвинул, может даже влево, а то справа ее не замечаешь. Люди просмтривают по такому принципу слева направо сверху вниз.

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


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

Так в том то и дело, что когда я так делаю, вторая цена переносится на новую строчку в обоих видах.

А мне нужно, чтобы в виде Grid цены были в одну строку, а в виде List в две.

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


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

Все оказалось чертовски просто.

Добавляем в css:

.product-grid .price br{
display:none;
}
И все! :)
  • +1 2

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


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

а у меня наоборот grid отображается как попало, каждый товар в прилипку к друг другу.

тс как ты организовал на сайте старую цену?

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


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

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

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

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

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

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

Войти

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

Войти

  • Похожий контент

    • От Jolly1371
      Здравствуйте.
       
      Помогите пожалуйста.
       
      В стандартном шаблоне в файле category.tpl есть скрипт, который выводит товары по одному и по несколько блоков.  Вот код: 
      <?php echo $header; ?> <div class="container"> <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="row"> <?php echo $column_left; ?> <?php if ($column_left && $column_right) { ?> <?php $class = 'col-sm-6'; ?> <?php } elseif ($column_left || $column_right) { ?> <?php $class = 'col-sm-9'; ?> <?php } else { ?> <?php $class = 'col-sm-12'; ?> <?php } ?> <div id="content" class="<?php echo $class; ?>"> <h1><?php echo $heading_title; ?></h1> <?php echo $content_top; ?> <?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 } ?> </div> <?php } ?> <?php if ($categories) { ?> <div class="box"> <!--<div class="box-heading"><?php echo $text_refine; ?></div>--> <!--<div class="box-content">--> <div class="box-product box-subcat row"> <?php foreach ($categories as $category) { ?> <div class="col-md-3 col-sm-3 col-xs-12"> <?php if ($category['thumb']) { ?> <div class="image-category"><a href="<?php echo $category['href']; ?>"><img src="<?php echo $category['thumb']; ?>" alt="<?php echo $category['name']; ?>" /></a></div> <?php } ?> <div class="name subcatname"><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></div> </div> <?php } ?> </div> </div> </div> <?php } ?> <?php if ($products) { ?> <div class="product-filters row"></div> <div class="show-filter hidden-sm hidden-md hidden-lg"><a href="#" onclick="toggleFilter();return false;">Показать фильтр</a></div> <div class="product-filter row"> <div class="product-compare col-md-3"><a href="<?php echo $compare; ?>" id="compare_total"><?php echo $text_compare; ?></a></div> <div class="limit col-md-3 text-right"><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="sort col-md-5 text-right"><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 class="display col-md-1"><?php echo $text_list; ?><a onclick="display('grid');"><?php echo $text_grid; ?></a></div> </div> <div class="row products"> <?php $i = 1; ?> <?php foreach ($products as $product) { ?> <?php if ($i == 7 ) { ?> <div class="rozetka col-lg-4 col-md-4 col-sm-4 col-xs-12"><?php echo $content_category_rozetka; ?></div> <?php } ?> <div class="product-list col-xs-12 <?php if($product['quantity'] == 0) { ?>grey<?php } ?>" <?php if($product['quantity'] == 0) { ?>data-grey="grey"<?php } ?>> <div class="name"><a href="<?php echo $product['href']; ?>"><? if(isset($product_prefics)) { echo $product_prefics;} ?> <?php echo $product['name']; ?></a></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 } ?> <?php if ($product['price'] && (int)$product['price'] > 0) { ?> <div class="detail"> <div class="price"> <?php if (!$product['special']) { ?> <span class="price-normal"><?php echo $product['price']; ?></span> <?php } else { ?> <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span> <?php } ?> <?php if ($product['tax']) { ?> <br /> <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span> <?php } ?> <div class="pull-right"> <div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div> </div> </div> <?php } ?> <div class="button-group"> <? if($product['quantity'] > 0) { ?> <button type="button" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button cart"><span><i class="fa fa-shopping-bag" aria-hidden="true"></i> <?php echo $button_cart; ?></span></button> <? } else { ?> <button type="button" onclick="addToWaitList('<?php echo $product['product_id']; ?>');" class="button cart"><span>Сообщить о наличии</span></button> <?php } ?> <button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="addToWishList('<?php echo $product['product_id']; ?>');" class="wishlist" data-original-title="<?php echo $button_wishlist; ?>"><i class="fa fa-heart"></i></button> <button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="addToCompare('<?php echo $product['product_id']; ?>');" class="compare" data-original-title="<?php echo $button_compare; ?>"><i class="fa fa-exchange"></i></button> </div> </div> <div class="description"><?php echo $product['description']; ?></div> </div> <?php $i++; ?> <?php } ?> </div> <div class="pagination"><?php echo $pagination; ?></div> <?php } ?> <?php echo $content_bottom; ?> <?php if ($description) { ?> <?php echo $description; ?> <?php } ?> </div> <script type="text/javascript"><!-- function display(view) { if (view == 'list') { $('.product-grid').attr('class', 'product-list col-sm-12'); $('.product-list').each(function(index, element) { if (typeof($(element).attr('data-grey')) !== 'undefined') { $(element).addClass('grey'); } html = '<div class="col-xs-12 col-sm-3 col-md-3">'; var image = $(element).find('.image').html(); if (image != null) { html += '<div class="image">' + image + '</div>'; } html += '</div>'; html += '<div class="col-xs-12 col-sm-5 col-md-5 text-left">'; html += ' <div class="name">' + $(element).find('.name').html() + '</div>'; html += ' <div class="description">' + $(element).find('.description').html() + '</div>'; html += '</div>'; html += '<div class="col-xs-12 col-sm-4 col-md-4">'; var price = $(element).find('.price').html(); if (price != null) { html += '<div class="price">' + price + '</div>'; } var rating = $(element).find('.price').html(); html += ' <div class="button-group">' + $(element).find('.button-group').html() + '</div>'; html += '</div>'; $(element).html(html); }); $('.display').html('<?php echo $text_list; ?><a onclick="display(\'grid\');"><?php echo $text_grid; ?></a>'); $.cookie('display', 'list'); } else { $('.product-list').attr('class', 'product-grid col-lg-4 col-md-4 col-sm-4 col-xs-12'); $('.product-grid').each(function(index, element) { if (typeof($(element).attr('data-grey')) !== 'undefined') { $(element).addClass('grey'); } html = ''; var image = $(element).find('.image').html(); if (image != null) { html += '<div class="image">' + image + '</div>'; } html += ' <div class="name">' + $(element).find('.name').html() + '</div>'; var price = $(element).find('.price').html(); if (price != null) { html += '<div class="price">' + price + '</div>'; } var rating = $(element).find('.price').html(); html += ' <div class="button-group">' + $(element).find('.button-group').html() + '</div>'; html += ' <div class="description">' + $(element).find('.description').html() + '</div>'; $(element).html(html); }); $('.display').html('<a onclick="display(\'list\');"><?php echo $text_list; ?></a><?php echo $text_grid; ?>'); $.cookie('display', 'grid'); } } view = $.cookie('display'); if (view) { display(view); } else { display('grid'); } //--></script> </div> <?php echo $column_right; ?></div> </div> <?php echo $footer; ?> Вопрос в том, что не знаю как поменять звездочки с кнопкой местами, там где три блока, так как там все в js. 
      это класс product-grid. 
       
      product-list написан на html, его поменять не сложно, но он должен оставаться по одному товару в ряд.
       
      Вот скриншоты: http://prntscr.com/he9jb1 , http://prntscr.com/he9kk3
    • От ark745
      Здравствуйте уважаемые форумчане!
      Прошу вашей помощи.
      Делаю себе интернет магазин на opencart 2.3.0.2. Возникла необходимость переместить описание категорий под товары, чтобы пользователь сначала видел товары. На просторах интернета нашел советы как это сделать, нужно поковыряться в коде файла category.tpl. В общем что-то неполучалось, переносил блоки и правил код, все бестолку. И тут увидел на одном из форумов по опенкарту, что нужно подчистить логи и модификаторы, тогда изменения вступят в силу. Что я успешно сделал. И у меня обвалился сайт, выдает 500 ошибку.
      Залез в логи ошибок хостинга, увидел, что есть синтаксические ошибки в header.tpl и category.tpl. Разобрался с header.tpl сайт заработал, но меню и категории не работают. Ошибка 500.
      Залез в лог ошибка:
      PHP Parse error: syntax error, unexpected end of file in remgidromaster.com.ua/public_html/catalog/view/theme/fastor/template/product/category.tpl on line 262\n', referer: http://remgidromaster.com.ua/ Уже второй день мучаю файл category.tpl не могу понять, что за ошибка. В PHP не разбираюсь. Помогите разобраться что не так.
      Пробывал в различных валидаторах, вставлять по блокам, ошибка появляется, когда начиная с конца кода доходишь до этого блока.
          <!-- Product -->
            <div>
                <div class="row">
                    <div class="image col-sm-3">
                        <?php if($product['special'] && $theme_options->get( 'display_text_sale' ) != '0') { ?>
                            <?php $text_sale = 'Sale';
                            if($theme_options->get( 'sale_text', $config->get( 'config_language_id' ) ) != '') {
                                $text_sale = $theme_options->get( 'sale_text', $config->get( 'config_language_id' ) );
                            } ?>
                            <?php if($theme_options->get( 'type_sale' ) == '1') { ?>
                            <?php $product_detail = $theme_options->getDataProduct( $product['product_id'] );
                            $roznica_ceny = $product_detail['price']-$product_detail['special'];
                            $procent = ($roznica_ceny*100)/$product_detail['price']; ?>
                            <div class="sale">-<?php echo round($procent); ?>%</div>
                            <?php } else { ?>
                            <div class="sale"><?php echo $text_sale; ?></div>
                            <?php } ?>
                        <?php if($theme_options->get( 'display_text_new' ) != '0' && $theme_options->isLatestProduct( $product['product_id'] )) { ?>                     
       
      category.tpl
    • От Orlanov
      Здравствуйте, помогите разобраться с куском javascript кода в файле ../../template/product/category.tpl
      Предназначен он для замены стилей (насколько я понял) когда выбираем вид отображения(сетка/витрина) каталога с товарами.
      Вот сам код:
      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 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); }); $('.display').html('<b><?php echo $text_display; ?></b> <?php echo $text_list; ?> <b>/</b> <a onclick="display(\'grid\');"><?php echo $text_grid; ?></a>'); $.cookie('display', 'list'); } else { $('.product-list').attr('class', 'product-grid'); $('.product-grid > div').each(function(index, element) { html = ''; var image = $(element).find('.image').html(); 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="wishlist">' + $(element).find('.wishlist').html() + '</div>'; html += '<div class="compare">' + $(element).find('.compare').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; ?>'); $.cookie('display', 'grid'); } } view = $.cookie('display'); if (view) { display(view); } else { display('list'); } //--></script> Если возможно прокаментируйте в коде основные моменты.
  • Последние посетители   0 пользователей онлайн

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

×