Css3 buttons through checkout

[graphicz]

V14.0.2 still using button images in checkout.

I would like to use css buttons throughout the checkout process.

What changes do I need to make to the Perl scripts?

Thank you.

[NormanRouxel]

They are CSS buttons on both Classic and Smart responsive themes here. E.g:

<div class="button-wrapper floatRight">
<input type="submit" name="ACTION" id="idBtnNext" value="<actinic:variable encoding="html" name="NextButton" />" class="button cart-button" 
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%200">
	onclick="return CheckForm(this);"	
</actinic:block>
	/>
</div>

I.e. input tags styled by CSS.

You'll find the layouts in the Library under Checkout Button.

[graphicz]

Thank you Norman

The 'Shopping Cart Buttons' layouts are all images with no css options.
I tried changing type="image" to type="submit" on the 'Checkout Now' button and it didn't function. SD support said it had to be input type="image" hence the question about the perl scripts, it must be editable somewhere, and why use images in html5?

[NormanRouxel]

Ah! I'm obsessively literal and was answering your question which mentioned checkout three times. There they use CSS.

The code that detects image buttons is in CartManager.pl:

	if(!defined $::g_InputHash{"ACTION"})
		{
		if(defined $::g_InputHash{"ACTION_UPDATE.x"})
			{
			$::g_InputHash{"ACTION"} = $::g_sUpdateCartLabel;
			}
		elsif(defined $::g_InputHash{"ACTION_SAVE.x"})
			{
			$::g_InputHash{"ACTION"} = $::g_sSaveShoppingListLabel;
			}
		elsif(defined $::g_InputHash{"ACTION_GET.x"})
			{
			$::g_InputHash{"ACTION"} = $::g_sGetShoppingListLabel;
			}
		elsif(defined $::g_InputHash{"ACTION_BUYNOW.x"})
			{
			$::g_InputHash{"ACTION"} = $::g_sCheckoutNowLabel;
			}			
		elsif(defined $::g_InputHash{"ACTION_CONTINUE.x"})
			{
			$::g_InputHash{"ACTION"} = $::g_sContinueShoppingLabel;
			}				
		elsif(defined $::g_InputHash{"ACTION_SEND.x"})
			{
			$::g_InputHash{"ACTION"} = $::g_sSendCouponLabel;
			}			
		}

So try e.g.

<input type="submit" name="ACTION_UPDATE.x" value="Update" >

Test in all browsers.

If that doesn't work (I've a feeling that . will get replaced by _ on form submission), then you may need to tweak the Perl above. Delete all .x above and use e.g.

<input type="submit" name="ACTION_UPDATE" value="Update" >

[graphicz]

Thanks Norman - Perfect

I am afraid I am as imprecise as you are exact! I meant the whole process - such laxity of expression!

Here is test site with css buttons in shopping cart. Seems to work, no pl editing needed.

http://www.graphicz.eu.com/smartskel/

[NormanRouxel]

You should be able to do this without Perl tweaking.
Go to Design / Library / Layouts / Shopping Cart Button.
For each entry there, change e.g. (for the Cancel button):

<input type="image" name="ACTION_CANCEL" src="button_cancel_button.gif" alt="<Actinic:Variable Name="CancelButton"/>" />

To:

<input type="submit" name="ACTION" value="<Actinic:Variable Name="CancelButton"/>" />

Adding your CSS styling as required.

[graphicz]

Thanks Norman - see edited post above.

[graphicz]

Here is the gen for anyone who would like it - usual disclaimers apply:

<input type="submit" class="button" name="ACTION_UPDATE.x" value="Update" />

<input type="submit" class="button" name="ACTION_UPDATE.x" value="Update" disabled="disabled" style="opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */" />

<input type="submit" class="button" name="ACTION_SAVE.x" value="Save" />

<input type="submit" class="button" name="ACTION_SAVE.x" value="Save" disabled="disabled" style="opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */" />

