Jump to content

Checkout pages


Claudia M

Recommended Posts

I have tried to figure this out for days, even reverting to the stock Foundation checkout templates and I can't figure this out.  Why is my "Choose Payment Method" and buttons so far to the left and right?

If I put them in a row theneverything is in the right place but there is no side padding / margin for the buttons on the basket or confirm pages. (in case I want to put a border around it on the confirm page). I don't think putting them in a row is ths solution because they aren't in a row in Foundation.

And why doesn't my Paypal gateway have a radio button next to it.  I'm thinking because if you click the paypal button you go straight to Paypal.  Is that right?

Thanks for any and all help,

Claudia

Checkout.thumb.PNG.43587b0fcbe71978992e2a3e9d21fde2.PNG

Link to comment
Share on other sites

In the row that has the credit card choice, there is a <ul> tag with an id of "gateway_error" and a class of "right". Remove the word 'right' and that should fix that anomaly.

Currently, "Continue Payment" seems to be in the right place.

The PayPal button is special. I am not 100% sure what it bypasses, but it may bypass the need to fill in any form elements (as a guest), nor possibly even having the guest be required to answer the reCaptcha.

 

Link to comment
Share on other sites

"Continue Payment" is in the right place if I keep everything in a row, but there is no padding on the sides of the row even when I remove the "right".  The Paypal wording and button have the padding - just not the Cuebcart buttons.

Oh and products are now showing under "Customers who bought this also bought...  Never had them show up before

 

I think I looks like I want now.  I added pad-sides to the CubeCart buttons and "Choose Payment Method".  Plus commented out the Customers bought stuff.  I just don't understand why I had to put them in rows when they are not in rows in Foundation.

Link to comment
Share on other sites

The credit card radio button is in a <ul> list within a block that uses all 12 columns. We can split that into two blocks that use 6 columns each:

From:
<div class="small-12 columns">
  <ul class="no-bullet" id="gateway_error">
    <li><input name="gateway" type="radio" class="nosubmit" value="Stripe" id="Stripe" required="" checked="checked" rel="gateway_error">
      <label for="Stripe">Credit Card</label></li>
  </ul>
  <div class="hide" id="validate_gateway_required">Please select a payment method.</div>
</div>

To:
<div class="small-6 columns">
  <ul class="no-bullet" id="gateway_error">
    <li><input name="gateway" type="radio" class="nosubmit" value="Stripe" id="Stripe" required="" checked="checked" rel="gateway_error">
      <label for="Stripe">Credit Card</label></li>
  </ul>
</div>
<div class="small-6 columns">
  <!-- Put what you want here with class="right". -->
</div>
<div class="hide" id="validate_gateway_required">Please select a payment method.</div>

Move the button id="checkout_proceed" code into that new 6 column block.

As for the PayPal button, that comes in with this template code:

{if $DISABLE_CHECKOUT_BUTTON!==true}
   {if $CHECKOUTS}
<div class="row">
   <div class="small-12 columns text-right">-- {$LANG.common.or} --</div>
</div>
      {foreach from=$CHECKOUTS item=checkout}
<div class="row">
   <div class="small-12 columns text-right pad">{$checkout}</div>
</div>
      {/foreach}
   {/if}
{/if}

You can move that to just after the closing </ul> tag in the first 6 column block. (Remove 'text-right' from the class of the small-12 columns div tags.)

Link to comment
Share on other sites

So is this what it should look like?

 {if $INCLUDE_CHECKOUT && !$DISABLE_GATEWAYS}
   <div class="row pad-left">
 <div id="payment_method">
    <!--  <a href="?" class="right">{$LANG.basket.continue_shopping}</a> --><h3>{$LANG.gateway.select}</h3>
   
 <hr>
   </div>
      <div class="row">
         <div class="small-6 columns">
            <ul class="no-bullet" id="gateway_error">
               {foreach from=$GATEWAYS item=gateway}
               <li>
                  <input name="gateway" type="radio" class="nosubmit" value="{$gateway.folder}" id="{$gateway.folder}" required {$gateway.checked} rel="gateway_error"><label for="{$gateway.folder}">{$gateway.description}</label>
                  {if !empty($gateway.help)}
                  <a href="{$gateway.help}" class="info" title="{$LANG.common.information}"><svg class="icon"><use xlink:href="#icon-info-circle"></use></svg></a>
                  {/if}
               </li>
               {/foreach}
               {if $DISABLE_CHECKOUT_BUTTON!==true}
   {if $CHECKOUTS}
<div class="row">
   <div class="small-12 columns">-- {$LANG.common.or} --</div>
</div>
      {foreach from=$CHECKOUTS item=checkout}
