VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: lz1kka on October 15, 2011, 03:04:42 AM

Title: Browse page templateing and other problems...
Post by: lz1kka on October 15, 2011, 03:04:42 AM
Hello and special thanks for the great and fantastic new version of Virtuemart 2! You have to know that I am a beginner and absolutely new bee in editing codes. I need your help to edit and redesign the category browse page. When you open virtuemart home page the "latest products" are shown very simply with just a title, picture (resized with my values) price and button. Also they are centered. Unfortunately when I open some of my product categories the browse page is with different design with more details, stock level and smaller picture. Now 2 days (yes, 2 days!) I am trying to change this! I am looking into category/tmpl/default.php template file, but I don't know how to copy the first one style and I am not sure that it is the right way, so please help me!

I have another problem that you may want to know. I am working on my new handbags online store and I need different product colors. The problem is that when I add new color variations with the same price as the original (value 0) it show me on the site "Color black: free Color white: free". I want just to be a dropdown menu with options, but when I try to configure in "Custom fields" it didn't work properly.

The last questions is how to accomplish site login? I can't see login module for VM2.0. Whe I use Joomla module I can't use the VM2.0 customer fields and other options.

Thank you in advance and good luck!  ;)
Title: Re: Browse page templateing and other problems...
Post by: lz1kka on October 17, 2011, 11:57:59 AM
I still have these problems... Somebody who wants to help me?  :-\
Title: Re: Browse page templateing and other problems...
Post by: PRO on October 17, 2011, 12:13:25 PM
http://forum.virtuemart.net/index.php?topic=90935.0
Title: Re: Browse page templateing and other problems...
Post by: lz1kka on October 17, 2011, 13:47:16 PM
Quote from: BanquetTables.pro on October 17, 2011, 12:13:25 PM
http://forum.virtuemart.net/index.php?topic=90935.0

The link is very useful but it does not answer the questions set by me. I can ask for the first one in your topic if it is better idea to get help.

Thanks!
Title: Re: Browse page templateing and other problems...
Post by: PRO on October 17, 2011, 14:12:17 PM
what is your question?
Title: Re: Browse page templateing and other problems...
Post by: lz1kka on October 17, 2011, 16:31:45 PM
Quote from: BanquetTables.pro on October 17, 2011, 14:12:17 PM
what is your question?

As I wrote in my first post, I want to change the category page view design, but I don't know how and what to change in the code. If you visit my site www.twelve-group.com/royalbags/ you will see that "Latest products" are shown in one simply style and it is good for me. When you join in some of the categories, the products browse page is different. I want to remove "stock level" end etc. I want to make it the same as the home page. Please read my first post again. Thank you!
Title: Re: Browse page templateing and other problems...
Post by: PRO on October 17, 2011, 16:40:53 PM

http://forum.virtuemart.net/index.php?topic=90935.0
http://dev.virtuemart.net/projects/virtuemart/wiki/Hints_for_the_use_of_the_template_system

The category view is

components/com_virtuemart/views/category/tmpl/default.php

read the above link about using template overrides, or when you update the changes with be overwrritten.

this is the stock level

Product Stock Level Picture

                  <div class="paddingtop8">
                     <span class="vmicon vm2-<?php echo $product->stock->stock_level ?>" title="<?php echo

$product->stock->stock_tip ?>"></span>
                     <span class="stock-level"><?php echo JText::_

('COM_VIRTUEMART_STOCK_LEVEL_DISPLAY_TITLE_TIP') ?></span>
                  </div>
Title: Re: Browse page templateing and other problems...
Post by: jjk on October 17, 2011, 16:49:19 PM
...or look here for a slightly less technical explanation  ;D
http://forum.virtuemart.net/index.php?topic=90397.msg296419#msg296419 (http://forum.virtuemart.net/index.php?topic=90397.msg296419#msg296419)
Title: Re: Browse page templateing and other problems...
Post by: lz1kka on October 17, 2011, 17:32:58 PM
Thank you BanquetTables.pro and jjk!
With your help I was able to remove the "stock level" from .default.php but the thumbnail images in the columns are still smaller. Nowhere in this file I can't find sizes of thumbs. How to continue editing from here?
Title: Re: Browse page templateing and other problems...
Post by: PRO on October 17, 2011, 17:42:38 PM
you have to change the width of the div. I think its set to width50 

