🔥 Introducing the Lizha Hyvä Template – Sleek, Fast, and Powerfull Buy Now 🔥

shape-img

This article will help you to add your own indexer in Magento 2. Magento 2 has made performance improvements that now allow you to declare one or more shared indexers. You can add a custom indexer using the steps below:

  1. Create indexer class
  2. Create etc/indexer.xml file.
  3. Create etc/mview.xml file.

Example of a custom indexer implementation

In order to push best-selling products to the top of a category listing, you need to process the statistics related to sales which will help in changing the product position dynamically.

1. Create indexer class

Your custom indexer class should implement \Magento\Framework\Indexer\ActionInterface and the indexer should be able to perform three types of operations:

  • executeRow($id) – Processing a single entry from a dictionary.
  • executeList($ids) – Processing a set of dictionary entries.
  • executeFull() – Processing all entities from a specific dictionary.

Create an Indexer folder inside your module’s model folder.

Example: KiwiCommerce\Demo\Model\Indexer;

After creating the Indexer folder, create an indexer class file inside it.

Example:

class CustomIndexer implements \Magento\Framework\Indexer\ActionInterface, \Magento\Framework\Mview\ActionInterface
{
	public function executeFull(); //Should take into account all placed orders in the system

	public function executeList($ids); //Works with a set of placed orders (mass actions and so on)

	public function executeRow($id); //Works in runtime for a single order using plugins

	public function execute($ids); //Used by mview, allows you to process multiple placed orders in the "Update on schedule" mode 	
}

2. Create etc/indexer.xml file.

Create the indexer.xml file inside the etc folder of the module.

Example: KiwiCommerce\Demo\etc\indexer.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Indexer/etc/indexer.xsd">
   <indexer id="kiwicommerce_indexer" view_id="kiwicommerce_indexer" class="KiwiCommerce\Demo\Model\Indexer\CustomIndexer">
       <title translate="true">Custom Indexer</title>
       <description translate="true">Custom Indexer Description </description>
   </indexer>
</config>

3. Create etc/mview.xml file.

Next, you need to create an mview.xml file inside the etc folder of the module.

Example: KiwiCommerce\Demo\etc\mview.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Mview/etc/mview.xsd">
   <view id="kiwicommerce_indexer" class="KiwiCommerce\Demo\Model\Indexer\CustomIndexer" group="indexer">
       <subscriptions>
           <table name="sales_order" entity_column="entity_id" />
       </subscriptions>
   </view>
</config>

Now when an order is placed, the custom indexer calculates the sorting order of the products and stores this data in the index table so that it can be used in product displaying logic.

You can verify your index on Index Management.

To check the Indexer:

  • Log in to the Magento Admin.
  • Navigate to System > Index Management.

Facing issues with Magento 2 flow or require expertise and support? Connect with us.

It is true that when it comes to building an eCommerce store, Magento would be the first and only choice due to its ability to be customised in order to meet every requirement the owners may have. Sometimes you may want to play with the variety of colours showing, and for that you need to add a colour picker in the Magento 2 System configuration.

At first it may seem a big task and pretty difficult to achieve, however it is really simple. Below are the exact steps to do this:

  • Step 1: Create Attribute
  • Step 2: Create pickcolors.js, color.html, di.xml files
  • Step 3: Create Pool Modifier Class – Style.php

Note: Replace KiwiCommerce/Attributes from entries in this article to your module name.

Step 1: Create Attribute

Create a product attribute for color with the data given below:

attribute code: my_color

Step 2: Create pickcolors.js, color.html, di.xml files

First of all, create pickcolors.js in your module at the path given below and add the following code:

app/code/KiwiCommerce/Attributes/view/base/web/js/form/element/pickcolors.js

define([
    'Magento_Ui/js/form/element/abstract',
    'mageUtils',
    'jquery',
    'jquery/colorpicker/js/colorpicker'
], function (Abstract, utils, $) {
    'use strict';
    return Abstract.extend({
        defaults: {
            placeholder: $.mage.__('Select Colors'),
            elementTmpl: 'KiwiCommerce_Attributes/form/element/color',
            links: {
                value: '${ $.provider }:${ $.dataScope }'
            }
        },
        /**
         * Calls 'initObservable' of parent
         *
         * @returns {Object} Chainable.
         */
        initObservable: function () {
            this._super()
                .observe('disabled visible value')
                .observe('addText');

            return this;
        },
        /**
         * Initializes regular properties of instance.
         *
         * @returns {Abstract} Chainable.
         */
        initConfig: function () {
            var uid = utils.uniqueid(),
                valueUpdate;
            this._super();
            valueUpdate = this.showFallbackReset ? 'afterkeydown' : this.valueUpdate;
            _.extend(this, {
                uid: uid,
                noticeId: 'notice-' + uid,
                valueUpdate: valueUpdate
            });
            console.log(this);
            return this;
        },
        /**
         * Initialize ColorPicker
         *
         * @returns {boolean}
         */
        initColorPicker: function() {
            var self = this;
            $('[data-role="color-picker"]').ColorPicker({
                color: self.value(),
                onShow: function (colpkr) {
                    $(colpkr).fadeIn(200);
                    return false;
                },
                onHide: function (colpkr) {
                    $(colpkr).fadeOut(200);
                    return false;
                },
                onChange: function (hsb, hex) {
                    $('#color-121').css('backgroundColor', '#' + hex);
                    self.userChanges();
                    self.value('#' + hex);
                    self.hasChanged();
                }
            });
            return false;
        },
        /**
         * Validates itself by it's validation rules using validator object.
         * If validation of a rule did not pass, writes it's message to
         * 'error' observable property.
         *
         * @returns {Object} Validate information.
         */
        validate: function () {
            var value   = this.value(),
                result  = this.checkColor(value),
                message = !this.disabled() && this.visible() ? result.message : '',
                isValid = this.disabled() || !this.visible() || result.passed;

            this.error(message);
            this.bubble('error', message);

            if (!isValid) {
                this.source.set('params.invalid', true);
            }

            return {
                valid: false,
                target: this
            };
        },
        checkColor: function(value) {
            var result = {message: $.mage.__('Color is not valid'), passed:false};
            if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(value)) {
                result = { message: '', passed: true };
            }
            return result;
        }
    });
});

Create color.html in your module at the path given below and add the following code:
app/code/KiwiCommerce/Attributes/view/base/web/template/form/element/color.html

<div class="swatches-visual-col col-default">
   <div class="swatch_window" style="background: #000000"
        data-bind="
        style: {'background-color': value},
        'aria-describedby': noticeId,
        id: uid, disabled: disabled,
        attr: {title: placeholder},
        hasFocus: focused
   "></div>
</div>

Create di.xml in your module at the path given below and add the following code:

