Announcement

Collapse
No announcement yet.

Css3 buttons through checkout

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Css3 buttons through checkout

    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.
    Jonathan Chappell
    Website Designer
    SellerDeck Website Designer
    Actinic to SellerDeck upgrades
    Graphicz Limited - www.graphicz.co.uk

    #2
    They are CSS buttons on both Classic and Smart responsive themes here. E.g:
    Code:
    <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.
    Norman - www.drillpine.biz
    Edinburgh, U K / Bitez, Turkey

    Comment


      #3
      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?
      Jonathan Chappell
      Website Designer
      SellerDeck Website Designer
      Actinic to SellerDeck upgrades
      Graphicz Limited - www.graphicz.co.uk

      Comment


        #4
        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:
        Code:
        	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" >
        Norman - www.drillpine.biz
        Edinburgh, U K / Bitez, Turkey

        Comment


          #5
          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/
          Jonathan Chappell
          Website Designer
          SellerDeck Website Designer
          Actinic to SellerDeck upgrades
          Graphicz Limited - www.graphicz.co.uk

          Comment


            #6
            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):
            Code:
            <input type="image" name="ACTION_CANCEL" src="button_cancel_button.gif" alt="<Actinic:Variable Name="CancelButton"/>" />
            To:
            Code:
            <input type="submit" name="ACTION" value="<Actinic:Variable Name="CancelButton"/>" />
            Adding your CSS styling as required.
            Norman - www.drillpine.biz
            Edinburgh, U K / Bitez, Turkey

            Comment


              #7
              Thanks Norman - see edited post above.
              Jonathan Chappell
              Website Designer
              SellerDeck Website Designer
              Actinic to SellerDeck upgrades
              Graphicz Limited - www.graphicz.co.uk

              Comment


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

                Code:
                <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%;
                }
                Jonathan Chappell
                Website Designer
                SellerDeck Website Designer
                Actinic to SellerDeck upgrades
                Graphicz Limited - www.graphicz.co.uk

                Comment


                  #9
                  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.)
                  Norman - www.drillpine.biz
                  Edinburgh, U K / Bitez, Turkey

                  Comment


                    #10
                    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:
                    Code:
                    .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:

                    Code:
                    <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:

                    Code:
                    <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.
                    Jonathan Chappell
                    Website Designer
                    SellerDeck Website Designer
                    Actinic to SellerDeck upgrades
                    Graphicz Limited - www.graphicz.co.uk

                    Comment

                    Working...
                    X