Load external Javascript before skin Javascript in Magento - magento

I'm trying to add the Google Maps Javascript API to my Magento module.
The problem I'm having is that the core/text block that I am including, that contains the external Javascript inclusion tag, only ever appears after all of the addJs actions.
This means the script I have in pvtl_stores.js that targets the google object doesn't work as the google object hasn't been initialized yet.
Here is my local.xml file:
<layout>
<default>
<reference name="head">
<block type="core/text" name="google.maps" before="root">
<action method="setText">
<text><![CDATA[<script src="//maps.googleapis.com/maps/api/js"></script>]]></text>
</action>
</block>
<action method="addItem">
<type>skin_js</type>
<name>js/pvtl_stores.js</name>
</action>
</reference>
</default>
</layout>
Is there a way to have the core/text block load before the addJs actions?
By the way, if it isn't obvious by the question, I'm new to Magento programming!

upload you Js in root\js folder. And call this code in your app\design\frontend\base\default\template\page\html\head.phtml file at top.
<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_JS)."/yourjs.js"; ?>
or just direct call that
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
UPDATE
You have to download the js first then
go to app\design\frontend\rwd\default\layout page.xml (if you are using default theme otherwise go to yourtheme\default\layout) and you js here
<block type="page/html_head" name="head" as="head">
<action method="addJs">
<script>yourjs/yourjs.js</script>
</action>
<action method="addJs">
<script>prototype/prototype.js</script>
</action>

Related

Magento is not loading my scripts in an order i want

I'm editing local.xml file to load some javascript, one of them is carosule.js and I want it only on my index page so I can use <cms_index_index> node but it is instantiated by init.js. How can I load them in an order I want?
<cms_index_index>
<reference name="head">
<action method="addItem">
<type>skin_js</type>
<name>js/mycaro.js</name>
</action>
</reference>
</cms_index_index>
<default>
<reference name="head">
<action method="addItem">
<type>skin_js</type>
<name>js/jquery.min.js</name>
</action>
<action method="addItem">
<type>skin_js</type>
<name>js/init.js</name>
</action>
</reference>
</default>
Currently it is loading in this order
<script type="text/javascript" src="http://localhost/m/skin/frontend/hs1st/default/js/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/m/skin/frontend/hs1st/default/js/init.js"></script>
<script type="text/javascript" src="http://localhost/m/skin/frontend/hs1st/default/js/mycaro.js"></script>
The loading of the plugin should not depend on the order of loading of the files. You need to trigger the loading of the plugin when the DOM has finished loading to be sure all the necessary files are loaded.
Let's say init.js contains something like this;
jQuery('#carousel').Carousel({option:optionvalue});
You'll want to wrap it in code to run when the DOM has finished loading, like this;
jQuery(window).ready(function () {
jQuery('#carousel').Carousel({option:optionvalue});
});
See https://api.jquery.com/ready/

Hide discount code section in cart

I am writing a Magento Extension that is trying to hide the Discount Code section on the checkout cart page. I wrote the following code to replace the current cart.phtml with my custom template.
<layout version="0.1.0">
<checkout_cart_index>
<reference name="checkout.cart">
<action method="setTemplate">
<template>company/module/cart.phtml</template>
</action>
</reference>
</checkout_cart_index>
</layout>
Everything looked good until I realized it even overwrote the template the cart page uses for an empty cart. I have tried many combinations for switch the "checkout_cart_index"
name to the reference name but I cannot get it to just replace that template. I further investigated and found in the default layout it sets the cart values here:
<reference name="content">
<block type="checkout/cart" name="checkout.cart">
<action method="setCartTemplate"><value>checkout/cart.phtml</value></action>
<action method="setEmptyTemplate"><value>checkout/cart/noItems.phtml</value></action>
I tried again using "SetCartTemplate" but I cannot get it to display yet alone behave as I am intending. Any ideas?
In your layout update
<checkout_cart_index>
<reference name="checkout.cart">
<action method="setCartTemplate"><value>path/to/your/cart.phtml</value></action>
<action method="setEmptyTemplate"><value>path/to/your/noItems.phtml</value></action>
<action method="chooseTemplate"/>
</reference>
</checkout_cart_index>
chooseTemplate will choose the right template
Try to Rewrite this core class to hide the discount code section in your cart page
Mage_Sales_Model_Quote_Address_Total_Discount

