VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: fmlk4u on April 05, 2013, 17:22:43 PM

Title: Related Categories and Related Products list themselves vertically
Post by: fmlk4u on April 05, 2013, 17:22:43 PM
Already more than half a year the issue I have is already reported but not answered, so let me try again.:


« on: September 02, 2012, 07:58:29 AM »

    Quote

Hi All,

Done a search on the forums with no applicable results, so hopefully I'm not reposting an existing question.

My VM2 Store, by default, lists my categories Horizontally.  Perfect!

Unfortunately, Related Categories and Related Products list themselves vertically for some reason, wasting a lot of screen space.  :o
____________________________________________________________________________________________________________
My addition: I run latest VM 2.0.20b

When I add multiple related categories to an article, these are positioned tightly beneath each other. See attachment. How can I position them three in a row like the view of categories on the page. Thanks so much for your help.

Regards, Fred

[attachment cleanup by admin]
Title: Re: Related Categories and Related Products list themselves vertically
Post by: K&K media production on April 05, 2013, 17:34:32 PM
Do you have a link to your site? Is this your own template? Maybe you must adapt the css.
Title: Re: Related Categories and Related Products list themselves vertically
Post by: fmlk4u on April 05, 2013, 18:36:43 PM
Yes, the new site I am working on is http://new.keyboard-centrum.nl and I created the example product with related categories:
http://new.keyboard-centrum.nl/nl/winkel/keyboards/at-3-detail

I can even create super user account for you if needed :) I can copy the template css in the the thread or send it. Thanks so much for your help and for your fast reply!!

Regards, Fred

Title: Re: Related Categories and Related Products list themselves vertically
Post by: K&K media production on April 05, 2013, 19:23:40 PM
insert the following in your template css file:

product-field product-field-type-Z {
   width: 33%;
   text-align: center;
   margin-top: 20px;
}
product-field product-field-type-Z img {
   margin: auto;
}

Best Regards,
Maik
Title: Re: Related Categories and Related Products list themselves vertically
Post by: fmlk4u on April 05, 2013, 20:47:38 PM
I added the css and it didn't work. So I tried

.product-field product-field-type-Z {
   width: 33%;
   text-align: center;
   margin-top: 20px;
}
.product-field product-field-type-Z img {
   margin: auto;
}
And it also didn't work as you can see at http://new.keyboard-centrum.nl/nl/winkel/keyboards/at-3-detail

Thanks anyway for trying to help.

By the way I added it in the template.css where I copied also the virtuemart css

Regards, Fred
Title: Re: Related Categories and Related Products list themselves vertically
Post by: K&K media production on April 05, 2013, 21:11:18 PM
I can't find it in your template.css

and you must use this

.product-field.product-field-type-Z

.product-field.product-field-type-Z img
Title: Re: Related Categories and Related Products list themselves vertically
Post by: fmlk4u on April 05, 2013, 21:33:22 PM
Thanks! Now it works!!!

Great!
Title: Re: Related Categories and Related Products list themselves vertically
Post by: fmlk4u on April 05, 2013, 21:45:23 PM
Well, one little cosmetic issue left. Can you tell me why the first category on page

http://new.keyboard-centrum.nl/nl/winkel/keyboards/at-3-detail

doesn't align with the other two? Thanks again in advance for your fast reply
Title: Re: Related Categories and Related Products list themselves vertically
Post by: K&K media production on April 06, 2013, 10:54:49 AM
Your image has another heigh.
Title: Re: Related Categories and Related Products list themselves vertically
Post by: fmlk4u on April 06, 2013, 21:18:33 PM
Hi Maik,

Yes I found out and edited the image by square out the canvas. Thanks again so much for your kind help. Have a good time.

Regards, Fred
Title: Re: Related Categories and Related Products list themselves vertically
Post by: fmlk4u on April 06, 2013, 23:43:16 PM
Since you could help me so easy, which code is needed for related articles (sub-articles). On http://new.keyboard-centrum.nl/nl/winkel/keyboards/tyros-4-xl-detail?showall=1#accessoires you can see they are now also positioned vertically. Thanks again for your great support.

Kind regards, Fred
Title: Re: Related Categories and Related Products list themselves vertically
Post by: K&K media production on April 07, 2013, 00:04:11 AM
same thing with

.product-field.product-field-type-R

You can use firebug to find the css classes
Title: Re: Related Categories and Related Products list themselves vertically
Post by: fmlk4u on April 07, 2013, 00:18:43 AM
Hi Maik,

Wow, how fast your response. Although after midnight here, I tried and copied the following in the css:
.product-field.product-field-type-R {
   width: 33%;
   text-align: center;
   margin-top: 20px;
}
.product-field.product-field-type-R img {
   margin: auto;
}
But is didn't have any effect.

Tomorrow new day for fixing :)

Regards,, Fred
Title: Re: Related Categories and Related Products list themselves vertically
Post by: K&K media production on April 07, 2013, 09:12:03 AM
float: left;
Title: Re: Related Categories and Related Products list themselves vertically
Post by: fmlk4u on April 07, 2013, 17:45:30 PM
Thanks so much Maike, that did the trick.

Next I have a problem with Embedding youtubes, but I will write a new thread about it.

Regards, Fred
Title: Re: Related Categories and Related Products list themselves vertically
Post by: K&K media production on April 07, 2013, 17:48:48 PM
For embedding YouTube you can use my plugin:

http://extensions.virtuemart.net/products/youtube-detail
Title: Re: Related Categories and Related Products list themselves vertically
Post by: fmlk4u on April 07, 2013, 18:43:02 PM
Hi Maik,

For example on the following detailed page I have embedded youtube using Nonumber Sourcere plugin:http://new.keyboard-centrum.nl/nl/winkel/keyboards/arranger-keyboard/tyros-4-xl2012-12-15-16-39-10-detail?showall=1#multimedia
However the problem is when I have to change anything, e.g.update the price and save again, the multimedia is disappeared. Can I avoid such things using your plugin. Will it also work for Joomla 3? I might purchase you plugin when it easy and stable keeps multimedia embedded.

Regards, Fred
Title: Re: Related Categories and Related Products list themselves vertically
Post by: fmlk4u on April 07, 2013, 18:53:23 PM
Can I position the youtube via your plugin also into the multimedia tab of the tabbed dialog ?

Regards, Fred
Title: Re: Related Categories and Related Products list themselves vertically
Post by: K&K media production on April 07, 2013, 18:55:53 PM
It works fine and you have a lot of settings for the player layout. Look at the demo on

http://extensions.virtuemart.net/products/youtube-detail

This is a tutorial video ... and it is implemented with this plugin

make a custom field position for the video and it will be ever on this position on product detail page

here another example: (choose the trailer tab ... it is this, what you like)

http://www.vp-masberg.de/en/shop/dvds/aikido/aikido-von-a-bis-z-grundtechniken-vol-3-detail.html


atm vm is only for joomla 2.5, but I will update the plugin for new vm versions



Title: Re: Related Categories and Related Products list themselves vertically
Post by: fmlk4u on April 07, 2013, 19:09:10 PM
When I purchase the plugin, can I make the position the Multimedia tab? This tabbed dialog is created by the tabber plugin and using 'code':

{tab=Description|grey}


{tab=Specification|grey}

{tab=Accessories|grey}

{tab=Multimedia|grey}

{source} "youtube embed code" {/source}

{/tabs}

So the position I want is "{source} "youtube embed code" {/source}"

How can this be done?
Fred
Title: Re: Related Categories and Related Products list themselves vertically
Post by: fmlk4u on April 08, 2013, 00:00:57 AM
On my site I use the Nonumber Tabs plugin. If you can tell me how to define the psotion for multimedia, then I will purchase the extension.
When for an article there is no multimedia it will be like:

{tab=Description|grey}

{tab=Specification|grey}

{tab=Accessories|grey}

{/tabs}

In case I want to add one or more youtubes I will add:

{tab=Multimedia|grey}

{source} "youtube embed code" {/source}

So {tab=Multimedia|grey} is the position.

Thanks for further help.
Title: Re: Related Categories and Related Products list themselves vertically
Post by: K&K media production on April 08, 2013, 02:55:45 AM
The normal way is with PHP:

<?php
          $this->position='trailer';
         echo $this->loadTemplate('customfields');
?>

and in Custom Fild settings set the position "trailer" or what you want

but wait, atm I make a new version of the plugin and I hope I can upload it tomorrow
Title: Re: Related Categories and Related Products list themselves vertically
Post by: K&K media production on April 10, 2013, 01:00:47 AM
have you tried it with the position?

the new version of my plugin is ready and I hope the extension shop upload it today
Title: Re: Related Categories and Related Products list themselves vertically
Post by: fmlk4u on April 10, 2013, 21:26:04 PM
Hi Maik,

I have not had time to get to this issue. I am still very busy entering articles and building the website. It has all to be done in private time during evenings. But I will await your new version. And then I will see to go on after purchasing the plugin. My client was willing to buy the pluging, but I told him that I can better do it, since I have to download it to my PC anyway and install it.

Where, in which php-file must I put the code? I might need some help. But first will dig in it myself.
Title: Re: Related Categories and Related Products list themselves vertically
Post by: K&K media production on April 10, 2013, 22:14:45 PM
Hi,

the new version is ready to download:

http://extensions.virtuemart.net/products/youtube-detail

The code must in the template respectively in the multimedia tab, where you have added the youtube code.
Title: Re: Related Categories and Related Products list themselves vertically
Post by: fmlk4u on April 12, 2013, 20:29:06 PM
Hello Maike,

I just purchased the plugin and will go to watch the video in the mean time. Your final sentence is not clear to me. But maybe once I installed it I will find out

Regards, Fred
Title: Re: Related Categories and Related Products list themselves vertically
Post by: fmlk4u on April 13, 2013, 00:03:55 AM
Hi Maike I installed your plugin and watched the tutorial video. However there is a difference with my use case. My product detail pageas often have a tabbed dialog like e.g. http://new.keyboard-centrum.nl/nl/winkel/keyboards/gw-8e-gw-8l2013-04-07-20-34-59-detail

And sometimes there is a tab "Multimedia" like  http://new.keyboard-centrum.nl/nl/winkel/keyboards/tyros-4-xl2012-12-15-16-39-10-detail?showall=1#multimedia

So I want the custom field of your plugin positioned iunder this tab when it is present for the article. Above you see the code of these tabs. Thanks for your support.

Regards, Fred
Title: Re: Related Categories and Related Products list themselves vertically
Post by: K&K media production on April 13, 2013, 14:06:14 PM
Quote
The normal way is with PHP:

<?php
          $this->position='trailer';
         echo $this->loadTemplate('customfields');
?>

and in Custom Fild settings set the position "trailer" or what you want

Quote
The code must in the template respectively in the multimedia tab, where you have added the youtube code.


Regards, Maik