Jump to content
Sign in to follow this  
onebrowncow

Continue Shopping Button in View Basket

Recommended Posts

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>

continue-shopping.thumb.jpg.b1fefecbb1ea

Edited by onebrowncow

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

 

 

Share this post


Link to post
Share on other sites

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

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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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>

continue-shopping.thumb.jpg.b1fefecbb1ea

 

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.

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...