Move thumbnail above description in grid view?

Store Builder Questions
1

I am looking to modify my layout so the thumbnails appear above the description/add to cart button in grid view. Lettering should be centered. While I have gotten it close to what I want, I’m sure I didn’t do it the right way since it was mainly done with trial and error (I’m a WYSIWYG editor). And I have lost my 2px border around my thumbnails the way I did it. Surely someone has done this before. Here is my “almost” example of essentially what I am looking for:



[URL]URL]



I’m just wondering what the correct way to do this is?

2

Or if someone can just tell me how to get a 2px wide border around the images that would be helpful. If I was to do this in HTML it would take me about 20 seconds…but after spending all day yesterday trying to figure it out I’m super frustrated. I’m sure the code below is all jumbled up which is why I put the previous post about doing it right. But I am wanting to go live ASAP and this is one of the last things on my list.


```php {* $Id$ *}



{if $products}



{script src=“js/exceptions.js”}



{if !$no_pagination}

{include file=“common_templates/pagination.tpl”}

{/if}

{if !$no_sorting}

{include file=“views/products/components/sorting.tpl”}

{/if}



{if $products|sizeof < $columns}

{assign var=“columns” value=$products|@sizeof}

{/if}

{split data=$products size=$columns|default:“2” assign=“splitted_products”}

{math equation=“100 / x” x=$columns|default:“2” assign=“cell_width”}

{if $item_number == “Y”}

{assign var=“cur_number” value=1}

{/if}


{foreach from=$splitted_products item="sproducts" name="sprod"}

{foreach from=$sproducts item="product" name="sproducts"}
{include file="common_templates/product_data.tpl" product=$product}



{/foreach}

{/foreach}

{if $product}
{assign var="obj_id" value=$product.product_id}
{assign var="obj_id_prefix" value="`$obj_prefix``$product.product_id`"}
{assign var="form_open" value="form_open_`$obj_id`"}
{$smarty.capture.$form_open}
{hook name="products:product_multicolumns_list"}




{include file="common_templates/image.tpl" image_width=$settings.Appearance.thumbnail_width obj_id=$obj_id_prefix images=$product.main_pair object_type="product"}

{if $item_number == "Y"}{$cur_number}. {math equation="num + 1" num=$cur_number assign="cur_number"}{/if}
{assign var="name" value="name_$obj_id"}{$smarty.capture.$name}


{*assign var="old_price" value="old_price_`$obj_id`"}
{if $smarty.capture.$old_price|trim}{$smarty.capture.$old_price} {/if}

{assign var="price" value="price_`$obj_id`"}
{$smarty.capture.$price}

{assign var="clean_price" value="clean_price_`$obj_id`"}
{$smarty.capture.$clean_price}

{assign var="list_discount" value="list_discount_`$obj_id`"}
{$smarty.capture.$list_discount*}




{assign var="add_to_cart" value="add_to_cart_`$obj_id`"}
{$smarty.capture.$add_to_cart}

{/hook}
{assign var="form_close" value="form_close_`$obj_id`"}
{$smarty.capture.$form_close}
{/if}


{if !$no_pagination}
{include file="common_templates/pagination.tpl"}
{/if}

{/if}

{capture name="mainbox_title"}{$title}{/capture} ```Thanks in advance.
3

I’m not exactly sure what you want, but do you want something like:







If you want this, this is what I did:



I created a file called:



skins/your-skin/customer/addons/my_changes/hooks/products/product_multicolumns_list.override.tpl



In this file I put:


```php {assign var=“obj_id” value=“$obj_prefix``$product.product_id”}
```

The other option would be to modify the file:

skins/your-skin/customer/views/categories/custom_templates/product_multicolumns.tpl

If this isn't what you are looking for can you provide a screen shot with a better idea? I'd be happy to help.

Brandon
4

Thanks Brandon. The link in the original post is my actual site. I arranged it the way I want by modifying my grid_list.tpl file in the blocks folder. Maybe this isn’t the proper way? In any case, it is about 90% the way I want it. Really the only thing I don’t like is that I originally had added a border around the image in my style.css file. This worked until I rearranged the layout. So now I’m just looking to get this border back since some of my images have black at the edge so it “bleeds” into the background.



I may try your solution since I’m sure it is the proper way to do things. I’m trying to learn how these templates work but it’s something totally new to me.



Jacy

5

Well I tried that method and while it worked, it too also forced my borders around my image to disappear. And I also lost my “Select Options” link below the product. I like having that as so many customers don’t realize they can change color/sizes, etc. of the decals. So this gives them a little extra that may get them onto the product page.

6

That’s not much of a problem. To do that I would do:



Create a file called:



skins/your-skin/customer/addons/my_changes/hooks/products/product_multicolumns_list.override.tpl



In that file I would put:


{assign var="obj_id" value="`$obj_prefix``$product.product_id`"}







{include file="common_templates/image.tpl" image_width=$settings.Appearance.thumbnail_width obj_id=$obj_id images=$product.main_pair object_type="product"}


1} title="{$product.product}">{$product.product|unescape|strip_tags|truncate:35}{else}>{$product.product|unescape}{/if}



{include file="addons/my_changes/hooks/products/buy_now.tpl" hide_wishlist_button=true hide_compare_list_button=true simple=true show_qty=true show_sku=false hide_add_to_cart_button=$hide_add_to_cart_button but_role="action"}






Then create a file called:



skins/your-skin/customer/addons/my_changes/hooks/products/buy_now.tpl



In that file put:


```php {* $Id: buy_now.tpl 7969 2009-09-08 14:37:40Z zeke $ *}



{if ($product.price|floatval || $product.zero_price_action == “P” || $product.zero_price_action == “A” || (!$product.price|floatval && $product.zero_price_action == “R”)) && !($settings.General.allow_anonymous_shopping == “P” && !$auth.user_id)}

{assign var=“show_price_values” value=true}

{else}

{assign var=“show_price_values” value=false}

{/if}



{assign var=“cart_button_exists” value=false}

{assign var=“obj_id” value=$obj_id|default:$product.product_id}



{capture name=“add_to_cart”}

{if !($product.zero_price_action == “R” && $product.price == 0) && !($settings.General.inventory_tracking == “Y” && $settings.General.allow_negative_amount != “Y” && ($product.amount <= 0 || $product.amount < $product.min_qty) && $product.is_edp != “Y” && $product.tracking == “B”)}

{if $product.avail_since <= $smarty.const.TIME || ($product.avail_since > $smarty.const.TIME && $product.buy_in_advance == “Y”)}

{if $product.has_options && (!$product.product_options || $simple)}

{include file=“buttons/button.tpl” but_id=“button_cart_$obj_id” but_text=$lang.select_options but_href=“$index_script?dispatch=products.view&product_id=$product.product_id” but_role=“text” but_name=“”}

{else}

{if $additional_link}{$additional_link} {/if}

{include file=“buttons/add_to_cart.tpl” but_id=“button_cart_$obj_id” but_name=“dispatch[checkout.add…$obj_id]” but_role=$but_role}

{assign var=“cart_button_exists” value=true}

{/if}

{/if}

{if $product.avail_since > $smarty.const.TIME}

{include file=“common_templates/coming_soon_notice.tpl” avail_date=$product.avail_since add_to_cart=$product.buy_in_advance}

{/if}

{/if}

{/capture}



{if $show_sku}

{$lang.sku}: {$product.product_code}


{/if}

{if $show_features}
{include file="views/products/components/product_features_short_list.tpl" features=$product.product_id|fn_get_product_features_list|escape}
{/if}

{if !$hide_form}


{if !$stay_in_cart}

{/if}

{/if}



{if !$simple && $product.is_edp == "Y"}

{$lang.text_edp_product}



{/if}

{hook name="products:options_advanced"}
{if $product.is_edp !== "Y" && $settings.General.inventory_tracking == "Y" && $product.tracking != "D"}
{if !$simple}

{$lang.in_stock}:

{if ($product.amount <= 0 || $product.amount < $product.min_qty) && $product.tracking == "B"}
{$lang.text_out_of_stock}
{else}
{$product.amount} {$lang.items}
{/if}


{else}

{if ($product.amount <= 0 || $product.amount < $product.min_qty) && $product.tracking == "B"}
{$lang.text_out_of_stock}
{/if}

{/if}
{/if}
{/hook}

{if $hide_add_to_cart_button != "Y"}
{if !$simple && $product.product_options}
{include file="views/products/components/product_options.tpl" id=$obj_id product_options=$product.product_options name="product_data"}
{/if}

{if ($product.qty_content || $show_qty) && $product.is_edp !== "Y" && $cart_button_exists == true}


{if $product.qty_content}

{foreach from=$product.qty_content item="var"}
{$var}
{/foreach}

{else}

{/if}

{if $product.prices}
{include file="views/products/components/products_qty_discounts.tpl"}
{/if}
{elseif !$bulk_add}

{/if}

{if $product.min_qty}

{$lang.text_cart_min_qty|replace:"[product]":$product.product|replace:"[quantity]":$product.min_qty}


{/if}

{if $separate_add_button}

{$smarty.capture.add_to_cart}

{/if}

{if $capture_buttons}
{capture name="cart_buttons"}
{/if}
{hook name="products:buttons_block"}

{if !$separate_add_button}
{$smarty.capture.add_to_cart}
{/if}

{hook name="products:buy_now"}
{if $product.feature_comparison == "Y"}
{include file="buttons/add_to_compare_list.tpl" product_id=$product.product_id}
{/if}
{/hook}


{/hook}
{if $capture_buttons}
{/capture}
{/if}
{/if}

{if !$hide_form}

{/if}
```

