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>
3
  • i will give 50 bounty points if it worked for me..... Commented Mar 18, 2017 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
    Commented Mar 20, 2017 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. Commented Mar 20, 2017 at 5:11

5 Answers 5

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 } ?>
3
  • yes, <?php echo $this->getChildHtml() ?> code is present in head.phtml file..... Commented Mar 18, 2017 at 6:51
  • also we added this code in view.phtml : <?php echo $this->getChildHtml('aitcg_js_styles1'); ?> Commented Mar 18, 2017 at 9:18
  • Thanks for your priceless time & support, its working absolutely fine...... i willl award bounty to you...... Commented Mar 20, 2017 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.

3
  • 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 ? Commented Mar 17, 2017 at 20:33
  • here is layout.xml file : pastebin.com/dbu9thPE , please check once..... Commented Mar 17, 2017 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
    Commented Mar 19, 2017 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> 
16
  • thanks, yes i copied javascript code present in .js file to phtml file..... but its giving me console errors Commented Mar 19, 2017 at 18:38
  • First just copy paste js code and check that it is working and then modify the code Commented Mar 19, 2017 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 Commented Mar 19, 2017 at 18:39
  • add your phtml file in head Commented Mar 19, 2017 at 18:39
  • you get this error bcause your js file is in body Commented Mar 19, 2017 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>
1
  • i tried your solution, but still it showing console errors as posted in question..... Commented Mar 20, 2017 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>
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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