Virtuemart Support :: Topic: PureMart category layout breaks with Yootheme Lava (1/1)

Welcome, Guest

TOPIC: PureMart category layout breaks with Yootheme Lava

PureMart category layout breaks with Yootheme Lava 10 years 8 months ago #5924

Manuela Hartkorn	Hi, there is a similar topic, however it brings me not forward to solve this issue. The Pure Mart break my category layout with Yoothemes Lava template on a Joomla 2.5.14 with VM 2.0.22a. Here is the link to the category: Category Page Thanks for your help in advance!
	The administrator has disabled public write access.

PureMart category layout breaks with Yootheme Lava 10 years 8 months ago #5928

John

Sorry - but as you say - the problems come from your Lava template -
there are so many e.g. the main column is given a width of 25% !!!!!

This is standard web design - you find the css problems and you fix them

long article here: www.flexiblewebdesign.com/forum-virtuemart-2-template-puremart-support/342-using-firebug-for-customization-or-troubleshooting

You have to go stage by stage and find what the problem is (the major one is the column widths which are cbizarre to say the least)

Thats why our cat view looks silly - not enough room..

Cheers

The administrator has disabled public write access.

PureMart category layout breaks with Yootheme Lava 10 years 8 months ago #5933

Manuela Hartkorn	After hours of searching and wasting time I found now a good solution: Kicked OFF your template and all works fine!
	The administrator has disabled public write access.

PureMart category layout breaks with Yootheme Lava 10 years 8 months ago #5938

John	Well as I can see your still using it, it can't be that bad.......
	The administrator has disabled public write access.

PureMart category layout breaks with Yootheme Lava 10 years 8 months ago #5954

Manuela Hartkorn

What you see is a test environment and not in official use. I'm looking for a compromise and thought that I find it in the Yootheme Glass template with warp 6 framework.

However your theme doesn't work properly. In product details view the tabs are no longer working when you reload the browser. The same issue is on browse page with view switcher. The CSS doesn't load in the quick view .....

Although your templates should work with all Joomla templates and frameworks! Link to your video

The administrator has disabled public write access.

PureMart category layout breaks with Yootheme Lava 10 years 8 months ago #5970

Support

Hi,

I feel sorry that you have wasted your time to find a solution for your 1st query. I wish i have seen your topic before, because i know what the problem is. Basically you needed to add extra </div> line to the bottom of the category browse page PHP file, which is right here:

/templates/YOUR_TEMPLATE/html/com_virtuemart/category/default.php

But since you have found a solution, then no need to worry.
About your other inquiries:

- The TAB and the SWITCH button in category browse page stop working .
It sounds like a jQuery Conflict issue, most likely caused by loading a multiple jQuery libraries in the product details page. It is a solvable thing. I need to see the live URL to figure out what might cause it.

Some CSS's don't get loaded in the quickView because Joomla itself doesn't load the CSS files in the QuickView window.
To fix it open this PHP file:

/templates/YOUR_TEMPLATE/component.php

And include the necessary (that you want them to be loaded) CSS files in it manually, by this line below (between <head> .. </head> )

<l-ink rel="stylesheet" href="THE_CSS_URL" type="text/css" />

Then the "QuickView" window will start loading those CSS files within the QuickView window.

Our VM Template works all joomla templates and frameworks. There is nothing wrong with this speech. But there might be some compatibility problems, and they are solvable things, which is why we are here, and we are providing support.

Regards.
Support & Development.

The administrator has disabled public write access.

PureMart category layout breaks with Yootheme Lava 10 years 8 months ago #6062

Manuela Hartkorn

Hi,

Nice that there is also a competent answer. Thank you!

I added an extra </div> line to the bottom of the category browse page before I open this topic without success.

The problem of broken layout was simply in the short description. If the description contains HTML AND in the category/default.php on line 335 the length of the short description is given too short, then the HTML is interrupted and layout breaks in some templates.

In my case, I increased the lenght from 100 (standard) to 400 and the output displays correctly.

In most cases, it seems the error occurs only with newer templates like Yoothemes Lava.

Regarding the switch view, you are right, it's a JQuery issue. Tried your TOPIC: Solving jQuery issues after updating to VM2.0.22a without succes. The reason is probably the Yootheme´s Widgetkit component. Installed the Easy jQuery plugin and it works well except the Multi Grid View. There is still a problem with Add To Cart bottom. Using Android or IOS the error comes up in all views. Kindly request your assistence for this issue. Live site is here: http://www.forster-winzer.de/j25/wein-sekt-shop/weine-mit-auszeichnungen.html

Regarding CSS, I included the css file and it works. There is a small issue (see attached screenshot) in the Quick View. There are some code snippets at the left upper site above the product image. Don't know where it comes from. I think it is related to the short description. Would be nice if you could help me in this case too.

Kind regards,
Teresa

Attachment quick_view.jpg not found

Last Edit: 10 years 8 months ago by Manuela Hartkorn. Reason: Error in the text

The administrator has disabled public write access.

PureMart category layout breaks with Yootheme Lava 10 years 8 months ago #6080

Support

Hi,

The "add to cart" button issue in the MultiGridView issue is nothing but a CSS z-index issue. I can't believe this issue has been missed until now. (maybe no one uses "large add to cart" button on MultiGridView, that's why no body has asked about it)

Once the DIV element is hovered, the buttons (tinyAddToCart, QuickView, ProductDetails) show up, and the ordinary add to cart button at the bottom stays behind the hovered DIV element. So it becomes not click-able. It can be fixed by changing the DIV element orders. The solution is easy but i can't provide you the patch over here, it might confuse you. I am noting this patch to "to-do" list and it will be applied in the next version of PureMart