app/code/KiwiCommerce/Attributes/etc/adminhtml/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
   <virtualType name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool">
       <arguments>
           <argument name="modifiers" xsi:type="array">
               <item name="styles" xsi:type="array">
                   <item name="class" xsi:type="string">KiwiCommerce\Attributes\Ui\Modifier\Product\Style</item>
                   <item name="sortOrder" xsi:type="number">25</item>
               </item>
           </argument>
       </arguments>
   </virtualType>
</config>

Step 3: Create Pool Modifier Class – Style.php

Now, create the class Pool Modifier in your module at the path given below and add the following code:

app/code/KiwiCommerce/Attributes/Ui/Modifier/Product/Style.php

<?php
namespace KiwiCommerce\Attributes\Ui\Modifier\Product;

use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier;

class Style extends AbstractModifier
{
   public function modifyMeta(array $meta)
   {
       // Color attribute
       $code = 'my_color';
       // Change component js
       $meta['product-details']['children']['container_' . $code]['children'] = array_replace_recursive(
           $meta['product-details']['children']['container_' . $code]['children'], [
           $code => [
               'arguments' => [
                   'data' => [
                       'config' => [
                           'component' => 'KiwiCommerce_Attributes/js/form/element/pickcolors'
                       ]
                   ]
               ]
           ]
       ]);
       return $meta;
   }

   public function modifyData(array $data)
   {
       return $data;
   }
}

Woohoo, now clear the cache and the result will be displayed as shown in the image below:
Product edit page:

If colour is one of the required attributes then you will see an error message while saving the configuration:

That’s it and you can even customize and use this code to place a colour picker anywhere in Magento. Feel free to reach out to us if you find any issues or errors while implementing this code. Wonderful, colourful Magento! ?

No doubt when things revolve around a jQuery widget in Magento 2, it becomes more tricky and takes hours to see final results on screen. To help when this is the case, we at KiwiCommerce are going to teach you how to create a jQuery widget in Magento 2 following a set of simple steps mentioned below:

  1. Set up a module and select any PHTML file for calling custom jQuery widget.
  2. Create a custom jQuery widget.
  3. data-mage-init attribute for calling the newly created custom widget.
  4. Clear cache and check the form.

1. Set up a module and select any PHTML file for calling custom jQuery widget.

To start you need to create a module and override any phtml file to call your custom widget. In this example, we have the contact phtml file:
app\design\frontend\VendorName\ModuleName\Magento_Contact\templates\form.phtml

2. Create a custom jQuery widget.

The next step is to create a custom js file for creating a custom jquery widget:
app\code\VendorName\Modulename\view\frontend\web\js\kiwicount.js

And below is the basic code structure:

define([
   'jquery',
   'underscore',
   'jquery/ui',
   'Magento_Ui/js/modal/confirm',
   'mage/translate'
], function ($, _) {
   'use strict';

   $.widget('mage.kiwicount',{

	// Your custom code and custom methods will be here 	

 });

    return $.mage.kiwicount;

});

In the define section, state the jquery name that you want or you can simply put jQuery in the define section.
We will be using only jQuery and jQueryUi and as a result we will remove the extra define code from Js. Your code will now look like the below:

define([
   'jquery',
   'jquery/ui'
], function ($, _) {
   'use strict';

   $.widget('mage.kiwicount',{

	// Your custom code and custom methods will be here 	

 });

    return $.mage.kiwicount;

});

3. data-mage-init attribute for calling your custom Widget.

Now let’s get back to our file:
app\design\frontend\VendorName\ModuleName\Magento_Contact\templates\form.phtml

In this file we need to check the number of characters for the text area field and to do so we need to call our custom jQuery widget as shown in below code:

<textarea name="comment" id="comment" title="<?= $block->escapeHtmlAttr(__('Comment')) ?>" class="input-text"
 data-mage-init='{"KiwiCommerce_LoginAsCustomer/js/kiwicount": {"maxlen":"150","messagebox":"charNum"}
}'></textarea>

<span id="charNum"></span>

Where : KiwiCommerce_LoginAsCustomer/js/kiwicount is the path of JS file
Maxlen variable to pass in jquery widget as config array we can get all these arguments there using config.maxlen

Coming back to our custom widget js file, apply the code for validation and receive the argument:

define([
   'jquery'
], function ($, _) {
   'use strict';

   $.widget('mage.kiwicount',{

       _create: function(config,element) {

           this._case = $(this.element);
           $(this._case).keyup(function () {
               var max = config.maxlen;
               var len = $(this.element).length;
               if (len >= max) {
                   $('#'+config.messagebox).text(' you have reached the limit');
               } else {
                   var char = max - len;
                  $('#'+config.messagebox).text(char + ' characters left');

               }
           });
       }
   });

    return $.mage.kiwicount;

});

In the above code snippet, we have added a _create function which is a constructor. However, we only need to check the length of the element so we have directly received the constructor.
We also have two objects, named as config and element:

Config :
The argument which is sent with the variable to this custom jquery widget:
We can access all passing argument using config.messagebox where messagebox is the variable name.

Element :
All property of the current element from where it is called, in our case we have the element <textarea>.
We can use any property of the element using: this.element

4. Clear the cache and flush and check you phtml page(Contact page)

Clear the cache :

php bin\magento cache:clear
or
php bin\magento c:c

Clear the flush:

php bin\magento cache:flush
or
php bin\magento c:f

After that you will be able to find the changes of character limit Jquery widget working on contact us page textarea.

You now know how to create a jQuery widget specifically in Magento 2. If you get stuck while creating this widget we at KiwiCommerce will be happy to help you out. Feel free to reach out to us. ?

Undoubtedly, the Magento 2 installation process using the wizard in a browser is quite cumbersome and time consuming, especially when we use sample data. To overcome that, we at KiwiCommerce have got a completely new tactic to install Magento 2 within minutes, and that is with the use of CLI.

Below is a couple of steps that lets you install and run Magento 2 in no time:

Step 1: Download Magento 2.

Here, we can get the Magento 2 Files using composer or directly get a zip file from https://magento.com/tech-resources/download.

Using composer

Get the latest Magento version by running the below command in the console:

composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition <directory>

Or to get a specific version of Magento, add an extra argument in command as below:

composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition 2.1.7 <directory>

The <directory> is the location where you want to install Magento. If you do not specify <directory> then it creates project-community-edition.

Download direct Zip

We can download the agento 2 full release with or without sample data from https://magento.com/tech-resources/download and extract it to where you want to install. Please check the below screenshot to see this:

Step 2: Install using CLI

After setting up the Magento 2 file system, run the below command in CLI from the Magento 2 root folder to install it quickly:

