VueJS + WHMCS One Step Checkout Orderform Template

From WHMCS Global Services Module Documentation
Jump to: navigation, search

About VueJS + WHMCS One Step Checkout Orderform

WHMCS VueJS + WHMCS One Step Checkout Orderform Reduce your abandonment rate and accelerate your conversion speed by 10X with the most powerful and lightweight VueJs One Step Checkout Orderform. This fully responsive Checkout Orderform is highly optimized with Vue.js, a progressive JavaScript Framework to streamline the checkout processes simply.

Installation Guide

How to Download the Module Files?

1. Go to WHMCS main website i.e. https://whmcsglobalservices.com.

2. Next, login to your Client Area i.e. https://whmcsglobalservices.com/members/clientarea.php.

3. Now, Download the VueJS + WHMCS One Step Checkout Orderform depending on the WHMCS version you are using.

4. Once you have done that a zip file will start downloading.

Module files have been successfully downloaded.

How to install and configure VueJS Module Files?

1.After download now you will see the Vuejs WHMCS orderform folder

WHMCS orderform.png

2. Open the Vuejs WHMCS orderform folder now you will see the two folders order and WHMCS, and open the order folder

Mark order.png

3. After click order folder you will see the configure folder. Now click on config folder to move on next step

Conf.png

4. Now open the config folder you will see the config_opc.new file now rename it with config_opc.js

MicrosoftTeams-image (45).png

5. After removing.new your file looked like this

MicrosoftTeams-image (46).png

6. After renaming it open the file and the put the WHMCS url on this path

Domain.png

7. After all process upload the order folder in WHMCS set up folder or outside the WHMCS set up folder.

Note: Make sure these two folders(WHMCS and Vuejs) are in same server

Step7.png

How to upload the addon module for Vuejs cart ?

1.Click on WHMCS folder

WHMCS folder.png

2. Now you will see these two folders and open the modules folder

Lang file.png

3. The addons folder will appear after you click the module folder.

Step2.1.png

4. Upload addon "vueWhmcsCart" folder to WHMCS (whmcs_root/modules/addons/)

Step2.png

How to upload language and configure language variables

1.Click on the lang folder

Lang step 1.png

2.After lang folder you see the overrides folder

Lang step 2.png

3. Upload "overrides" folder to WHMCS (whmcs_root/lang/).

Note: If the overrides folder is not there, then you need upload the overrides folder. If an overrides folder already exists, don't overwrite it. Take the following steps below 

Step3.png

4. Now go to (whmcs_root/lang/overrides/)

4.1 Open English.php file or your language file

4.2 Copy all the variables given below and paste it over end of the file.

$_LANG['vueOpcNavChooseDomain'] = "Choose Domain";
$_LANG['vueOpcNavChoosePlan'] = "Choose Plan";
$_LANG['vueOpcNavPayment'] = "Payment";
$_LANG['vueContinuePayment'] = "Continue to Payment";
$_LANG['vueMoneyBack'] = "Money-back";
$_LANG['vueMoneyGuarantee'] = "100% guarantee";
$_LANG['vuePromoCodeTitle'] = "Have a promo code?";
$_LANG['vuePromoCodeRequired'] = "Promo code required";
$_LANG['vueInvalidUrl'] = "is an Invalid URL";
$_LANG['vueOneTimeDiscount'] = "One Time Discount";
$_LANG['vueOpcDomainRequired'] = "Domain Required";
$_LANG['vueOpcSave'] = "Save";
$_LANG['vueOpcWelcomeBack'] = "Welcome Back";
$_LANG['vueOpcGoClientArea'] = "Go to Clientarea";
$_LANG['vueOpcDomainRegister'] = "Register a new domain";
$_LANG['vueOpcDomainTransfer'] = "Transfer your domain from another registrar";
$_LANG['vueOpcDomainOwn'] = "I will use my existing domain and update my nameservers";
$_LANG['vueOpcDomainSubdomain'] = "Use a subdomain from ";
$_LANG['vueOpcDomainAvailableYay'] = "Yayy!";
$_LANG['vueOpcDomainAvailableYourDomain'] = "Yayy Your domain is available!";
$_LANG['vueOpcDomainAvailableAt'] = " is available just at ";
$_LANG['vueOpcDomainAvailableFor'] = " for ";
$_LANG['vueOpcDomainAvailableFreeDomain'] = " . Domain price will be updated if your cart is applicable for free domain";
$_LANG['vueOpcAddCartButton'] = "Add to cart";
$_LANG['vueOpcCancelCartButton'] = "Cancel";
$_LANG['vueOpcDomainAddedCart'] = "Your domain successfully added to cart.";
$_LANG['vueOpcDomainFound'] = "+ result found";
$_LANG['vueOpcDomainUnavailable'] = "Domain is unavailable!";
$_LANG['vueOpcDomainUnavailableTagLine'] = "Sorry, this domain is already taken.";
$_LANG['vueOpcDomainAddedSuccess'] = "Your domain successfully added to cart.";
$_LANG['vueOpcDomainAdditionalFields'] = "Additional Domain Fields";
$_LANG['vueOpcDomainUpdateConfiguration'] = "Update Configuration";
$_LANG['vueOpcProductDiscountLabel'] = "for the first";
$_LANG['vueOpcCartItem'] = "item";
$_LANG['vueOpcCartItems'] = "items";
$_LANG['vueOpcSubdomainLabel'] = "http://";
$_LANG['vueOpcSubdomainPlaceHolder'] = "yourname";
$_LANG['vueOpcDomainUpdatedMessage'] = "Domain configuration updated successfully";
$_LANG['vueOpcCurrencyChangeMessage'] = "Updating the currency will erase all your custom settings made on the cart.";
$_LANG['vueOpcCurrencyNote'] = "Note";
$_LANG['vueOpcConfirmButton'] = "Confirm";
$_LANG['vueOpcAddonAddButton'] = "Add";
$_LANG['vueOpcAddonAddedButton'] = "Added";
$_LANG['vueOpcApplyCreditAmount'] = " from my credit balance to this order and I will pay the remaining amount via the payment method selected below.";
$_LANG['vueOpcApplyCreditAmountNoFurtherPayment'] = " from my credit balance to this order. No further payment will be due.";
$_LANG['vueOpcConfigurableTotalPrice'] = "Total price configurable options";
$_LANG['vueOpcDomainAddonsTotalPrice'] = "Total price domain addons";
$_LANG['vueOpcApplyTextCredit'] = "Apply";
$_LANG['vueCopyText'] = "Copy";

Note: Same process will be followed to other language and text on the right side between quotes will be changed.

How to activate the addon?

1. Go to WHMCS admin > Settings > System Settings

Screenshot (10)-hostx.png

2.After click on setting, select Addon Modules option

Screenshot (11)-hostx.png

3. Now click on the Activate button

Activate.png

4.Click on Configure Button

Step8.png

5.Now put the license key in the field provided

Step9.png

6.Give access right to the user groups and then click on save changes

Step10.png

7.After all the process your module will be appear for further information check this link here

Step11.png

Now cart is setup you can access it by hitting the link

Eg -> https://www.yourwhmcsdomain.com/order or if you changed the order folder name then pass that folder name.