Quick Look or Quick View of Product

[KNewbrough]

Re: Quick Look or Quick View of Product

Try this:

.quickbutton {
display: block;
height: 125px;
margin-left: auto;
margin-right: auto;
position: absolute;
top:0;
left:0;
text-align: center;
width: 216px;
z-index: 2000;
}

.quickbutton:hover {
background: url("/mm5/graphics/quicklook-button/btn_quick-look.png") no-repeat scroll center center transparent;
display: block;
height: 125px;
margin-left: auto;
margin-right: auto;
position: absolute;
top:0;
left:0;
text-align: center;
width: 216px;
z-index: 2000;
}
.CTGY .product-details, 
.PLST .product-details, 
.SRCH .product-details{
position:relative;
}

I made the quickbutton box the same size as the thumbnail (tweak the height as needed if you have other categories with taller thumbnails) and changed the vertical background alignment to center which allows the image to be centered, then removed the margin-top and added relative to the parent element so that we could use the position:absolute and top/left:0 to place the box directly on top of the thumbnail.

You may want to add cursor:pointer; to .quickbutton as well so that it feels more like a usable button.

[Datagg]

Re: Quick Look or Quick View of Product

Kyle,

Just changing the above url to /Merchant2/fancybox/source/btn_quick-look.png and substituting your css yielded no button results showing. Changed the height etc yet couldn't get a button to show.

Bruce,

Sounds awesome, no idea how to implement. here is the code on CTGY that makes it happen. Perhaps you have some time to show me how to implement.

<mvt:if expr="NOT ISNULL l.settings:product:thumbnail">
<a href="http://www.girlfriendslingerie.com/&mvta:product:code;-p-&mvta:category:code;.html"><img alt="&mvt:product:name;" class="nvbrd" src="graphics/thumbs/&mvt:product:code;t.jpg"></a>
<mvt:else>
&nbsp;
</mvt:if>
<br><mvt:item name="fonts" param="ctgy_font">
<a href="http://www.girlfriendslingerie.com/&mvta:product:code;-p-&mvta:category:code;.html"> <strong>&mvt:product:name;</strong> </a>
<br>

<mvt:comment>Begin product cost MSRP calculations display</mvt:comment>
<mvt:if expr="(l.settings:product:customfield_values:customfields:msrp GT l.settings:product:price)">
<s>$&mvt:product:customfield_values:customfields:msrp;</s> &nbsp;
<font color="#FF0000"><b>On Sale:</b></font> <b>&mvt:product:formatted_price;</b>
<div class="quickbutton fancybox fancybox.iframe" href="http://www.girlfriendslingerie.com/&mvta:product:code;.html?quick_look=1"></a> </div>
<center><a href="http://www.girlfriendslingerie.com/&mvta:product:code;-p-&mvta:category:code;.html"><img align="left" border="0" src="graphics/details-btn.png"></a></center>
<mvt:comment>End product cost MSRP calculations display</mvt:comment>

Thanks guys for the help... This has become a real thorn on setting up just right and me being no expert on .css makes it even worse.

[KNewbrough]

Re: Quick Look or Quick View of Product

Kyle,

Just changing the above url to /Merchant2/fancybox/source/btn_quick-look.png and substituting your css yielded no button results showing. Changed the height etc yet couldn't get a button to show.

That file doesn't seem to exist, so it makes sense that the button background disappears when changed to that. I'm curious why the image path would change to Merchant2 when townsqjewelry.com seems to be using mm5. Am I perhaps looking at the wrong website?

Leaving the path set to /mm5/graphics/quicklook-button/btn_quick-look.png and using all of the styles mentioned in my last post in devtools causes the buttons to behave as requested from my testing.

[Datagg]

Re: Quick Look or Quick View of Product

Hi Kyle. There are 2 sites im doing this on. One /Merchant2 other /mm5/ Both I would like to operate the same way. But for this site http://www.girlfriendslingerie.com the css looks like this.