php bin/magento setup:install \
--base-url=http://127.0.0.1/magento/ \
--db-host=localhost \
--db-name=magento \
--db-user=root \
--db-password=123456 \
--admin-firstname=root \
--admin-lastname=localhost \
[email protected] \
--admin-user=admin \
--admin-password=admin123 \
--backend-frontname=admin \
--language=en_US \
--currency=USD \
--timezone=America/Chicago \
--use-rewrites=1

Check the above options in detail below:

Option Name Value Required?
–base-url Base URL to use to access your Magento Admin and storefront No
–db-host Your database host. For ex. `localhost` No
–db-user Your database user. For ex. `root` No
–db-password Your database user’s password. No
–admin-firstname Magento admin user’s first name. Yes
–admin-lastname Magento admin user’s last name. Yes
–admin-email Magento admin user’s e-mail address. Yes
–admin-user Magento admin username. Yes
–admin-password Magento admin user password. Yes
–backend-frontname Uniform Resource Identifier (URI) to access the Magento Admin or omit this parameter to let Magento generate a random URI for you. No
–language Language code to use in the Admin and storefront. No
–currency Default currency to use in the storefront. No
–timezone Default time zone to use in the Admin and storefront. No
–use-rewrites 1 means you use web server rewrites for generated links in the storefront and Admin.
0 disables the use of web server rewrites. This is the default.
No

Here I’ve added some options in the above command which I think are required, but are not compulsory. The above command should be edited to your needs and executed from the Magento 2 root directory. If everything went correctly, you will be informed that the installation has been completed.

For more detail please refer to this link: https://devdocs.magento.com/guides/v2.2/install-gde/install/cli/install-cli-install.html#instgde-install-cli-magento

Conclusion

You’re done! Now you know the complete process to install Magento 2 using CLI, and of course the best bit it that you can do it quickly. If you get stuck somewhere while doing this, please connect with us and we will be glad to help you ?

Steps to create a free shipping bar

  • Create & register the module
  • Extend default.xml layout and define a block
  • Create block class & related template file (.phtml file)
  • Define jsLayout component in <block> element in default.xml layout
  • Create jsLayout component(.js file) & template(.html file) file at a location which is defined in default.xml layout file
  • Calculate percentage and binding it with shipping progress bar using knockout js.
  • Create a configuration menu to set the maximum price for free shipping bar at admin panel
  • Get maximum price config value for shipping bar which is set from the admin panel, and bind it to the shipping progress bar.
  1. Create a Module for Free Shipping Bar

Let’s create the separate module to add a free shipping bar to the top of the mini-cart.

You have to create a vendor directory under the app/code directory and a module directory under newly created vendor directory.

Create Vendor & Module directory as follow :

app/code/Kiwicommerce/Shippingbar

  1. Create registration.php file

Create a registration.php file on the root folder of your module for module registration and add the following content:

\Magento\Framework\Component\ComponentRegistrar::register(
   \Magento\Framework\Component\ComponentRegistrar::MODULE,
   'Kiwicommerce_Shippingbar',
   __DIR__
);
  1. Create module.xml file

For our module instruction, create a new directory “etc” on the root directory. Also, create a module.xml file under “etc” directory and add the following content:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
   <module name="Kiwicommerce_Shippingbar" setup_version="1.0.0">
       <sequence>
           <module name="Magento_Checkout"/>
           <module name="Magento_Tax"/>
       </sequence>
   </module>
</config>

In the <sequence> element add the Magento core modules that you want to load before the current module.

Run the following command using the command line interface from the Magento root directory to enable the module:

$ php ./bin/magento setup:upgrade

  1. Extend default.xml layout to add shipping bar block

To add a new block for the shipping bar in the minicart section, we need to extend layout from the Magento checkout core module.

To extend the layout, we need to create a default.xml layout at the following location:

app/code/Kiwicommerce/Shippingbar/view/frontend/layout/default.xml

Add the following content in the default.xml file to create the new block for the shipping bar:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <body>
       <referenceContainer name="minicart.addons">
           <block class="Kiwicommerce\Shippingbar\Block\Cart\Sidebar" name="shipping_bar" template="Kiwicommerce_Shippingbar::cart/minicart.phtml">
               <arguments>
                   <argument name="jsLayout" xsi:type="array">
                       <item name="components" xsi:type="array">
                           <item name="minicart-addons" xsi:type="array">
                               <item name="component" xsi:type="string">Kiwicommerce_Shippingbar/js/view/minicartaddons</item>
                               <item name="config" xsi:type="array">
                                   <item name="template" xsi:type="string">Kiwicommerce_Shippingbar/minicartaddons/content</item>
                               </item>
                           </item>
                       </item>
                   </argument>
               </arguments>
           </block>
       </referenceContainer>
   </body>
</page>
  1. Create block class and template files for the block

Create block class for the newly added block at the location below. We will use this class to set dynamic configuration for maximum price of free shipping bar in the future:

app/code/Kiwicommerce/Shippingbar/Block/Cart/Sidebar.php

Add following content in the Sidebar.php file,

<?php
namespace Kiwicommerce\Shippingbar\Block\Cart;

use Magento\Framework\View\Element\Template;

class Sidebar extends Template
{
   /**
    * Sidebar constructor.
    * @param Template\Context $context
    * @param array $data
    */
   public function __construct(
       Template\Context $context,
       array $data = []
   ) {
       parent::__construct($context, $data);
   }
}

Create a template to render the content of the knockout js template file at the following location with given content:

app/code/Kiwicommerce/Shippingbar/view/frontend/template/cart/minicart.phtml

<div id="cart-page">
   <div id="block-cart-list" data-bind="scope:'minicart-addons'" class="block">
       <!-- ko template: getTemplate() --><!-- /ko -->
       <script type="text/x-magento-init">
         {
             "#block-cart-list": {
                 "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
             },
             "*": {
                 "Magento_Ui/js/block-loader": "<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>"
             }
         }
     </script>
   </div>
</div>

Make sure that in the data-bind attribute, the scope name should be the name of our jsLayout component that we had defined in the default.xml file.

  1. Create the jsLayout component & template file

Now, we have to create the jsLayout component file as well as related template file as per defined in the default.xml file.

  • Create a component file at the following location:

app/code/Kiwicommerce/Shippingbar/view/frontend/web/js/view/minicartaddons.js

  • Create a component template file at the following location:

app/code/Kiwicommerce/Shippingbar/view/frontend/web/template/minicartaddons/content.html

Add the following content in the template file content.html

<div class="component-wrapper" data-bind="if: getTotalCartItems() > 0">
   <h4 data-bind="text : getpercentage() < 100 ?'Free shipping' : 'Eligible for free shipping!'"></h4>
   <span data-bind="html: cart().subtotal"></span><span> / </span><span data-bind="text: maxprice"></span>
   <div class="minprogress" id="progress">
       <div class="minprogress-active" id="child-progress" data-bind="style: { width: getpercentage() + '%' } "></div>
   </div>
