Announcement

Collapse
No announcement yet.

Can I use images for my Back, Next, Cancel and Change Buttons in the Checkout?

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

    Can I use images for my Back, Next, Cancel and Change Buttons in the Checkout?

    You can use images for the 'Next', 'Back' and 'Cancel' buttons in the checkout. This requires a little Perl customisation, so please carry out the steps in this exercise with care.

    Version 8 and 9
    Click on the 'Design' tab and in the 'Select Page Type' box, choose 'Checkout page 1'. In the preview pane, click on the 'Back' button to display the code for this button. You should see:

    <input type="submit" name="ACTION" value="BackButton" />

    Replace this with the following code:


    <!--<input type="submit" name="ACTION" value="<actinic:variable encoding="html" name="BackButton" />" /> -->
    <input type=IMAGE name=ACTION_BACK src="back.gif">


    Then click on the 'Cancel' button in the preview pane and replace the code with:

    <!--<input type="submit" name="ACTION" value="<actinic:variable encoding="html" name="CancelButton" />" /> -->
    <input type="image" name="ACTION_CANCEL" src="cancel.gif" />


    Finally, click on the 'Next' button in the preview pane and replace the code with:


    <!--<input type="submit" name="ACTION" value="<actinic:variable encoding="html" name="NextButton" />" /> -->
    <input type="image" name="ACTION_NEXT" src="next.gif" />


    The above assumes that 'back.gif' is the image you want to use for the back button, 'cancel.gif' is the image you want to use for the cancel button and 'next.gif' is the image you want to use for the next button. These images need to already be in your 'Site1' (or equivalent) folder.)

    Next, locate 'OrderScript.pl' within your 'Site1' (or equivalent) folder, edit it with Notepad and find the following code:


    @Response = ReadAndParseBlobs(); # read the catalog blobs
    ($Status, $Message) = @Response; # parse the response
    if ($Status != $::SUCCESS)
    {
    ACTINIC::ReportError($Message, ACTINIC::GetPath());
    }

    Underneath it, copy and paste the following code:

    if(!defined $::g_InputHash{"ACTION"})
    {
    if(defined $::g_InputHash{"ACTION_BACK.x"})
    {
    $::g_InputHash{"ACTION"} = ACTINIC::GetPhrase(-1, 503);
    }
    elsif(defined $::g_InputHash{"ACTION_CANCEL.x"})
    {
    $::g_InputHash{"ACTION"} = ACTINIC::GetPhrase(-1, 505);
    }
    elsif(defined $::g_InputHash{"ACTION_NEXT.x"})
    {
    $::g_InputHash{"ACTION"} = ACTINIC::GetPhrase(-1, 502);
    }
    }


    Save and close the script and upload to see your new button images.

    You can also use images for the 'Change' button that appear next to the location you have selected.

    To go this, go to 'Design | Text', click on the 'Go To' button and enter 'Phase' -1 and 'ID' 2067. This will take you to the following prompt

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td align="left">%s%s%s<input type="hidden" name="%s" value="%s" /></td>
    <td align="right"><input type="submit" name="ACTION" value="%s" /></td>
    </tr>
    </table>


    Change:

    <input type="submit" name="ACTION" value="%s" />

    to:

    <input type="image" name="ACTION_CHANGELOCATION" src="image.gif" />

    where 'image.gif' is the name of your image.

    Next, open 'OrderScript.pl' as before with Notepad and locate the code that you input for using images for the 'Back', 'Cancel' and 'Next' buttons as mentioned above, you need to enter:


    if(!defined $::g_InputHash{"ACTION"})
    {
    if(defined $::g_InputHash{"ACTION_CHANGELOCATION.x"})
    {
    $::g_InputHash{"ACTION"} = ACTINIC::GetPhrase(0, 18);
    }
    }

    This bit must be part of a separate 'if' statement to the other buttons or it won't work (i.e. do not add it as an 'elseif' to the previous code).

    Finally, you need to go to 'Design | Additional Files' and include the 'image.gif' file within the list of additional files to be uploaded to the website.

    Note that this won't work if the 'URL for completed and aborted checkout' is populated in 'Design | Design Options'.

    Version 10 onwards

    Click on the 'Design' tab and in the 'Select Page Type' box, choose 'Checkout page 1'. In the preview pane, click on the 'Back' button to display the code for this button. You should see:

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

    Replace this with the following code:


    <!--<input type="submit" name="ACTION" id="idBtnPrev" value="<actinic:variable encoding="html" name="BackButton" />" class="normal-button" /> -->
    <input type=IMAGE name=ACTION_BACK src="back.gif">

    Then click on the 'Cancel' button in the preview pane and replace the code with:

    <!--<input type="submit" name="ACTION" value="<actinic:variable encoding="html" name="CancelButton" />" class="normal-button"/> -->
    <input type="image" name="ACTION_CANCEL" src="cancel.gif" />


    Finally, click on the 'Next' button in the preview pane and replace the code with:


    <!--<input type="submit" name="ACTION" id="idBtnNext" value="<actinic:variable encoding="html" name="NextButton" />" class="highlight-button"

    <actinic:block if="%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%200">

    onclick="return CheckForm(this);"

    </actinic:block>

    />
    -->
    <input type="image" name="ACTION_NEXT" src="next.gif" />

    In the 'Select Page Type' box, choose 'Checkout page 2'. In the preview pane, click on the 'Confirm Order' button to display the code for this button.
    Replace the code: -

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

    with: -

    <input type="image" name="ACTION_CONFIRM" src="confirm_order.gif"
    <actinic:block if="%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%200">
    onclick="return SubmitPSPForm();"
    </actinic:block>
    />


    The above assumes that the ‘back.gif’, ‘cancel.gif’, ‘next.gif’ and ‘confirm_order.gif’ are the image names you want to use. These images need to already exist in your 'Site1' (or equivalent) folder.

    Next, locate 'OrderScript.pl' within your 'Site1' (or equivalent) folder, edit it with Notepad and find the following code:-

    @Response = ReadAndParseBlobs(); # read the catalog blobs
    ($Status, $Message) = @Response; # parse the response
    if ($Status != $::SUCCESS)
    {
    ACTINIC::ReportError($Message, ACTINIC::GetPath());
    }

    Underneath it, copy and paste the following code:

    if(!defined $::g_InputHash{"ACTION"})
    {
    if(defined $::g_InputHash{"ACTION_CHANGELOCATION.x"})
    {
    $::g_InputHash{"ACTION"} = ACTINIC::GetPhrase(0, 18);
    }
    }
    if(!defined $::g_InputHash{"ACTION"})
    {
    if(defined $::g_InputHash{"ACTION_BACK.x"})
    {
    $::g_InputHash{"ACTION"} = ACTINIC::GetPhrase(-1, 503);
    }
    elsif(defined $::g_InputHash{"ACTION_CANCEL.x"})
    {
    $::g_InputHash{"ACTION"} = ACTINIC::GetPhrase(-1, 505);
    }
    elsif(defined $::g_InputHash{"ACTION_NEXT.x"})
    {
    $::g_InputHash{"ACTION"} = ACTINIC::GetPhrase(-1, 502);
    }
    elsif(defined $::g_InputHash{"ACTION_CONFIRM.x"})
    {
    $::g_InputHash{"ACTION"} = ACTINIC::GetPhrase(-1, 2602);
    }
    }

    Save and close the script and upload to see your new button images.


    SellerDeck is not able to provide any detailed support for script changes made. If you find that there is a problem, an original copy of the script can be found within the 'Original' folder in your installation. Copy this into your site folder.

    Thanks to Duncan Rounding for the additional v10 code
Working...
X