8

We have a custom module with below code

app/design/frontend/rwd/Theme1/layout/aitcg.xml

<action method="addJs"><script>aitoc/aitcg/Aitcg/View/Abstract.js</script></action>

As we can't use php code in this .JS file, is there any way we can move code present from Abstract.js file to some .phtml file ?

Edit

I followed Raphael's answer & changed code as here :

<block type="aitcg/template" name="aitcg_js_styles1" template="aitcg/js_styles1.phtml" /> 

but still Abstract.Js file results are not displaying in js_styles1.phtml

layout file : http://pastebin.com/BZGRaiDH

js_styles1.phtml : http://pastebin.com/m85q9eMh

i am trying onclick button = onclick="setproductlogin('<?php echo $_product->getEntityId()?>');setrequestlogin();" but this is not working in .JS file , so only i am trying to cop .js code to .php code.

<script>

_getControlPanelHtml: function()
    {
        if (this.config.editorEnabled) {
            return '<div id="aitcg-control-panel">' +
                '<button  id="submit-editorApply-{{rand}}" onclick="setproductlogin('<?php echo $_product->getEntityId()?>');setrequestlogin();">SAVE DESIGN</button>' +
                '<button  id="submit-editorReset-{{rand}}" >{{reset_text}}</button>' +
                '</div>';
        }
        return '';
    },

    </script>

when i checked template path hints, it loading phtml file, but JS code result is not displaying in frontend. but other html, php, js code results are displaying.....

console

enter image description here

enter image description here

is we need to load any external js library if so how to find that ?

Edit2

I tried Below code in js_styles1.phtml file , but still its not working

<script type="text/javascript" src="http://sbdev2.kidsdial.com:81/js/aitoc/aitcg/Aitcg/View/Abstract.js"></script>
  • i will give 50 bounty points if it worked for me..... – Baby in Magento Mar 18 '17 at 16:25
  • What php code you want to use in your js file? You can use javascript code to do the same thing as php code. – Neha Raval Mar 20 '17 at 2:23
  • @NehaRaval i want to display pop up if guest clicked on the button & i dont want to display pop up registered user clicked on that button. – Baby in Magento Mar 20 '17 at 5:11
1
+50

Ensure that <?php echo $this->getChildHtml() ?> is called on your head.phtml.

If this code is not exits then you need add this code at head.phtml

Update

You have getting issue becauase of

Js dependency on one js files to another js file

Here aitoc/aitcg/Aitcg/View/Popup.js,aitoc/aitcg/Aitcg/View/Gallery.js , etc depends on js code of aitcg/js_styles.phtml

As you have put this Abstract.js at js_styles.phtml and this js file properly have calling after

    aitoc/aitcg/Aitcg/View/Popup.js
    aitoc/aitcg/Aitcg/View/Gallery.js
    aitoc/aitcg/Aitcg/View/Gallery_Rwd.js
    aitoc/aitcg/Aitcg/Editor/Canvas/Abstract.js
    aitoc/aitcg/Aitcg/Editor/Canvas.js
    aitoc/aitcg/Aitcg/Editor/Canvas/Mirror.js
    .....
   ...
    aitoc/aitcg/raphael.js
    aitoc/aitcg/jscolor/jscolor.js
    aitoc/aitcg/rgbcolor.js
    aitoc/aitcg/canvg.js

That means all js file of aitoc does not getting properly of js_styles.phtml as this js code is after all aitoc js files.

Solution:

Remove all js files of Aitoc layout handler <catalog_product_view>

and call those all js fils at js_styles.phtml manually code

<!--  code of aitoc/aitcg/Aitcg/View/Abstract.js -->

....
<!--  end of aitoc/aitcg/Aitcg/View/Abstract.js -->


<?php
/* check current page is product */
if(Mage::app()->getFrontController()->getAction()->getFullActionName() =='catalog_product_view'){  ?>

<script type="text/javascript" src="<?php echo $this->getJsUrl('aitoc/aitcg/Aitcg/View/Popup.js')?>"></script>
<script type="text/javascript" src="<?php echo $this->getJsUrl('aitoc/aitcg/Aitcg/View/Gallery.js')?>"></script>
....
<script type="text/javascript" src="<?php echo $this->getJsUrl('aitoc/aitcg/Aitcg/AreaEditor.js')?>"></script>
<script type="text/javascript" src="<?php echo $this->getJsUrl('aitoc/aitcg/raphael.js')?>"></script>
...
<script type="text/javascript" src="<?php echo $this->getJsUrl('aitoc/aitcg/canvg.js')?>"></script>
<?php } ?>
  • yes, <?php echo $this->getChildHtml() ?> code is present in head.phtml file..... – Baby in Magento Mar 18 '17 at 6:51
  • also we added this code in view.phtml : <?php echo $this->getChildHtml('aitcg_js_styles1'); ?> – Baby in Magento Mar 18 '17 at 9:18
  • Thanks for your priceless time & support, its working absolutely fine...... i willl award bounty to you...... – Baby in Magento Mar 20 '17 at 14:48
