Skip to main content

OpenCart App Integration

Goal: Create an integration for POWr Form Builder and POWr Social Feed to be listed in the OpenCart Extension Store. Once installing each App, the App can be easily added to any page or product in the OpenCart shop and edited on POWr.io.

Form Builder Specs

Scenario: Installing POWr Form Builder App on an OpenCart site should create a “POWr Form Builder” section in the OpenCart sidebar.

GIVEN a user with an OpenCart website,

WHEN user installs POWr Form Builder App

THEN “POWr Form Builder” section should appear under the “Design” section (or as close as possible to Design)

alt_text

Scenario: Link to Create New Form Builder in “POWr Form Builder” section in the OpenCart sidebar.

GIVEN a user has installed POWr Form Builder App on OpenCart,

WHEN user clicks POWr Plugins section in the sidebar

THEN three submenu links should appear:

Create New Form Builder => https://www.powr.io/plugins/form-builder/standalone \ Manage POWr Plugins => https://www.powr.io/users/me

POWr Help => https://www.powr.io/knowledge-base

Scenario: In OpenCart theme editor, Form Builder should be available as an option.

GIVEN a user has installed POWr Form Builder App on OpenCart,

WHEN user clicks Design => Layout and selects a section

THEN POWr Form Builder should be available as an module to add to any content position.

alt_text

Scenario: Adding POWr Form Builder module to a layout position should add the POWr HTML in that location.

GIVEN a user has installed POWr Form Builder App on OpenCart,

AND user clicks Design => Layout and selects a place to add a POWr Form Builder Module \ WHEN user visits their live page where Form Builder Module has been added

THEN a default POWr Form Builder should appear on the page in the specified location.

\ The corresponding HTML to add:

<script src="https://www.powr.io/powr.js?platform=opencart"></script><div class="powr-form-builder" id="UNIQUE_ID"></div>

Where UNIQUE_ID is generated like the following (javascript):

var unique_label =

'xxxxxxxx_'.replace(/[x]/g, function(c) {

  var r = (Math.random() * 16) | 0,

    v = c == 'x' ? r : (r & 0x3) | 0x8;

  return v.toString(16);

}) + new Date().getTime();

// Or PHP example:

function generate_powr_instance() {

      $alphabet = 'abcdefghijklmnopqrstuwxyzABCDEFGHIJKLMNOPQRSTUWXYZ0123456789';

      $pass = array(); //remember to declare $pass as an array

      $alphaLength = strlen($alphabet) - 1; // Put the length -1 in cache.

      for ($i = 0; $i &lt; 10; $i++) { // Add 10 random characters.

        $n = rand(0, $alphaLength);

        $pass[] = $alphabet[$n];

      }

      $pass_string = implode($pass) . time(); // Add the current time to avoid duplicate keys.

      return $pass_string; // Turn the array into a string.

    }

Scenario: User can edit unique POWr id for a Form Builder added to a particular location.

GIVEN I have already created a Form Builder on POWr

AND would like to add that Form Builder to a specific layout position in OpenCart \ WHEN I click the Edit (pencil) icon for the particular Form Builder Module Instance

THEN a field for Unique ID should be present (and prepopulated with a default ID from previous spec)

AND a link to “Edit Form Builder” => https://www.powr.io/plugins/form-builder/standalone?unique_label=UNIQUE_ID \ AND a link to “Stuck? We’re here to help!” => https://www.powr.io/knowledge-base

alt_text

Scenario: user can add POWr Plugin from Summernote text editor.

GIVEN a user has installed POWr Form Builder App on OpenCart

WHEN user visits an editor page with Summernote editor (e.g. Product Editor) \ THEN a POWr Icon should appear in Summernote \ AND the Summernote plugin should allow user to add any POWr Plugin to the text area

Social Feed Specs

Identical to Form Builder specs with the following replacements: \ “Form Builder” => “Social Feed” \ “form-builder” => “social-feed”

Combined Specs

Scenario: Installing both POWr Form Builder and POWr Social feed should not create conflicts.

GIVEN a user with an OpenCart website,

AND user has installed POWr Social Feed App \ WHEN user installs POWr Form Builder App

THEN a “POWr Form Builder” sidebar menu should appear

AND a “POWr Social Feed” sidebar menu should appear \ AND either module should be able to be added within layout