Claudia M Posted July 13, 2021 Share Posted July 13, 2021 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 Link to comment Share on other sites More sharing options...
bsmither Posted July 13, 2021 Share Posted July 13, 2021 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 More sharing options...
Claudia M Posted July 13, 2021 Author Share Posted July 13, 2021 "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 More sharing options...
Claudia M Posted July 13, 2021 Author Share Posted July 13, 2021 Well maybe I'm not done LOL How would I move the PayPal stuff under the radio button with credit card next to it and move the continue button to the same line as the radio button with credit card. Do you need to see my code? Link to comment Share on other sites More sharing options...
bsmither Posted July 13, 2021 Share Posted July 13, 2021 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 More sharing options...
Claudia M Posted July 13, 2021 Author Share Posted July 13, 2021 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 </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 More sharing options...
bsmither Posted July 14, 2021 Share Posted July 14, 2021 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 More sharing options...
Claudia M Posted July 14, 2021 Author Share Posted July 14, 2021 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"> 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 More sharing options...
bsmither Posted July 14, 2021 Share Posted July 14, 2021 Hm. It seems the Checkout button is now inside the {if $INCLUDE_CHECKOUT}"Pick a Gateway" block, which the gateways are not shown when viewing the basket. Working on a refined approach... Link to comment Share on other sites More sharing options...
bsmither Posted July 14, 2021 Share Posted July 14, 2021 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 More sharing options...
Claudia M Posted July 14, 2021 Author Share Posted July 14, 2021 I made the changes above, wiith a few styling changes, and I put the "Choose Payment Method" on its own line. Everything looks good and is working. Thank you once again Brian you are the Bees Knees!!!!! Claudia Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.