In This Article:

    Storefront: Add an additional amount to checkout

    In This Article:

      Background

      Several of our clients have asked to have a way to collect an additional amount on the storefront checkout page:

      2015-05-08_1023.png

      The idea is that purchasers are in a buying mood, and a quick ask before they go could take advantage of that mood. If you'd like to have an extra amount added to your storefront, then please read on!

      Solution

      The solution is a bit complex and is composed of three parts:

      1. Add HTML to your storefront
      2. Add Javascript to the template
      3. Add CSS (style) rules to the template

      When these three steps are complete, then the storefront will have an additional amount field

      Before you begin

      Click here to see the files that are used in this solution. If you accidentally close this window, then just click this link again.

      Step 1: Add HTML to the storefront

      This step adds the additional amount field to your storefront. This will provide some sample text and an <input> tag.

      1. Edit the storefront where you'd like the extra amount to appeart.
      2. Scroll down to the PreSubmitFooter field:

      2015-05-08_1039.png

      1. Insert a blank line after all of the other content in the PreSubmitFooter. If there are no contents, then just insert a blank line.
      2. Return to the Github window (with the files). Locate the file named "additional_amount_footer_contents.html".

      2015-05-08_1036.png

      1. Click the Raw button. You'll see a window that contains just the HTML

      2015-05-08_1042.png

      1. Copy the contents of the window, then click the browser's Back button to return to the list of files.
      2. Return to the storefront editor and paste the copied contents into the PreSubmit Footer into the blank line that was inserted earlier.
      3. Save the storefront.

      Step 2: Add Javascript to the Template

      1. Edit the template that's used by the storefront.

      2015-05-08_1047.png

      1. Locate the </body> tag using the browser's search tool.
      2. Insert a blank line just before the </body> tag.

      2015-05-08_1050.png

      1. Return on the Github window (with the files). Locate the file named "additional_amount_footer_script.html".

      2015-05-08_1052.png

      1. Click the Raw button. You'll see a window that contains just the HTML

      2015-05-08_1042.png

      1. Copy the contents of the window, then click the browser's Back button to return to the list of files.
      2. Return to the template editor.
      3. Paste the copied contents into the blank line that was inserted earlier.
      4. Save the template. (Precautionary step. We're not quite done with the template yet...)

      Step 3: Add CSS to the template

      This step adds CSS (style) rules to the template for the additional amount field and the structure that surrounds it.

      1. Return to the template editor window.
      2. Locate the </head> tag using the browser's search tool.

      2015-05-08_1057.png

      1. Insert a blank line just before the <head> tag.
      1. Click on the Github window (with the files). Locate the file named "additional_amount_css.html".

      2015-05-08_1059.png

      1. Click the Raw button. You'll see a window that contains just the HTML.

      2015-05-08_1042.png

      1. Copy the contents of the window, then click the browser's Back button to return to the list of files.
      2. Return to the template editor.
      3. Paste the copied contents into the blank line that was inserted earlier.
      4. Save the template.
      5. Yay! Installation is complete!

      Configuration

      The contents of the PreSubmitFooter page will be displayed just after the part that collects personal information.

      2015-05-08_1023.png

      When the HTML was inserted into the Presubmit Footer, some default formatting and contents are just there as placeholders. You probably should modify the HTML so that the area surrounding the additional amount field matches your storefront. You'll also want to change the text at the top, and the prompt text, to something that will get your donors to fill in the box.

      The only field that cannot change is the <input> tag:

      2015-05-08_1107.png

      That whole line must appear intact when any modifications are complete.

      If you do not remove the <div> tags in the PreSubmit Footer, then the CSS rules that we inserted can be used to decorate them. The CSS rules match the structure in the HTML, making it a straightforward task to change the appearance.

      Questions?

      If you have any questions, please collection this information:

      • Your organization_KEY
      • Your chapter_KEY if you are in a chapter
      • The storefront's URL.  You can retrieve this from the browser's address bar.
      • A screenshot showing the issue.

      Send this information to support@salsalabs.com, and we'll be glad to help.

      Was this article helpful?
      0 out of 0 found this helpful
      Have more questions? Submit a request

      Comments

      0 comments

      Please sign in to leave a comment.