How can I display only My account link in top links in magento?

I have displayed all links in footer and i want to display My account link only in header
So how can i do that.
Should i use static block from cms pages or block from xml file?
Can anyone please help me
Thanks in advance
Another way to add "My Account" link
goto app/design/frontend/default(or your theme package)/(theme folder)/page/html/header.phtml.
In this file you can add your custom 'li' tag and can put a link for "My Account" as Controller moves it to My Account PAGE.
One more way here for you :)
Open theme/layout/customer.xml file and then modify the section that shows customer links on all pages, to include a link home and also a link to other customer service pages that you have deemed necessary, e.g. ‘returns’ (if you get a lot of those enquiries...).
<default>
<!-- Mage_Customer -->
<reference name="top.links">
<action method="addLink" translate="label title" module="customer"><label>Home</label><url></url><title>Home</title><prepare>true</prepare><urlParams/><position>5</position></action>
<action method="addLink" translate="label title" module="customer"><label>My Account</label><url helper="customer/getAccountUrl"/><title>My Account</title><prepare/><urlParams/><position>94</position></action>
<action method="addLink" translate="label title" module="customer"><label>Deliveries</label><url>deliveries</url><title>Deliveries</title><prepare>true</prepare><urlParams/><position>95</position></action>
<action method="addLink" translate="label title" module="customer"><label>Returns</label><url>returns</url><title>Returns</title><prepare>true</prepare><urlParams/><position>96</position></action>
<action method="addLink" translate="label title" module="customer"><label>Contact Us</label><url>contacts</url><title>Contact Us</title><prepare>true</prepare><urlParams/><position>97</position></action>
</reference>
</default>
Enjoy :)
Option 1:
The layout files are used to display links in the top.links block. You can remove them in the relevant xml files, and leave everything else as is, e.g. in checkout.xml you have something like:
<default>
<reference name="top.links">
<block type="checkout/links" name="checkout_cart_link">
<action method="addCartLink"></action>
<action method="addCheckoutLink"></action>
</block>
</reference>
</default>
If you remove the block then they would no longer show these two links in the top.links block.
Option 2:
The alternative is, as you say, to create a cms block and include this in your header instead. To include a cms block in a template file you can use
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('toplinksblock')->toHtml() ?>
Or if you want to use the layout system use this in the layout file:
<reference name="footer">
<block type="cms/block" name="sample_links">
<action method="setBlockId"><block_id>sample_links</block_id></action>
</block>
</reference>
then this in the template file:
<?php echo $this->getChildHtml('sample_links') ?>
Option 3:
Or just edit top.links.phtml.

Displaying error messages when two forms are integrated in the same magento page

