Virtuemart Support :: Topic: [SOLVED] How to customize Quick Look's layout (1/1)

Welcome, Guest

TOPIC: [SOLVED] How to customize Quick Look's layout

[SOLVED] How to customize Quick Look's layout 11 years 7 months ago #154

cyrille laloy

Quick View works on all our products; it's a great feature :)

We got 2 questions that differ from the topic pcenter opened with similar title though

First: Firebug says no css files are used to style the markup in "Quick View" iframe
i.e. the only css rules that are applied into the iframe come from: index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=497&virtuemart_category_id=35&tmpl=component&flexible=quickbuy
Please sirs how can we override then, i.e. customize Quick View's layout using css?

Second: Additionnal images show greatly in "Quick View" (a), but not really into Product detail (b).
We'd like if Product detail shows additionnal images like in QuickView.
And I'd rather ask before digging into the theme's code for our needs as there maybe a good reason for that.

Screenshots: (a) Quick View, (b) Product Detail
Live page

Markup for (a) :

<div class="FlexibleWeb-productdetails-view">
<div>
<div class="width35 floatleft">
<div class="FlexProductDetailV2left">
<a href="index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=708&virtuemart_category_id=38&tmpl=component&flexible=largeview">
<div class="flexible-zoom-additionalImages" style="text-align:left; margin-top:25px;">
<a class="flexible-zoom-gallery" rel="useZoom: 'zoom1', smallImage: 'http://guixmodel.net/images/stories/virtuemart/product/Green_Thunder_Je_4f9dae13c1ac7.jpg'" href="images/stories/virtuemart/product/Green_Thunder_Je_4f9dae13c1ac7.jpg">
<img class="zoom-tiny-image-additional" style="height:50px; width:auto;" src="images/stories/virtuemart/product/resized/Green_Thunder_Je_4f9dae13c1ac7_200x200.jpg">
</a>
<a class="flexible-zoom-gallery"...

Markup for (b) :

<div class="FlexibleWeb-productdetails-view">
<div class="product-neighbours" style="padding-bottom:10px;">
<div>
<div class="width35 floatleft">
<div class="FlexProductDetailV2left">
<div class="main-image">
<div id="wrap" style="top:0px;z-index:9;position:relative;">
<a id="zoom1" class="flexible-zoom" title="Green Thunder Jet ARF" href="images/stories/virtuemart/product/Green_Thunder_Je_4f9dae13c1ac7.jpg" style="position: relative; display: block;">
<div class="mousetrap" style="background-image: url("."); z-index: 999; position: absolute; width: 233px; height: 143px; left: 0px; top: 0px; cursor: url("http://guixmodel.net/templates/gk_music_free/html/com_virtuemart/assets/Flexible/zooming.png") 0 16, crosshair;"></div>
</div>
</div>
</div>
<a rev="iframe|550|900" rel="facebox" href="index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=708&virtuemart_category_id=38&tmpl=component&flexible=largeview">
<div class="flexible-zoom-additionalImages" style="text-align:left; margin-top:25px;">
<a class="flexible-zoom-gallery" rel="useZoom: 'zoom1', smallImage: 'http://guixmodel.net/images/stories/virtuemart/product/Green_Thunder_Je_4f9dae13c1ac7.jpg'" href="images/stories/virtuemart/product/Green_Thunder_Je_4f9dae13c1ac7.jpg">
<img class="zoom-tiny-image-additional" style="height:50px; width:auto;" src="images/stories/virtuemart/product/resized/Green_Thunder_Je_4f9dae13c1ac7_200x200.jpg">
</a>
<a class="flexible-zoom-gallery"...

Last Edit: 11 years 6 months ago by Support.

The topic has been locked.

How to unify Product details & Quick Look's layout 11 years 7 months ago #168

cyrille laloy	Hi sirs, Layout of additionnal images for a product in Quick View is fine (attachement 1) Layout of additionnal images for a product in Detail is weird (attachement 2) Please let me know whether the difference between the 2 layouts is part of the theme, or a local/theme implementation bug, thanks. Attachments: Vm2-Fashio...ages.png (67KB) Vm2-Fashio...ages.png (95KB)
	The topic has been locked.

How to unify Product details & Quick Look's layout 11 years 7 months ago #177

Support

Hi,

You can't customize the QUICK LOOK layout by any CSS it is not an easy thing to do, actually "QUICK LOOK" and "REGULAR PRODUCT DETAILS PAGE" are the same. So you can't change something in QUICK LOOK layout but keep them same in regular product details page. There are slightly different things between those layouts only, and they were done through PHP conditions. (like; if quick look, then hide this DIV element, etc..)

About the additional image size problem, it is very weird issue. Probably one of your CSS file is broken the thumbnail size. Please provide me a Live URL where i can see your website and point out that broken CSS rule.

Cheers.

The topic has been locked.

How to unify Product details & Quick Look's layout 11 years 7 months ago #179

cyrille laloy

Hi admin,
Thank you very much for the precisions.

product exemple is on this test web site (it is the last one 'Green Thunder Jet ARF').

Note on this test web site:
- there's no cache
- all our override css rules are in the override.css only.

Actualy we don't want to change something in QUICK LOOK layout. But we'd like to be able to style it (e.g. change fonts from serif to the same used on the website. Be able to styling the Quick View would be a plus actually!

I digged in it a bit further in the additional images different rendering:
1. As you said the html code is the same on both views:

<div class="FlexibleWeb-productdetails-view">
  <div class="product-neighbours" style="padding-bottom:10px;">
    <div>
      <div class="width35 floatleft">
        <div class="FlexProductDetailV2left">
          <div class="main-image">
          </div>
          <a rev="iframe <snip> >
            <div class="flexible-zoom-additionalImages" style="text-align:left; margin-top:25px;">
              <a class="flexible-zoom-gallery" <snip> >
                <img class="zoom-tiny-image-additional" style="height:50px; width:auto;" src= <snip> >  
              </a>

2. Product Detail loading the template CSS (might happen to some of your customers) is what makes the difference:

section img {
    height: auto !important;
    max-width: 100% !important;
}

from joomla.css
But still, the container 'FlexibleWeb-productdetails-view' width is ~200px less in Product Detail than in Quick View. So as you'll see we'll have something to do even if we removed the template style attribute for section images or the additional images won't fit.

The topic has been locked.

How to unify Product details & Quick Look's layout 11 years 7 months ago #181

cyrille laloy	Got rid of the additional images issue in Product Detail with a simple css override. Hopefully you sir can have a look at the need we have to style the QUICK LOOK layout.
	The topic has been locked.