AND::: when you change default.php your changes will be erased when an update occurs.
Override it
http://docs.joomla.org/Layout_Overrides_in_Joomla_1.6
Title: Re: Browse page templateing and other problems...
Post by: jjk on October 17, 2011, 18:25:21 PM
...\components\com_virtuemart\views\category\tmpl\your_renamed_copy_of_default.php
around line 206:    <div class="width30 floatleft center">  change it to "width100... if you want the full thumbnail size.

If you still see some scaling on the browse page, you can also change this:
...\components\com_virtuemart\assets\css\vmsite-ltr.css
around line 162: ...product .spacer img{max-width:90%;height:auto;} ...change it to 100%.
Title: Re: Browse page templateing and other problems...
Post by: lz1kka on October 17, 2011, 19:01:15 PM
Quote from: jjk on October 17, 2011, 18:25:21 PM
...\components\com_virtuemart\views\category\tmpl\your_renamed_copy_of_default.php
around line 206:    <div class="width30 floatleft center">  change it to "width100... if you want the full thumbnail size.

If you still see some scaling on the browse page, you can also change this:
...\components\com_virtuemart\assets\css\vmsite-ltr.css
around line 162: ...product .spacer img{max-width:90%;height:auto;} ...change it to 100%.
jjk, it is the best help for begginers I have ever seen! Thank you!
First of all I made the first step, but the scaling was still active. After that I changed vmsite-ltr.css to {max-width:100%;height:auto;} but the thumbnails are still smaller. You can check this on my site: http://www.twelve-group.com/royalbags/index.php?option=com_virtuemart&view=category&virtuemart_category_id=9&lang=en

EDIT: Now I saw that the problem is not just the thumbnail resizing. The title and the price of the products are transferred to the bottom line. May be I have to change some value of the column...
Title: Re: Browse page templateing and other problems...
Post by: PRO on October 17, 2011, 19:07:52 PM
div class="width30 floatleft center"

THATS wrapped around it.

just take the width30 totally out of it. You do not need it.

http://forum.virtuemart.net/index.php?topic=73348.0
Title: Re: Browse page templateing and other problems...
Post by: jjk on October 17, 2011, 19:21:50 PM
Quote from: lz1kka on October 17, 2011, 19:01:15 PM
After that I changed vmsite-ltr.css to {max-width:100%;height:auto;} but the thumbnails are still smaller.

...Setting the max-width to "auto" too, probably would also help.
But BankuetTables.pro suggestion to take the "width30 floatleft center" out completely, is a good idea.

If you don't use it yet, try to install a free tool called "Firebug" (Firefox browser plugin).  You can use it to place your mouse pointer over the area which you want to change and it will show the relevant code in a window.
Title: Re: Browse page templateing and other problems...
Post by: lz1kka on October 17, 2011, 20:11:59 PM
I changed the max-width to "auto" too, after that I removed  <div class="width30 floatleft center"> and closing </div> and now the thumbnails are shown normally! Many thanks!!!
Unfortunately the text wrapping is still active.

I downloaded FireBug. Very helpful extension. I will use it often may be, but now I can't resolve the problem with it. Somewhere in the code is assigned another value width30, which I think wrap the title, price and the button, but I can't find it...
Title: Re: Browse page templateing and other problems...
Post by: jjk on October 17, 2011, 20:51:07 PM
Look for <div class="width30 floatright"> around line 209 and <div class="width70 floatright"> around line 232 in the file ...\components\com_virtuemart\views\category\tmpl\default.php (or your renamed copy of this file)
I've set mine to 100 and 95
Title: Re: Browse page templateing and other problems...
Post by: lz1kka on October 17, 2011, 20:55:48 PM
I will try right now... ;)
Title: Re: Browse page templateing and other problems...
Post by: lz1kka on October 17, 2011, 21:04:03 PM
Looked at the file several times but couldn't find content like this: <div class="width30 floatright"> or <div class="width70 floatright">
It is a little strange...
Title: Re: Browse page templateing and other problems...
Post by: jjk on October 17, 2011, 21:18:37 PM
Ah - a small copy and paste error  ;D
line 209 is: <div class="width30 floatleft center">
line 232 is: <div class="width70 floatright">
(unless you changed one of them already)

