Quick Look or Quick View of Product

[Datagg]

Re: Quick Look or Quick View of Product

Got it pretty much done, but the quick view button is falling way below the image. Normal I would just use firebug to adjust the values to see what's going on, but with this divide It disappears before I can adjust it. trying change values on the fly isn't working and I just cant seem to get that button to come up.

#quick_look {
background-color: #FFFFFF;
height: 500px;
width: 90%;
}
#quicklookleft {
float: left;
width: 100%;
}
#quicklookright {
float: right;
width: 100%;
}
.quicktext {
font-size: 14px;
font-weight: bold;
}
#quickbutton {
display: block;
height: 26px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
position: absolute;
text-align: center;
width: 132px;
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: 40px;
position: absolute;
text-align: center;
width: 132px;
z-index: 2000;
}
.quickbutton {
display: block;
height: 26px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
position: absolute;
text-align: center;
width: 132px;
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: 40px;
position: absolute;
text-align: center;
width: 132px;
z-index: 2000;
}

Any ideas on how to get that button up about 2 inches or so

[Bruce - PhosphorMedia]

Re: Quick Look or Quick View of Product

Try this:

In Fire Bug, select the <div>, then on the right side screen in the Style tab, click the v arrow, select :hover. that should keep the hover state active. (also, not sure about the "width:percentage" with a float... seems like that's asking for trouble.

[Datagg]

Re: Quick Look or Quick View of Product

Thanks Bruce..I tried that, yet as soon as I remove the cursor from the button, the quick button hover part vanishes. That css is what Miva gave to Mark to achieve the end goal, but for my side of things its way way low. Not even sure if it is the above css causing the issue.

[Datagg]

Re: Quick Look or Quick View of Product

Bruce... After awhile with messing with firebug, the solution is to rest the mouse on the <div element, right click and select "Q" on keyboard. This opened up another set of variables that allows much more control to the elements.

Anyways, figured it out... I had to change the margin top to a negative field. Button came right up.

No one should be without firebug... period.

[Datagg]

Re: Quick Look or Quick View of Product

Got it pretty much done on GFL, categories only at this point. question though, if you scroll on top of a thumb the quick view engages at a certain point (about 3/4 down at this point).

I see for example Scottevest engages at the touch of any area on image mouseover, others like mine only at a certain point. To avoid confusion how would you get it to engage at any point of the image mouseover?.

On a side note, I read an article stating that this feature is confusing and some dont even ever notice it and when they do its by accident. Solution this article states is to add a quick view button at the bottom of the product image instead of a mouseover.

Your thoughts on that?

Thanks

[alphabet]

Re: Quick Look or Quick View of Product

Hi Dan,
Excellent question that you should let your customers answer.

Your question prompted me to add event tracking to my quick_look feature to see how often it is being used.

I use tagmanager and was able to quickly install and preview the tag added to the quick_look link:

onclick="dataLayer.push({'event': 'GAevent', 'eventCategory' : 'quick_look', 'eventAction' : 'open', 'eventLabel' : '&mvte:product:code;'});"

I also added the virtual path to the quick_look content tab:

<script type="text/javascript">
    dataLayer = [];
    dataLayer.push({'_trackPageview': '/quick_look/p/&mvte:product:code;.html'});
</script>

I haven't read that article but I have questioned the quick_look feature as being usable beyond the wow factor.

I think the content within the quick_look can also be tested to see which is most useful. Maybe high ticket items or long sales funnel items behave differently than impulse items. A quick_look add-to-cart button may not always work. Maybe just images and spec sheet or coupons would help increase conversions.

Definitely an interesting question. I wonder how quick_look performs on mini-tablets. (Tablets are my fastest growing segment.)

[Datagg]

Re: Quick Look or Quick View of Product

Yes, it has me second guessing what to do. It is definitely a wow factor kinda thing, but in the end does it help? Tracking is a great idea. I'm still trying to figure out how to get it to engage on an entire image Mouseover, not just the middle as that is just going to make the confusion allot more prevalent for people who dont look for it.

The static quickview button is an option of course, yet just not as fancy. If anyone could shed some light on how to set up an entire image mouseover for the quick look button that would be awesome.

[Mark Hood]

Re: Quick Look or Quick View of Product

Yes, it has me second guessing what to do. It is definitely a wow factor kinda thing, but in the end does it help? Tracking is a great idea. I'm still trying to figure out how to get it to engage on an entire image Mouseover, not just the middle as that is just going to make the confusion allot more prevalent for people who dont look for it.

The static quickview button is an option of course, yet just not as fancy. If anyone could shed some light on how to set up an entire image mouseover for the quick look button that would be awesome.

playing with the css and changing the height

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

[Datagg]

Re: Quick Look or Quick View of Product

Mark,

Thanks. I tried that yesterday and increasing the height actual made the quickview button go lower on the image and didn't change the activation point. The only css change i was successfully able to do that got the button to the middle was margin-top: -125px;

[Datagg]

Re: Quick Look or Quick View of Product

Began working on my other store, cssui this time. Created all the info needed for the quick_look page on the PROD, using ?quick_look=1 at the end of a product url and its not calling the page in. I am using sebenzas product template manger, yet i do on GFL also and that is working without issue.

Here is the code used to jump to the quick_look assigned page or load regular content.

<mvt:if expr="g.quick_look EQ 1">         
<mvt:item name="quick_look" />     
<mvt:else>         
<!— all regular code in here -->     
</mvt:if>

I have rechecked names ,etc.. for correctness, I dont see anything off. is there anything that could cuase this to not work, or perhaps a way to troubleshoot possible reasons its not. I'm just trying to fire up the quick_look page at this point.

Thanks

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

[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=$1&%{QUERY_STRING} [L]

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

[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

No one has any idea?

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