Poner paginación abajo del listado de productos.

matutano · November 4, 2013

Hola, tengo una web en la que me gustaría poner la páginación debajo del listado de productos, ahora mismo está arriba, pero creo que para facilitar la navegación del usuario y por lo tanto su experiencia dentro de la página esta debería de estar en los dos lados. Tengo que decir que no se programar así que si alguien me lo puede explicar agradecería que lo explicara de una manera que lo pueda entender, gracias de antemano, saludos.

Por cierto la web es www.monigotes.es

nadie · November 4, 2013

Veo que usas una plantilla distinta a la de por defecto.

En tu fichero:

http://monigotes.es/themes/monigotes/category.tpl

Justo debajo de esto:

 {include file="./product-list.tpl" products=$products}

añade algo como esto:

 <div class="content_sortPagiBar">
                                <div class="sortPagiBar clearfix">
                                        {include file="./product-sort.tpl" paginationId='bottom'}
                                        {include file="./product-compare.tpl" paginationId='bottom'}
                                        {include file="./nbr-product-page.tpl" paginationId='bottom'}
                                </div>
                                {include file="./pagination.tpl" paginationId='bottom'}
                        </div>

matutano · November 4, 2013

Hola, gracias por contestar tan rápido, ¿con eso conseguiría duplicar la paginación que aparece arriba también abajo con el mismo estilo?, gracias.

nadie · November 4, 2013

Hola, gracias por contestar tan rápido, ¿con eso conseguiría duplicar la paginación que aparece arriba también abajo con el mismo estilo?, gracias.

Hola,

Lo que te he comentado, es como viene en la plantilla por defecto, para que se vean en la parte de abajo, prueba lo que te he comentado en tu plantilla, y a ver si ahí suerte y sale bien.

matutano · November 4, 2013

Hola, he estado buscando la línea de código que comentas y no viene en el archivo product-list.tpl, te adjunto lo que viene en este archivo:

{*
* 2007-2011 PrestaShop 
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2011 PrestaShop SA
*  @version  Release: $Revision: 8290 $
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}