I have the login form and register form, integrated in the same page. ie, in the login page itself.
I am having a problem in showing the error messages, as if error occurs in any one of the forms, then the error messages are displayed in both the login and register sections.
for example, suppose if we provide wrong login data to login, then the error message is displayed on the top of both the login and register forms, since both the forms are in the same page.
If we try to register with an already existing email address, then also, error message saying email already exists, displayed on the top of login form and register form.
My requirement is that i need to display the error message only in the corresponding form.
In order to integrate both login and register form in to the login page itself, i changed the file \app\design\frontend\anz\default\layout\customer.xml and it is as follows
Layout for customer login page
<customer_account_login translate="label">
<label>Customer Account Login Form</label>
<!-- Mage_Customer -->
<remove name="right"/>
<remove name="left"/>
<reference name="root">
<action method="setTemplate"><template>page/1column.phtml</template></action>
</reference>
<reference name="content">
<block type="customer/form_login" name="customer_form_login" template="customer/form/login.phtml"/>
</reference>
<!-- Mage_Customer -->
<remove name="right"/>
<remove name="left"/>
<reference name="root">
<action method="setTemplate"><template>page/1column.phtml</template></action>
</reference>
<block type="page/html_wrapper" name="customer.form.register.fields.before" translate="label">
<label>Form Fields Before</label>
<!--action method="setMayBeInvisible"><value>1</value></action-->
<action method="setElementClass"><value>rewards</value></action>
</block>
<block type="enterprise_customer/form" template="customer/form/userattributes.phtml" name="customer_form_user_attributes">
<action method="setFormCode"><code>customer_account_create</code></action>
<action method="setEntityModelClass"><code>customer/customer</code></action>
</block>
<block type="enterprise_customer/form" template="customer/form/userattributes.phtml" name="customer_form_address_user_attributes">
<action method="setFormCode"><code>customer_register_address</code></action>
<action method="setEntityModelClass"><code>customer/address</code></action>
</block>
<reference name="content">
<block type="customer/form_register" name="customer_form_register" template="customer/form/register.phtml">
<action method="append"><block>customer.form.register.fields.before</block><alias>form_fields_before</alias></action>
<action method="append"><block>customer_form_user_attributes</block></action>
<action method="append"><block>customer_form_address_user_attributes</block></action>
</block>
</reference>
<update handle="customer_form_template_handle"/>
</customer_account_login>
I am a newbie in magento. Any help would be greatly appreciated.
I changed your code a little bit. Please tell me where your forms are rendered?
<customer_account_login translate="label">
<label>Customer Account Login Form</label>
<!-- Mage_Customer -->
<remove name="right"/>
<remove name="left"/>
<reference name="root">
<action method="setTemplate"><template>page/1column.phtml</template></action>
</reference>
<block type="page/html_wrapper" name="customer.form.register.fields.before" translate="label">
<label>Form Fields Before</label>
<!--action method="setMayBeInvisible"><value>1</value></action-->
<action method="setElementClass"><value>rewards</value></action>
</block>
<block type="enterprise_customer/form" template="customer/form/userattributes.phtml" name="customer_form_user_attributes">
<action method="setFormCode"><code>customer_account_create</code></action>
<action method="setEntityModelClass"><code>customer/customer</code></action>
</block>
<block type="enterprise_customer/form" template="customer/form/userattributes.phtml" name="customer_form_address_user_attributes">
<action method="setFormCode"><code>customer_register_address</code></action>
<action method="setEntityModelClass"><code>customer/address</code></action>
</block>
<reference name="content">
<block type="customer/form_login" name="customer_form_login" template="customer/form/login.phtml"/>
<block type="customer/form_register" name="customer_form_register" template="customer/form/register.phtml">
<action method="append"><block>customer.form.register.fields.before</block><alias>form_fields_before</alias></action>
<action method="append"><block>customer_form_user_attributes</block></action>
<action method="append"><block>customer_form_address_user_attributes</block></action>
</block>
</reference>
<update handle="customer_form_template_handle"/>
</customer_account_login>
Welcome to Magento Theming :-)
First, it's generally a better practice to use local.xml layout file under your custom theme (it's not there by default, it's for the end implementer to use). This way, you won't have to needlessly merge changes into customer.xml to keep it up to date.
In your local.xml, you can use the <update /> directive to include the layout update xml from one handle into another (which is effectively what you are doing already):
<customer_account_login>
<update handle="customer_account_create" />
</customer_account_login>
You will need to customize your create template customer/form/register.phtml and remove its <?php echo $this->getMessagesBlock()->getGroupedHtml() ?> call.
I tried a simple way to achieve the requirement. There may be better ways to do this, but I think this one is simple.
I had created a hidden variable and I put those hidden variable in forms to identify which form is submitted. These hidden variable is passed as a parameter after completing the corresponding action. Then I provided an if block to display the messages according to the parameter value.
I did this all by overriding the Mage Customer module.

ColorBox integration in Magento

I want to add ColorBox jQuery in my Magento website. Is there an specific method for this?
Or do I have to make the changes in .phtml files?
To add new javascript library on all your pages use layouts. Create new layout file yourmodule.xml and put there code
<default>
<reference name="head">
<action method="addItem"><type>skin_js</type><name>js/colorbox.js</name><params/></action>
<action method="addItem"><type>skin_css</type><name>js/colorbox.css</name></action>
</reference>
</default>

Resources