#quick_look {
    background-color: #FFFFFF;
    height: 500px;
    width: 90%;
}
#quicklookleft {
    float: left;
    width: 100%;
}
#quicklookright {
    float: right;
    width: 100%;
}
.quicktext {
    font-size: 11px;
    font-weight: bold;
}
#quickbutton {
    display: block;
    height: 26px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -125px;
    position: absolute;
    text-align: center;
    width: 156px;
    z-index: 2000;
}
#quickbutton:hover {
    background: url("/Merchant2/fancybox/source/btn_quick-look.png") no-repeat scroll center bottom transparent;
    display: block;
    height: 26px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -125px;
    position: absolute;
    text-align: center;
    width: 156px;
    z-index: 2000;
}
.quickbutton {
    display: block;
    height: 26px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -125px;
    position: absolute;
    text-align: center;
    width: 156px;
    z-index: 2000;
}
.quickbutton:hover {
    background: url("/Merchant2/fancybox/source/btn_quick-look.png") no-repeat scroll center bottom transparent;
    display: block;
    height: 26px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -125px;
    position: absolute;
    text-align: center;
    width: 156px;
    z-index: 2000;
}

That's why I changed it to /Merchant2/fancybox/source/btn_quick-look.png
Its working great other than the fact I am trying to get it to engage on full mouse over. Ex like scotevest is doing it. I had to change the margin top to -125 as it was originally way below the image, so doing that brought it up. i even tried to increase the height, which allows it to cover more of the thumb, but then the entire image becomes a quicklook link and not just the quicklook button to activate.

Thanks Kyle for all the help

[KNewbrough]

Re: Quick Look or Quick View of Product

Ah, I didn't realize you wanted only the button graphic to be clickable and not the whole image area for the quick look.

I'd use a container div around the quickbutton div and give the positioning CSS to that, as well as the hover visibility styles of the button inside. That way you can easily center the button inside and make only the button clickable. The button may as well be an img instead of a div in that case, as well, to make it a tiny bit more semantic.

I built it on my test store which you can see at the top of the page here: http://knewbrough1.mivamerchantdev.com/ABUS.html

Here's the code:

<div class="product-details-box">  <div class="product-thumb-box">
    <img width="125" height="125" src="http://www.townsqjewelry.com/mm5/graphics/00000001/beautiful-ruby-and-diamond-tennis-bracelett.jpg" alt="14K Gold Ruby &amp; Diamonds Bracelet" />
  </div>
  <div class="qBtnContainer">
    <img src="http://www.townsqjewelry.com/mm5/graphics/quicklook-button/btn_quick-look.png" class="quickbutton" />
  </div>
</div>
<style>
.product-details-box{
  width:216px;
  height:245px;
  position:relative;
}
.product-thumb-box{
  text-align:center;
}

.qBtnContainer{
  width:216px;
  height:125px;
  position:absolute;
  top:0;left:0;
}
.quickbutton{   
  position:absolute;
  top:50%;left:50%;
  margin:-13px 0 0 -66px; 
  display:none;
  cursor:pointer;
}
.qBtnContainer:hover .quickbutton{
  display:block;
}
</style>

Hopefully that makes sense and you can adapt the code into your existing elements. Let me know if you get stuck.

[Datagg]

Re: Quick Look or Quick View of Product

Hi Kyle,

Your example looks great, yet when i try to plug it into my code in either site it just wont display right. Images blast all over the place, quickview button lands somewhere other than where its supposed to be etc..Just a mess. You make it look so easy, so frustrating I cant get it to work. This has got to be one of the longest hang time threads in quite awhile. I really feel stuiped that I cant connect the dots.

Thanks again Kyle

[PCINET - Andreas]

Re: Quick Look or Quick View of Product

Hey guys,

Gave the fancybox solution a try too and integrated it on a clients site. Added still next and previous product using fancybox next/prev :) Took 2 hours to get it laid out properly and functioning thanks to all the input :)

http://www.amazingshaving.com/hans-b...g-brushes.html

[Datagg]

Re: Quick Look or Quick View of Product

Looks great.... Love the next/previous setup. What a pain it was to get that going on my sites. Finally got it though, yet may add that next/previous to it. Nice touch !!

[Yhashi]

I'm looking for how to make "quick view". I could find out only this page. Could someone get this straight?

[Brennan]

I would check out the Suivant ReadyTheme. We have it built into that theme. You can reference the HTML/CSS and JS to port it over to your site,

https://apps.miva.com/suivant-readytheme.html