{if isset($products)}
<!-- Products list -->
<div id="product_list_grid">
	<ul id="product_list" class="clear">
		{foreach from=$products item=product name=products}
		<li class="ajax_block_product">
			<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
				<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
			</a>
			<h3><a class="product_link" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|truncate:30:'...'|escape:'htmlall':'UTF-8'}</a></h3>		
			{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
				{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}
					<span class="price">
					{if !$priceDisplay}
						{convertPrice price=$product.price}
					{else}
						{convertPrice price=$product.price_tax_exc}
					{/if}
					</span>
				{/if}
				{*
				 
				{if isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
					<span class="price-discount">
					{if !$priceDisplay}
							{displayWtPrice p=$product.price_without_reduction}{else}{displayWtPrice p=$product.price_without_reduction_tax_exc}
					{/if}
					</span>
				{/if}
				*}
			{/if}
			{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}
				{if ($product.allow_oosp || $product.quantity > 0)}
					<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart.php')}?add&id_product={$product.id_product|intval}{if isset($static_token)}&token={$static_token}{/if}" title="{l s='comprar'}">{l s='comprar'}</a>
				{else}
					<span class="exclusive">{l s='comprar'}</span>
				{/if}
			{/if}
			<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="view_button" title="{$product.name|escape:'htmlall':'UTF-8'}">
				{l s='más info'}
			</a>
			
		</li>
		{/foreach}
	</ul>
</div>
<!-- /Products list -->
{/if}

Si puedes dime donde he de colocar la línea de código, y cual es, para poder tener la paginación debajo del listado de productos, gracias de nuevo.

nadie · November 4, 2013

(Sorry, que se me fue la mano, he corregido mi mensaje de arriba)

Hablo de fichero:

/themes/plantilla/category.tpl

Es decir, en tu caso:

http://monigotes.es/themes/monigotes/category.tpl

matutano · November 5, 2013

Hola, gracias de nuevo, he intentado lo que comentas y no me sale la paginación debajo del listado de productos, he modificado el archivo category.tpl. Te adjunto tal y como lo he puesto:

{*
* 2007-2011 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2011 PrestaShop SA
*  @version  Release: $Revision: 8544 $
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}

{include file="$tpl_dir./breadcrumb.tpl"}
{include file="$tpl_dir./errors.tpl"}

{if isset($category)}
	{if $category->id AND $category->active}

		{if $products}
			<div id="category-command-bar">
				<span class="category-product-count">
					{include file="$tpl_dir./category-count.tpl"}
				</span>	
			
				{include file="$tpl_dir./pagination.tpl"}
				{include file="$tpl_dir./product-sort.tpl"}
			</div>
		{/if}
		
		{if $category->description}
			<div id="cat_title">{$category->name|escape:'htmlall':'UTF-8'}</div>
			<div class="cat_desc">{$category->description}</div>
		{/if}
			
		{if isset($subcategories)}
		<!-- Subcategories -->
		<div id="subcategories">
			<ul>
			{foreach from=$subcategories item=subcategory}
				<li class="subcategory">
					<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}">
						{if $subcategory.id_image}
							<img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
						{else}
							<img src="{$img_cat_dir}default-medium.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
						{/if}
					</a>
					<h6>
					  <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">
					   {$subcategory.name|escape:'htmlall':'UTF-8'}
					  </a>
					</h6>
					<span>{$subcategory.description|escape:'htmlall':'UTF-8'|truncate:100:'...'}</span>
					<span style="clear:both;margin:0;padding:0;"></span>
				</li>
			{/foreach}
				<li style="float:none;clear:both;margin:0;padding:0;height:0;border:0;width:auto;"></li>
			</ul>
		</div>
		{/if}
		
		<script type="text/javascript">
			$(document).ready(function() {
				var widthColumn = $('#width_column');
				widthColumn.append($('.breadcrumb'));
				widthColumn.append($('#cat_title'));
				widthColumn.append($('.cat_desc'));
				widthColumn.append($('#subcategories'));
			});
		</script>

		
		{*
		{if $scenes}
			<!-- Scenes -->
			{include file="$tpl_dir./scenes.tpl" scenes=$scenes}
		{else}
			<!-- Category image -->
			{if $category->id_image}
			<div class="align_center">
				<img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category')}" alt="{$category->name|escape:'htmlall':'UTF-8'}" title="{$category->name|escape:'htmlall':'UTF-8'}" id="categoryImage" width="{$categorySize.width}" height="{$categorySize.height}" />
			</div>
			{/if}
		{/if}
		*}
		
		{if $products}
			{include file="$tpl_dir./product-list.tpl" products=$products}
             <div class="content_sortPagiBar">
                                <div class="sortPagiBar clearfix">
                                        {include file="./product-sort.tpl" paginationId='bottom'}
                                        {include file="./product-compare.tpl" paginationId='bottom'}
                                        {include file="./nbr-product-page.tpl" paginationId='bottom'}
                     </div>
                     {include file="./pagination.tpl" paginationId='bottom'}
             </div>
		{elseif !isset($subcategories)}
			<p class="warning">{l s='There are no products in this category.'}</p>
		{/if}
	{elseif $category->id}
		<p class="warning">{l s='This category is currently unavailable.'}</p>
	{/if}
{/if}

No se si se te ocurre alguna solución más pero me sería de gran ayuda, gracias.

matutano · November 6, 2013

Hola "Nadie", sigo sin poder hacerlo, he buscado por internet y no encuentro nada, ¿me podrías decir como tengo que hacerlo si es que se puede?, muchas gracias.

nadie · November 9, 2013

Pues prueba solo añadir esto:

{include file="$tpl_dir./pagination.tpl"}
				{include file="$tpl_dir./product-sort.tpl"}

debajo de:

			{include file="$tpl_dir./product-list.tpl" products=$products}

Recuerda "Forzar compilación" en la pestaña Parametros Avanzados -> Rendimiento, o usar directamente este modulo: http://www.prestashop.com/forums/topic/238282-modulo-flush-caches-compile-ps15/ y hacer un flush all compile.

Escribe en el fichero tambien "hola mundo" o algo asi para ver si te esta reconocimiento lo que estas escribiendo.

matutano · November 11, 2013

Hola de nuevo, ahora si me funciona!! pero aparece todo una cosa debajo de la otra y no se porque, si me puedes dar una solución te lo agradecería ya que no me gustaría dejarlo así, puedes ver como queda en hmonigotes.es/206-ropa-outlet-0-a-2-anos

MIL GRACIAS.

matutano · November 11, 2013

Hola, al final lo he desactivado, te adjunto mejor un jpg para que veas de que se trata, no se que haríamos gente como yo sin gente como tu, este foro resulta de gran ayuda.

nadie · November 11, 2013

Hola, al final lo he desactivado, te adjunto mejor un jpg para que veas de que se trata, no se que haríamos gente como yo sin gente como tu, este foro resulta de gran ayuda.

Ok, era solo una prueba, entonces borra lo que has realizado y debajo de: (recordamos que hablamos del fichero:

http://www.monigotes.es/themes/monigotes/product-list.tpl

)

			{include file="$tpl_dir./product-list.tpl" products=$products}

añade esto:

<div id="category-command-bar2">
				<span class="category-product-count">
					{include file="$tpl_dir./category-count.tpl"}
				</span>	
			
				{include file="$tpl_dir./pagination.tpl"}
				{include file="$tpl_dir./product-sort.tpl"}
			</div>

Y luego en tu fichero:

http://www.monigotes.es/themes/monigotes/css/product_list.css

añade esto: (al final del fichero)

/* Pie patin latoko */

#category-command-bar2 {
width: 690px;
}

#category-command-bar2 .category-product-count {
font-size: 13px;
width: 182px;
float:left;
}

#category-command-bar2 #productsSortForm {
float: right;
}


#category-command-bar2 #pagination {
width: 282px;
float:left;
}
#category-command-bar2 #pagination form  {float:left; }

#category-command-bar2 select#nb_item { width: 45px; }

#category-command-bar2 #pagination ul.pagination {
list-style-type: none;
float: right;
margin-top: 7px;
}

#category-command-bar2 #pagination ul.pagination li {
float: left;
padding: 0 2px;
}

#category-command-bar2 #pagination ul.pagination li a:hover { text-decoration: underline; }


#category-command-bar2 #productsSortForm p.select label {
display: none;
}

Poner paginación abajo del listado de productos.

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites