View Single Post
  #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