But if you ask my opinion, you don't need the "MultiGridView" button at all. It is a pretty useless functionality in your layout right now, because you have:
ListView = 1 product per row
GridView = 1 product per row
MultiGridView = 2 products per row.

But this doesn't make any sense, it should have been:
ListView = 1 product per row
GridView = 2 product per row
MultiGridView = 3 products per row.

But i guess you can't do that, because 3 products per row doesn't fit in your website layout.
Here is my suggestion to you. You should disable the "MultiGridView" button, and use this:
ListView = 1 product per row
GridView = 2 product per row

This will be more professional way of usage and would look better. (beside the problem of add to cart button in MultiGridView will be gone since you don't have the multiGridView layout anymore).

To disable the "MultiGridView" button from the viewSwitcher, include this CSS rule:

#switch_buttons.switch_thumb3 {
display:none;
}

to:
www.forster-winzer.de/j25/templates/yoo_lava/html/com_virtuemart/assets/css/flexibleVM2Global.css

About the extra " /> character in the quickView window, i have really no idea what it comes from. Could be from the "short description", no idea. Try to remove the short description from one product temporarly to see if it comes from there.

Ideally, you shouldn't put any HTML tags inside the "short description" field. Because short description is also used in the META tags as description of the page, so it should be plain text and shouldn't be long.

Regards.

The administrator has disabled public write access.

PureMart category layout breaks with Yootheme Lava 10 years 7 months ago #6182

Manuela Hartkorn

Hi,

Thanks for your response!

I'm near completion of my modifications and I'm OK with the workaround regarding large Add To Cart button. However, in this case the Tiny Add ToCart, Quick View and More Info buttons should work.

They work in FF IE and Chrome, tested on PC and smartphone (Android).
But in Safari they didn't work correctly in Grid and Multi Grid View.. Tested on Ipad 2 and MAC. The Quick View group popup opens, however the links aren't clickable. The large Add to Cart button doesn't open too when the Quick View group is disabled. In other browsers it works.

Here is the link to the final test page: http://www.forster-winzer.de/j251/wein-sekt-shop/eiswein-auslese.html

About the extra " /> character: This issue comes from category/default.php. One have to increase the length of characters too similar to the productdetails/default.php.

Meanwhile I use custom fields with external images to display the wine awards. So I need no HTML in short description any more.

Kind regards,

Teresa

The administrator has disabled public write access.

PureMart category layout breaks with Yootheme Lava 10 years 7 months ago #6187

Support	Hi, I am using Mac too. I did browse your website with Safari but i don't see any problem with the "quickLook" on either GridView or MultiGridView. The links are clickable on my screen (i clicked the "specifications" tab in the screenshot) Attachment ScreenShot2013-08-28at4.39.38PM.png not found
	The administrator has disabled public write access.

PureMart category layout breaks with Yootheme Lava 10 years 7 months ago #6188

Support

One more thing.

Include this CSS rule:

input.quantity-input, span.quantity-box { width:25px !important; height:30px !important;}
span.quantity-controls input.quantity-plus, span.quantity-controls input.quantity-minus {
    padding:0 !important;
margin:0px;
height:15px !important;
width:15px !important;
}

to here:
www.forster-winzer.de/j251/templates/yoo_lava/html/com_virtuemart/assets/css/flexibleVM2Global.css

The quantity buttons will look much better.

The result will be:

Attachment ScreenShot2013-08-28at4.52.25PM.png not found

In the quicklook window:

Attachment ScreenShot2013-08-28at4.52.51PM.png not found

Regards.

The administrator has disabled public write access.

PureMart category layout breaks with Yootheme Lava 10 years 7 months ago #6189

Manuela Hartkorn	Hi, many thanks for the css of quantity box - it looks really much better. Regarding the MAC I can not accurately evaluate it. The clue came from a customer. I have tried it out on my IPAD 2 (IOS 5.1.1 actual Safari) with the result that the links in Grid and Multi Grid View definitely can not be opened. Kindly request to reproduce this issue on an Ipad device. Regards, Teresa
	The administrator has disabled public write access.

PureMart category layout breaks with Yootheme Lava 10 years 7 months ago #6207

Support

Hi,

It is normal if the "quickook" can't be accessible through touch-based devices.
It is because the "quicklook" button appears when "mousehover" on the product picture. But as you might know; there is no "mousehover" functionality with touch-based devices.

At the same time, the product picture has <a href=""> link to product details page.
Basically for the product thumbnail through the category browse page (for computers);
On-Click = goes to product details page
Onmousehover = the tiny buttons (quicklook, add-to-cart, more info) show off over the product thumbnail.

As you might guess the "click" functionality is replaced with "touch" for the touch-based devices. Therefore once you touch the product picture it goes to product details page directly before showing the tiny buttons.

This is not an issue, it is what it is. There are 2 possible ways to make it work;

1- putting the quicklook button somewhere to be seen directly. (not somewhere that shows off within mouse hovering)

2- deleting the <a href=""> link from the product thumbnail, and putting some extra JS and manipulate "mousehover" with "touchBegin". , So once the product picture is touched, instead of opening the product details page, the tiny buttons (that includes "quicklook" button) will show off on the thumbnail.

I hope you understand what i am saying.
But as i said, this is not a "bug". It is what it is. Since handling this situation by either following the 1st option or 2nd option i have declared above is a custom modification, it is not covered under our free support. We don't provide support or guidance for custom changes/modifications.

Regards.
Support & Development

The administrator has disabled public write access.