<input type="submit" class="button" name="ACTION_GET.x" value="Retrieve Cart" />

<input type="submit" class="button" name="ACTION_GET.x" value="Retrieve Cart" disabled="disabled" style="opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */" />

<input type="submit" class="button" name="ACTION_CONTINUE.x" value="Continue Shopping" />

<input type="submit" class="button" name="ACTION_CONTINUE.x" value="Continue Shopping" disabled="disabled" style="opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */" />

<input type="submit" class="button" name="ACTION_BUYNOW.x" value="Checkout Now" />

<input type="submit" class="button" name="ACTION_BUYNOW.x" value="Checkout Now" disabled="disabled" style="opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */" />

/* Buttons
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }

input[type="submit"], input[type="submit"]:hover, input[type="button"], input[type="button"]:hover, .cart-button-wrapper input[type="submit"], .cart-button-wrapper input[type="submit"]:hover, 
form.completeNewProductsItem input.cart-button, form.completeNewProductsItem input.cart-button:hover, 
#idRegistered form input[type="button"], #idRegistered form input[type="button"]:hover {
	width:12em;
	height:3.5em;
	margin:0;
	padding:0 1em 0 0;
	color:<actinic:variable name="BGColor" />;
	font-size:1em;
	font-weight:bold;
	text-align:right;
	text-transform:uppercase;
	border-radius:5px;
	box-shadow:inset 0 0 0 1px <actinic:variable name="BGColor" />;
	border:2px solid <actinic:variable name="Palette1" />;
	background: <actinic:variable name="Palette1" />; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyYTQwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0Mjg0MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background:url('cart-icon.png'), -moz-linear-gradient(top, <actinic:block php="true" >echo ChangeBrightness("<actinic:variable name="Palette1" />", 7);</actinic:block> 0%, <actinic:variable name="Palette1" /> 100%); /* FF3.6+ */
	background:url('cart-icon.png'), -webkit-gradient(linear, left top, left bottom, color-stop(0%,<actinic:block php="true" >echo ChangeBrightness("<actinic:variable name="Palette1" />", 7);</actinic:block>), color-stop(100%,<actinic:variable name="Palette1" />)); /* Chrome,Safari4+ */
	background:url('cart-icon.png'), -webkit-linear-gradient(top, <actinic:block php="true" >echo ChangeBrightness("<actinic:variable name="Palette1" />", 7);</actinic:block> 0%,<actinic:variable name="Palette1" /> 100%); /* Chrome10+,Safari5.1+ */
	background:url('cart-icon.png'), -o-linear-gradient(top, <actinic:block php="true" >echo ChangeBrightness("<actinic:variable name="Palette1" />", 7);</actinic:block> 0%,<actinic:variable name="Palette1" /> 100%); /* Opera 11.10+ */
	background:url('cart-icon.png'), -ms-linear-gradient(top, <actinic:block php="true" >echo ChangeBrightness("<actinic:variable name="Palette1" />", 7);</actinic:block> 0%,<actinic:variable name="Palette1" /> 100%); /* IE10+ */
	background:url('cart-icon.png'), linear-gradient(to bottom, <actinic:block php="true" >echo ChangeBrightness("<actinic:variable name="Palette1" />", 7);</actinic:block> 0%,<actinic:variable name="Palette1" /> 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='<actinic:block php="true" >echo ChangeBrightness("<actinic:variable name="Palette1" />", 7);</actinic:block>', endColorstr='<actinic:variable name="Palette1" />',GradientType=0 ); /* IE6-8 */
	background-repeat:no-repeat;
	background-position:3%;
}

[NormanRouxel]

My post #6 seems to be a better way. I still think that some browsers may not allow a period in the name attribute of a submit button. E.g. I saw on http://stackoverflow.com/questions/3...side-input-tag

Note, that not all characters are submitted for name attributes of form fields (even when using POST)!

White-space characters are trimmed and inner white-space characters as well the character . are replaced by _. (Tested in Chrome 23, Firefox 13 and Internet Explorer 9, all Win7.)

