How to integrate and add new products in the marketplace using WordPress? (Design 1)

To facilitate understanding, the entire process has been divided into two:

1. Steps to integrate product into the automation platform.

2. Steps to add product on the marketplace using WordPress.

Steps to integrate product into the automation platform

To add products into the automation platform:

- Login to the automation platform admin portal.

- Go to Settings >> Products/Services >> Product & Pricing.

- The automation platform has five default products - Cloud, Dedicated Server, Domain, VPS and Hosting. If your product, does not fall into any of the above categories, then click on Add Product Type button on the top left corner of the Genera Product Settings page.

- It will have a drop-down from which you can select your product type and enter the same in the adjacent box.

- Next, once you create the product type, it will start to reflect on the General Product Settings. You can click on the newly created product and create vendors under it.

Home >> Settings >> Products/Services >> General Product Settings >> Vendor >> Product name

Under every vendor you will find the respective product names. You can even add a new product name by clicking on the Add Product Name button.

- By clicking on the Product Name, you can manage its pricing, configuration and other settings.

- You can create a new plan from this section.

- Once you create the plan and save it, go to: Settings>>Assets>>Hardware Product Family, click on ‘Hardware Product List’.

- Click on ‘Add Hardware Product’. Enter the required information and click on ‘Save’.

- Go back to Settings >> Products/Services >> Product & Pricing >> Vendor >> Product Name >>Product Plan and click on ‘Edit’ to edit the new plan created.

- Update the ‘Pricing’ section and note down the plan ID. Enter the required information and click on ‘Save.’

Integrate this plan in the marketplace using WordPress:

You will need to login to WordPress admin panel with the your credentials to integrate the new plan on the marketplace.

- Upload the product image to WP gallery – Media>>Add Media.

- Click on ‘Pages’ from left menu on WP dashboard.

- Go-to the page you want to add product. Click on ‘edit’ to edit the page.

- Copy the code, similar to below example and scroll down to the end of the page. Paste copied code by leaving last 3 code lines. Please refer to below screenshot as an example.

Open

[insert_php]

unset($res);

unset($result);

unset($orderlink);

unset($price);

$res = do_shortcode('[wireless_n300 plan_id="70"]'); [Update Plan ID]

$result = json_decode($res,true);

if(isset($_SESSION['userid']) && $_SESSION['userid']!='' && $_SESSION['userid']!=0)

{

if(isset($result['data']['quantity']) && $result['data']['quantity']>0)

{

$qty_div_class = 'qty';

$qty_div_content = 'Qty - '.$result['data']['quantity'];

$price_div_style = 'display:block;';

$qty_div_style = 'display:block;';

}

else

{

$qty_div_class = 'stock-out';

$qty_div_content = 'Out Of Stock';

$price_div_style = 'display:none;';

$qty_div_style = 'display:block;';

}

}

else{

if(isset($result['data']['quantity']) && $result['data']['quantity']>0)

{

$qty_div_class = 'qty';

$qty_div_content = 'In Stock';

$price_div_style = 'display:none;';

$qty_div_style = 'display:block;';

}

else

{

$qty_div_class = 'stock-out';

$qty_div_content = 'Out Of Stock';

$price_div_style = 'display:none;';

$qty_div_style = 'display:block;';

}

}

$planid = base64_encode($result['data']['planid']);

$plan_link = 'linksys_products?plan= RE6700 AC1200 AMPLIFY Dual-Band Wi-Fi Range Extender&pdn_id='.$planid;

[/insert_php]

<div class="item col-md-4 col-sm-6 col-xs-12">

<div class="thumbnail"><a href="[insert_php]echo esc_url(home_url( '/' )); echo $plan_link;[/insert_php]"><img src="[insert_php]echo esc_url(home_url( '/' ));[/insert_php]wp-content/uploads/2018/08/re6700-ac1200-wi-fi-range-extender.png" alt="" /></a><div class="caption">

<h4 class="product-heading"><a href="[insert_php]echo esc_url(home_url( '/' )); echo $plan_link;[/insert_php]">Linksys RE6700 AC1200 AMPLIFY Dual-Band Wi-Fi Range Extender</a></h4>

<div class="[insert_php] echo $qty_div_class; [/insert_php]" style="[insert_php] echo $qty_div_style;[/insert_php]">[insert_php] echo $qty_div_content; [/insert_php]</div>

<div class="prices" style="[insert_php] echo $price_div_style;[/insert_php]">[insert_php] echo $result['data']['currencyDetails']['prefix'].' '.$result['data']['price'].'/Qty'; [/insert_php]</div>

</div>

</div>

</div>

- Once you are done updating the code, click on ‘Update’ to publish the changes to the market place.

- Go-back to ‘Pages’ section. Search for the page on which product details needs to be updated. Click on ‘edit’ to edit the page.

- Copy the code, similar to below example and paste it as shown in the screenshot below.

Open

else if($_GET['plan']=='RE6700 AC1200 AMPLIFY Dual-Band Wi-Fi Range Extender')

{

$product_name = 'RE6700 AC1200 AMPLIFY Dual-Band Wi-Fi Range Extender';

$product_image = 're6700-ac1200-wi-fi-range-extender.png';

$product_image_path = 'https://marketplace.qooltechs.com/wp-content/uploads/2018/08/re6700-ac1200-wi-fi-range-extender.png';

$plan_desc='<ul><li>AC1200 Wireless Speed</li><li>Spot Finder Technology</li><li>Simultaneous dual band (2.4 GHz and 5 GHz)</li></ul>';

- Once code is updated with required information, click on ‘Update’. Refresh your browser to see the changes on market place.

Steps to add product on the marketplace using WordPress

1) Steps to add products in Office 365 category

a) Log-in to WordPress admin panel with the given credentials to integrate the new plan on the marketplace.

b) Click on ‘Pages’ from left menu on WP dashboard.

c) Go-to the Microsoft page you want to add/edit product. Click on ‘edit’ to edit the page.

d) Copy the code, given in Green color and paste it just below to it and change the product name and product specification ID, which will call the product details pop-up. Please refer to below screenshot as an example.

<div class="panel panel-default">

<div class="panel-heading" role="tab" id="headingOne">

<h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Office 365</a> </h4>

</div>

<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

<div class="panel-body">

<div class="row pop-accordian">

<div class="col-md-4 col-sm-4">

<div class="popup-box-plan"><a href="#" data-toggle="modal" data-target="#business">Office 365 Business</a> </div>

</div>

<div class="col-md-4 col-sm-4">

<div class="popup-box-plan"><a class="line-two" href="#" data-toggle="modal" data-target="#business-essentials">Office 365 Business Essentials</a> </div>

</div>

<div class="col-md-4 col-sm-4">

<div class="popup-box-plan"><a class="line-two" href="#" data-toggle="modal" data-target="#business-premium">Office 365 Business Premium</a> </div>

</div>

<div class="col-md-4 col-sm-4">

<div class="popup-box-plan"><a href="#" data-toggle="modal" data-target="#business-e1">Office 365 Enterprise E1</a> </div>

</div>

<div class="col-md-4 col-sm-4">

<div class="popup-box-plan"><a href="#" data-toggle="modal" data-target="#business-e3">Office 365 Enterprise E3</a> </div>

</div>

<div class="col-md-4 col-sm-4">

<div class="popup-box-plan"><a href="#" data-toggle="modal" data-target="#business-f1">Office 365 F1</a> </div>

</div>

<div class="col-md-4 col-sm-4">

<div class="popup-box-plan"><a href="#" data-toggle="modal" data-target="#business-proplus">Office 365 ProPlus</a> </div>

</div>

</div>

</div>

</div>

</div>

</div>

Here you need to add/edit the product detail (POPUP) code. Below is the Highlighted stuff which elaborated as:

Product Specification: here you need to match the product specification’s as given above in block, by which you can open the popup for product detail.

Product Name: here you need to update the Same name of the product which you have mentioned above.

Product ID: here you need to update the Product ID which you got from automation platform while creating product in automation platform Admin.

Product Description: here you can update and Modify the product details as per you need.

<div class="modal fade plan-popups width50 enque" id="business-proplus1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

<div class="modal-dialog" role="document">

<div class="modal-content login-frm cont">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>

</p>

<h4 class="modal-title" id="myModalLabel">Office 365 ProPlus1</h4>

</div>

<div class="modal-body"> [insert_php]

unset($res);

unset($result);

unset($price);

$res = do_shortcode('[wireless_n300 plan_id="32"]');

$result = json_decode($res,true);

if(isset($_SESSION['userid']) && $_SESSION['userid']!='' && $_SESSION['userid']!=0)

{

$price_result="Price: ".$result['data']['currencyDetails']['prefix']." ".$result['data']['price'].'/Qty';

}

else{

$enquire_btn = 'display:none;';

$price_result="";

}

[/insert_php]

<div class="product-desc popup">

<ul>

<li data-original-title="" title="">Test me Business email hosting not included </li>

<li data-original-title="" title="">Desktop versions of Office 2016 applications: Outlook, Word, Excel, PowerPoint, and OneNote, plus Access for PC only Current Office application versions are Office 2016 for Windows and Mac. Customers with an active subscription will be entitled to the newest versions when available. </li>

<li data-original-title="" title="">Web versions of Word, Excel, and PowerPoint </li>

<li data-original-title="" title="">One license covers 5 phones, 5 tablets, and 5 PCs or Macs per user Compatible with Windows 7 or later, Office 2016 for Mac requires Mac OS X 10.10.</li>

<li data-original-title="" title="">File storage and sharing with 1 TB OneDrive storage</li>

<li data-original-title="" title="">Skype for Business client available for PC and Mac; Skype for Business service not included </li>

<li data-original-title="" title="">Maximum number of users: unlimited </li>

</ul>

</div>

<div class="modal-box-price"><span>[insert_php] echo $price_result; [/insert_php]</span></div>

<div class="btn-group cart popup" style="[insert_php] echo $enquire_btn; [/insert_php]"><a href="javascript:void(0);"

onClick="document.getElementById('login_into_ms').submit();" class="enquiry_now">Order Now</a> </div>

</div>

</div>

</div>

</div>

1) Steps to add products in Cloud Product

1) Log-in to WordPress admin panel with the given credentials to integrate the new plan on the MP.

2) Click on ‘Pages’ from left menu on WP dashboard.

3) Go-to the Microsoft page you want to add/edit product. Click on ‘edit’ to edit the page.

4) Copy the code, given in Green color and paste it just below to it and change the product name and Product specification ID, which will call the product details pop-up. Please refer to below screenshot as an example.

<div class="panel panel-default">

<div class="panel-heading" role="tab" id="headingTwo">

<h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Cloud Product</a> </h4>

</div>

<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">

<div class="panel-body">

<div class="row pop-accordian">

<div class="col-md-4 col-sm-4">

<div class="popup-box-plan"> <a href="#" data-toggle="modal" data-target="#ex1">Exchange Online (Plan 1)</a> </div>

</div>

<div class="col-md-4 col-sm-4">

<div class="popup-box-plan"> <a href="#" data-toggle="modal" data-target="#ex2">Exchange Online (Plan 2)</a> </div>

</div>

<div class="col-md-4 col-sm-4">

<div class="popup-box-plan"> <a href="#" data-toggle="modal" data-target="#sharepoint1"> SharePoint Online (Plan 1)</a> </div>

</div>

<div class="col-md-4 col-sm-4">

<div class="popup-box-plan"> <a href="#" data-toggle="modal" data-target="#sharepoint2">SharePoint Online (Plan 2)</a> </div>

</div>

<div class="col-md-4 col-sm-4">

<div class="popup-box-plan"> <a class="line-two" href="#" data-toggle="modal" data-target="#skype1">Skype for Business Online (Plan 1)</a> </div>

</div>

<div class="col-md-4 col-sm-4">

<div class="popup-box-plan"> <a class="line-two" href="#" data-toggle="modal" data-target="#skype2">Skype for Business Online (Plan 2)</a> </div>

</div>

<div class="col-md-4 col-sm-4">

<div class="popup-box-plan"> <a class="line-two" href="#" data-toggle="modal" data-target="#azure">Azure Public Cloud</a> </div>

</div>

</div>

</div>

</div>

</div>

• Here you need to add/edit the product detail (POPUP) code. Below is the Highlighted stuff which elaborated as:

Product Specification: here you need to match the product specification’s as given above in block, by which you can open the popup for product detail.
Product Name: here you need to update the Same name of the product which you have mentioned above.
Product ID: here you need to update the Product ID which you got from automation platform while creating product in automation platform Admin.
Product Description: here you can update and Modify the product details as per you need.

<div class="modal fade plan-popups width50 enque" id="ex1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

<div class="modal-dialog" role="document">

<div class="modal-content login-frm cont">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>

</p>

<h4 class="modal-title" id="myModalLabel">Exchange Online (Plan 1)</h4>

</div>

<div class="modal-body"> [insert_php]

unset($res);

unset($result);

unset($price);

$res = do_shortcode('[wireless_n300 plan_id="32"]');

$result = json_decode($res,true);

if(isset($_SESSION['userid']) && $_SESSION['userid']!='' && $_SESSION['userid']!=0)

{

$price_result="Price: ".$result['data']['currencyDetails']['prefix']." ".$result['data']['price'].'/Qty';

}

else{

$enquire_btn = 'display:none;';

$price_result="";

}

[/insert_php]

<div class="product-desc popup">

<ul>

<li data-original-title="" title="">Each user gets 50 GB of mailbox storage and can send messages up to 150 MB in size </li>

<li data-original-title="" title=""> Users can connect supported versions of Outlook to Exchange Online, so they can use the rich client application they already know </li>

<li data-original-title="" title="">For web-client access, Outlook on the web provides a premium browser-based experience that matches the look and feel of the full Outlook client </li>

<li data-original-title="" title="">Stay focused on the most important messages with Clutter, which applies machine learning to clean up your inbox and set up rules that match the way you work </li>

<li data-original-title="" title=""> </Compare calendars to schedule meetings and access collaboration features, including shared calendars, groups, the global address list, external contacts, tasks, conference rooms, and delegation capabilitiesli>

<li data-original-title="" title="">Every mailbox is protected with premier anti-malware and anti-spam protection via Exchange Online Protection </li>

<li data-original-title="" title=""> Keep your inbox clean by automatically moving old messages to an In-Place Archive </li>

</ul>

</div>

<div class="modal-box-price"><span>[insert_php] echo $price_result; [/insert_php]</span></div>

<div class="btn-group cart popup" style="[insert_php] echo $enquire_btn; [/insert_php]"><a href="javascript:void(0);"

onClick="document.getElementById('login_into_ms').submit();" class="enquiry_now">Order Now</a> </div>

</div>

</div>

</div>

</div>