Thread: AddToCart Button IMAGE!

Enough of you have asked for this sort of a modification to where I had to address it personally. Changing the AddToCart button to be the image you wish it to be is indeed possible within the XMLPackage without altering the method AddToCartForm, or having the source code. While many CSS stylesheet "mods" have been discussed on the forums, they all incorporate the background image property of the button itself. This doesn't help you if you want a non-rectuangular button, or your button to be fully predictable across multiple browser platforms. This is an example of using the XMLPackage technology offered by ASPDNSF to customize your site the way you would like.

Open your products.VariantsInRightBar.xml.config file and navigate down the code to approximately line 460 or so. You're looking for

Code:

<xsl:value-of select="aspdnsf:AddtoCartForm(ProductID, VariantID, 1)" disable-output-escaping="yes"/>

The above code is the XSLT where AddtoCartForm method in the source code returns HTML that includes the pricing data, the "add to cart" and "add to wish list" buttons, the quantity field, and the validator and method calls for the onClick events. All the code is there in the return of the above line.

Now what you want to do is comment that out, NEVER DELETE, and right below it we're going to add in this

Code:

<xsl:variable name="returnhtml" select="aspdnsf:AddtoCartForm(ProductID, VariantID, 1)" />
<xsl:variable name="buttonlocation" select="'input type=&quot;button&quot; class=&quot;AddToCartButton&quot;'"/>
<xsl:variable name="imageHTMLSnippet" select="'img src=&quot;MYIMAGEURL&quot;'"/>
<xsl:value-of select="concat(substring-before($returnhtml, $buttonlocation), $imageHTMLSnippet, substring-after($returnhtml, $buttonlocation))" disable-output-escaping="yes"/>

Afterwards, change the "MYIMAGEURL" part with the relative path to your desired image file for the button.

What we're doing is loading up an XSLT variable "returnhtml" with the HTML from the method. We're declaring another variable to find the location of the "AddToCart" input tag, and loading yet a third variable with our replacement for that tag. Our replacement happens to be an <img> tag which will preserve all of the methods and properties of the button while allowing us to use customized images. The fourth and final line of XSLT does minor string manipulation to alter the HTML with our new tag as opposed to the tag we are looking to replace. Using this method, one can see how it is possible to use your XMLPackage to form the data from your application in any way you'd like, up to and including changing out a button for a picture. Since it is an XMLPackage you don't need the source code, and since it can be a complete overhaul of the return html you are capable of adding any valid HTML to the return. This method can be used to modify your storefront's appearance in almost any way you can imagine.

This works perfectly - thanks very much for posting.

There is one small issue. As the button is executed as javascript the button does not show the hover over mouse effect of a normal link - as such the button appears (during hover state) to do nothing. Is there any way of forcing a hover over state via the javascript?

thanks for the help - again this is really excellent and works perfectly.

I suspect it would be as simple as editing the third line to look like this :-

C#/VB.NET Code:

<xsl:variable name="imageHTMLSnippet" select="'img style=&quot;cursor:hand&quot; src=&quot;MYIMAGEURL&quot;'"/> 


Take the third line of mod where you create the image item:

Code:

<xsl:variable name="imageHTMLSnippet" select="'img src=&quot;MYIMAGEURL&quot;'"/>

And add a class name to it so you can alter the image in your stylesheet as you see fit:

Code:

<xsl:variable name="imageHTMLSnippet" select="'img src=&quot;MYIMAGEURL&quot; class=&quot;MyAddToCartImageClass&quot;'"/>

Then in your skin's style.css, add the class .MyAddToCartImageClass and change it's cursor as you see fit:

Code:

.MyAddToCartImageClass
{
   cursor: hand;
}

Recall that your customers may be using different browsers, so try to use an image that is common among them like "pointer".

perfect - thank you

This works nicely for the AddToCart button, but how do you get it to work for the AddToWish button as well?

Also, how can I get them to be on separate lines?

The example shows how to parse into the HTML return in order to do a generic "replacement" on the button. You can do the same for the wishlist button by instead parsing to that point and doing a like replacement. Different lines would require you to add a <BR> element in between the two, etc. Once you have the hang of what is going on in the preceeding code, you can use it to alter the HTML in any way you'd like.

Once you have the hang of what is going on in the preceeding code, you can use it to alter the HTML in any way you'd like.

I understand how to use it for one button or the other, but not both at the same time, nor how to add a break between.

I would really appreciate some help with this...

You can alter the HTML using the logic mentioned beforehand. If you want to put a break in it, do so. If you want it to work for both buttons, make it so. Each time you change the response HTML, load it into a new variable and change it again. Then select the end result when you're done with all of your modifications. For instance, this will allow you to change the wish button as well:

Code:

<xsl:variable name="returnhtml" select="aspdnsf:AddtoCartForm(ProductID, VariantID, 1)" />
<xsl:variable name="cartbuttonlocation" select="'input type=&quot;button&quot; class=&quot;AddToCartButton&quot;'"/>
<xsl:variable name="imageCartSnippet" select="'img src=&quot;MYIMAGEURL&quot;'"/>
<xsl:variable name="wishbuttonlocation" select="'input type=&quot;button&quot; class=&quot;AddToWishButton&quot;'"/>
<xsl:variable name="imageWishSnippet" select="'img src=&quot;MYWISHIMAGEURL&quot;'"/>
<xsl:variable name="newHTML" select="concat(substring-before($returnhtml, $cartbuttonlocation), $imageCartSnippet, substring-after($returnhtml, $cartbuttonlocation))"/>
<xsl:value-of select="concat(substring-before($newHTML, $wishbuttonlocation), $imageWishSnippet, substring-after($newHTML, $wishbuttonlocation))" disable-output-escaping="yes"/>

MYIMAGEURL needs changed to be the cart image, and MYWISHIMAGEURL to the wish button image. Following this logic shouldn't be very difficult for doing whatever you'd like. Make a table in there if you'd like to separate the values. The sky is the limit.

Thank you for your reply.

I put the above code in, replacing the paths, and still only the addtocart button is changed... ??


Nevermind. Goober status is officially mine. I was uploading the wrong file... der.

You can actually get a very good image representation of the button by changing two string resources and using .css (see attached screenshots) and you can even get a rollover effect in firefox using only .css (rollover won't work in IE though...IE does not recognize hover for anything except anchor tags).

This can be accomplished by changing the default class for the add to cart button, the wish list button, and quantity:

Code:

.AddToCartButton, .AddToWishButton, #Quantity
{
    font-size: 1em;
}

into separate classes:

Code:

#Quantity
{
    font-size: 1em;
}
.AddToCartButton
{
	background:url(images/addToCartButton.png);
	background-repeat:no-repeat;
	cursor:pointer;
    font-size: 1em;
    border-style:none;
    height:90;
    width:85;
}
.AddToWishButton
{
	background:url(images/wishlistButton.png);
	background-repeat:no-repeat;
	cursor:pointer;
    font-size: 1em;
    border-style:none;
    height:90;
    width:85;
}
.AddToCartButton:hover
{
	background:url(images/addToCartButton_hover.png);
	background-repeat:no-repeat;
	cursor:pointer;
    font-size: 1em;
    border-style:none;
    height:90;
    width:85;
}
.AddToWishButton:hover
{
	background:url(images/wishlistButton_hover.png);
	background-repeat:no-repeat;
	cursor:pointer;
    font-size: 1em;
    border-style:none;
    height:90;
    width:85;
}

All that's left is to make sure the images you are referencing for the buttons are in the skins/skin_#/images folder, and the string resources AppConfig.CartButtonPrompt and AppConfig.WishButtonPrompt are blank (if you leave values in them those values will display over your new buttons).

George/guys

....i want to change ALL the buttons throughout the front-end site through CSS...so i can have a suite of images all looking similar.

Maybe one for the wish list ???

not wish list. you can do this now. ALL (every single) button we use has a CSS style you can change.

gah...found them in photostyle.css.....expected them in style.css

thanks !!

Hi. I was able to change the image per the example but I cannot figure out how to add a line break so that the Size and Color selection is on 1 line and the add to cart button is on another. I am also having trouble figuring out how you can control the font-family/size of the quantity and color pulldowns.

So here it is.

1) How can I put a line break between size/color & the Add to cart button?

2) How do I control the font size, color, and family of the Quantity label, color pulldown and the size pulldown?

Thank you!

As far as your pulldowns are concerned, the Quantity section is declared in your specific skin's stylesheet next to the AddToCart button as George explained:

Code:

#Quantity
{
    font-size: 1em;
}

Simply add your font modifications there by placing the correct tags inside:

Code:

#Quantity
{
    font-size: 1em;
    font-weight: bold;
    font-family: verdana;
    font-style: italic;
}

The dropdowns for the color and size can be added as separate code blocks in the CSS as they hold that same name:

Code:

#Size
{
    font-size: 1em;
    font-weight: bold;
    font-family: verdana;
    font-style: italic;
}
#Color
{
    font-size: 1em;
    font-weight: bold;
    font-family: verdana;
    font-style: italic;
}

Now the "<br>" in between that section and the buttons is going to take parsing into the return HTML, or modifying the source code. The example on how to do the former is found at the beginning of this thread.

