X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)
-   -   How to give border & mouse over effect to feature produc (https://forum.x-cart.com/showthread.php?t=11937)

AusNetIT 04-27-2009 06:45 PM

Re: How to give border & mouse over effect to feature produc
 
HI Ashley,

Where you see this class? because i can not find under products_t.tpl ? see my above post with my current tpl.

And also i can't see .prod_box in skin.css?

may be i'm using wrong Products_t.tpl or products.tpl?

Thanks,

Asela

ARW VISIONS 04-27-2009 06:59 PM

Re: How to give border & mouse over effect to feature produc
 
I viewed the source on your site. this is from your site.

<div class="prod_box">
<a href="product.php?productid=4529&amp;cat=6038&amp; page=1" class="ProductTitle">3M POST-IT EASEL PAD 635X775MM WHITE 30 SHEETS</a><br>
SKU: 3M559WE<br>
<a href="product.php?productid=4529&amp;cat=6038&amp; page=">
<img src="http://www.sparktrading.com.au/images/T/3M559WEt.jpg" alt="3M POST-IT EASEL PAD 635X775MM WHITE 30 SHEETS"></a>

<p><font class="ProductPrice">Our price: <span style="white-space: nowrap;">AUD 0.00</span></font><br><font class="MarketPrice"></font></p>
<table width="100%" cellpadding="3" cellspacing="0">



</table><table width="100%" cellpadding="0" cellspacing="0">
<tbody><tr>
<td height="25">

<table onclick="javascript: self.location='product.php?productid=4529&amp;cat= 6038&amp;page=';" class="ButtonTable" cellpadding="0" cellspacing="0">
<tbody><tr><td><img src="/skin1/images/but1.gif" class="ButtonSide" alt=""></td><td class="Button"><font class="Button">Buy Now</font></td><td><img src="/skin1/images/but2.gif" class="ButtonSide" alt=""></td></tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>

AusNetIT 04-27-2009 08:30 PM

Re: How to give border & mouse over effect to feature produc
 
Thank You Sooooooooooooooooooooooo Much

junliw1975 06-13-2010 07:56 PM

Re: How to give border & mouse over effect to feature produc
 
Hi Ashley:

Do you have version of this code for 4.2?

Thanks


Quote:

Originally Posted by Ashley
back up products_t.tpl amd skin1.css****

In products_t.tpl
find this code around line 19

<td width="{$width}%" class="PListCell">

change it to this

<td width="{$width}%" class="PListCell" onmouseover="this.className='PListCellOver'" onmouseout="this.className='PListCell'">

In skin1.css
find this class

.PListCell {
BACKGROUND-COLOR: #ffffff;
TEXT-ALIGN: center;
PADDING: 10px;
VERTICAL-ALIGN: top;
}

and replace with this

.PListCell {
BACKGROUND-COLOR: #eaeaea;
TEXT-ALIGN: center;
PADDING: 10px;
VERTICAL-ALIGN: top;
border:solid #cccccc 1px;
}


also add this class to skin1.css

.PListCellOver {
BACKGROUND-COLOR: #cccccc;
TEXT-ALIGN: center;
PADDING: 10px;
VERTICAL-ALIGN: top;
border:solid #cc0000 1px;
}

change background and border colors as you see fit.


Vacman 07-11-2010 01:33 PM

Re: How to give border & mouse over effect to feature produc
 
Bump

Vacman 07-22-2010 08:21 AM

Re: How to give border & mouse over effect to feature produc
 
I should have mentioned that I would love to see this work for 4.3.x

Vacman 07-25-2010 06:57 AM

Re: How to give border & mouse over effect to feature produc
 
OK - I have been doing some work on this with mixed results.

Borrowed the css from Dana7 and added this to the main.css
Code:

/* Products list as multicolumn table */
.PListCell { padding: 0; width: 400px; border-right: 1px solid #e5e8ee; border-bottom: 1px solid #e5e8ee; float: left; background: #f9f9f9; height: 400px; }
.PListCell img { border: 1px solid #fff; }
.PListCellHover { padding: 0; width: 400px; border-right: 1px solid #d9e6fa; border-bottom: 1px solid #d9e6fa; float: left; background: #f0f5fd; height: 400px; }
.PListCellHover img { border: 1px solid #abb5c7; }
.PListCellInside { padding: 10px; text-align: center; }
.PListCellInside .sku { margin-top: 10px; text-align: center; }
/* Inside boxes */
.PListCellInside .image { padding: 0; margin: 5px 0; }
.PListCellInside .sku { margin-top: 5px; }
.PListCellInside .market-price { padding: 8px 0 0 0; color: #a6a6a6; font-size: 10px; }
.PListCellInside .price-row { padding: 2px; }
.PListCellInside .price-row .price { font-weight: normal; }
.PListCellInside .price-row .price-value,
.PListCellInside .market-price .price-save { color: #b51a00; font-weight: normal; font-size: 12px; }
.PListCellInside .buttons-row,
.PListCellInside .button-row { margin: 1px 0 0 0; }
.PListCellInside .buttons-row button,
.PListCellInside .button-row button { margin: 0; float: none; }
.PListCellInside .buy-now { margin-top: 1px; }
.PListCellInside .buy-now .quantity-title { width: auto; padding-right: 5px; }
.PListCellInside .product-title { padding: 0; color: #103c89; font-weight: bold; }
.alter-curr { padding: 0 0 0 28px; color: #a6a6a6; font-size: 10px; font-style: italic; }
/*


Then I decided to redo the products_t.tpl
Code:

{*
$Id: products_t.tpl,v 1.58.2.1 2010/02/12 10:39:56 aim Exp $
vim: set ts=2 sw=2 sts=2 et:
*}
{list2matrix assign="products_matrix" assign_width="cell_width" list=$products row_length=$config.Appearance.products_per_row}
{assign var="is_matrix_view" value=true}

{if $products_matrix}

  <table cellspacing="3" class="products products-table width-100" summary="{$lng.lbl_products_list|escape}">

    {foreach from=$products_matrix item=row name=products_matrix}
      <tr{interline name=products_matrix additional_class="product-name-row"}>
        {foreach from=$row item=product name=products}
          {if $product}
          <td>
            <div class="PListCell" onmouseover="this.className='PListCellHover'" onmouseout="this.className='PListCell'">
                <script type="text/javascript">
                  <!--
                  products_data[{$product.productid}] = {ldelim}{rdelim};
                    -->
                </script>
                <a href="{$product.alt_url|default:$product.page_url|amp}" class="product-title">{$product.product|escape}</a>
                {if $product.productcode}
                  <div class="sku">{$lng.lbl_sku}: {$product.productcode|escape}</div>
                {else}
                    &nbsp;
                {/if}
                <a href="{$product.alt_url|default:$product.page_url|amp}">{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.tmbn_x image_y=$product.tmbn_y product=$product.product tmbn_url=$product.tmbn_url}</a>
                {if $active_modules.Special_Offers && $product.have_offers}
                  {include file="modules/Special_Offers/customer/product_offer_thumb.tpl"}
                {/if}
              {if $product.rating_data}
                {include file="modules/Customer_Reviews/vote_bar.tpl" rating=$product.rating_data productid=$product.productid}
              {/if}
              {if $product.product_type ne "C"}
                {if $active_modules.Subscriptions ne "" && $product.catalogprice}
                  {include file="modules/Subscriptions/subscription_info_inlist.tpl"}
                {elseif $product.appearance.is_auction}
                  <span class="price">{$lng.lbl_enter_your_price}</span><br />
                  {$lng.lbl_enter_your_price_note}
                {else}
                  {if $product.appearance.has_price}
                    <div class="price-row">
                      <span class="price">{$lng.lbl_our_price}:</span> <span class="price-value">{include file="currency.tpl" value=$product.taxed_price}</span>
                      <span class="market-price">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$product.taxed_price}</span>
                    </div>
                    {if $product.appearance.has_market_price && $product.appearance.market_price_discount gt 0}
                      <div class="market-price">
                        {$lng.lbl_market_price}: <span class="market-price-value">{include file="currency.tpl" value=$product.list_price}</span>
                        {if $product.appearance.market_price_discount gt 0}
                          {if $config.General.alter_currency_symbol ne ""}, {/if}
                          <span class="price-save">{$lng.lbl_save_price} {$product.appearance.market_price_discount}%</span>
                        {/if}
                      </div>
                    {/if}
                    {if $product.taxes}
                      <div class="taxes">{include file="customer/main/taxed_price.tpl" taxes=$product.taxes is_subtax=true}</div>
                    {/if}
                  {/if}
                  {if $active_modules.Special_Offers && $product.use_special_price}
                    {include file="modules/Special_Offers/customer/product_special_price.tpl"}
                  {/if}
                {/if}
              {else}
                &nbsp;
              {/if}
                {if $active_modules.Product_Configurator and $is_pconf and $current_product}
                  {include file="modules/Product_Configurator/pconf_add_form.tpl"}
                {elseif $config.Appearance.buynow_button_enabled eq "Y" and $product.product_type ne "C"}
                  {include file="customer/main/buy_now.tpl"}
                {else}
                  &nbsp;
                {/if}
              {if $product.fclassid gt 0}
                <div>{include file="modules/Feature_Comparison/compare_checkbox.tpl" id=$product.productid}</div>
              {/if}
              {if !$smarty.foreach.products_matrix.last}
                <tr class="separator">
                  <td colspan="{$config.Appearance.products_per_row|default:1}">&nbsp;</td>
                </tr>
              {/if}
            </div>
          </td>
          {/if}
        {/foreach}
      </tr>
    {/foreach}
  </table>
{/if}


When I go to my home page, the Featured Products section looks beautiful.... BUT...

When I go and view any categories where there are multiple products in that category, I end up with a vertacle column of products and then a row of three products.

Now, my template format is supposed to be showing products in a three-column format, so I am sure this issue has to do with the fact that I stripped out the "matrix" coding.

The other thing I can't figure out is that on the same product page (not home page) I also end up with a center section labeled as a Featured Products section containing all my products from the category I am currently viewing. Then just below that the normal category products.

Maybe someone with a little better grasp on this can take my code and make it into something more usable.


All times are GMT -8. The time now is 04:29 PM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.