Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

changing the checkout button Rate Topic   - - - - -

 
  • ogia
  • Senior Member
  • Members
  • Join Date: 09-Aug 09
  • 503 posts

Posted 13 March 2010 - 02:05 AM #1

I was trying to make the checkout button in my cart (dispatch=checkout.cart) larger but found that changing the css for it also affected other buttons, like add to cart. I think I figured out how to create a special class for the checkout button, but there is a ton of css to copy and edit.

Is it easier to replace this with an image? If there is an easier way, someone please share... :cool:

PROBLEM - this not only changes the checkout button on the cart, it also changes the checkout button on the notification window that pops up when you add an item to the cart. I initially couldn't find where to change that, but I have it now so I added instructions below.

In buttons/button.tpl

Find:
{if $but_role == "action"}
	{assign var="suffix" value="-action"}
	{assign var="file_prefix" value="action_"}

After it, add our new class... I call it checkout - this is what is appended to the class's value
(for example button-checkout, button-submit-checkout)
I'm not sure if the part in red is needed. Anyone know? Mine is working this way so I left it.
{elseif $but_role == "checkout"}
	{assign var="suffix" value="-checkout"}
	[COLOR="Red"]{assign var="file_prefix" value="action_"}[/COLOR]

Now for the hard part... Go into styles.css and styles.base.css and find the button-action css and copy it for button-checkout. Anywhere there an -action suffix, you'll need a copy of it for your -checkout css.

After that's all done you can switch on the -checkout class for that checkout button by going to buttons/checkout.tpl

Replace "action" with "checkout" (in red below):
{include file="buttons/button.tpl" but_text=$lang.checkout but_onclick=$but_onclick but_href=$but_href but_target=$but_target but_role="[COLOR="Red"]action[/COLOR]"}

After that change, I had to clear cache to see it take effect.

If your css isn't right you can go back to buttons/checkout.tpl and change the role back to "action". ;)

**********************

I changed the button in the product notification pop-up to "View Cart" and linked it to the cart by doing this....

Created a new template: buttons/_view_cart.tpl with this content:
{include file="buttons/button.tpl" but_text=$lang.view_cart but_onclick=$but_onclick but_href=$but_href but_target=$but_target but_role="action"}

Then, in views/products/components/product_notification.tpl:

{include file="buttons/checkout.tpl" but_href="$index_script?dispatch=checkout.checkout"}

Changed to:
{include file="buttons/_view_cart.tpl" but_href="$index_script?dispatch=checkout.cart"}

CS-Cart 2.1.3 | Selling downloads
I recommend Newsletter Integration with Mailchimp

 
  • brandonvd
  • is Super Awesome
  • Members
  • Join Date: 19-Dec 06
  • 2633 posts

Posted 13 March 2010 - 04:25 AM #2

Well I kind of did this a different way. I just made a checkout button image and then replaced my:

skins/basic/customer/buttons/checkout.tpl

To:

<a href="{$index_script}?dispatch=checkout.{if $settings.General.one_page_checkout != "Y"}customer_info{else}checkout{/if}"><img src="{$images_dir}/checkout.gif" width="107" height="40" border="0" alt="{$lang.checkout}" align="bottom" title="{$lang.checkout}" /></a>

I also had to change my product notification height. So in my styles I changed it to:

.product-notification-container {
	height:200px;
}
.product-notification .notification-body {
	height:100px;
}

This is what my notification box looks like:

Posted Image

This is what my cart looks like:

Posted Image

Brandon

 
  • ogia
  • Senior Member
  • Members
  • Join Date: 09-Aug 09
  • 503 posts

Posted 13 March 2010 - 04:32 AM #3

Thanks, Brandon! I like that! :D
CS-Cart 2.1.3 | Selling downloads
I recommend Newsletter Integration with Mailchimp

 
  • Struck
  • Teetering on Genious
  • Members
  • Join Date: 07-Mar 09
  • 2502 posts

Posted 14 March 2010 - 05:01 PM #4

Thanks a bunch Ogia & Brandon for all your efforts! ;)

I believe it is very important to have a Checkout Button that is bigger, uglier, and even more obnoxious than either the Paypal Express Checkout, or Google Checkout buttons! I now have this thus I currently win the battle of the Checkout Buttons, LOL!

In the end I ended up going with Brandon's method as it allowed more control vs. just CSS, and far less work as is detailed by Ogia's post.

I do wish CS-Cart developers would give more granular control over the individual buttons as there are none more important than the checkout button!
Cooking with Gas on Version 4.1.2 (But proceeding with caution....)

 
  • customfx
  • Senior Member
  • Members
  • Join Date: 19-Jun 07
  • 117 posts

Posted 14 May 2010 - 12:52 AM #5

Many thanks Brandon for the code.

Yes agree Struck!
v2.1.1

 
  • crazyshark20
  • Junior Member
  • Members
  • Join Date: 19-Aug 09
  • 334 posts

Posted 27 June 2010 - 11:43 AM #6

Thanks for your sharing. But i want to make this but i couldn't find how. Thanks all.
Posted Image

 
  • idg
  • Member
  • Members
  • Join Date: 22-Jul 09
  • 75 posts

Posted 29 June 2010 - 04:24 PM #7

What's the code for the continue shopping button? Thanks in advance.

Well I kind of did this a different way. I just made a checkout button image and then replaced my:

skins/basic/customer/buttons/checkout.tpl

To:

<a href="{$index_script}?dispatch=checkout.{if $settings.General.one_page_checkout != "Y"}customer_info{else}checkout{/if}"><img src="{$images_dir}/checkout.gif" width="107" height="40" border="0" alt="{$lang.checkout}" align="bottom" title="{$lang.checkout}" /></a>

I also had to change my product notification height. So in my styles I changed it to:

.product-notification-container {
	height:200px;
}
.product-notification .notification-body {
	height:100px;
}

This is what my notification box looks like:

Posted Image

This is what my cart looks like:

Posted Image

Brandon



 
  • Perochak
  • Junior Member
  • Trial users
  • Join Date: 24-May 10
  • 24 posts

Posted 29 June 2010 - 07:48 PM #8

Get it at

skins/YOURSKIN/customer/buttons/continue_shopping.tpl


Regards
Perochak
Cheers
Perochak
CS-Cart Mods - Skins Development and Implementation
http://perochak.com

 
  • brandonvd
  • is Super Awesome
  • Members
  • Join Date: 19-Dec 06
  • 2633 posts

Posted 30 June 2010 - 02:35 AM #9

I posted this over at:

http://forum.cs-cart...87817#post87817

Brandon

 
  • samurai
  • Junior Member
  • Members
  • Join Date: 28-Oct 10
  • 22 posts

Posted 09 January 2011 - 01:42 PM #10

Brandon

Thank you for helpful advice.

 
  • Bojan
  • Junior Member
  • Members
  • Join Date: 21-Oct 07
  • 28 posts

Posted 09 August 2012 - 08:35 AM #11

Great,

Do you have any idea How Make Button "Add to compare list"!
My Version 2.2.5

Regards Bojan
[size=2][size=1][size=2]FLAMME-svetkaminov[/size]
http://www.svetkaminov.si[/size]

Cart v2.2.5[/size]

 
  • exosto
  • Member
  • Members
  • Join Date: 30-Nov 11
  • 25 posts

Posted 13 November 2012 - 03:11 PM #12

Is it works on version 3 ?