Continue Shopping Button in View Basket

[onebrowncow]

Following on from comments from Dirty Butter in another thread I have added a very simple Continue Shopping button to the basket pages which appears alongside the grand total line in larger views and as a single bar across the screen in a mobile view. It just redirects back to the home page which is fine but if you proceed from index.php?_a=basket to index.php?_a=confirm and use the continue shopping link any data added in the customer information fields will be lost.

So the solution I am after is a way of hiding the button on any pages other than the _a=basket page. I'm not great with php but is it possible to wrap the button div in an {if}  {/if} statement using the _a=basket to identify the page you need the button to appear on and to control the pages on which the div would not appear on?

 

The following code was added to content.checkout.medium-up.php (a slight variation added to content.checkout.php for the button to appear on the small screen)

<div class="button secondary small-7 columns show-for-medium-up"><a href="{$STORE_URL}" target="_self">
Continue Shopping</a></div>

Edited July 10, 2015 by onebrowncow

[onebrowncow]

This small code hack will add a continue shopping button (or text in mobile view) to the basket view page after the customer has used the empty basket button.

<!--content.checkout.php-->

<!--near the bottom of this template find:  -->

{/if}
{else}
<h2>{$LANG.checkout.your_basket}</h2>
<p class="thickpad-top">{$LANG.basket.basket_is_empty}</p>
{/if}

<!--add additional <div> content as shown below :  -->

{/if}
{else}
<h2>{$LANG.checkout.your_basket}</h2>
<p class="thickpad-top">{$LANG.basket.basket_is_empty}</p>
<div class="row">
<div class="button secondary small-3 columns show-for-medium-up"><a href="{$STORE_URL}" target="_self">Continue Shopping</a></div>
<div class="small-12 columns show-for-small-only pad-bottom"><a href="{$STORE_URL}" target="_self"><i class="fa fa-arrow-circle-left"></i> Continue Shopping</a></div>
</div>
{/if}

Seems to work fine but still testing. If anyone else fancies trying it and seeing if it breaks anything I'd appreciate the feedback

[fabriceunko]

Hi, I just tested your change and it seems to work well

[philippagreen]

Is it possible to have a style which is independent for the Continue Shopping button?

[All4One]

Can you tell me how you were able to get the button to align with the grand total?

 

I keep getting this...

 

[sailing123]

If you are using V6.1.5, I simply added the following code in my skins template, /templates/content.checkout.php:

<a href="?" class="button success">{$LANG.basket.continue_shopping}</a>

JUST AFTER:

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

and JUST AFTER:

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

I now have a green continue shopping button for large, medium and small devices on the checkout page.

 

 

[Dirty Butter]

I lined mine up with the Empty and Update Buttons. Using different class for button gives a different color for the button.

   <div class="clearfix">
      <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>
  {* CONTINUE SHOPPING *}  <div class="show-for-medium-up">
<a href="?" class="button alert left">{$LANG.basket.continue_shopping}</a>
</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>
<div class="show-for-small-only">
<a href="?" class="button alert left">{$LANG.basket.continue_shopping}</a>
</div>
{* END CONTINUE SHOPPING *}
      {if $DISABLE_CHECKOUT_BUTTON!==true}

 

[sailing123]

This reminds me to check on different browsers. In Firefox, the 3 buttons lined up perfectly on desktop without me having to do any css changes.

Amendment: just checked IE and Chrome, looking all good :-)

Edited March 23, 2017 by sailing123

[MARIO AWNA]

On 7/10/2015 at 10:06 PM, onebrowncow said:

Following on from comments from Dirty Butter in another thread I have added a very simple Continue Shopping button to the basket pages which appears alongside the grand total line in larger views and as a single bar across the screen in a mobile view. It just redirects back to the home page which is fine but if you proceed from index.php?_a=basket to index.php?_a=confirm and use the continue shopping link any data added in the customer information fields will be lost.

So the solution I am after is a way of hiding the button on any pages other than the _a=basket page. I'm not great with php but is it possible to wrap the button div in an {if}  {/if} statement using the _a=basket to identify the page you need the button to appear on and to control the pages on which the div would not appear on?

 

The following code was added to content.checkout.medium-up.php (a slight variation added to content.checkout.php for the button to appear on the small screen)

<div class="button secondary small-7 columns show-for-medium-up"><a href="{$STORE_URL}" target="_self">
Continue Shopping</a></div>

 

Hello. Can you tell me what codes should I use to achieve this look with the "CONTINUE SHOPPING"

- content.checkout.php

- content.checkout.medium-up.php

 

 

Thank you.

[bsmither]

In the Foundation skin template content.checkout.medium-up.php:

At the bottom, find:

         <tr>
            <td colspan="4"></td>
            <td>{$LANG.basket.total_grand}</td>
            <td class="text-right">{$TOTAL}</td>
         </tr>

Change to:

         <tr>
            <td colspan="4">
               <div class="small-7 columns show-for-medium-up"><a href="{$STORE_URL}" target="_self" class="button secondary nomarg">Continue Shopping</a></div>
            </td>
            <td>{$LANG.basket.total_grand}</td>
            <td class="text-right">{$TOTAL}</td>
         </tr>