</div>

Add the following content in the component file minicartaddons.js

define([
       'ko',
       'uiComponent',
       'Magento_Customer/js/customer-data',
   ], function (ko, Component, customerData) {
       'use strict';
       var subtotalAmount;
       var maxPrice = 100;
       var percentage;
       return Component.extend({
           displaySubtotal: ko.observable(true),
           maxprice: '
    1. Create less file for the progress bar

 

Create miniprogress.less file for applying css of the progress bar at the following location with the code given below: app/code/Kiwicommerce/Shippingbar/view/frontend/web/css/miniprogress.less

div.minprogress {
    border: 1px solid #a5a5a5;
    height: 10px;
    border-radius: 5px;
    position: relative;
.minprogress-active {
   position: absolute;
   background-color: #000000;
   height: 10px;
   border-radius: 5px;
}
}

Include miniprogress.less file in the <head> element before the <body> element at default.xml layout file by adding the following content:

<head>
   <css src="Kiwicommerce_Shippingbar::css/miniprogress.css"/>
</head>

The Free Shipping Bar has now been added in your mini-cart and you can see it in the screenshot below:

 

  1. Create system.xml file to add configuration menu to the admin panel

Now, we are going to add the configuration menu for free shipping bar in the store config menu on the admin side.

Create system.xml to add a new tab and section for the configuration of the shipping bar under store > configuration menu at the following location by adding the code snippet given below:

app/code/Kiwicommerce/Shippingbar/etc/adminhtml/system.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
   <system>
       <tab id="shippingbar" translate="label" sortOrder="1000">
           <label>Shipping Bar</label>
       </tab>
       <section id="shippingbar" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
           <label>Shipping Bar</label>
           <tab>shippingbar</tab>
           <resource>Kiwicommerce_Shippingbar::shippingbar</resource>
           <group id="shippingsection" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
               <label>Shipping Bar</label>
               <field id="shipping_bar" translate="label comment" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
                   <label>Max Price</label>
                   <comment>Set Maximum price for free shipping.</comment>
               </field>
           </group>
       </section>
   </system>
</config>
  1. Create config.xml file to define a default value

Create a config.xml file to set a default maximum price value of shipping bar at the following location by adding the code given below:

app/code/Kiwicommerce/Shippingbar/etc/config.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
   <default>
       <shippingbar>
           <shippingsection>
               <shipping_bar>100</shipping_bar>
           </shippingsection>
       </shippingbar>
   </default>
</config>

By making the above changes in the file, you will see that the configuration menu will appear at the store > configuration menu.

Now, we are going to fetch the default value of max price which is set in the admin panel and will reflect this in the shipping bar.

  1. Create helper to get a config value of shipping bar

To get the configuration value of max price for the shipping bar we need to create a helper at the following location with the below content:

app/code/Kiwicommerce/Shippingbar/Helper/Data.php

<?php
namespace Kiwicommerce\Shippingbar\Helper;

use Magento\Framework\App\Helper\AbstractHelper;

class Data extends AbstractHelper
{
   const PRICE_SHIPPING_BAR = 'shippingbar/shippingsection/shipping_bar';
   /**
    * Return if maximum price for shipping bar
    * @return int
    */
   public function getPriceForShippingBar()
   {
       return $this->scopeConfig->getValue(
           self::PRICE_SHIPPING_BAR,
           \Magento\Store\Model\ScopeInterface::SCOPE_STORE
       );
   }
}
  1. Use the helper to assign config value of shipping bar to the block

Now, we can use the above helper’s function using dependency injection concepts.

Replace the content of app/code/Kiwicommerce/Shippingbar/Block/Cart/Sidebar.php file with the code snippet given below:

<?php
namespace Kiwicommerce\Shippingbar\Block\Cart;

use Magento\Framework\View\Element\Template;

class Sidebar extends Template
{
   /**
    * @var \Kiwicommerce\Jobs\Helper\Data
    */
   private $helper;

   /**
    * Sidebar constructor.
    * @param Template\Context $context
    * @param \Kiwicommerce\Jobs\Helper\Data $helper
    * @param array $data
    */
   public function __construct(
       Template\Context $context,
       \Kiwicommerce\Shippingbar\Helper\Data $helper,
       array $data = []
   ) {
       parent::__construct($context, $data);
       $this->helper = $helper;
   }

   public function getConfigForShippingBar()
   {
       return $this->helper->getPriceForShippingBar();
   }
}
  1. Assign shipping bar config value to the jsLayout component

Add the following code in the app/code/Kiwicommerce/Shippingbar/view/frontend/template/cart/minicart.phtml file to assign the config value to the javascript variable.

<script>
   maxpriceShipping = <?= /* @escapeNotVerified */ $this->getConfigForShippingBar() ?>;
</script>

Now, your current file will look like this,

<div id="cart-page">
   <div id="block-cart-list" data-bind="scope:'minicart-addons'" class="block">
       <!-- ko template: getTemplate() --><!-- /ko -->
       <script>
           maxpriceShipping = <?= /* @escapeNotVerified */ $this->getConfigForShippingBar() ?>;
       </script>
       <script type="text/x-magento-init">
         {
             "#block-cart-list": {
                 "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
             },
             "*": {
                 "Magento_Ui/js/block-loader": "<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>"
             }
         }
     </script>
   </div>
</div>

Modify your js component file with the following content:

app/code/Kiwicommerce/Shippingbar/view/frontend/web/js/view/minicartaddons.js

Replace the following line of code:
var maxPrice = 100;

With the code given below:
var maxPrice = maxpriceShipping;

Happy coding! ?

+ maxPrice.toFixed(2),
/**
* @override
*/
initialize: function () {
this._super();
this.cart = customerData.get(‘cart’);
},
getTotalCartItems: function () {
return customerData.get(‘cart’)().summary_count;
},
getpercentage: function () {
subtotalAmount = customerData.get(‘cart’)().subtotalAmount;
if (subtotalAmount > maxPrice) {
subtotalAmount = maxPrice;
}
percentage = ((subtotalAmount * 100) / maxPrice);
return percentage;
}
});
});

  1. Create less file for the progress bar

Create miniprogress.less file for applying css of the progress bar at the following location with the code given below:

app/code/Kiwicommerce/Shippingbar/view/frontend/web/css/miniprogress.less


Include miniprogress.less file in the <head> element before the <body> element at default.xml layout file by adding the following content:


The Free Shipping Bar has now been added in your mini-cart and you can see it in the screenshot below:

 

  1. Create system.xml file to add configuration menu to the admin panel

Now, we are going to add the configuration menu for free shipping bar in the store config menu on the admin side.

Create system.xml to add a new tab and section for the configuration of the shipping bar under store > configuration menu at the following location by adding the code snippet given below:

app/code/Kiwicommerce/Shippingbar/etc/adminhtml/system.xml


  1. Create config.xml file to define a default value

Create a config.xml file to set a default maximum price value of shipping bar at the following location by adding the code given below:

app/code/Kiwicommerce/Shippingbar/etc/config.xml


By making the above changes in the file, you will see that the configuration menu will appear at the store > configuration menu.

Now, we are going to fetch the default value of max price which is set in the admin panel and will reflect this in the shipping bar.

  1. Create helper to get a config value of shipping bar

To get the configuration value of max price for the shipping bar we need to create a helper at the following location with the below content:

app/code/Kiwicommerce/Shippingbar/Helper/Data.php


  1. Use the helper to assign config value of shipping bar to the block

Now, we can use the above helper’s function using dependency injection concepts.

Replace the content of app/code/Kiwicommerce/Shippingbar/Block/Cart/Sidebar.php file with the code snippet given below:


  1. Assign shipping bar config value to the jsLayout component

Add the following code in the app/code/Kiwicommerce/Shippingbar/view/frontend/template/cart/minicart.phtml file to assign the config value to the javascript variable.


Now, your current file will look like this,


Modify your js component file with the following content:

app/code/Kiwicommerce/Shippingbar/view/frontend/web/js/view/minicartaddons.js

Replace the following line of code:
var maxPrice = 100;

With the code given below:
var maxPrice = maxpriceShipping;

Happy coding! ?

This article will help you to understand how the cron group works in Magento 2.

A cron group is a logical group that allows you to easily run a cron for more than one process at a time. Most Magento modules use the default cron group; some modules use the index group.

Example : <your component base dir>/<vendorname>/module-<name>/etc/crontab.xml

<config>
    <group id="<group_name>">
        <job name="<job_name>" instance="<classpath>" method="<method>">
            <schedule><time></schedule>
        </job>
    </group>
</config>

Here when defining the crontab for the module we need to define the group name too. Here group_name is the name of the cron group. The group name doesn’t have to be unique and we can run the cron for one group at a time.

Create a custom cron group

Declare a new group and specify its configuration options (all of which run in the store’s view scope) through the cron_groups.xml file, located at:
<your component base dir>/<vendorname>/module-<name>/etc/cron_groups.xml

Example:

<config>
    <group id="<group_name>">
        <schedule_generate_every>1</schedule_generate_every>
        <schedule_ahead_for>4</schedule_ahead_for>
        <schedule_lifetime>2</schedule_lifetime>
        <history_cleanup_every>10</history_cleanup_every>
        <history_success_lifetime>60</history_success_lifetime>
        <history_failure_lifetime>600</history_failure_lifetime>
        <use_separate_process>1</use_separate_process>
    </group>
</config>

Where:

  • group_name – Name of the custom group.
  • schedule_generate_every – Frequency (in minutes) that schedules are written to the cron_schedule table.
  • schedule_ahead_for – Time (in minutes) in advance that schedules are written to the cron_schedule table.
  • schedule_lifetime – Window of time (in minutes) that cron job must start or will be considered missed (“too late” to run).
  • history_cleanup_every – Time (in minutes) that cron history is kept in the database.
  • history_success_lifetime – Time (in minutes) that the record of successfully completed cron jobs is kept in the database.
  • history_failure_lifetime – Time (in minutes) that the record of failed cron jobs is kept in the database.
  • use_separate_process – This feature is available only for Magento 2.1 and later.

 

Verify your custom cron group

Step 1
Run Magento cron jobs for your custom group:

php bin/magento cron:run --group="group_name"

Execute this multiple times to check and confirm.

Step 2
Clean the Magento cache:

php bin/magento cache:clean

Step 3
Log in to the Magento Admin as an administrator.

Step 4
Click Stores > Configuration > Advanced > System.

Step 5
In the right pane, expand Cron. Your group of crons are displayed as follows:

Thanks for reading! ?

Magento 2 provides a very powerful symphony based command-line interface that performs installation and configuration tasks. The new command-line interface makes the life of both developers and system administrators much easier when performing multiple tasks, such as installing Magento, installing or upgrading custom or third-party extensions, clearing the cache, managing indexes, deploying static view files, setting application mode, creating database backups and much more.

This is a major improvement when compared to Magento 1 as it’s highly customizable and extendable so you can easily plug in your own commands provided by your Magento 2 extensions.

In this article, we will throw some light on command naming format which will help you to remember it easily and will list out some of the most useful commands in Magento 2.

Command naming format

A command name is a part of the command which defines behavior of the command on the very highest level. Any command goes right after the command’s name in the code, for example, in:

php bin/magento setup:static-content:deploy
  • bin/magento is the command’s name
  • setup:static-content:deploy is the name of the command.

If you’ve got a Magento installation handy then go to root directory of your installation and enter the following to display the current list of commands:

php bin/magento list

Format: group:[subject:]action

group

It represents a group of related commands. Commands in a group display in a list, which in turn makes it easier for the user to find the desired command. To find a group name for a command, imagine an subject area where it can be used.

subject

It’s a subject for the action. The subject is optional, but it can be useful for defining sets of commands that work with the same object. If a subject is represented by a compound word, use a dash or hyphen character to separate the words.

action

It is an action that the command does.

For examples:

General commands: just a group and an action

php bin/magento cache:clean
php bin/magento cron:install

Set of commands with a subject

php bin/magento admin:user:create
php bin/magento catalog:images:resize

Some of the most frequently used commands in Magento CLI

Install and upgrade a module using the command line interface

php bin/magento setup:upgrade

To prevent generated static view files from being deleted when setup:upgrade

php bin/magento setup:upgrade --keep-generated

Display the current running Magento application mode using the command line interface

php bin/magento deploy:mode:show

Switch to the developer or production application mode using the command line interface

php bin/magento deploy:mode:set developer (or production)

Skips the clearing and regeneration of static content when switching application mode

php bin/magento deploy:mode:set developer --skip-compilation

Deploy static view files in production and default mode using the command line interface

php bin/magento setup:static-content:deploy

Deploy static view files in any mode (very useful when you need to deploy static content in which an application is running on developer mode)

php bin/magento setup:static-content:deploy -f

Generate static view files for only the specified themes using the command line interface

php bin/magento setup:static-content:deploy --theme Magento/luma --theme VendorName/theme

Generate files only for the specified languages using the command line interface

php bin/magento setup:static-content:deploy en_US

Compile dependency injection using the command line interface

php bin/magento setup:di:compile

Reindexing all magento indexers using the command line interface

php bin/magento indexer:reindex

View the list of indexers using the command line interface

php bin/magento indexer:info

Show the status of the indexer using the command line interface

php bin/magento indexer:status

Show the mode of all indexers using the command line interface

php bin/magento indexer:show-mode

