How to override product.js file in magento - magento

I want to override the product.js file to add some extra values in some functions.I have copy the file from js/mage/adminhtml/product.js to my folder like js/myfolder/myproduct.js.How can i use the functions of the file as i try and its not working for me .When i change the object name than it will show no error but nothing happend (Products.Gallery = Class.create() orginal is Product.Gallery = Class.create();).
Can anyone tell me how to use all the functions of myproduct without conflicting of original funcitons.
Thanks

Let's say you're going to override function loadImage from js/mage/adminhtml/product.js in product edit page.
Create your custom js:
js/myfolder/myproduct.js:
Product.Gallery.addMethods({
loadImage : function(file) {
alert('hi there');
var image = this.getImageByFile(file);
this.getFileElement(file, 'cell-image img').src = image.url;
this.getFileElement(file, 'cell-image img').show();
this.getFileElement(file, 'cell-image .place-holder').hide();
}
});
Reference: http://prototypejs.org/learn/class-inheritance.html
Then in your layout xml add your custom js:
<adminhtml_catalog_product_edit>
<reference name="head">
<action method="addJs"><script>myfolder/myproduct.js</script></action>
</reference>
</adminhtml_catalog_product_edit>
Using this method, function loadImage will be overridden only if you include your js/myfolder/myproduct.js.
PS:
Make sure js/myfolder/myproduct.js is included after js/mage/adminhtml/product.js (though it is like that by default since js/mage/adminhtml/product.js included in <default> tag)

Related

Magento Custom payment method frontend requires JavaScript to be activated only after it is selected

Background story
I am building a new payment method. I'm in the process of adding the frontend in the checkout page. The payment method require javascript.
So I have managed to add a script to the header of the checkout page.
<?xml version="1.0"?>
<layout>
<checkout_onepage_index>
<reference name="head">
<action method="addJs">
<script>foo/bar.js</script>
</action>
</reference>
</checkout_onepage_index>
</layout>
The problem:
However in my case, foo/bar.js bind a DOM element which not yet exists. Hence error in the JavaScript. That DOM element is only added to the page after the buyers reach the payment stage.
One dirty solution is to addJs together with the content, such that the script is executed together. This method however give me a problem that the block checkout.payment.methods does not have the method addJs. If we're to use this approach, what should I do to be able to addJs in checkout.payment.methods block?
Alternatively, I keep the script at head block, and I update my JavaScript to be triggered only when the buyer select my payment method. However I am not sure what JavaScript event is being dispatch if we were to listen on payment method selected. What would it be?
In your Payment model, that extends from Mage_Payment_Model_Method_Abstract you can add new property:
protected $_formBlockType = 'form_blockname';
Then in your module Block folder, add the Block class in Package/Module/Block/Form/Blockname.php and in it add:
class Package_Module_Block_Form_Blockname extends Mage_Payment_Block_Form {
protected function _construct()
{
parent::_construct();
$this->setTemplate('your_template_dir/form/your_template.phtml');
}
}
Then in the app/design/frontend/base/default/your_template_dir/form/your_template.phtml file add the JS code you need. This template will be fetched via AJAX and your JS code will fire up when the Payment section opens up. From here you can easily add event on the checkbox that contains your payment method and activate it.
EDIT: The template file JavaScript with the escape characters.
<script type="text/javascript">
//<![CDATA[
alert('This is your JavaScript Code');
//]]>
</script>
One thing you could do is add an observer to core_block_abstract_to_html_after and append some javascript to the checkout/onepage_payment_methods block:
public function appendSomeJavascript($observer)
{
$block = $observer->getBlock();
if (get_class($block)=='Mage_Checkout_Block_Onepage_Payment_Methods'){
$transport = $observer->getTransport();
$html = $transport->getHtml();
$html .= "<script>alert('appended some js');</script>";
$transport->setHtml($html);
}
return $this;
}

Magento custom module admin block display

struggling getting access to an admin block ive created.
Ive created a module...it has many elements, all working. Ive got header includes added to certain admin pages no problem, using my adminhtml layout update xml file.
The issue seems to be it cant access/see my block...so muct be referencing wrong, even though ive been following the 'module creator' extension files.
Another silly issue i think, been at this too long! :)
First the code:
Mworkz/MyModuleName/Block/Adminhtml/MyBlock.php
class Mworkz_MyModuleName_Block_Adminhtml_MyModuleName extends Mage_Adminhtml_Block_Widget_Grid_Container
{
public function __construct()
{
var_dump('WE ARE IN THE ADMIN BLOCK!');exit;
$this->_controller = 'adminhtml_mymodulename';
$this->_blockGroup = 'mymodulename';
$this->_headerText = Mage::helper('mymodulename')->__('Item Manager');
$this->_addButtonLabel = Mage::helper('mymodulename')->__('Add Item');
parent::__construct();
}
}
My layout xml (this file works, and is referenced right, as my admin header includes work)
Should point out i have a custom tab and controller...all working.
<?xml version="1.0"?>
<layout version="0.1.0">
<mymodulename_adminhtml_mymodulename_index>
<reference name="head">
<action method="addJs"><script>Mworkz/MyModuleName.js</script></action>
</reference>
<reference name="content">
<block type="mymodulename/adminhtml_mymodulename" name="mymodulename" ></block>
</reference>
</mymodulename_adminhtml_mymodulename_index>
</layout>
I expect to see the var_dump stmt ive inserted....but it doesnt display.
Thanks in advance...
file naming! Simple caps issue...
My block file was called '...Adminhtml/MyModuleName.php',
My block identifier inside the file was '...Adminhtml_Mymodulename {'
Another set of working code snippets for adminhtml block users i suppose!
Thanks

