Pre Install

• Please follow pre install section here if you haven't proceed one before: https://hpwebdesign.io/pre-install
• After completing the above steps, you can proceed with the installation as follows:

NB: You can disable base theme modification after installation.

Installation

1. After purchasing Module HP Social Login, Download and extract it. 
You will get a file with the name XXXX.ocmod.zip format.

2. Navigate to the Extension → Extension Installer, then upload the file with the name XXXX.ocmod.zip earlier.

NOTE

On OC 2.x
Make sure the upload process until there is a success message: Success: The extension has been installed!
If an error message appears: … is using the same ID code as the one you are trying to upload!
It means you have uploaded the same file before. So you don't have to re-upload it.

For the Update Process:
there will be a file override of the old file. Click the Continue button to continue the upload process.

3. Access the menu Extensions → Modifications. Then click the Refresh button at the top right, as shown in the following image.

Refresh Mods – HP Social Login OpenCart

4. Access the modules page.
Extension → Module / Extension → Extension
Filter for Module (OC →= 2.3.0.x above ).
Click Install and Edit HP Social Login.
At this point you will see the HP Social Login settings page.
The same page can be accessed via the Admin Menu (HP Web Design → HP Social Login).

5. Domain Validation

Further Request

General tab

• Status : To activate the module.
• Customer Group : The customer group provided when registering using HP Social Login.
• Checkout Login : Shows a popup at checkout but not logged in.
• Google reCaptcha : Provide Google reCaptcha when registering or logging in.

Settings Login / Register Facebook

1. Go to the link https://developers.facebook.com/apps/

2. Click the button Create App

3. Select Consumer.

4. Fill Display Name with the name of the website you are using.

5. Click the Set Up button on Facebook Login.

6. Select Platform Web and fill in your web URL.

7.  Go to the Settings page under Facebook Login.

8. Fill in the Form Valid OAuth Redirect URIs with :

https://{your domain}/index.php?route=extension/module/hp_social_login/facebook

setting 0Auth redirect URI on hp social login opencart

9. Open the Basic page via the Settings menu > Basic. Fill in everything according to your web information except Namespace (optional).

10. Go to the App Review page > Permissions and Features. Click Get Advanced Access for public_profile and email. If you have Get Advanced Access it will appear as below.

11. Make App Mode to Live.

12. Copy App ID and App Secret, so you can see App Secret press Show.

13. Return to the HP Social Login settings page and paste the App ID and App Secret that you copied earlier. Don't forget to set Status to On.

Settings Login / Register Google

1. Go to the link https://console.developers.google.com/apis/dashboard.

2. If you don't have Project yet, click Select Project.

3. Click New Project, then fill in the data. If you have clicked the Create button.

4. Go to the Credentials page and click Create Credentials. Select OAuth Client ID.

5. Select Web application in Application type and fill in URIs with :

https://{your domain}/index.php?route=extension/module/hp_social_login/google

Then press the Create button.

6. Copy Client ID dan Client Secret.

7. Return to the HP Social Login settings page and paste Client ID and Client Secret. Don't forget to set Status to On.

Setup in Journal Theme

Setting up the Journal Theme requires special settings so that HP Social Login can function.

Desktop Page

For settings on the Desktop Page, you can open the Journal > headers > Top Menu > Secondary Menu.

Select the Login menu, set the link section to custom and enter:

javascript:openLoginModal();

Do it also for Register, setting link section with custom then input :

javascript:openRegisterModal();

Mobile Page

Besides doing the same for Mobile Pages, you can by opening the Journal > headers > Top Menu > Top Menu – Mobile.