[SOLVED] block new products/horizontal

[tozi]

How can i display this modul horizontal? Next question how can i dsiplay title of product and short description as shown?

http://simplydesign.sk/arris/index.php

Edited January 3, 2014 by tozi (see edit history)

[Sharak]

I can see it's already horizontal Now for the content. First I would suggest setting required width and height in admin Preferences -> Images instead using .css file. If this size is for blocknewproducts only then it's best to Add new type with width=85px, height=70px (as you set in css). Let's name this new. Generate 'new' thumbnails. Then edit blocknewproducts.tpl (should be in /themes/yourtheme/modules/blocknewproducts/, if it's not then copy this file to this location from /modules/blocknewproducts/ directory) and change this:

{if $smarty.foreach.newProducts.index < 2}
				<li{if $smarty.foreach.newProducts.first} class="first"{/if}><a href="{$product.link|escape:'html'}" title="{$product.legend|escape:html:'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'medium_default')|escape:'html'}" height="{$mediumSize.height}" width="{$mediumSize.width}" alt="{$product.legend|escape:html:'UTF-8'}" /></a></li>
			{/if}

to this:

{if $smarty.foreach.newProducts.index < 2}
                <li{if $smarty.foreach.newProducts.first} class="first"{/if}><a href="{$product.link|escape:'html'}" title="{$product.legend|escape:html:'UTF-8'}">
                    <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'new')|escape:'html'}" height="{$newSize.height}" width="{$newSize.width}" alt="{$product.legend|escape:html:'UTF-8'}" />
                    <div class="text_desc">
                        <p class="title_block">{$product.name|escape:html:'UTF-8'}</p>
                        <p class="short_desc">{$product.description_short|strip_tags:'UTF-8'|truncate:100}</p>
                    </div>
                </a></li>
            {/if}

If you want only this 2 products, delete or comment this:

<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|escape:'html'}" 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|escape:'html'}">{$newproduct.description_short|strip_tags:'UTF-8'|truncate:75:'...'}</a><br /><a href="{$newproduct.link}" class="lnk_more">{l s='Read more' mod='blocknewproducts'}</a></dd>{/if}
	{/foreach}
</dl>

The rest is just changing style in /themes/your_theme/css/modules/blocknewproducts/blocknewproducts.css ( again copy this file to this location first if it's not already here)

Edited January 3, 2014 by Sharak (see edit history)

[tozi]

Thanks. But yet is title and description gone.

http://simplydesign.sk/arris/index.php

 

blocknewproducts.tpl

<!-- MODULE Block new products -->
<div id="new-products_block_right" class="block products_block">
	<div class="nadpis_bnew">
    <h4><a href="{$link->getPageLink('new-products')|escape:'html'}" title="{l s='New products' mod='blocknewproducts'}">{l s='New products' mod='blocknewproducts'}</a></h4><div class="button_newp"><a href="{$link->getPageLink('new-products')|escape:'html'}" title="{l s='All new products' mod='blocknewproducts'}" class="button_large">{l s='All new products' mod='blocknewproducts'}</a></div>
    </div><!--konec .nadpis_bnew -->
	<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}><a href="{$product.link|escape:'html'}" title="{$product.legend|escape:html:'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'medium_default')|escape:'html'}" height="{$mediumSize.height}" width="{$mediumSize.width}" alt="{$product.legend|escape:html:'UTF-8'}" /></a></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|escape:'html'}" 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|escape:'html'}">{$newproduct.description_short|strip_tags:'UTF-8'|truncate:75:'...'}</a><br /><a href="{$newproduct.link}" class="lnk_more">{l s='Read more' mod='blocknewproducts'}</a></dd>{/if}
		{/foreach}
		</dl> -->
	<!--	<p><a href="{$link->getPageLink('new-products')|escape:'html'}" title="{l s='All new products' mod='blocknewproducts'}" class="button_large">» {l s='All new products' mod='blocknewproducts'}</a></p> -->
	{else}
		<p>» {l s='Do not allow new products at this time.' mod='blocknewproducts'}</p>
	{/if}
	</div>
</div>
<!-- /MODULE Block new products -->

Edited January 3, 2014 by tozi (see edit history)

[Sharak]

Right. Forgot about that I've updated my previous post. Hope it helps.

[tozi]

It works. Thanks. 

[Sharak]

Do you need help with style?

Did you change image type to 'new'? Site still loads 'medium_default' images and they are stretched with css changes. It doesn't look good

Edited January 4, 2014 by Sharak (see edit history)

[tozi]

A little 

Otherwise shordecription still can not display.

Edited January 4, 2014 by tozi (see edit history)

[Sharak]

Add this to bloknewproducts.css:

#new-products_block_right .text_desc {
    float: right;
    width: 300px;
}

#new-products_block_right p.title_block {
    background: url("li.png") no-repeat scroll 0 center rgba(0, 0, 0, 0);
    color: #6EB63C;
    font-size: 16px;
    padding-left: 40px;
    text-shadow: none;
}

#new-products_block_right p.short_desc {
    color: #444444;
    text-align: left;
    text-decoration: underline;
}

PS. Use 'new' images. Short description is fine.

 

I used li.png for image in product title. Just change it as you like

Edited January 4, 2014 by Sharak (see edit history)

[Sharak]

To show description you need to have short description I assume you deleted it for your language cause for english it's ok http://simplydesign.sk/arris/index.php?id_lang=1

[tozi]

Dammit. I forgot to look. Thanks a lot,lot,lot.