Set custom page title on home in magento

I am showing only a single product on home page. I want to show the product name in page title. How can I do this?
You have multiple ways of doing this:
In your module's layout xml file (located at app/design/frontend/[package]/[theme]/layout/{your_file_name}.xml):
<reference name="head">
<action method="setTitle"><title>Title text here</title></action>
</reference>
The bad thing here is that you can't set tittle "on the fly".
In your block file (_prepareLayout() method is a good place):
public function _prepareLayout()
{
$headBlock = $this->getLayout()->getBlock('head');
$headBlock->setTitle('Title text here');
return parent::_prepareLayout();
}
Anywhere else:
Mage::app()->getLayout()->getBlock('head')->setTitle('Title text here');
Useful link - Layouts, Blocks and Templates

Add css from a block

I am building a custom magento module and i try to add a custom css file to my block. I wrote :
<?php
class Wise_InteractiveSlider_Block_Slider extends Mage_Core_Block_Template
{
protected function _prepareLayout()
{
$this->getLayout()->getBlock('head')->addCss('css/mycompany/mymodule/stylesheet.css');
return parent::_prepareLayout();
}
}
but it doesn't work, my css file is not loaded, any idea?
Thank you.
My alternative solution was to add this in my xml layout :
<default>
<reference name="head">
<action method="addCss"><stylesheet>css/interactiveslider.css</stylesheet></action>
</reference>
</default>
Thank you for your help
All the CSS & Images are normally available in the "skin" folder. It should be:-
"skin" folder
-> Package Name (like "base" or "default")
-> Theme Name (like "modern" or "mycompany")
-> "css" folder
-> "mymodule" folder
-> "stylesheet.css" file
So I suppose that you have been following this above-mentioned basic structure, which is considered as one of the best practices.
Coming back to your question, I suppose that you have mentioned the correct block class in your module's layout file "layout.xml". So the above code should be, according to the above folder structure:-
<?php
class Wise_InteractiveSlider_Block_Slider extends Mage_Core_Block_Template
{
protected function _prepareLayout()
{
$this->getLayout()->getBlock('head')->addCss('css/mymodule/stylesheet.css');
return parent::_prepareLayout();
}
}
Lastly, please make sure that you have uploaded your CSS file "stylesheet.css" in the correct folder.
Hope it helps.
You can only use the _prepareLayout() method if the block is defined in the layout XML. If you 'inline' the block inside a CMS page via the {{block type... method, the layout is already prepared by the time the block is rendered

Add a link to Magento's My Account Page Conditionally

I would like to create a link on the My Account page that only get displays under certain conditions.
Right now I have the link display all the time by adding the following entry to my layout XML file:
<customer_account>
<reference name="customer_account_navigation">
<action method="addLink" translate="label" module="nie"><name>nie</name><path>nie</path><label>NIE Admin</label></action>
</reference>
</customer_account>
I am assuming there is a way to code this so that it only displays under certain circumstances.
The cart & checkout links already do something similar so their method can be copied.
Create a block. It won't be displaying directly so can be descended from the boring Mage_Core_Block_Abstract.
Give it a method where the conditional logic will go.
public function addNieLink()
{
if (($parentBlock = $this->getParentBlock()) && (CONDITION-GOES-HERE)) {
$parentBlock->addLink($this->_('NIE Admin'), 'nie', $this->_('NIE Admin'), true, array(), 50, null, 'class="top-link-cart"');
// see Mage_Page_Block_Template_Links::addLink()
}
}
protected function _prepareLayout()
{
// Add the special link automatically
$this->addNieLink();
return parent::_prepareLayout();
}
Put your check in place of CONDITION-GOES-HERE.
Add your block to the links block.
<customer_account>
<reference name="customer_account_navigation">
<block type="yourmodule/link" name="yourmodule.link" />
</reference>
</customer_account>
(Correct the block type here to your newly created link block)
The important bit is it calls getParentBlock() to find out where the link is to go.

Resources