View Single Post
  #2  
Old 08-26-2014, 08:52 AM
Rick G's Avatar
Rick G Rick G is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,271
Default

Quote:
Originally Posted by Shanna Cushing View Post
Hello,

I'm using the Ecwid plugin for Wordpress.

I've been scouring the forums but can't find a solution that works for me. I need the "Continue Shopping" button on the Order Confirmation page to redirect to a new link, a third party site where clients book an IT technician after purchase.

I would also like to find out how to make the button bigger and change the text to say "Book your Technician" at the bottom of the Order Confirmation/Invoice page.

This is the code I'm using on my page:
<!-- Ecwid code. Please do not remove this line otherwise your Ecwid shopping cart will not work properly. -->[ecwid_minicart] [ecwid_searchbox] [ecwid_categories] [ecwid_productbrowser]

<script>
if (typeof(Ecwid) == 'object') {
Ecwid.OnAPILoaded.add(function() {
var continueShoppingRedirect = "https://www.timetrade.com/book/FGK7S";

var buttons = [
'button.ecwid-productBrowser-cart-continueShoppingButton', // Cart page
'div.ecwid-productBrowser-cart-emptyCartPanel button.gwt-Button', // Empty cart page
'button.ecwid-ContinueShoppingButton-Invoice', // Order confirmation page
'div.ecwid-productBrowser-search-ContinueShoppingButtonContainer button.gwt-Button', // Search results page
'div.ecwid-Account-ContinueShoppingButtonContainer button.gwt-Button' // 'My account' pages
];

var pages = [
'ORDER_CONFIRMATION',
'ACCOUNT_SETTINGS',
'ORDERS',

];

Ecwid.OnPageLoaded.add(function(page) {
if (jQuery.inArray(page.type, pages) >= 0) {
var buttonObject = jQuery(buttons.join()).filter(":not('.clone'):visi ble");
if (buttonObject.length) {
buttonObject.clone().addClass('clone').appendTo(bu ttonObject.parent()).click(function() {
location.href = continueShoppingRedirect;
});

// Remove the original button
buttonObject.remove();
}
}
});
});
}
</script>
<!-- Ecwid code end -->
Hello Shanna.

You can change Continue Shopping Button to this URL - https://www.timetrade.com/book/FGK7S and change label from 'Continue shopping' to 'Book your Technician' by adding this code in your Wordpress Control panel > Pages > Edit Store page in Text mode > Replace your previous code that you used to change URL of this button with the following one:
Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
if (typeof(Ecwid) == 'object') {
  Ecwid.OnAPILoaded.add(function() {
    // Redirect address. Change it to the URL of page where you want to redirect your customers.
    // You can use absolute or relative addresses, e.g. 'index.html', 'http://google.com'
    var continueShoppingRedirect = 'http://google.com';
    // Delay (ms), which is necessary for the empty cart page to appear after onCartChange event firing
    var empty_cart_page_delay = 500;
    // Continue shopping buttons CSS selectors 
    // (you can remove the ones that you don't want to change behavior for)
    var buttons = [
      'button.ecwid-productBrowser-cart-continueShoppingButton', // Cart page
      'div.ecwid-productBrowser-cart-emptyCartPanel button.gwt-Button', // Empty cart page
      'button.ecwid-ContinueShoppingButton-Invoice', // Order confirmation page
      'div.ecwid-productBrowser-search-ContinueShoppingButtonContainer button.gwt-Button', // Search results page
      'div.ecwid-Account-ContinueShoppingButtonContainer button.gwt-Button' // 'My account' pages
    ];
    // Pages (Ecwid.Page.type) where buttons should be customized
    // (you can remove the pages that you don't want to change the buttons on)
    var pages = [
        'ORDER_CONFIRMATION',         
    ];
    // This function find the continue shopping button on the page and replace it with a customized one
    var replaceButton = function() {
      var buttonObject = jQuery(buttons.join()).filter(":not('.clone'):visible");        
      if (buttonObject.length) {
        buttonObject.clone().addClass('clone').appendTo(buttonObject.parent()).click(function() {
          location.href = continueShoppingRedirect;
        }); 
        // Remove the original button
        buttonObject.remove();        
      }
    }
    // Replace the button on page loading
    Ecwid.OnPageLoaded.add(function(page) {
      if (jQuery.inArray(page.type, pages) >= 0) {        
        replaceButton();
      } 
    });
    // Replace the button on the empty cart page after clearing the cart 
    // (it doesn't fire onPageLoaded event)
    Ecwid.OnCartChanged.add(function(page) {
      setTimeout(replaceButton, empty_cart_page_delay);
    });
  });
}
</script>
<script type="text/javascript">
  ecwidMessages = { 
    "OrderConfirmation.continue":"Book your technician"
  }; 
</script>
If you want to change this button to look bigger and with light grey background, please add the fellowing code in Ecwid Control Panel > System Settings > Design > Custom CSS Themes:
Code:
.ecwid-Invoice-buttons-panel button.gwt-Button {
background: lightgrey !important;
font: normal 18px helvetica, arial, verdana, sans-serif !important;
height: 30px !important;
}
As a result, this button will look like this: http://take.ms/LPpJ8
Feel free to change this design as you wish.

Also you can check out these article to help you customise continue shopping buttons: http://help.ecwid.com/customer/porta...opping-buttons

If you have any questions, please don't hesitate to ask.
__________________
Ecwid API and App Market Team
Ecwid Developer Website