• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1845
  • Last Modified:

prestashop product display sliding custumization using jquery

hello i wonder how i can have a sliding display of the new products in prestashop
i ask myself how much products i should display and how to make it technically

surely i should use z-index,?
should i have a block with all the products and move it or call several time the function with different limit value for showing the products?

in my drawing i show 4 products, it is not enough that enough, how much do you think will be necessary?
do you have a idea of what the function would look like? i found on the prestashop forum a module
http://www.maofree-developer.com/coder-webmaster-programmer/templates/maofree/files/carousel/maofree_blocknewproducts.zip but i didn't manage to get it work?


thanks
THIS IS function in blocknewproducts.php

	public function hookRightColumn($params)
	{
		global $smarty;
	
		$newProducts = Product::getNewProducts((int)($params['cookie']->id_lang), 0, (int)(Configuration::get('NEW_PRODUCTS_NBR')));
		if (!$newProducts AND !Configuration::get('PS_BLOCK_NEWPRODUCTS_DISPLAY'))
			return;
		$smarty->assign(array('new_products' => $newProducts, 'mediumSize' => Image::getSize('medium')));

		return $this->display(__FILE__, 'blocknewproducts.tpl');
	}
	
THIS IS  blocknewproducts.tpl

<!-- MODULE Block new products -->
<div id="new-products_block_right" class="block products_block">
	<h4><a href="{$link->getPageLink('new-products.php')}" title="{l s='New products' mod='blocknewproducts'}">{l s='New products' mod='blocknewproducts'}</a></h4>
	<div class="block_content">
	{if $new_products !== false}
		<ul class="product_images clearfix">
		{foreach from=$new_products item='product' name='newProducts'}
			{if $smarty.foreach.newProducts.index < 2}
				<li{if $smarty.foreach.newProducts.first} class="first"{/if}>{$product.name|escape:html:'UTF-8'}<br/><span class="price">{$product.price}</span><a href="{$product.link}" title="{$product.legend|escape:html:'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'medium')}" height="{$mediumSize.height}" width="{$mediumSize.width}" alt="{$product.legend|escape:html:'UTF-8'}" /></a>{$product.manufacturer_name}</li>
			{/if}
		{/foreach}
		</ul>
	
	
	
		<dl class="products">
		{foreach from=$new_products item=newproduct name=myLoop}
			<dt class="{if $smarty.foreach.myLoop.first}first_item{elseif $smarty.foreach.myLoop.last}last_item{else}item{/if}"><a href="{$newproduct.link}" title="{$newproduct.name|escape:html:'UTF-8'}">{$newproduct.name|strip_tags|escape:html:'UTF-8'}</a></dt>
			{if $newproduct.description_short}<dd class="{if $smarty.foreach.myLoop.first}first_item{elseif $smarty.foreach.myLoop.last}last_item{else}item{/if}"><a href="{$newproduct.link}">{$newproduct.description_short|strip_tags:'UTF-8'|truncate:50:'...'}</a>&nbsp;<a href="{$newproduct.link}"><img src="{$img_dir}bullet.gif" alt="&gt;&gt;" width="10" height="7" /></a></dd>{/if}
		{/foreach}
		</dl>
		<p><a href="{$link->getPageLink('new-products.php')}" title="{l s='All new products' mod='blocknewproducts'}" class="button_large">{l s='All new products' mod='blocknewproducts'}</a></p>
	{else}
		<p>{l s='No new products at this time' mod='blocknewproducts'}</p>
	{/if}


	
	
	</div>
</div>
<!-- /MODULE Block new products -->

Open in new window

test-product.gif
0
jerrrrry
Asked:
jerrrrry
  • 6
  • 3
1 Solution
 
Eddie ShipmanAll-around developerCommented:
So, do you want it to automatically scroll?
0
 
jerrrrryAuthor Commented:
yes
0
 
Eddie ShipmanAll-around developerCommented:
I will download the module and take a look at it tonight.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
jerrrrryAuthor Commented:
ok thank you
0
 
Eddie ShipmanAll-around developerCommented:
Looks like all you have to do is remove the mousewheel option from blocknewproducts.js to make it autoscroll.
Or at least that is what the documentation for jCarouselLite says.

What other problems did you have with this module?
0
 
Eddie ShipmanAll-around developerCommented:
blocknewproducts.js
$(document).ready(function(){
	$(".newproductslide .jCarouselLite").jCarouselLite({
		visible: newproductslide_items_vis,
		vertical: newproductslide_vertical,
		easing: newproductslide_type_effect,
		circular: true,
		auto: newproductslide_time_transition,
		speed: newproductslide_time_effect
	});
});

Open in new window

0
 
Eddie ShipmanAll-around developerCommented:
Do you still need help with this?
0
 
jerrrrryAuthor Commented:
thanks, i apologize i forgot you
0
 
Eddie ShipmanAll-around developerCommented:
Did it work like you expected?
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now