I modified all of the buttons using various methods suggested in this thread and using my own experience with another site. I have 2 skins. The first Skin_1, is for the general public. The second Skin_7, is for a particular customer level. My problem is this... None of the buttons (Continue Shopping..., Checkout Now, etc.) are showing in Skin_7! What could cause this? I copied the style.css from 1 to 7 so that the code is the same. I am at a loss. Help!

We are using ML 7.0.2.5 C#.

Have you also added your images to the images folder of skin_7? The path is relative. If you have changed the XSLT to parse in the images, have you copied those XMLPackages into SKin_7's XMLPackage folder?

Too much partying on the weekend...

Thanks for all your help Jesse. I guess I'm confused on how you would change the styling of the actual "Quantity:" label. If I look at the source of the page I see that it is included in <small>Quantity:</small> and does not have anything I can attach to. Sorry if I'm missing something, kind of slow.

Also regarding the line break. As I looked through the example I didn't see where the line break was happening? Can you highlight for me in the example where the line break code is? Thanks!

How can I separate the Wishlist button so that it shows on a different line than the add to cart button? Thanks.
I don't know if this is the best way to do it but I figured out a workaround - by adding a margin to the style and forcing a line break...

Originally Posted by landrstudios

How can I separate the Wishlist button so that it shows on a different line than the add to cart button? Thanks.
I don't know if this is the best way to do it but I figured out a workaround - by adding a margin to the style and forcing a line break...

Use "display:block" in the css.

Thanks for that.
Do you know how I would change the style or add a css style to the related products area? I tried placing the whole related products into a table with a css style but doesn't seem to work:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="relatedBG">
<xsl:if test="boolean(/root/Runtime/showproduct)">
<xsl:value-of select="aspdnsf:RelatedProducts(ProductID)" disable-output-escaping="yes"/>
<xsl:value-of select="aspdnsf:ShowUpsellProducts(ProductID)" disable-output-escaping="yes"/>
<xsl:value-of select="aspdnsf:ProductSpecs(ProductID, 1, SpecsInline, SpecCall, 400)" disable-output-escaping="yes"/>
<xsl:value-of select="aspdnsf:ProductRatings(ProductID, 0, 0, 0, 1)" disable-output-escaping="yes"/>
</xsl:if></td>
</tr>
</table>

Scratch that I found the relatedproducts.xml.config file - sorry.

Originally Posted by kohenkatz

Use "display:block" in the css.

I have put this in my style sheet for the skin that I'm using and is not working. This is what I have in my css:

.AddToCartButton
{
width:143px;
height:38px;
border:0px;
background:transparent url("images/button_add_cart.gif") 0 0 no-repeat;
text-indent:-5000px;
cursorointer; /* hand-shaped cursor */
cursor:hand; /* for IE 5.x */
display:block
}


I'm also trying to put an image inbetween them. When I'm putting the code for this image inside the code from the first page, it puts the image above the cart button, wish list & the size drop down menu. Any ideas on how to get the image in between?

Looks like you're missing the semi-colon e.g. display:block; or display:inline;

Hope this helps

Is there any wasy way to find the string resources related to each button?
The classes are simple, but some of the buttons like the "Continue Shopping' and 'update cart' button, among others I can't find when I search in the string resouces section of the admin area.

thanks.


by the way, ASPDOTNETSTOREFRONT is proving to be a very powerful tool.

See this knowledgebase article

https://support.aspdotnetstorefront....barticleid=270

This worked great for most buttons.

But the delete button in the shopping cart is funny,

I can make it use an image by setting the styles, but I can't remove the word "Delete" from the screen, even after updating string resource shoppingcart.cs.107 to a blank string rather than "Delete". The text "Delete" still appears next to the image

Any ideas?

Have you tried shoppingcart.cs.107? Looks like that's the button value, but it gets set in ShoppingCart.cs not in the page

Yes I have set that string in the String Resource manager to an empty string but that still displays the word "Delete" on the screen if I set that string value to another word it will display the added text.

Sorry - I meant to say in the last message to try setting the string to &nbsp;

yes that worked.

Thanks, I don't know why I did not think of that.

I added these mods and it works for the buttons, but it doesn't work right for items I have for "call to order". On those pages I get this:

img src="skins/skin_3/images/addwish.gif" class="MyAddToCartImageClass"

Would there need to be an image and code for the "call to order" feature?

Well, whenever the Product is call to order, those buttons will not show. If I misunderstood your issue, screen shot could be helpful.

I used this code from page 1 of the post:

Code:

<xsl:variable name="returnhtml" select="aspdnsf:AddtoCartForm(ProductID, VariantID, 1)" />
<xsl:variable name="cartbuttonlocation" select="'input type=&quot;button&quot; class=&quot;AddToCartButton&quot;'"/>
<xsl:variable name="imageCartSnippet" select="'img src=&quot;MYIMAGEURL&quot;'"/>
<xsl:variable name="wishbuttonlocation" select="'input type=&quot;button&quot; class=&quot;AddToWishButton&quot;'"/>
<xsl:variable name="imageWishSnippet" select="'img src=&quot;MYWISHIMAGEURL&quot;'"/>
<xsl:variable name="newHTML" select="concat(substring-before($returnhtml, $cartbuttonlocation), $imageCartSnippet, substring-after($returnhtml, $cartbuttonlocation))"/>
<xsl:value-of select="concat(substring-before($newHTML, $wishbuttonlocation), $imageWishSnippet, substring-after($newHTML, $wishbuttonlocation))" disable-output-escaping="yes"/>

However, if I have a item that is call to order it displays " img src="skins/skin_3/images/addwish.gif" class="MyAddToCartImageClass" " where the "call to order" should be displayed. That is the only thing showing up.

We have a V9 store under construction and I need to change the Add to Cart button to an image. I've followed the instructions herein and its not working for me. The instructions are pretty simple and I've triple checked my work. I'm beginning to wonder if this simply doesn't work with V9. The trouble is that when the product page is loaded in the browser, I get a text string of img src="/App_Themes/TACustom/images/ta_btnbuynow_01.gif" displayed on the page. No image. It simply displays that string in the browser. Not exactly what I was after I found that adding a &gt; and &lt; right before the &quot; tags will result in a button displayed but there's no functionality with it. This simply results in the image displaying on the page. If I view the source code of the rendered web page using the code you provided, this is what I see...

HTML Code:

<div><span id="VariantPrice_2219"><span class="variantprice">Price:&nbsp;$199.99</span>&nbsp;</span></div><br>
<div><br>img src="/App_Themes/Skin_1/images/ta_btnbuynow_01.gif"</div>

Somehow I don't think this is what was intended. What am I doing wrong here? It seems so simple so you can understand my frustration. Thank you in advance for your help.

This does work in v9 and we haven't experienced any issues. Here are the steps we performed in case it helps:

1. Updated AppConfig:AddToCart.AddToCartButton to (not no path included):
CustomBtnAddToCart.gif

2. Reset cache

3. Copy the image file CustomBtnAddToCart.gif to \App_Themes\Skin_1\images\CustomBtnAddToCart.gif

That's it! Things to check:

- reset the cache
- touch web.config to force recompile
- put the path to your image in the browser url to ensure your image exists
- get this working on a vanilla storefront install in case any custom modifications have broken this functionality

How I can remove the button AddToWish and and put the other in the desired position?

Could you clarify the question!

Originally Posted by namliw

How I can remove the button AddToWish and and put the other in the desired position?

You'd need to edit the c# files to remove it. Look in the XSLTExtensionBase class for the AddtoCartForm methods.

You could also do some weird DOM manipulation to hide one and move the other, but that would be wrong and inefficient.

Originally Posted by namliw

How I can remove the button AddToWish ?

set appconfig: ShowWishButtons to false.

Originally Posted by AspDotNetStorefront Staff - Alfred

set appconfig: ShowWishButtons to false.

ty ty ty ty

Like an earlier poster, I have been able to get my button to display, but it is not active.

I am using the IS version of ML which I think is based on ML v7 and am working on the product.SimpleProduct.xml.config package.

<xsl:variable name="returnhtml" select="aspdnsfisplayAddToCartForm(Counter, ItemCode, ItemType, 'h')" />
<xsl:variable name="buttonlocation" select="'input type=&quot;button&quot; class=&quot;AddToCartButton&quot;'"/>
<xsl:variable name="imageHTMLSnippet" select="'&lt;img src=&quot;skins/skin_2/images/btnAddToCart.gif&quot;&gt;'"/>
<xsl:value-of select="concat(substring-before($returnhtml, $buttonlocation), $imageHTMLSnippet, substring-after($returnhtml, $buttonlocation))" disable-output-escaping="yes"/>

I had to add &lt; and $gt; to get the button to display. Code attached.

I tried adding them to the input command, but no joy. I have not been able to control this using the style .css.

Any suggestions would be greatly appreciated. However, I am not a developer and would like to restrict changes to the xml package or the stylesheet.

Thanks
________
BMW R3
________
buy vaporizers

I had a problem like squashie8, but got around it by using &LT1; etc.

However, I now have the problem that the button is not active, its just a picture.

I have followed the threads, but with no joy. I have also tried the Style sheet route, but again no joy.

Can anyone make any further suggestions please?
________
volcano vaporizers
________
Honda RC115