Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

How to change the look of Add to cart section in X-Cart Next

 
Reply
   X-Cart forums > X-Cart 5 > Modifying the design and features (X-Cart 5)
 
Thread Tools Search this Thread
  #1  
Old 04-22-2013, 12:05 PM
  tony_sologubov's Avatar 
tony_sologubov tony_sologubov is offline
 

X-Cart team
  
Join Date: Jan 2009
Posts: 2,431
 

Default How to change the look of Add to cart section in X-Cart Next

Hi guys!

One of our clients asked to give an example of how to change the appearance of Add to cart section in X-Cart Next front-end and I decided to write publicly about how it can be done. I am sure, it will be useful for someone else.

More precisely the task was to:
  • Change Add to bag button. Although it should be changed via language variable, you can do it via code.
  • Change Buy more button (it appears when you click Add to bag button) and link it to Checkout page.
  • Change This product has been added to your bag text (it appears after adding a product to cart)

1. Choose your identifiers
Before you start you need to choose your identifier as a company/developer (Tony in my case) and identifier of your module (CartCorrections in my case)

2. Create basic module file
After the identifiers are chose, you should create Main.php file in the following folder:
<XCN>/classes/XLite/Module/<DEVELOPER-ID>/<MODULE-ID>/

So, I am creating the following file:
<XCN>/classes/XLite/Module/Tony/CartCorrections/Main.php

with the following content:
Code:
<?php // Don't forget to change the IDs here namespace XLite\Module\Tony\CartCorrections; abstract class Main extends \XLite\Module\AModule { // Author name public static function getAuthorName() { return 'Tony'; } // Module name public static function getModuleName() { return 'Custom corrections of product page'; } // Module description public static function getDescription() { return 'Custom corrections of product page'; } // Module major version public static function getMajorVersion() { return '1.2'; } // Module minor version public static function getMinorVersion() { return '0'; } }

After that, this module will appear in your Installed Modules section in Admin area after you rebuild the cache.

3. Change Add to bag button
In order to apply this change we will replace the existing implementation of Add to bag button with the one we want.

