Quick Look or Quick View of Product

[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

[Yhashi]

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

[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 !!

[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-baier-shaving-brushes.html

[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

[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. 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

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

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

Try this:

[COLOR=#333333][I].quickbutton {[/I][/COLOR]
[COLOR=#333333][I]display: block;[/I][/COLOR]
[COLOR=#333333][I]height: 125px;[/I][/COLOR]
[COLOR=#333333][I]margin-left: auto;[/I][/COLOR]
[COLOR=#333333][I]margin-right: auto;[/I][/COLOR]
[COLOR=#333333][I]position: absolute;
[/I][/COLOR]top:0;
left:0;
[COLOR=#333333][I]text-align: center;[/I][/COLOR]
[COLOR=#333333][I]width: 216px;[/I][/COLOR]
[COLOR=#333333][I]z-index: 2000;[/I][/COLOR]
[COLOR=#333333][I]}[/I][/COLOR]

[COLOR=#333333][I].quickbutton:hover {[/I][/COLOR]
[COLOR=#333333][I]background: url("/mm5/graphics/quicklook-button/btn_quick-look.png") no-repeat scroll center center transparent;[/I][/COLOR]
[COLOR=#333333][I]display: block;[/I][/COLOR]
[COLOR=#333333][I]height: 125px;[/I][/COLOR]
[COLOR=#333333][I]margin-left: auto;[/I][/COLOR]
[COLOR=#333333][I]margin-right: auto;[/I][/COLOR]
[COLOR=#333333][I]position: absolute;
[/I][/COLOR]top:0;
left:0;
[COLOR=#333333][I]text-align: center;[/I][/COLOR]
[COLOR=#333333][I]width: 216px;[/I][/COLOR]
[COLOR=#333333][I]z-index: 2000;[/I][/COLOR]
[COLOR=#333333][I]}
[/I][/COLOR].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.

[Bruce - PhosphorMedia]

Re: Quick Look or Quick View of Product

You have to enclose the area you want 'active' with an "<a href="" id="someId"></a> then assign the ':hover' action to it.

[Datagg]

Re: Quick Look or Quick View of Product

No one has any idea?

[Datagg]

Re: Quick Look or Quick View of Product

Reaching out to the .css gods here. 2 things I am trying to achieve while work in progress.

First, I cannot figure out how to shift the quick view button to the right of the image more. I have messed with the css all day with no luck. Here is a page that has the quickview on it, notice the button shifting to the left, trying to get it center.

http://www.townsqjewelry.com/tennis-bracelets.html

The css

/*** Quick Look ***/

#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: 120px;
z-index: 2000;
}

#quickbutton:hover {
background: url("/mm5/graphics/quicklook-button/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: 120px;
z-index: 2000;
}

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

.quickbutton:hover {
background: url("/mm5/graphics/quicklook-button/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: 120px;
z-index: 2000;
}

Next, I would like if all possible to get the image to show up on entire thumb mouseover.

Thanks

[Datagg]

Re: Quick Look or Quick View of Product

Hey Dan -

Check your .htaccess file. You need to make sure the query string is being passed in the short links.

You need [QSA] (Query String Appended) added to the end of the declaration where the the rewrite rules are defined. This will pass along any additional parameters you are defining like the quick_look parameter you are defining above.

Thank you Brennan,

I compared GFL's .htaccess to TSJ's (the one with issue) and saw this

RewriteRule ^([A-Za-z0-9-_]+)\.html$ /mm5/merchant.mvc?Screen=USL&Code=$1 [L]

Then changed the above to be like the other (GFL) and now it looks like

RewriteRule ^([A-Za-z0-9-_]+)\.html$ /mm5/merchant.mvc?Screen=USL&Code=[COLOR=#b22222]$1&%{QUERY_STRING} [L][/COLOR]

Site appears ok, usually when I do anything in there it crashes.. ?quick_look=1 is passing to template now!!! (Brennan you rock), just wanted to make sure this is ok what I changed.

Another question while your here, on GFL I got the quick view working, yet I would like the quickview image to show as soon as image mouse over occurs. How would I make that happen?.. I tried for a day plus to mess with the above .css, yet no go. Thinking as it is now, unless you put the pointer at the right point, the quick view function is either going to go unnoticed, or found by mistake.

Thank you

[Brennan]

Re: Quick Look or Quick View of Product

Hey Dan -

Check your .htaccess file. You need to make sure the query string is being passed in the short links.

You need [QSA] (Query String Appended) added to the end of the declaration where the the rewrite rules are defined. This will pass along any additional parameters you are defining like the quick_look parameter you are defining above.