By visiting this website you accept its use of cookies. Manage your cookie preferences.

Once you have a store set up and ready, you can download the site widget from the Download Widget tab. It will contain a ZIP archive that you need to extract in a web accessible folder.

Note: The widget requires version PHP 5.6 or greater.

Placing the widget on your website

You have already downloaded widget.zip via the Download widget tab. Now you should upload the archive to your web files and extract its content to a subdirectory of your site's web root. Then you can visit the web address of the widget. If your site's web root is /home/user/www/www, and you installed the widget in /home/user/www/www/hosting, your widget's web address would be http://your_website.com/hosting.

The page of the widget includes examples of the Hosting order and Domain search pages. The Embed code section is the place from which you can copy embed code and place it on a new or an already existing page. The added code will embed the widget page to your own page. The Embed code section is visible only when the store is set to run in test mode via this setting in the /app/config.php file:

'test_mode' => true,
Adjusting the terms of use on your order form

You can create your own Terms of use page (e.g. terms.html) and add a link to it on your order page. Once you have prepared your Terms of use page, open your custom translation file (/app/language/en.php, /app/language/fr.php, etc.). Find the terms_agree variable, and replace the hash symbol (#) used as href attribute with the link to your Terms of Use page:

'terms_agree' => 'I have read and will abide by the <a href="http://your_website.com/terms.html" target="_blank">Hosting Terms of Use</a>',

Save the changes to apply the new settings.

Using a customized theme

Go to the directory where you installed the widget and navigate to /public/theme. Create a new directory with the name of your new theme, e.g. /public/theme/aqua. In the /aqua directory, create a new directory named css. Navigate to /public/theme/dark/css and copy widget.css to /public/theme/aqua/css. Open /public/theme/aqua/css/widget.css and edit the CSS file accordingly in order to modify the layout of your widget pages. To enable the new theme for a widget page, edit your embed code and enter the name of your new theme (e.g. aqua) as data-theme attribute:

<div id="hosting-widget" class="hosting-widget" data-theme="aqua" data-widget="order"></div>
<script src="/hosting/js/embed.js" type="text/javascript"></script>

You can use a different theme for each separate widget page.

Using a customized translation

From the widget's installation directory, navigate to /app/language, copy en.php, and paste the file in /app/custom/language. Edit the texts in /app/custom/language/en.php in order to customize the texts visualized on your website pages.

If you want to add a new language, rename en.php so that it corresponds to the new translation. For example, you could name the file fr.php for a French translation. Edit fr.php accordingly so that the standard texts are replaced with their translation in French. When you are ready, go back to the widget's installation directory and navigate to /app. Open config.php and find the locale variable. Replace the currently used translation (i.e. en) with the new one:

'locale' => 'fr',

Save the changes to activate the new translation.

To modify the translations of your hosted storefront, refer to the Customizing your hosted storefront help section for additional details.

Extending the functionality of the Widget using PHP hooks

The hosting widget contains a file named app/custom/hooks.php. It contains stub implementations of the currently supported event hooks. If you want to run custom PHP code whenever one of the supported events is triggered, you should edit that file.

Hooks can be enabled with the enable_custom_hooks option in the configuration of your widget. You should add the following line to the configuration array to enable them:

'enable_custom_hooks' => true,

After that, the custom hooks defined in the hooks.php file will be executed whenever the events they are defined for are triggered.

For example, if you want to receive an email whenever an order is placed or a payment is received, you can do this with the following PHP code in hooks.php:

<?php
return [
	'order_created' => function($order, $input = []) {
		mail('[email protected]', 'Order created', "Order created hook called\n" . var_export($order, true));
	},
	'payment_received' => function($payment, $input = [] ) {
		mail('[email protected]', 'Payment received', "Payment received hook called\n" . var_export($payment, true));
	}
];

This code will send you the data submitted in the order by email. You should replace [email protected] in the example with your actual email address.

Extending the functionality of the Widget using JavaScript callbacks

If you want to run custom JavaScript code whenever the widget forms are loaded, you can do so with a JavaScript callback. It should be configured with a data-callback attribute on the HTML element that contains the form.

Here is a sample implementation of the JavaScript callback function that is called when the order form of the hosting widget is loaded:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hosting Widget Test</title>
        <script>
        function custom_widget_callback() {
            console.log('Custom widget function called with the following arguments:')
            console.log(arguments)
        }
        </script>
        <script src="/hosting/js/embed.js" type="text/javascript"></script> 
    </head>
    <body>
        <div id="hosting-widget" class="hosting-widget" data-theme="light" data-widget="order" data-callback="custom_widget_callback"></div>
    </body>
</html>

The data-callback="custom_widget_callback" attribute of the div element containing the form tells the widget to execute the custom_widget_callback() function when the form is loaded.

This example will just create a console log entry that it has been executed.

API call and debug logs

For debugging purposes, or if you simply want to log the API calls, you can enable logging by editing the /app/config.php file. All you have to do is uncomment the respective line:

'log' => BASE_DIR . '/storage/logs/api.log',
'debug' => BASE_DIR . '/storage/logs/api_debug.log',

The api.log and api_debug.log files will be automatically created.

Using multiple storefronts

You can create and use multiple storefronts for a single online store quite easily. You can have one hosted storefront and an unlimited number of self-hosted storefronts using the widget and WordPress plugin. This will allow you to resell your online store products through multiple websites (each with its unique storefront - design, content, languages, and currencies), and all the orders will be listed under one online store.