For that we are adding the following function into the Main.php file:
Code:
public static function runBuildCacheHandler() { $layout = \XLite\Core\Layout::getInstance(); // removing add to cart button from product page $layout->removeTemplateFromList( 'product/details/parts/common.button-add2cart.tpl', 'product.details.page.info.buttons.cart-buttons' ); // removing add to cart button from product quicklook pop-up $layout->removeTemplateFromList( 'product/details/parts/common.button-add2cart.tpl', 'product.details.quicklook.info.buttons.cart-buttons' ); }

This function removes the current implementation of Add to bag button.

To add new implementation of Add to bag button, we are creating the following template:
<XCN>/skins/default/en/modules/Tony/CartCorrections/product/details/parts/

with the content:
PHP Code:
{**
 * @
ListChild (list="product.details.page.info.buttons.cart-buttons"weight="20")
 * @
ListChild (list="product.details.quicklook.info.buttons.cart-buttons"weight="20")
 *}

<
widget class="\XLite\View\Button\Submit" label="{t(#New add to cart button#)}" style="bright add2cart" /> 

Specifying @ListChild tells X-Cart Next to assign this template to the certain part of product page and product quicklook, so even this assignment is in comments, this is a mandatory part.

4. Change Buy more button and link it to Checkout page.
It's quite similar to the task above.

We are adding couple of function calls into the runBuildCacheHandler method:
PHP Code:
// removing buy more button from product page 
        
$layout->removeTemplateFromList(
            
'product/details/parts/common.button-buymore.tpl',
            
'product.details.page.info.buttons-added.cart-buttons'
        
);

        
// removing buy more button from product quicklook pop-up
        
$layout->removeTemplateFromList(
            
'product/details/parts/common.button-buymore.tpl',
            
'product.details.quicklook.info.buttons-added.cart-buttons'
        
); 

and adding new template <XCN>/skins/default/en/modules/Tony/CartCorrections/product/details/parts/common.button-buymore.tpl with the following content:
PHP Code:
{**
 * @
ListChild (list="product.details.page.info.buttons-added.cart-buttons"weight="30")
 * @
ListChild (list="product.details.quicklook.info.buttons-added.cart-buttons"weight="30")
 *}

<
a href="{buildURL(#checkout#)}" >{t(#My go to checkout text#)}</a> 

The most interesting part here is how checkout URL is built.

5. Change This product has been added to your bag text
It's really simple, since it almost copies the points above.

We are adding new function calls to runBuildCacheHandler method.
PHP Code:
// removing "product added" message from product page
        
$layout->removeTemplateFromList(
            
'product/details/parts/common.product-added.tpl',
            
'product.details.page.info.buttons-added'
        
);

        
// removing "product added" message from quicklook product pop-up
        
$layout->removeTemplateFromList(
            
'product/details/parts/common.product-added.tpl',
            
'product.details.quicklook.info.buttons-added'
        
); 

and adding new template <XCN>/skins/default/en/modules/Tony/CartCorrections/product/details/parts/common.product-added.tpl with the following content:
PHP Code:
{**
 *
 * @
ListChild (list="product.details.page.info.buttons-added"weight="5")
 * @
ListChild (list="product.details.quicklook.info.buttons-added"weight="5")
 *}
<
class="product-added-note">{t(#New message when product is added to cart#)}</p> 

Conclusion

Now, we are all done.

Just in case, I've uploaded the mod to dropbox: https://dl.dropboxusercontent.com/u/23858825/Tony-CartCorrections-v1_2_0.tar

If you have any questions, feel free to pm me or ask in the thread.

Tony.

Last edited by tony_sologubov : 08-02-2013 at 04:22 AM.
Reply With Quote

The following 5 users thank tony_sologubov for this useful post:
ADDISON (05-14-2013), cflsystems (04-22-2013), daboy18 (04-24-2013), Dongan (04-23-2013), xplorer (04-25-2013)
  #2  
Old 04-22-2013, 08:07 PM
  cflsystems's Avatar 
cflsystems cflsystems is offline
 

Veteran
  
Join Date: Apr 2007
Posts: 13,807
 

Default Re: How to change the look of Add to cart section in X-Cart Next

Thank you Tony. XCN is so different that we all need a lesson of the code QT is writing and the way to implement changes....
__________________
Steve Stoyanov
CFLSystems.com
Web Development
Reply With Quote

The following user thanks cflsystems for this useful post:
ADDISON (04-22-2013)
  #3  
Old 04-22-2013, 11:44 PM
  tony_sologubov's Avatar 
tony_sologubov tony_sologubov is offline
 

X-Cart team
  
Join Date: Jan 2009
Posts: 2,431
 

Default Re: How to change the look of Add to cart section in X-Cart Next

Happy to be helpful, Steve.

I am planning to add more examples over time. If you want to see some particular examples, leave the requests here or pm me.

In fact, I want to give the most examples community need, so you can at least assess how to work with X-Cart Next.
Reply With Quote
  #4  
Old 04-23-2013, 01:17 AM
  ADDISON's Avatar 
ADDISON ADDISON is offline
 

X-Man
  
Join Date: Jan 2008
Posts: 2,613
 

Default Re: How to change the look of Add to cart section in X-Cart Next

Do we have a download version for 1.2 to implement by ourselves these examples?
__________________
X-Cart Next: Business 5.2 (learning and testing)
X-Cart Classic: Gold and Gold Plus 4.7
Lots of Modules and Customizations
OS in use: Red Hat Enterprise, Fedora, CentOS, Debian, Ubuntu, Linux Mint, Kali Linux
Ideas for Server configuration (basicaly): Nginx/Pound (reverse proxy), Apache/Nginx (webserver), Squid/Varnish (cache server), HHVM or (PHP-FPM + PHP 5.6 + opcache), MariaDB/Percona MySQL Server, Redis (storing sessions)

You can catch my ideas here: http://ideas.x-cart.com
Reply With Quote
  #5  
Old 04-23-2013, 01:44 AM
  tony_sologubov's Avatar 
tony_sologubov tony_sologubov is offline
 

X-Cart team
  
Join Date: Jan 2009
Posts: 2,431
 

Default Re: How to change the look of Add to cart section in X-Cart Next

@ADDISON
Dev version of X-Cart Next is available to all partners via partner area. If you don't have one, email me at developers@x-cart.com and I'll create it for you.
Reply With Quote
  #6  
Old 04-24-2013, 06:45 AM
 
daboy18 daboy18 is offline
 

Member
  
Join Date: Aug 2012
Posts: 21
 

Default Re: How to change the look of Add to cart section in X-Cart Next

Tony,
Thank you so much for the above information! Its greatly helpful!

I ran into a quark when rebuilding the cache, its still stuck and has been for 30 mins now. Not sure what to do . It says:



Re-building cache [step 4 of 5], please wait...
Run the "Doctrine_Plugin_UpdateSchema" plugin... [2.14sec, 48.8MB (28.3MB)]
Run the "Doctrine_Plugin_UpdateModules" plugin...

thanks!
__________________
by LiteCommerce 3 integrated with Drupal. LC Core version 1.0.24
Reply With Quote
  #7  
Old 04-25-2013, 01:06 AM
  tony_sologubov's Avatar 
tony_sologubov tony_sologubov is offline
 

X-Cart team
  
Join Date: Jan 2009
Posts: 2,431
 

Default Re: How to change the look of Add to cart section in X-Cart Next

@daboy18 I've answered you via email.
Reply With Quote

The following user thanks tony_sologubov for this useful post:
daboy18 (04-25-2013)
  #8  
Old 04-25-2013, 05:09 AM
 
daboy18 daboy18 is offline
 

Member
  
Join Date: Aug 2012
Posts: 21
 

Default Re: How to change the look of Add to cart section in X-Cart Next

Thank you again, restoring the Main.php file worked fine. thanks!
__________________
by LiteCommerce 3 integrated with Drupal. LC Core version 1.0.24
Reply With Quote
Reply
   X-Cart forums > X-Cart 5 > Modifying the design and features (X-Cart 5)


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 01:09 PM.

   

 
X-Cart forums © 2001-2020