CVV2 Image Hover Mod

Partners Ideas & Requests
1

I’ve had a question about my cvv2 image hover thing that can be seen in the last step of the checkout at:



[url]http://www.jandkonline.com/cscart[/url]



How I did this was put the attached image in the folder:



skins/your-skin/customer/images/icons/



Then in your style sheet 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 */
}



Then in the file:



skins/your-skin/customer/views/orders/components/cc.tpl



After:


2

Brandon, you are a “Modding Machine”!



Now how much do we owe you? :wink:



BTW, I almost bought an aquarium from you the other day, although It appears you were just finalizing the details on the one I wanted which is the

Hagen Fluval Edge 6 Gallon Aquarium Set - Pewter



When do you think it will be available, you better get on the ball man?

3

Nice mod but in IE8 the big image is always there and the text box for the cvv2 is one line below where it should be. I have attached a screenshot.

cvv2mod.jpg

4

Struck



Yeah, the mods are basically things I have done for my self and thought I would share them.



As for the oweing thing, it was a joke that was directed to mrfoameruk. He placed an order for $18,150.30 on the test site. I think the joke was kind of overlooked though. Oh well.



Now for the aquarium. My partner entered the Fluvals into the store and I think he over looked making the stock right. It has been fixed now. The aquarium business is his and he is still learning the online part. It’s actually a pretty decent partnership really. He knows the products and hobby and I know the online stuff and we just split the proffits 50/50 so it works pretty good.



PM me and I’ll give you a better deal.



Now as for the IE8 problem, I’ll have to look into that. That is definitely an issue that needs to be fixed.



Brandon

5

you’ll get your money once i get the plasmas and blackberrys

6

[QUOTE]It’s actually a pretty decent partnership really. He knows the products and hobby and I know the online stuff and we just split the proffits 50/50 so it works pretty good.[/QUOTE]



Sounds like a nice side business!

I used to be heavily into tropical fish growing up as a kid, can be a very cool hobby.



I actually worked for a company many years ago that manufactured custom acrylic tanks (about the same time when acrylic tanks just started taking off). I remember we custom built something like a 5,000 gal acrylic tank for the local zoo, and the thing exploded creating a tsunami effect, many small children were washed away to never be heard from again. I think that was the last custom acrylic tank the company ever attempted to create! :smiley:



Anyways, I will get back on your site this evening & place an order for that tank then.



Brandon, as far as the special deal, thank you very much for the offer, however we all need to make money so the price looks fair enough as is!

7

I did it a little differently. If the person chooses a credit card that we need CVV for it will appear right under that.



What do you think?



Adam

8

Your new name brandon is mod_god

9

[quote name=‘mdj101’]Your new name brandon is mod_god[/quote]



Approved…

10

Hey thanks for the compliments guys, you make me feel all warm and fuzy.



Also, thanks for the order Struck. We’ll get this off tomorrow.



As for the IE8 problem, I can’t seem to reproduce it. When I use IE8 in compatability mode the layout does change, but I still don’t have the problem you describe.



Can anyone else reproduce this problem?



Thanks,



Brandon

11

So this doesn’t happen to me in IE8 on my home pc. I will check it again tomorrow from work. Something I did notice is the image you posted is a jpg but the code calls for a gif.

12

Huh, that’s weird. For some reason the forum converted my gif image into a jpg. I changed the original post and put a zip file containing the gif.



Thanks for pointing that out.



Brandon

13

Works Great. Thanks for posting this :slight_smile:

14

[quote name=‘JesseLeeStringer’]Approved…[/QUOTE]





Rejected.



New name must be MoD_BIGDADDY :smiley:

15

Thanks for the inspiration!! I like the idea of the hover so I combined it with an idea I was already using. I had originally used languages to link my cvv2 label to an image showing where to find the security code. Now, when the customer hovers over that link, the cvv2 image pops up.



.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: 20px; /*position where enlarged image should offset vertically */
left: 0px; /*position where enlarged image should offset horizontally */
}





Then instead of modifying a template, I went to Content > Languages and for the cvv2 variable I put this in the value field:



EDITED For some reason I had to hard code the https:// for the image. When I linked to it with /images/security_code.jpg, Firefox was producing an unauthenticated error. It took me forever to track down the culprit! IE8 didn’t care…


Security CodeWhere is the security code?




I attached the image I used and a screen shot showing what happens when you hover over the ‘Security Code’ link.

security_code.jpg

shot_cvvhover.jpg

16

[quote name=‘ogia’]Thanks for the inspiration!! I like the idea of the hover so I combined it with an idea I was already using. I had originally used languages to link my cvv2 label to an image showing where to find the security code. Now, when the customer hovers over that link, the cvv2 image pops up.



.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: 20px; /*position where enlarged image should offset vertically */
left: 0px; /*position where enlarged image should offset horizontally */
}





Then instead of modifying a template, I went to Content > Languages and for the cvv2 variable I put this in the value field:



EDITED For some reason I had to hard code the https:// for the image. When I linked to it with /images/security_code.jpg, Firefox was producing an unauthenticated error. It took me forever to track down the culprit! IE8 didn’t care…


Security CodeWhere is the security code?




I attached the image I used and a screen shot showing what happens when you hover over the ‘Security Code’ link.[/QUOTE]



ogia, have you tried this mod with the multi-page checkout in Firefox/Chrome?? For some reason the image is dropping behind. It looks okay in IE8 but I am having trouble with it in other browsers.

17

[quote name=‘Ion_Cannon’]ogia, have you tried this mod with the multi-page checkout in Firefox/Chrome?? For some reason the image is dropping behind. It looks okay in IE8 but I am having trouble with it in other browsers.[/QUOTE]

Yes, I did… I switched to multi-page so I had to made some edits to the css and I made the image a little smaller so it would fit in the space that was visible. I’ve attached the smaller image I’m using. It has a different filename so I had to switch that out in Languages. However, you can rename this one to security_code.jpg and overwrite the other one if you want.



Here is the piece of css that I changed:

.cvv2-image:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -95px; /*position where enlarged image should offset vertically */
left: 350px; /*position where enlarged image should offset horizontally */
}



This puts it to the right of the credit card fields on my cart. You may have to adjust your top and left positions to get it looking right for your cart.

security-code.jpg

18

Thanks, thought i was crazy…