better mobile layout for virtuemart product pages

Here's the URL to the mobile version of the site (using the iPhone layout):
http://www.deatschwerks.com/?ui=mobile

And then once that loads, navigate to a product page:
http://www.deatschwerks.com/products/fu ... -1991-2001

The layout looks really bad and the some of the text is overlapping with the dropdown box and add to cart button.

Any ideas on how to make it look better/not use some of the default VM icons/blue color?

Also, view this page on your mobile device:
http://www.deatschwerks.com/products

I'd like to default all category view pages to only 1 column (instead of it being 3 columns like the desktop view) or have it size down the category thumbnails some automatically to prevent it from breaking the mobile friendly screen width...any potential fix for that?

On another note, it would be nice if I could choose a different menu to use for the mobile layout (so that way I can prioritize menu options that mobile users would normally need)...can you add this to the list of options with the template editor?

Thanks.

Hi

I'll report the mobile view issues to programmers. Anyway the different menu need to be placed by Yourself. You can replace the line loading the menu in /layouts/iphone.php and /layouts/handheld.php to a module positioan and place a menu using mod_mainmenu there.

well i ended up figuring out how to clean up some of the styling...I used CSS style overrides and lots of "display: none;" in order to minimize the amount of content being rendered to reduce loading time.

One thing I would like to fix is...check out the following page:
http://www.deatschwerks.com/products/ac ... ?ui=mobile

As you can see, the first 3 categories (div's) are 50% wide and the last one is 100% – which is fine for the desktop layout; but for the mobile layout, I need each div to be 100% wide so that way it displays 100% screen width on the mobile version.

The code I found for it is in the "browse_notables.tpl.php" page:

Code: Select all

echo "<div style="width:". intval(round(100/$cell_count)-2) ."%;" id="".uniqid( "row_" ) ." "".(( ($i) % $products_per_row == 0) ? ' class="first_col"' : '').">";

Got any conditional code to add there to check for mobile layout and serve out 100% width for each div or somehow do it through the CSS?

Also, still would like to know in more detail on how to change which menu is used for the mobile layout. I noticed in "menu.php" there was the following code:

Code: Select all

<?php if (($gkmenu = $this->loadMenu())) $gkmenu->genMenu (); ?>

Hi

You have a css file for iphone and handheld only. There the percentage widths should be working.


For menu You got the right line. Just remove it and replace with with a module position load code. You will be able to use a menu module there.

You have a css file for iphone and handheld only. There the percentage widths should be working.

ahha! the following code fixed that issue:

Code: Select all

#product_list div {
   width: 100%!important;
}

For menu You got the right line. Just remove it and replace with with a module position load code. You will be able to use a menu module there.

I tried using

Code: Select all

<jdoc:include type="modules" name="footnav" />

but it didn't work. (Footnav is an active footer menu)...is that the correct code to use? It looks like the code that affects that menu is within the "iphone/mainnav.php" file.

Also, what kind of code mods would it take to have the menu load in the open state on only the home page (and not be closed by default)? I think this would be a good feature for the user

Hi

I just got the answer form developers. Not a good one

In general we won't style 3rd party extensions in our mobile versions.

So I'm glad You have manage to fix the width issue

The module position should works. Like You see in this file there is a login placed with exacly the same code ;/

Code: Select all

<jdoc:include type="module" name="login" />


The menu for the mobile version follows the template's mainmenu. I've tried entering the above code to load another menu but it doesn't work.

^agreed...I just tried it as well and it doesn't load when I click the "Menu" button. But it does load 2 login forms" when I click the "login" icon on the right side of the mobile layout.

Hi

Login was just an example. You need to create Your own module position for new menu. The menu button is not working because it's using a different class names so also the javascrip opening it should be changed. But I ment to replace the menu button with a new menu also. It's a customization so unfortunately I cannot help more

Dear klattr1,

I spent hours on trying to get it to work. I eventually got it to work twice to some degree. All in all I determine it wasn't worth the trouble because that wasn't the only problem, it's more mobile pretend than it is mobile ready. I recommend installing the following component package, it has a lot of built in customization and it's free.

http://extensions.joomla.org/extensions ... play/11722

You won't have the same template but you have a few to choose from (I use the iphone template). If anything it will be easier to change some colors than it is to add functionality.

Hi

Yes I also think it's the best option. Our mobile teplates got just basic options for now I'm looking for it to be improved with time.