Inchoo's social connect plugin.

Hi Guys,

I’m trying to implement this login connect module, I don;t know why but it doesn’t display correctly and I cant see why:

Attachment 31942

http://inchoo.net/ecommerce/magento/…nto-extension/
https://github.com/Marko-M/Inchoo_So…emplate/inchoo

PS this is an excellent module you could add to your already strong list of good modules.

Hi paulka007,

I just read the given extension Introduction and I saw this

"Please note that this Magento extension has been designed to work with default Magento theme, and if your theme has been heavily modified you might need to tweak Inchoo Social Connect code to use it to it’s full potential."
This mean you have to tweak the extension code a bit to get it works with the theme,for this case I think you can find a freeleancer to get help or consider to use joomlart’s Tweak service as mentioned here

Ok sure I realise its out of the scope of you guys, but any idea where i should start looking?
Thanks.

Ok sure I realise its out of the scope of you guys, but any idea where i should start looking?
Thanks.

The template file of login page is app\design\frontend\default\jm_hawkstoretemplate\ persistent\customer\form\login.phtml so I think you can take a look at that file.

Thanks,

There are instructions here:

if you have some Magento experience, you can add Google or Facebook Connect button to any Magento page (as identified by your_handle) by modifying layout xml with:

PHP Code:

<?xml version="1.0" encoding="UTF-8"?>
<layout>
    <your_handle>
        <reference name="your_block">
            <block type="inchoo_socialconnect/google_button" name="inchoo_socialconnect_google_button" />
            <block type="inchoo_socialconnect/facebook_button" name="inchoo_socialconnect_facebook_button" />
        </reference>
    </your_handle>
</layout>

If your_block block is of core/text_list type, buttons will be rendered automatically. If this isn’t the case you should modify your_block template with following for Google Connect button:

PHP Code:

<?php echo $this->getChildHtml('inchoo_socialconnect_google_button'); ?>


or following for Facebook Connect button:

PHP Code:

<?php echo $this->getChildHtml('inchoo_socialconnect_facebook_button'); ?>


Here’s path to the file from base package default theme that handles login step of checkout page:

Code:

app/design/frontend/base/default/template/checkout/onepage/login.phtml

Is this the same as the login file you gave me?

Code:

 app\design\frontend\default\jm_hawkstoretemplate\ persistent\customer\form\login.phtml

You should locate matching template file in your theme and modify it to include call to;

PHP Code:

<?php echo $this->getChildHtml('inchoo_socialconnect_checkout')?>


to include whole checkout block.

How can do this?

Hi paulka007,

No, they are not the same, the login at checkout page is another, let me know where did you want to put this connect login ?

Hi Sherlock,

On the pages:

Login
Create account
Checkout

The developer of this module suggested looking that the template path hints, but I’m a newby to magento so what I see doesn’t seem to be wrong… I’m pretty sure I have to add the following lines to a template file but I don’t know where…

Again here’s what he says:

Integrating into custom theme shouldn’t be that difficult since every Social Connect button is in it’s own independent and self sustained Magento block.

This way you can use Magento layout to add one or more Social Connect buttons anywhere inside your theme. Here’s block XML for Google, Facebook and Twitter buttons:

Code:

<block type="inchoo_socialconnect/google_button" name="inchoo_socialconnect_checkout_google_button" />
<block type="inchoo_socialconnect/facebook_button" name="inchoo_socialconnect_checkout_facebook_button" />
<block type="inchoo_socialconnect/twitter_button" name="inchoo_socialconnect_checkout_twitter_button" />

Just find your layout handle and block name to reference and you’ll have it up and running in no time.

Here’s a screenshot of my template with the hints on:
Attachment 32339
Attachment 32340

Hi Paul,

For example to put the button to the login page you can open the layout file of app\design\frontend\default\jm_hawkstore\layout\cu stomer.xml
There you look for this block

HTML Code:

                                   <reference name="content">
            
            <block type="customer/form_login" name="customer_form_login" template="customer/form/login.phtml" />
        </reference>

right below it you add this block

HTML Code:

<reference name="customer_form_login">
           <block type="inchoo_socialconnect/google_button" name="inchoo_socialconnect_checkout_google_button" />
<block type="inchoo_socialconnect/facebook_button" name="inchoo_socialconnect_checkout_facebook_button" />
<block type="inchoo_socialconnect/twitter_button" name="inchoo_socialconnect_checkout_twitter_button" />
        </reference>

now open the template file of app\design\frontend\default\jm_hawkstoretemplate\ persistent\customer\form\login.phtml you can put those lines of code

PHP Code:

<?php echo $this->getChildHtml('inchoo_socialconnect_google_button'); ?> 
                        <?php echo $this->getChildHtml('inchoo_socialconnect_facebook_button'); ?> 
                        <?php echo $this->getChildHtml('inchoo_socialconnect_twitter_button'); ?>


I hope you get it !

Thanks for the support!

Here’s what I did:

/app/design/frontend/default/jm_hawkstore/layout/customer.xml
I adjusted this code to match exactly what I found the social_connect XML file, this just adds the type and name calls.

Code:

    <customer_account_login translate="label">
        <reference name="head">
  	  <action method="addItem">
        	<type>skin_css</type>
        	<name>inchoo_socialconnect/css/styles.css</name>
    	  </action>
   	 </reference>
        <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" />
            	    <block type="inchoo_socialconnect/login" name="inchoo_socialconnect_login">
        		<block type="inchoo_socialconnect/google_button" name="inchoo_socialconnect_google_login_button" />
        		<block type="inchoo_socialconnect/facebook_button" name="inchoo_socialconnect_facebook_login_button" />
        		<block type="inchoo_socialconnect/twitter_button" name="inchoo_socialconnect_twitter_login_button" />
    		</block>
    	</reference>
    </customer_account_login>

In the file: app/design/frontend/default/jm_hawkstore/template/persistent/customer/form/login.phtml
The $this->getChildHtml are still not displaying. I don’t understand why?! I added the lines as you mentioned and even teste by adding "?php echo $this->getChildHtml(‘inchoo_socialconnect_google_button’ ); ?> " deliberately leaving out the first "<", this displayed the line as test in the login screen, so it is in the correct file, its just not getting processed.
Attachment 32395

This is an awesome opensource project and would go great with all of your templates, but I cannot seem ot get this working… Your help is much appreciated!

I Figured it out

it’s just a styling issue. Inside:

app/design/frontend/base/default/template/inchoo/socialconnect/google/button.phtml

Code:

<div class="clearer">
    <div class="inchoo-socialconnect-google">
        <div class="inchoo-socialconnect-google-inner">
            <a href="<?php echo $this->escapeUrl($this->_getButtonUrl()); ?>"><?php echo $this->_getButtonText(); ?></a>
        </div>
        <div class="inchoo-socialconnect-google-right"></div>
    </div>
</div>

The div with class clearer is problematic for your theme so just remove it, here’s an example for modified button.phtml for Google Connect button:

Code:

<div class="inchoo-socialconnect-google">
    <div class="inchoo-socialconnect-google-inner">
        <a href="<?php echo $this->escapeUrl($this->_getButtonUrl()); ?>"><?php echo $this->_getButtonText(); ?></a>
    </div>
    <div class="inchoo-socialconnect-google-right"></div>
</div>

Do the same thing for Facebook and Twitter button.phtml files and you’re good to go.

To get the correct ‘box formatting’ you need wrap the section in the login-form class

Code:

    <form id="login-form">
</form>