Jump to content

Recommended Posts

Hallo gays,

 

How i can combine "view" and "price" in my homefeatured module design in one line like the pictures?

 

I trying but dont work, help me.

 

First picture is that i want - how to combine it in one row?

 

and.... sorry for my Еnglish.

 

Regards!

Dodi Markov

post-335617-0-54500500-1359240437_thumb.png

post-335617-0-30368900-1359240451_thumb.png

Edited by dodimarkov (see edit history)

Share this post


Link to post
Share on other sites

http://bijutaniki.com

 

homefeatured.css

#featured-products_block_center li {
margin-right:10px;
padding:10px 0;
width:126px;
height:275px
}
#featured-products_block_center li.last_item_of_line  {margin-right:0;}
#featured-products_block_center h5 {
padding-top:5px;
height:30px;
font-size:12px;
color:#222
}
#featured-products_block_center .product_image {
display:block;
position:relative;
overflow:hidden
}
#featured-products_block_center .product_image span.new {
display: block;
position: absolute;
top: 15px;
right:0px;
padding: 1px 4px;
width: 30px;
font-size:10px;
color: #fff;
text-align: center;
text-transform: uppercase;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
background-color: #FF6600;
border-color: #fff;
}
#featured-products_block_center .product_desc {height:60px;}
#featured-products_block_center .product_desc,
#featured-products_block_center .product_desc a {
color:#666
}
#featured-products_block_center .lnk_more {
display: block;
padding:6px 8px;
width: 118px;
hight: 20px;
font:bold 10px Helvetica,Arial;
color:#fff;
background-color: #BE0D51;
border-color: #fff;

}
#featured-products_block_center .price_container {
margin-top:10px;
padding:0;
}
#featured-products_block_center .price {
display: block;
padding:6px 8px;
width: 118px;
hight: 30px;
font: 14px Helvetica,Arial;
text-align: right;
color:#fff;
background-color: #6B3299;
border-color: #fff;
}
#featured-products_block_center li .ajax_add_to_cart_button {display:none;}
#featured-products_block_center li span.exclusive {display:none;}

 

and homefeatured.tpl

{*
* 2007-2012 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 license@prestashop.com 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 <contact@prestashop.com>
*  @copyright  2007-2012 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<!-- MODULE Home Featured Products -->
<div id="featured-products_block_center" class="block products_block clearfix">
<h4 class="title_block">{l s='Featured products' mod='homefeatured'}</h4>
{if isset($products) AND $products}
 <div class="block_content">
  {assign var='liHeight' value=250}
  {assign var='nbItemsPerLine' value=4}
  {assign var='nbLi' value=$products|@count}
  {math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}
  {math equation="nbLines*liHeight" nbLines=$nbLines|ceil liHeight=$liHeight assign=ulHeight}
  <ul style="height:{$ulHeight}px;">
  {foreach from=$products item=product name=homeFeaturedProducts}
   {math equation="(total%perLine)" total=$smarty.foreach.homeFeaturedProducts.total perLine=$nbItemsPerLine assign=totModulo}
   {if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}
   <li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - $totModulo)}last_line{/if}">
 <a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a>
 <h5 class="s_title_block"><a href="{$product.link}" title="{$product.name|truncate:50:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h5>
 <div class="product_desc"><a href="{$product.link}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:65:'...'}</a></div>
 <div>
  <a class="lnk_more" href="{$product.link}" title="{l s='View' mod='homefeatured'}">{l s='View' mod='homefeatured'}</a>
  {if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<p class="price_container"><span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span></p>{else}<div style="height:21px;"></div>{/if}

  {if ($product.id_product_attribute == 0 OR (isset($add_prod_display) AND ($add_prod_display == 1))) AND $product.available_for_order AND !isset($restricted_country_mode) AND $product.minimal_quantity == 1 AND $product.customizable != 2 AND !$PS_CATALOG_MODE}
   {if ($product.quantity > 0 OR $product.allow_oosp)}
   <a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a>
   {else}
   <span class="exclusive">{l s='Add to cart' mod='homefeatured'}</span>
   {/if}
  {else}
   <div style="height:23px;"></div>
  {/if}
 </div>
   </li>
  {/foreach}
  </ul>
 </div>
{else}
 <p>{l s='No featured products' mod='homefeatured'}</p>
{/if}
</div>
<!-- /MODULE Home Featured Products -->

 

That is using in my theme now.

 

Thank you!

Share this post


Link to post
Share on other sites

Like this screenshot? If so, you just need to add these CSS edits

 

#featured-products_block_center .lnk_more {
display: block;
padding: 6px 8px;
width: 52px;
font: bold 10px Helvetica,Arial;
color: #fff;
background-color: #BE0D51;
border-color: #fff;
float: left;
}
#featured-products_block_center .price {
display: block;
padding: 6px 8px;
width: 42px;
height: 12px;
font: 12px Helvetica,Arial;
text-align: right;
color: #fff;
background-color: #6B3299;
border-color: #fff;
float: left;
}

 

I tweaked the font size a bit, so you may need to play around with the styles to get the final result that you're looking for. But this should be a good starting point.

 

 

2screenshot.png

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More