Then the last thing you need to do is style it.

I also use the hooks feature for my styles so in my:

skins/your-skin/customer/addons/my_changes/css/local_styles.css

I would put:

```php .grid-image img {
border:3px solid #EBD693;
} ```


That should do it. You should now have your products in a grid with plenty of padding and a border plus the select more options part.

I hope it helps,

Brandon
7

First off Brandon, Thank You SOOOOO MUCH! Maybe that was easy for you but that blows my mind that so much needed to be done to make this work. Do you accept donations? Or are you available for hire? I have a couple of other little things I’m looking to get straightened out before going live. I wanted to be live a month ago but you know how that goes.



Anyway, I am also wanting to add a border around the thumbnail image on the product page and for some reason I can’t get this to happen.



Thanks again,

Jacy

8

One way to do a border around your product details page thumbnail would be:



Create a file called:



skins/your-skin/customer/addons/my_changes/hooks/products/view_main_info.override.tpl



In that file put:


```php





{include file=“views/products/components/product_images.tpl” product=$product show_detailed_link=“Y”}





{include file=“blocks/list_templates/simple_list.tpl” product=$product show_sku=true show_rating=true show_old_price=true show_price=true show_list_discount=true show_clean_price=true details_page=true show_discount_label=true show_product_amount=true show_product_options=true hide_form=$smarty.capture.val_hide_form show_qty=true min_qty=true show_edp=true show_add_to_cart=true show_list_buttons=true but_role=“action” capture_buttons=$smarty.capture.val_capture_buttons capture_product_options=$smarty.capture.val_capture_options_vs_qty}


```

This code is from:

skins/your-skin/customer/views/products/view.tpl

The only differerence is:

It was:

```php
```

Now it is:

```php
```

All we're doing is just pulling up the same css that we used for the grid layout.

Hope it helps,

Brandon
9

Thanks again Brandon! Worked great!



Jacy

10

[quote name=‘brandonvd’]The other option would be to modify the file:



skins/your-skin/customer/views/categories/custom_templates/product_multicolumns.tpl



[/QUOTE]



Hi Brandon,



Im looking to do the same thing by creating a new ‘Default templates for products list’ that puts the ‘product description’, ‘price’ and ‘add to cart’ button centered BELOW each thumbnail image (using the default Lingere skin).



Theres currently a ‘Grid2’ template that puts the ‘add to cart’ button below the thumbnail but not for the ‘product description’, and ‘price’ as well.



If you show show me out to do this Id be grateful. Thanks.



BART :slight_smile:



PS: I think its this one that needs modifying:

lingerie/customer/blocks/list_templates/grid_list2.tpl

11

[quote name=‘bart’]Hi Brandon,



Im looking to do the same thing by creating a new ‘Default templates for products list’ that puts the ‘product description’, ‘price’ and ‘add to cart’ button centered BELOW each thumbnail image (using the default Lingere skin).



Theres currently a ‘Grid2’ template that puts the ‘add to cart’ button below the thumbnail but not for the ‘product description’, and ‘price’ as well.



If you show show me out to do this Id be grateful. Thanks.



BART :slight_smile:



PS: I think its this one that needs modifying:

lingerie/customer/blocks/list_templates/grid_list2.tpl[/QUOTE]



I’m looking for something like this as well. Would be very greatful! :0

12

Give this a try. I can’t remember exactly, but I think this is what you want.



[url]http://forum.cs-cart.com/showthread.php?t=15293[/url]



You can check it out and download the zip.



Hope it helps,



Brandon

13

Thanks for all the information Brandon!! It’s all come in very hand while customising a website I’m working on. I am having one small issue that maybe you could help me with.



I uploaded the files you included in the above post and changed the language variable. I also removed the file product_multicolumns_list.override.tpl as I figured there could be some conflict. Everything looks like it’s working apart from only one title, price and add to cart being displayed on the first product in each category, the rest just seem to display the product image.



I’d appreciate it if you could help me out.



:slight_smile:

14

Disregard above, using your code and some of the default code for Grid 2 I’ve managed to figure it out. :stuck_out_tongue:



Thanks,

James