[graphicz]

Revision - v16

I have revised he css button thing to make buttons a bit slimmer and neater and to use 'Call To Action' colour for Checkout now, Next and Add to cart.

The test site is now at:
www.graphicz.xyz/buttonz/
The snapshot can be downloaded at:
http://www.graphicz.xyz/Buttonz-v16.acd

The Styles are:

.buttonz {
  display: inline-block!Important;
  height: 38px!Important;
  padding: 0 30px!Important;
  margin: 5px!Important;
  color: #fff!Important;
  text-align: center!Important;
  font-size: 11px!Important;
  font-weight: 600!Important;
  line-height: 38px!Important;
  letter-spacing: .1rem!Important;
  text-transform: uppercase!Important;
  text-decoration: none!Important;
  white-space: nowrap!Important;
    border-radius: 4px!Important;
  border: 2px solid <actinic:variable name="Palette1" />!Important;
  cursor: pointer!Important;
  box-sizing: border-box!Important; }
.buttonz:hover,
.buttonz:focus {
  color: #3eee!Important;
  border-color: #888!Important;
  outline: 0!Important; }
  
  .buttonzco {
  display: inline-block!Important;
  height: 38px!Important;
  padding: 0 30px!Important;
  margin: 5px!Important;
  color: #fff!Important;
  text-align: center!Important;
  font-size: 11px!Important;
  font-weight: 600!Important;
  line-height: 38px!Important;
  letter-spacing: .1rem!Important;
  text-transform: uppercase!Important;
  text-decoration: none!Important;
  white-space: nowrap!Important;
  background-color: <actinic:variable name="RequiredColor" />!Important;
  background: <actinic:variable name="RequiredColor" />!Important;
  border-radius: 4px!Important;
  border: 2px solid <actinic:variable name="RequiredColor" />!Important;
  cursor: pointer!Important;
  box-sizing: border-box!Important; }
