Explaining CVV2

[donluigi]

Hi,

I checked the forum but I did not find clear explanation how to make for customers easy to understand what the hack is CVV2? Can somebody help me? I would like to put a link with pop-up window or a new small window which is opened on the same page…Also where to find .tpl file with CVV2? I am using still the demo version of 2.08



thanks a lot!

[brandonvd]

What I did was make an image of the CVV2 and put it in my checkout like:







Then when the user hovers over the image it looks like:







I did this by:



In:



skins/basic/customer/views/orders/components/payments/cc.tpl



After:


{$lang.cvv2}:




I added:




Then in your style sheet:



skins/basic/customer/styles.css



Add:

.cvv2-image {
float:right;
padding-right:150px;
}
.cvv2-image {
position: relative;
z-index: 0;
}
.cvv2-image:hover {
background-color: transparent;
z-index: 50;
}
.cvv2-image span { /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.cvv2-image span img { /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.cvv2-image:hover span { /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}



Obviously you would need an image and also change the code to match your image, but you should get the idea. Also this code might be able to be cleaned up better, but it works.



I hope this helps,



Brandon

[donluigi]

Thanks, Brandon, very detailed answer!

[jegesmaci]

Brandonvd,



This is a great tip. I love it. I tested it on your website and I noticed if I accidentially clicked on the image it took me to your home page.



Has anyone else implemented something like this?



Adam

[brandonvd]

Huh, didn’t notice that. Easy fix though. Just remove the:

href="#thumb"



Now there is no link, but the class is still there. There might be a better way if anyone has any ideas.



By the way, how was the speed of the site? I’ve been fooling with it for a while now, trying to make it faster, but it is hard to tell just from my computer.



Brandon

[derbytown502]

Nice…very quick using chrome and explorer 7. What type of things have you implemented to achieve this speed?

[brandonvd]

Not a whole lot to be honest.



The biggest thing is probably the hosting. I am now on a VPS Cloud with CyberLNC where before I was just on shared hosting. I have several other sites so this is probably benefitial all around.



I also installed the smartoptimizer gzip thing that has been talked about on the forum for the last few days.



I also combined a couple of my CSS files into my local_styles.css file using the My Changes addon.



I also changed my background from an image to the color you see. I don’t love it, but it sped up the cart and I just can’t figure out what else to do.



I want to see if there is a way to optimize the javascript code, but since I don’t know anything about it, I haven’t done it yet.



I have also been kind of mindful of my images. Some of my images were kind of big, slow loading gifs and I switched them over to pngs and now they load much faster.



I still have a long way to go, but I am happy so far.



Thanks for the compliment and information though.



Brandon

[jegesmaci]

[quote name=‘brandonvd’]

By the way, how was the speed of the site? I’ve been fooling with it for a while now, trying to make it faster, but it is hard to tell just from my computer.

Brandon[/QUOTE]



Brandonvd,



I think the speed is really good. I know that you are using the smartoptimizer. I am doing the same.



I am going to try and implement this CVV2 on my site in the next few days.



Thanks,



Adam