<div class="row">
   <div class="small-12 columns">{$checkout}</div>
</div>
      {/foreach}
   {/if}
{/if}
            </ul>
            </div>
            <div class="small-6 columns">
    {if $DISABLE_CHECKOUT_BUTTON!==true}
      <button type="submit" name="proceed" id="checkout_proceed" class="button success right g-recaptcha">{$CHECKOUT_BUTTON} <svg class="icon"><use xlink:href="#icon-chevron-right"></use></svg></button>
      {/if}
</div>

             <div class="hide" id="validate_gateway_required">{$LANG.gateway.choose_payment}</div>
         </div>
      </div>
     
      {/if}
   {if $TERMS_CONDITIONS && isset($ALTERNATE_TERMS) && $ALTERNATE_TERMS=='0'}
   <p class="text-right"><label for="reg_terms">{$LANG.account.register_terms_agree_link|replace:'%s':{$TERMS_CONDITIONS}} <input type="checkbox" id="reg_terms" name="terms_agree" value="1" rel="error_terms_agree"></label></p>
   {/if}
   <div class="row pad-side">
   <div class="clearfix" id="checkout_actions">
    <!--   <div class="show-for-medium-up"><a href="{$STORE_URL}/index.php" class="button left"><svg class="icon"><use xlink:href="#icon-home"></use></svg> {$LANG.basket.continue_shopping}</a></div> -->
      <div class="show-for-medium-up"><a href="{$STORE_URL}/index.php?_a=basket&empty-basket=true" class="button alert left"><svg class="icon"><use xlink:href="#icon-trash-o"></use></svg> {$LANG.basket.basket_empty}</a></div>
      <div class="show-for-medium-up"><button type="submit" name="update" class="button secondary left" value="{$LANG.basket.basket_update}"><svg class="icon"><use xlink:href="#icon-refresh"></use></svg> {$LANG.basket.basket_update}</button></div>
      <div class="show-for-small-only"><button type="submit" name="update" class="button secondary left" value="{$LANG.basket.basket_update}"><svg class="icon"><use xlink:href="#icon-refresh"></use></svg> {$LANG.common.update}</button></div>
     <!-- {if $DISABLE_CHECKOUT_BUTTON!==true}
      <button type="submit" name="proceed" id="checkout_proceed" class="button success right g-recaptcha">{$CHECKOUT_BUTTON} <svg class="icon"><use xlink:href="#icon-chevron-right"></use></svg></button>
      {/if}-->
   </div>
   </div>
</form>
{if $DISABLE_CHECKOUT_BUTTON!==true}
   {if $CHECKOUTS}
<div class="row">
   <div class="small-12 columns text-right">or Pay with Paypal&nbsp;&nbsp; </div>
</div>
      {foreach from=$CHECKOUTS item=checkout}
<div class="row">
   <div class="small-12 columns text-right">{$checkout}</div>
</div>
      {/foreach}
   {/if}
{/if}

 

Link to comment
Share on other sites

The code that you moved into the first 6 column block should come after the closing </ul> tag. You have it before the closing </ul> tag.

The {if $DISABLE_CHECKOUT_BUTTON!==true} block of code at the very end is probably still visible - after having copied it to the new location.

 

Link to comment
Share on other sites

So is this right?

Just noticed, no "Checkout Button" on the view basket page

{if $INCLUDE_CHECKOUT && !$DISABLE_GATEWAYS}
   <div class="row pad-left">
 <div id="payment_method">
    <!--  <a href="?" class="right">{$LANG.basket.continue_shopping}</a> --><h3>{$LANG.gateway.select}</h3>
   
 <hr>
   </div>
      <div class="row">
         <div class="small-6 columns">
            <ul class="no-bullet" id="gateway_error">
               {foreach from=$GATEWAYS item=gateway}
               <li>
                  <input name="gateway" type="radio" class="nosubmit" value="{$gateway.folder}" id="{$gateway.folder}" required {$gateway.checked} rel="gateway_error"><label for="{$gateway.folder}">{$gateway.description}</label>
                  {if !empty($gateway.help)}
                  <a href="{$gateway.help}" class="info" title="{$LANG.common.information}"><svg class="icon"><use xlink:href="#icon-info-circle"></use></svg></a>
                  {/if}
               </li>
               {/foreach}
                         </ul>
               {if $DISABLE_CHECKOUT_BUTTON!==true}
   {if $CHECKOUTS}
<div class="row">
   <div class="small-12 columns">&nbsp;&nbsp;Pay with Paypal </div>
</div>
      {foreach from=$CHECKOUTS item=checkout}