If you don't find this, you are looking at the wrong file  ;)
Title: Re: Browse page templateing and other problems...
Post by: lz1kka on October 17, 2011, 21:29:42 PM
Bad news... I can't find these codes anywhere  :-\
I opened the original default.php file and there aren't these lines too.
In my file I found this:
// Show Products ?>
<div class="product floatleft<?php echo $Browsecellwidth $show_vertical_separator ?>">
<div class="spacer">

<?php /** @todo make image popup */
echo $product->images[0]->displayMediaThumb('class="browseProductImage" border="0" title="'.$product->product_name.'" ',true,'class="modal"');
?>


Title: Re: Browse page templateing and other problems...
Post by: PRO on October 17, 2011, 21:51:05 PM
because you are looking at the picture. YOU are trying to change the text div.

The name
product_name

the short description
product_s_desc

Title: Re: Browse page templateing and other problems...
Post by: lz1kka on October 17, 2011, 21:54:12 PM
If I trust FireBug, I have to change this code in file vmsite-ltr.css:
.width26 {
    width: 26%;
}
.width27 {
    width: 27%;
}
.width28 {
    width: 28%;
}
.width29 {
    width: 29%;
}
.width30 {
    width: 30%;
}
.width31 {
    width: 31%;
}
.width32 {
    width: 32%;
}
.width33 {
    width: 33%;


.width30 {
    width: 100%;

Will it be correct?
Title: Re: Browse page templateing and other problems...
Post by: jjk on October 17, 2011, 22:16:02 PM
No, that would probably mess up you layout even more. Looks to me like you followed BanquetTables.pro's earlier advice already:
http://forum.virtuemart.net/index.php?topic=92010.msg302765#msg302765 (http://forum.virtuemart.net/index.php?topic=92010.msg302765#msg302765) (mixing two different solution won't work)
BTW - BanquetTables.pro understands code better than I do. Therefore my suggestions are more likely the simple stupid aproach.  ;D

The original lines I was talking about are these:
// Show Products ?>
<div class="product floatleft<?php echo $Browsecellwidth $show_vertical_separator ?>">
<div class="spacer">
<div class="width30 floatleft center">
<?php /** @todo make image popup */
echo $product->images[0]->displayMediaThumb('class="browseProductImage" border="0" title="'.$product->product_name.'" ',true,'class="modal"');
?>



<!-- The "Average Customer Rating" Part -->
<?php if (VmConfig::get('pshop_allow_reviews') == 1) { ?>
<span class="contentpagetitle"><?php echo JText::_('COM_VIRTUEMART_CUSTOMER_RATING'?>:</span>
<br />
<?php
// $img_url = JURI::root().VmConfig::get('assets_general_path').'/reviews/'.$product->votes->rating.'.gif';
// echo JHTML::image($img_url, $product->votes->rating.' '.JText::_('COM_VIRTUEMART_REVIEW_STARS'));
// echo JText::_('COM_VIRTUEMART_TOTAL_VOTES').": ". $product->votes->allvotes; ?>

<?php ?>


<div class="paddingtop8">
<span class="vmicon vm2-<?php echo $product->stock->stock_level ?>" title="<?php echo $product->stock->stock_tip ?>"></span>
<span class="stock-level"><?php echo JText::_('COM_VIRTUEMART_STOCK_LEVEL_DISPLAY_TITLE_TIP'?></span>
</div>
</div>

<div class="width70 floatright">

<h2><?php echo JHTML::link($product->link$product->product_name); ?></h2>

<?php // Product Short Description


Title: Re: Browse page templateing and other problems...
Post by: lz1kka on October 17, 2011, 23:46:02 PM
YES!! I WIN!  ;D
Now I have big and beautiful thumbnail image and centered title, price and button.
I changed directly the default.php because my custom file was absolutely different (may be my mistake)

I have another problem that you may know decision. I need different product colors. The problem is that when I add new color variations with the same price as the original main product (value 0) it show me on the site "Color black: free Color white: free". I want just to be a dropdown menu with options, but when I try to configure in "Custom fields" it didn't work properly.
Title: Re: Browse page templateing and other problems...
Post by: PRO on October 18, 2011, 13:10:19 PM
http://forum.virtuemart.net/index.php?topic=90833.msg298101#msg298101
Title: Re: Browse page templateing and other problems...
Post by: lz1kka on October 20, 2011, 13:12:09 PM
Quote from: BanquetTables.pro on October 18, 2011, 13:10:19 PM
http://forum.virtuemart.net/index.php?topic=90833.msg298101#msg298101

BanquetTables.pro thank you! The link is useful!I changed the look of color dropdown and removed the text "free" from the .ini language file.
Unfortunately now I found other problem with the "Ask a question about this product" button. It's opening the form with email and text, but when you click on submit button it show an errors:

Warning: require(/home/twelvegr/public_html/royalbags/components/com_virtuemart/controllers/askquestion.php) [function.require]: failed to open stream: No such file or directory in /home/twelvegr/public_html/royalbags/components/com_virtuemart/helpers/shopfunctionsf.php on line 272

Fatal error: require() [function.require]: Failed opening required '/home/twelvegr/public_html/royalbags/components/com_virtuemart/controllers/askquestion.php' (include_path='/usr/local/php4/lib/php:.:/usr/lib/php:/usr/local/lib/php') in /home/twelvegr/public_html/royalbags/components/com_virtuemart/helpers/shopfunctionsf.php on line 272


What about this?
Title: Re: Browse page templateing and other problems...
Post by: jjk on October 20, 2011, 13:34:43 PM
http://forum.virtuemart.net/index.php?topic=91751.msg301381#msg301381 (http://forum.virtuemart.net/index.php?topic=91751.msg301381#msg301381)
...probably fixed in SVN version meanwhile.
Title: Re: Browse page templateing and other problems...
Post by: lz1kka on October 20, 2011, 14:46:52 PM
Ohh... yeah...
You have to know that I'm not lazy, just seems that I can't use the search correctly.  ::)
Title: Re: Browse page templateing and other problems...
Post by: PRO on October 20, 2011, 15:30:59 PM
Quote from: lz1kka on October 20, 2011, 13:12:09 PM


BanquetTables.pro thank you! The link is useful!I changed the look of color dropdown and removed the text "free" from the .ini language file.

dont change the file in the language file.

COPY the line of text.

The go to language/overrides/en-GB.override.ini

PASTE the Line of text in that file changed to what you want.

The original vmart language file will be overwritten IF an update has changed to that file.

Title: Re: Browse page templateing and other problems...
Post by: jjk on October 20, 2011, 15:43:51 PM
Quote from: BanquetTables.pro on October 20, 2011, 15:30:59 PM
The go to language/overrides/en-GB.override.ini

Thanks for this hint - although I've clicked on the language folders hundreds of times, I never noticed the language/overrides folder  :-[ ;D
Title: Re: Browse page templateing and other problems...
Post by: conejo on November 18, 2011, 10:00:51 AM
I need to do some modifications to the css properties in the "vmsite-ltr.css" file.
I like to have the file untouched and override it in my template.

Like the default.php file in productdetails like this:
"YOUR_TEMPLATE/html/com_virtuemart/productdetails/default.php"
described in "http://forum.virtuemart.net/index.php?topic=90935.msg298367#msg298367"
Topic

Is there a similar solution to override vmsite-ltr.css ?

Thanks a lot,
Alejandro Löwy
Title: Re: Browse page templateing and other problems...
Post by: PRO on November 18, 2011, 12:48:12 PM
Take the vm-litr
and put it in your template folder.

THEN, add the code to your template file .

THEN, in vmart admin. UNCHECK "use vmart css"


WHAT i am doing is copying the whole file, then placing it in my template.css file

Title: Re: Browse page templateing and other problems...
Post by: conejo on November 22, 2011, 10:41:06 AM
It works perfectly.

Thanks a lot!