Check cache type status using the command line interface

php bin/magento cache:status

Enable/disable all cache types using the command line interface

php bin/magento cache:enable (or disable)

Enable/disable specified cache type using the command line interface

php bin/magento cache:disable (or enable) [cache_type]

Magento recommends that you disable only the cache types you don’t need while developing for best practice, instead of disabling all caches. This increases unnecessary load time of all pages and as a result it may also increase your development time.

Enable maintenance mode using the command line interface

php bin/magento maintenance:enable

Allow IP on maintenance mode using the command line interface

php bin/magento maintenance:allow-ips --ip=192.0.2.10 --ip=192.0.2.20

Flush or clean the Magento cache using the command line interface

php bin/magento cache:flush (or clean)

Let’s try to understand the main difference between cleaning and flushing cache types.

  • Cleaning a cache type deletes all items from enabled Magento cache types only. In other words, this option does not affect other processes or applications because it cleans only the cache that Magento uses. Please note that disabled cache types are not cleaned.
  • Flushing a cache type purges the cache storage, which might affect other processes for applications that are using the same storage. Flush cache types if you’ve already tried cleaning the cache and you’re still having issues that you cannot isolate.

If you find this or anything else difficult in your Magento installation, configuration or deployment best practices, we’re happy to help you. Feel free to get in touch!

You may be all too familiar with the following scene at company meetings. At the end of the meeting, your employees gather up their belongings hastily and you hear them grumbling to each other about how this information could have been relayed in a memo. Disappointing as it may be, they might be correct. Instead of allowing these negative meetings to continue happening, consider the benefits of stand-up meetings. At KiwiCommerce, we start our days with 20-minute stand-up meetings. Understanding what these meetings are and how they help can allow you to see their benefits.

 

Understanding Stand-up Meetings

When you hear about a stand-up meeting for the first time you might wonder if it literally is a meeting where you stand up. In this case, the name is indeed quite telling. At these meetings the employees all stand up and of course, accommodations are made if necessary. You may wonder why anyone would want to stand up for the duration of a meeting, especially if you’ve been subject to particularly long agendas in your career. The fact that the meetings are stand-up style is a strong indicator that they aren’t going to last for a long time.

 

Knowing How We Function

Businesses can conduct stand-up meetings in a variety of ways. Our meetings in the morning are about 20 minutes long. Companies can determine different lengths if doing so suits their purposes, but the point is to be brief. The major goal of our meetings is to discuss what happened yesterday and what will happen today, and each employee shares. During this time, employees can receive guidance from one another and get a clear picture of what they are going to achieve that day. Now that you know what the stand-up meetings are and how they are conducted here, you can begin to learn about the benefits.

 

Motivating Employees

At many jobs, people come in and immediately start work. They may be rushing in the door after encountering a great deal of traffic, or they may feel in a frenzy about the stack of work on their desk to complete today. These beginnings are not necessarily motivating and can cause the day to start on a stressful note. Instead, bringing all of your employees together, discussing plans and gathering feedback can motivate everyone to have a productive day. Also, think about how much more productive you might feel if you had the chance to recap your successes of yesterday or get support on anything that you’re struggling with. You also don’t need to feel as though your work goes unnoticed as everyone is working towards a goal.

 

Staying Updated

Regardless of how large your company is, you may feel as though you never really know what is going on in other departments. This situation can leave you feeling detached from the business, especially in a larger company. By participating in a stand-up meeting, you get to know what is happening at the company in general. Also, you have the opportunity to receive and provide feedback. Even if you do not work with someone on a regular basis, you can still get to know this employee. Therefore, we believe the stand-up meetings help to develop a sense of community.

 

Procuring Solutions

When you are struggling with a task at work, you might try to hide it or put it to the bottom of your to-do list. You may feel as though you aren’t allowed to make mistakes or that you must always know which direction to go in. A stand-up meeting encourages you to share your struggles with your colleagues, as they do with you. In addition to feeling as though you can release this burden from your shoulders alone, you can also get feedback and support. You’ll know that your colleagues are there to help guide you to a suitable solution. These interactions among employees certainly lead to a strong rapport.

 

Prioritising Issues

Since these meetings are generally short, the issues that are of the highest priority come to the forefront. At some work meetings the same topics are brought up time and time again, even if the problems are menial, meaning employees may leave feeling as though nothing has been accomplished. During these stand-up meetings however, we prioritise the issues. Employees can leave feeling a greater sense of accomplishment knowing that the company has made progress.

 

Generating Quality

Remember that a major goal of these meetings is to work toward solutions together. Instead of sitting down at your desk for another day of feeling lost and confused, you can head to your desk with confidence. Even if you do like to work alone and to tackle challenges by yourself, remember that even the most independent people need guidance sometimes.

 

Establishing a Routine

Think about the last positive habit that you wanted to integrate into your life. You probably followed some sort of routine to make that change come into fruition. When you participate in a stand-up meeting every morning you are getting the chance to establish a new and healthy habit. Having a routine to start your day at work can actually have a useful effect on the rest of the work day.

 

Energising Yourself

While standing up at a meeting for 20 minutes isn’t the same as getting in a workout at the gym, it is certainly better than starting your day ready to take a nap in your chair. When you think about how tired you sometimes feel at the start of a work day, you may recognise how beneficial it could be to have some time to stand up when that day begins. This eCommerce consultancy allows its employees to begin their days in an invigorating manner and even our teams working remotely are able to join in via video link.

 

At KiwiCommerce, we feel the benefits of stand-up meetings, and our clients have reported the same. A culture helps to provide expectations for the company, and it also infuses a sense of unity. We know what we are working towards together and we feel proud of our accomplishments. Try it in your office from tomorrow morning!

Let’s go through the journey of the epic Meet Magento UK 2018 event, a wonderful event where successful minds in the industry shared their expertise on the latest trends and their thoughts on the eCommerce industry.

The entire event was for two days and to warm up everyone attending the event on the first day, an intensive Magento Contribution hackathon took place, with many Magento Core Developers and Architects participating in the event.

Among many contributors, a few made their first ever contribution to the community!

After the fun-filled and brainstorming contribution day, an exclusive reception followed for merchants to network with other merchants and discuss hot topics in the industry. The evening was complimented by a panel of speakers. Among the panel members was Rabia Qureshi (Senior Customer Success Manager at JH).

As Day 2 began, the Keynote speaker Peter Sheldon (VP of Strategy at Magento Commerce) spoke about his eCommerce experiences. What was most impressive about the talk was how he highlighted that the Internet of Things (IoT) has allowed a huge variety of shoppable items to be made available across all channels, which has indirectly pushed eCommerce even further. He also shared his thoughts on how personalised shopping experiences and storytelling can be the key to bringing massive change in what can actually be sold online to consumers.

