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")
*}
<p 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.