2

Well you can use a phtml file instead by replacing:

<action method="addJs"><script>aitoc/aitcg/Aitcg/View/Abstract.js</script></action>

With:

<block type="core/template" name="custom.js" template="my/custom/template.phtml" />

Then just move your JS in that phtml file and tweak it with your PHP modifications.

  • Thanks , its nice to see your answer for my question again.... I followed your answer & replaced action codeby block code as here : <block type="aitcg/template" name="aitcg_js_styles1" template="aitcg/js_styles1.phtml" /> , but Its not displaying results of .js file - upload image & add text buttons are missing as in link1 , before those links were displaying as link2 , code : `js_styles1.phtml : pastebin.com/YhgmvCMx . where i done wrong ? – Baby in Magento Mar 17 '17 at 20:33
  • here is layout.xml file : pastebin.com/dbu9thPE , please check once..... – Baby in Magento Mar 17 '17 at 20:50
  • I can see "upload image" and "add text" buttons in both links, and different errors in console. Have you solved yet? – nuovecode Mar 19 '17 at 17:58
1

as i understand your question, you want to copy your js code in phtml

so, follow below steps

as you already created a PHTML file and its rendering on frontend

firstly comment/remove that XML code for JS rendering.

Copy JS code to PHTML file within script TAG

for ex.

<script>
 your js file code here 
</script> 
  • thanks, yes i copied javascript code present in .js file to phtml file..... but its giving me console errors – Baby in Magento Mar 19 '17 at 18:38
  • First just copy paste js code and check that it is working and then modify the code – Murtuza Zabuawala Mar 19 '17 at 18:39
  • when i copy js code to phtml code, i cant see any results of .js code - "upload image and add text button " missing after i copied code – Baby in Magento Mar 19 '17 at 18:39
  • add your phtml file in head – Murtuza Zabuawala Mar 19 '17 at 18:39
  • you get this error bcause your js file is in body – Murtuza Zabuawala Mar 19 '17 at 18:40
1

Delete the actual java you pasted out of the head file.

Paste one of these into the head of your phtml file, depending on where your js file is located.

If it is located in Magento's base js file use this:

<script src="<?php echo  Mage::getBaseUrl(); ?>aitoc/aitcg/Aitcg/View/Abstract.js" type="text/javascript"></script>

or if it is in your skin's js folder use this:

<script src="<?php echo $this->getSkinUrl(); ?>js/aitoc/aitcg/Aitcg/View/Abstract.js" type="text/javascript"></script>
  • i tried your solution, but still it showing console errors as posted in question..... – Baby in Magento Mar 20 '17 at 7:03
1

To achieve this, you can pass your PHP code variable to your JS code using config variable. Add below line to your file app/design/frontend/rwd/Theme1/template/aitcg/view/options/‌​type/cgfile.phtml

isUserLoggedIn : '<?php echo (Mage::getSingleton('customer/session')->isLoggedIn())? "true": "false"; ?>',

after line,

jsUrl: '<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_JS);?>',  
editorEnabled: true,

Now you can use this variable isUserLoggedIn to check if user is logged in or not in your JS code.
Update your JS function initObservers, from

initObservers: function() 
{ 
if (this.config.editorEnabled) { 
$('submit-editorApply-' + this.config.rand).observe('click', this.submitApply.bindAsEventListener(this)); 
$('submit-editorReset-' + this.config.rand).observe('click', this.submitReset.bindAsEventListener(this)); 
} 
},

to

initObservers: function() 
{ 
if (this.config.editorEnabled && this.config.isUserLoggedIn == 'true') { 
$('submit-editorApply-' + this.config.rand).observe('click', this.submitApply.bindAsEventListener(this)); 
$('submit-editorReset-' + this.config.rand).observe('click', this.submitReset.bindAsEventListener(this)); 
} 
},

Now when a guest user will click on "Save Design" button, the design will not save and it will open your login popup you used in your code,

<div onclick="return setproductlogin(\'<?php echo Mage::registry("current_product")->getId()?>\');setrequestlogin();"> 
<button class="button btn-cart">Save design</button> 
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.