Among the many topics covered by many well-known speakers during the event, one particular topic we enjoyed was by Rob Long on “how data can fuel eCommerce growth”. We know how the data science industry has touched every aspect of technology and that data can indeed help us understand the ups and downs of eCommerce, as well as informing us where to focus our efforts in order to climb further up the growth scale.

The second keynote speaker Brian Green had really good insights that he shared regarding Magento’s platform. He talked about Magento’s roadmap priorities and shared many examples on the power of an open ecosystem.

Before we continue on the topics covered by Brian Green, we would like to Congratulate Magento again on being named as the leader in the Gartner Magic Quadrant for Digital Commerce. Below we see Brian talking on Gartner Magic Quadrant.

A lot of praise was given to the UK community which we’re incredibly proud to be a part of, but specifically to the top contributors for all they do to promote and support the community. Kudos goes to them!

During the event, a demo was given by Dave Macaulay showing how quickly one can build a complete custom landing page without using code, which was seriously amazing. This could be pretty useful to show to clients who are considering a Magento build to give them an idea of what they can expect 🙂

While the event wrapped up after Brian Green’s keynote, everyone headed off to the Voltaire bar to call it a day in style. We’re in the majority in believing that no Magento event should end without a networking party!

Finally, we’d like to say a warm thank you to all the sponsors and organisers for putting on this event. As the years go by the Magento Community grows stronger than ever. See you next year at Meet Magento UK 2019! #MMUK19

Experts across any industry will admit that there is no hard formula for success. Regardless of whether you’re an instructor, specialist, legal advisor or work in retail, there might be some industry specific procedures and rules to stick to, yet a few of the best practices across any industry include strategising, monitoring, reviewing and communicating.

 

Project management is no different. Most project managers will learn the basics at the very beginning as in other industries, including the best ways to plan and budget their projects, but after some time each individual finds their own specific techniques and ways to deal with projects, big or small, and it’s these techniques that make them successful or not. We like to think that our Magento project managers have that certain X factor that sets them apart from the rest, and happily, our clients confirm this regularly!

 

From the outside, managing a project appears to be so simple. You set tasks, due dates, a financial plan, item owners from within the business etc. and it seems you are done with planning the project at this point, but in reality, project management is not as simple and straightforward as it seems to be. Sometimes individuals are appointed to the project (from both client and agency side) who aren’t as qualified as needed, don’t understand what the project expects from them or they provide incorrect or partial information. Sometimes business priorities mean changes to timescales and therefore due dates can’t be met. Put all the more succinctly, project management is difficult, forever changing and requires thorough attention.

 

So what can organisations and project managers do to enhance the chances of the project being finished on time and to a financial plan? Here are the two most important aspects to consider for successful project management that I have depended on for years – the ones I can’t resist the urge to share!

 

Client Involvement

The client needs to know as much about a project then the team does. The client is the one with the vision and, let’s be realistic, the gold!

 

So how do we proceed with the client positively? Communication is above all – the more we keep in contact, the better it is for the project. The project manager and the team will have a million things to ask about the project and the client always has questions about progress; so our project managers give the customer weekly progress reports along with requirements in order to ensure progress can be made. There may be issues that can be addressed rapidly through regular communication, meaning work doesn’t need to come to a standstill while we wait for a response.

 

While our teams work in the background progressing the tasks, the client fulfills the needs of the project by approving tasks, providing as much information and authorisation as required and characterising the project scope to the project manager and the team. The frequency of project reviews majorly depends on the complexity of the project, however we like to have weekly catch ups over the phone with our clients as a minimum. The less complex projects may have fewer reviews as these may not be necessary, whereas more complex projects will require frequent meetings which are essential for the progress of the project.

 

The Team (Of Course)

The next important aspect of your project management is obviously your development team, because they are the ones responsible for writing the code, however their role is not simply development. They will review the code, help to indicate any future requirements and give information, suggestions and guidance on the project progression from a technical point of view. As a project develops we always find there are queries from and suggestions for the client, so the project managers will loop in the team members to work with them to suggest a specific way forward at particular pit-stops, and to help the clients with their more complex queries. A successful team should have the capacity to overcome any barriers that may happen amid the project, if the project is managed efficiently and the team members work together.

 

It is also important for the project manager to get to know the team. When they get to know the team they are working with it takes them one step closer to making the project successful. This is because learning about each individual in the team gives them the ability to delegate tasks to the person who’s most capable of executing them correctly and quickly.

 

Finally, everybody cherishes getting positive feedback, even your clients. Make sure you inform your team members if a client compliments them and give them a little reward; even if it’s just an early finish or a box of chocolates. A little bit of recognition goes a long way and will encourage other team members to go the extra mile to please your clients also. Likewise if your team feel a client is particularly helpful and responsive, allowing them to progress the project without delay, it’s nice to drop them a note they can send upwards on their side. Positive feedback is always welcome and helps build a long term relationship. You may even get a client quote or testimonial for your website or marketing material down the line!

 

What Do You Think?

Of course, we believe the above aspects are the principal factors that you need to keep in mind when managing a project, however factors like good organisation, use of appropriate technologies, the team formation, clients expectations, workflow, budget and outcome means that every project is unique. The main thing to remember is that even though you may be considering a number of factors, if you keep communication at the forefront you’ll all be working collectively to build a project you can be proud of!

 

So what about you? Do you have your own project management secrets? Let me know in the comments section below!

Developing a website is a large project with many points to consider, from client expectations to the delegation of tasks.  Advancement of any website on an extensive scale is a complex task, however an eCommerce website has its own specific requirements. Of all the bad practices I’ve seen in eCommerce development, I feel that the worst is ignoring the little things and the elements necessary to support the website that are not core development items. This doesn’t change regardless of the platform you develop it on.

 

Taking the platform into consideration, I firmly believe that Magento is more engaging than any other platform existing today. If incorporated well, Magento’s broad features can be utilised to give an extraordinary eCommerce experience. Yet, as I said earlier, regardless of the platform, executing a project well isn’t generally the most effortless thing on the planet. Throughout the years, I’ve seen people missing the smallest yet the most important aspects that result in poor Magento implementation and ongoing management, which is disappointing when these changes are so simple.

 

Nobody wants to see another list of Magento’s best practices, so we’ll stay away from that. Instead, I’ve detailed a few things that are easy to miss, their impact on an eCommerce project and the solution.

 

Downtime is Expensive

Just a 2 second delay on the checkout page alone could cost a million pound loss to your business over time, and if a 2 second delay can do this to your business, imagine what hours will do. Even one hour of downtime because of a site blackout or a malicious attack by crawlers can significantly affect a retailer’s income and reputation, particularly if it happens at the time when people prefer shopping online rather than visiting a store.

 