.buttonzco:hover,
.buttonzco:focus {
  color: #eee!Important;
  border: 2px solid <actinic:variable name="RequiredColor" />!Important;
  background-color: <actinic:variable name="RequiredColor" />!Important;
  background: <actinic:variable name="RequiredColor" />!Important;
  opacity: 0.8; filter: alpha(opacity=80)
  outline: 0!Important; }
  div.cartButtons:after {
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

  .clearfloat {
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

span.cart-button-wrapperx input.buttonzco {
background: url('cart-icon.png') 3% center no-repeat <actinic:variable name="RequiredColor" />!Important;
background-image: url('cart-icon.png')!Important;
background-color: <actinic:variable name="RequiredColor" />!Important;
background-origin: padding-box, padding-box;
background-position: 3% center;
background-repeat: no-repeat;
background-size: auto auto, auto 
}
span.cart-button-wrapperx input.buttonzco,
span.cart-button-wrapperx input.buttonzco:hover,
span.cart-button-wrapperx input.buttonzco:focus,
.cart-button-wrapperx input.buttonzco[type="submit"], 
.cart-button-wrapperx input.buttonzco[type="submit"]:hover {
width:16em;
padding: 0 0 0 30px!Important;
}

The buttons are:

<input type="submit" class="buttonz" name="ACTION_CONFIRM.x" value="Confirm" />

<input type="submit" class="buttonz" name="ACTION_CANCEL.x" value="Cancel" />

<input type="submit" class="buttonz" name="ACTION_UPDATE.x" value="Update" />

<input type="submit" class="buttonz" name="ACTION_UPDATE.x" value="Update" disabled="disabled" style="opacity: 0.4; filter: alpha(opacity=40);" />

<input type="submit" class="buttonz" name="ACTION_SAVE.x" value="Save" />

<input type="submit" class="buttonz" name="ACTION_SAVE.x" value="Save" disabled="disabled" style="opacity: 0.4; filter: alpha(opacity=40);" />

<input type="submit" class="buttonz" name="ACTION_GET.x" value="Retrieve Cart" />

<input type="submit" class="buttonz" name="ACTION_GET.x" value="Retrieve Cart" disabled="disabled" style="opacity: 0.4; filter: alpha(opacity=40);" />

<input type="submit" class="buttonz" name="ACTION_CONTINUE.x" value="Continue Shopping" />

<input type="submit" class="buttonz" name="ACTION_CONTINUE.x" value="Continue Shopping" disabled="disabled" style="opacity: 0.4; filter: alpha(opacity=40);" />

<input type="submit" class="buttonzco" name="ACTION_BUYNOW.x" value="Checkout Now" />

<input type="submit" class="buttonzco" name="ACTION_BUYNOW.x" value="Checkout Now" disabled="disabled" style="opacity: 0.4; filter: alpha(opacity=40);" />


<div class="button-wrapper floatRight">
<input type="submit" name="ACTION" id="idBtnNext" value="<actinic:variable encoding="html" name="NextButton" />" class="buttonzco" 
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%200">
	onclick="return CheckForm(this);"	
</actinic:block>
	/>
</div>

<div class="button-wrapper floatLeft">
<input type="submit" name="ACTION" value="<actinic:variable encoding="html" name="CancelButton" />" class="buttonz"/>
</div>

<div class="button-wrapper">
<input type="submit" name="ACTION" id="idBtnPrev" value="<actinic:variable encoding="html" name="BackButton" />" class="buttonz" />
</div>

<div class="button-wrapper floatRight">
<input type="submit" name="ACTION_CONFIRM" id="idBtnConfirm" value="<actinic:variable name="ConfirmOrderButton" />" class="buttonzco" 
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%200">
	onclick="return SubmitPSPForm('<actinic:variable name="ShopID" />');"	
</actinic:block>
	/>
</div>

Add To Cart Button Layout is:

<span id="RemoveIfOutOfStock_ATC_<actinic:variable name="ProductReference" selectable="false" />" class="ActinicRTS" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22CartButtonVisibleToAllCustomers%22%20%2f%3e" >
<!-- This code is used when the cart button is visible to all customers -->
<span class="cart-button-wrapperx"><input value="<Actinic:Variable Name="CartButtonText"/>" name="_<Actinic:Variable Name="ProductID"/>" type="submit" class="buttonzco" onclick="return ValidateChoices("<actinic:variable name="ProductID" />");"/></span>
</actinic:block> 

<actinic:block if="%3cactinic%3avariable%20name%3d%22EnabledForCustomerGroupID%22%20%2f%3e%20%21%3d%20%22%22">
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e">
<!-- This code is used when the cart button is visible to retail customers, but not all other customer groups -->
<Actinic:ShowForPriceSchedule Schedules="<actinic:variable name="EnabledForCustomerGroupID" />">
<span class="cart-button-wrapperx"><input value="<Actinic:Variable Name="CartButtonText"/>" name="_<Actinic:Variable Name="ProductID"/>" type="submit" class="buttonzco" onclick="return ValidateChoices("<actinic:variable name="ProductID" />");"/></span>
</Actinic:ShowForPriceSchedule>
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e%20%3d%3d%20FALSE" >
<!-- This code is used when the cart button needs to hidden from retail customers -->
<Actinic:ShowForPriceSchedule Schedules="<actinic:variable name="EnabledForCustomerGroupID" />" HTML="<span class='cart-button-wrapperx'><input value='<Actinic:Variable Name="CartButtonText"/>' name='_<Actinic:Variable Name="ProductID"/>' type='submit' class='buttonzco' onclick='return ValidateChoices("<actinic:variable name="ProductID" />");' /></span>"></Actinic:ShowForPriceSchedule>
</actinic:block>
</actinic:block>
</span>

I have tested but no warranty given.

The 'Call To Action' colour is <actinic:variable name="RequiredColor" /> but if your button colour sheme is a reddish one you could use a hash colour code to have call to action as green for example.