<div class="row thickpad-bottom">
   <div class="small-12 columns">{$checkout}</div>
</div>
      {/foreach}
   {/if}
{/if}    
           </div>
            <div class="small-6 columns marg-top">
    {if $DISABLE_CHECKOUT_BUTTON!==true}
      <button type="submit" name="proceed" id="checkout_proceed" class="button success right g-recaptcha">{$CHECKOUT_BUTTON} <svg class="icon"><use xlink:href="#icon-chevron-right"></use></svg></button>
      {/if}
</div>

             <div class="hide" id="validate_gateway_required">{$LANG.gateway.choose_payment}</div>
         </div>
      </div>
     
      {/if}
   {if $TERMS_CONDITIONS && isset($ALTERNATE_TERMS) && $ALTERNATE_TERMS=='0'}
   <p class="text-right"><label for="reg_terms">{$LANG.account.register_terms_agree_link|replace:'%s':{$TERMS_CONDITIONS}} <input type="checkbox" id="reg_terms" name="terms_agree" value="1" rel="error_terms_agree"></label></p>
   {/if}
   <div class="row pad-side">
   <div class="clearfix" id="checkout_actions">
    <!--   <div class="show-for-medium-up"><a href="{$STORE_URL}/index.php" class="button left"><svg class="icon"><use xlink:href="#icon-home"></use></svg> {$LANG.basket.continue_shopping}</a></div> -->
      <div class="show-for-medium-up"><a href="{$STORE_URL}/index.php?_a=basket&empty-basket=true" class="button alert left"><svg class="icon"><use xlink:href="#icon-trash-o"></use></svg> {$LANG.basket.basket_empty}</a></div>
      <div class="show-for-medium-up"><button type="submit" name="update" class="button secondary left" value="{$LANG.basket.basket_update}"><svg class="icon"><use xlink:href="#icon-refresh"></use></svg> {$LANG.basket.basket_update}</button></div>
      <div class="show-for-small-only"><button type="submit" name="update" class="button secondary left" value="{$LANG.basket.basket_update}"><svg class="icon"><use xlink:href="#icon-refresh"></use></svg> {$LANG.common.update}</button></div>
     <!-- {if $DISABLE_CHECKOUT_BUTTON!==true}
      <button type="submit" name="proceed" id="checkout_proceed" class="button success right g-recaptcha">{$CHECKOUT_BUTTON} <svg class="icon"><use xlink:href="#icon-chevron-right"></use></svg></button>
      {/if}-->
   </div>
   </div>
</form>

 

Link to comment
Share on other sites

I would like for you try this:

<!-- Stuff at the top. -->

   <div class="row pad-left">
      <div class="row">
   {if $INCLUDE_CHECKOUT && !$DISABLE_GATEWAYS}
         <div class="small-6 columns">
      <!--<a href="?" class="right">{$LANG.basket.continue_shopping}</a>--><h3>{$LANG.gateway.select}</h3>
            <ul class="no-bullet" id="gateway_error">
               {foreach from=$GATEWAYS item=gateway}
               <li>
                  <input name="gateway" type="radio" class="nosubmit" value="{$gateway.folder}" id="{$gateway.folder}" required {$gateway.checked} rel="gateway_error"><label for="{$gateway.folder}">{$gateway.description}</label>
                  {if !empty($gateway.help)}
                  <a href="{$gateway.help}" class="info" title="{$LANG.common.information}"><svg class="icon"><use xlink:href="#icon-info-circle"></use></svg></a>
                  {/if}
               </li>
               {/foreach}
            </ul>
{if $DISABLE_CHECKOUT_BUTTON!==true}
   {if $CHECKOUTS}
<div class="row">
   <div class="small-12 columns text-right">-- {$LANG.common.or} --</div>
</div>
      {foreach from=$CHECKOUTS item=checkout}
<div class="row">
   <div class="small-12 columns text-right pad">{$checkout}</div>
</div>
      {/foreach}
   {/if}
{/if}
         </div>
   {/if}
         <div class="small-6 columns right">
{if $DISABLE_CHECKOUT_BUTTON!==true}
<button type="submit" name="proceed" id="checkout_proceed" class="button right g-recaptcha">{$CHECKOUT_BUTTON} <svg class="icon"><use xlink:href="#icon-chevron-right"></use></svg></button>
{/if}
         </div>
      </div>
   </div>
   <div class="hide" id="validate_gateway_required">{$LANG.gateway.choose_payment}</div>
   {if $TERMS_CONDITIONS && isset($ALTERNATE_TERMS) && $ALTERNATE_TERMS=='0'}

<!--Rest of the stuff at the bottom.-->

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...