With the end goal to keep you from losing clients because of moderate load times, you’ll need to ensure your site is advanced enough to keep running as fast as could reasonably be expected. There are a couple of approaches that we make use of on our Magento sites that help them to run all the more easily and reduce the risk of downtime. You can install site speed extensions, reduce the size of imagery on the site, keep your site streamlined and remove unnecessary items on the page to allow the site to load quicker.

 

Robots – The Bad Boys

Bots should be able to rapidly and effortlessly crawl your web pages, this is because when a Googlebot lands at your site, its first point of access is your site’s robot.txt file. Creating a robots.txt file is like giving Google a contents page to your website. It tells the Googlebots where the information is and how it’s structured, while telling it what we don’t want it to spend time on. We make it easy and quick for the bots to crawl the relevant pages on the site, because the less time Googlebots spend on irrelevant parts of your site and the more focus they give to the relevant pages (the ones that you want to appear in the search engines), the better for your site performance in the long run.

 

Platform Requirements – Hosting

Magento is one of the strongest eCommerce platforms but it has one of the most enormous code bases. Utilizing such a great platform for your eCommerce development comes with its own requirements, so don’t assume that you can simply launch it from a common shared hosting package and wait for a worthy store performance. The platform itself requires a dedicated server or a solid cloud hosting solution for your store to perform well.

 

Often, store owners use inadequate hosting packages to save money and then blame Magento for their website speed problems. There are a few elements that can affect loading time, but sometimes a problem arises from the server side as well, so proper hosting is really important and is a fundamental part of your e-commerce business success.

 

Absence of Monitoring

It might seem unnecessary once you’ve developed and launched a great Magento website, yet the absence of sufficient ongoing monitoring is an issue we often see. Insufficient reviewing, monitoring and housekeeping when it comes to store functionality, security and the level of performance implies there’s a missing link and a greater chance of errors going unnoticed, which can damage the site’s ability to reach the business goals.

 

There’s no reason for developers not appropriately monitoring an eCommerce site after it has been deployed, as the site naturally grows and changes as it’s being used. Plus it could pick up a virus or a security issue along the way. Paying attention to the details and keeping your website clear and ordered is mandatory for building trust with customers and for your brand reputation, as mistakes and issues on site slash conversion rates and return visits massively.

 

KiwiCommerce provide various technical support and monitoring packages that comprehensively monitor your website to identify any issues and keep your site performing as you would expect.

 

Final thoughts

Keeping these small things in mind during the development of an eCommerce site can help you ensure that you are providing the best experience to your clients. Of course, these are only a few of the elements we feel are necessary, please share your essential eCommerce development tips with us in the comments section!

Optimising your website so that it appears in the search engines when people type in relevant keywords and phrases is an ongoing task, but a highly rewarding one. I’ve always described successful optimisation as a marathon and not a sprint and there are two distinct areas of focus when it comes to search engine optimisation (SEO) – on-page and off-page optimisation. These form the essential parts of your website’s digital marketing strategy.

 

What is On-Page SEO?

The main focus of on-page SEO is to optimise your website so that the search engine bots understand completely what each section and each page of your website is about. By doing this, the bots can easily and confidently match your web pages with the queries people type into the search bar. With on-page SEO you can determine how the bots will crawl your site, navigate the site structure and index the pages of your website. So how do we do this?

 

When it comes to what your customers will see when we talk about on-page SEO, we’re talking about the way the site is structured, the content on each page, the way the site displays on multiple devices and any social aspects and usable features that people experience when they land on your pages. If done correctly, your customers won’t realise the site has been optimised for the search engines; they will simply see a content rich, usable and accessible website.

 

Google and the other search engines have one main job, which is to serve the most relevant, useful and popular web pages that match perfectly to what they think the user is looking for; so by making your website tick all of the boxes on-page we have a much higher chance of appearing further up in the rankings, gathering more visitors and ultimately converting more.

 

As well creating quality content and making sure users can share, engage with and navigate your site well, it’s important to look at the technical elements behind the pages; such as load time, meta information, imagery, coding and mobile compatibility; all of which are major factors that determine user engagement, value to the user and thereby the ranking of your website. Another major part of on-page SEO, and one that we recommend with any re-build or new website, is to complete a full keyword strategy to identify the keywords that are relevant to your business, based on thorough and targeted keyword research. The keyword strategy ultimately helps form the entire structure of your site and the content within it.

 

It may seem that on-page SEO is just a big one time project, however once you have your SEO house in order for your exiting pages and structure, there’s the development and expansion of your site to work on. Google values sites that are updated frequently as this suggests an active business, so it’s important to create additional content to engage your audience and prove your ongoing authority as a business. A decent SEO company will create a content plan which includes a huge list of potential keywords and phrases that your website can rank for, and will provide creative ways to include these in your site on an ongoing basis.

 

What is Off-Page SEO?

Off-Page SEO refers to all the tasks that you perform to promote your website, in order to increase it’s rankings in the search engines results page (SERPS). Off page SEO is basically a way to show Google how popular your pages are, which gives it confidence in listing your pages in the SERPS. A lot of off-page SEO includes marketing, branding and PR activities, however it’s important to be clever and have in mind the SEO potential and requirements as you complete these activities.

 

One of the best ways to show Google how popular your pages are is to gain links from other trusted websites that point back to your website. Increasing social mentions and sharing between social platforms also counts. Essentially, if you’ve got a lot of quality links pointing to the pages of your website and a lot of people talking about your products and services, the search engines will interpret that you’ve got some great content that’s valuable for users. This, along with great on-page SEO is the key to achieving more rankings and ultimately doing more business.

 

On-Page Is Essential

Even if you have a website that is ranking high on search engines, you cannot just stop practicing on-page SEO. You never know when a competitor will update their optimisation and leave you behind in the SERPS out of nowhere. You need to fight to keep and improve your positions.

 

On-page SEO includes:

  • Page content optimisation
  • Title tags & meta data optimisation
  • Headings (H1, H2, H3)
  • URL Structure
  • Page Load Speed
  • Alt-text for Images & Videos
  • Internal Links

 

Off-Page SEO relies majorly on quality links and social sharing

Off-page SEO determines the quality and domain authority of your website. If your website appears authoritative and popular by having a lot of votes (links) from other high quality websites, plus it gets a lot of mentions from users on social platforms it stands a much better chance of being ranked highly in the results pages.

 

Off-page SEO include:

  • Link Building
  • Guest Blogging
  • Social media marketing
  • Press releases

 

Which One is More Important?

You cannot just choose one between On-Page and Off-Page SEO and if you do it’s like selecting either the floor or the ceiling while building a house. On-page and off-page SEO go hand in hand and both complement each other in order to improve the rankings of your website. It is crucial that you perform both of these optimisation techniques so that the crawlers and the users both understand the worth of your website, leading to higher rankings and increased visitor numbers.

Search