Skip to main content

WooCommerce Integration Specs

Goal: Update our existing WooCommerce Extension to add a “POWr Form Builder” section to each product.

BUGS

**1. FormBuilder is installed by default (reported: Nov 11, 2019)**

How to reproduce it?

  1. Create a new product without installing POWr Plugin
  2. Save/Update it
  3. Go to preview
  4. You will see formBuilder by default.
  5. See details

2. Extra plugin installed

  1. Create a new product without installing POWr Plugin
  2. Save/Publish it
  3. Install POWr Plugin
  4. Install Form Builder - Poll on the Paragraph element
  5. Install Contact Form - Survey on Product Short Description
  6. Save/Publish it
  7. There are supposed to have 4 Apps installed, however, 5 apps are rendering on that page.
  8. Video > https://www.loom.com/share/c264715a12694168b79f44688e8326e9

3. Pop-out settings showing powr.io (prod)

  1. Install Mailing list on the product description
  2. Save/Publish it
  3. Go to the Preview page
  4. Click on Edit Mailing List button
  5. Video > https://www.loom.com/share/d48f4977a46c446f85ea9a8857ad8372

4. Not able to Activate Form Builder after it is installed

  1. Install Form Builder
  2. Activate it

I get this error message below:

    Plugin could not be activated because it triggered a fatal error.


    Fatal error: Uncaught Error: Class 'FormBuilder\WP_Widget' not found in C:\Bitnami\wordpress-5.2.4-1\apps\wordpress\htdocs\wp-content\plugins\powr-form-builder\plugin.php:135 Stack trace: #0 C:\Bitnami\wordpress-5.2.4-1\apps\wordpress\htdocs\wp-admin\includes\plugin.php(2222): include() #1 C:\Bitnami\wordpress-5.2.4-1\apps\wordpress\htdocs\wp-admin\plugins.php(175): plugin_sandbox_scrape('powr-form-build...') #2 {main} thrown in C:\Bitnami\wordpress-5.2.4-1\apps\wordpress\htdocs\wp-content\plugins\powr-form-builder\plugin.php on line 135

WP just upgraded to 5.3, It might be looking for 5.2 instead 5.3

Screenshot > https://www.screencast.com/t/npvi6e4eJhT

Specs

Scenario: Installing POWr Form Builder App on an WooCommerce site should create a “POWr Form Builder” menu item for each product.

GIVEN a user has installed and authenticated POWr form builder extension,

WHEN a product is selected

THEN “POWr Form Builder” should appear in left menu of product

alt_text

Scenario: Clicking on “POWr Form Builder” in a product should show configuration on the right side

GIVEN a user has installed and authenticated powr form builder extension,

WHEN user clicks “POWr Form Builder”

THEN configuration should appear on the right side

Scenario: Dropdown to select where to add Form Builder in the product configuration

WHEN a user clicks “POWr Form Builder” in a product

THEN a dropdown option to select where the Form Builder appears should be present

AND “Below the product description” should be selected by default

Details:

Label: Select where to insert POWr Form Builder

Dropdown options: Above the product description, Below the product description, Don’t display

Scenario: Preview of Form Builder in the product configuration

WHEN a user clicks “POWr Form Builder” in a product

THEN a preview of the Form Builder should be present

Details:

An iframe should be created in the configuration area. Inside the iframe the following HTML should be rendered:

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

Where UNIQUE_ID is a persisted globally unique identifier. If we need to generate this identified, it can be done as follows (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();

Scenario: Form should render on the preview and published product page

GIVEN a user has added “POWr Form Builder” in a product

WHEN a dropdown option is set to “Above the product description” or** “Below the product description”**

THEN The form builder should display on the product in the corresponding location.

Details:

The following code should be added where the form builder should appear (alternatively the script part can be added to the page header)

<script src="https://www.powr.io/powr.js?platform=woocommerce-integrated"></script>

<div class="powr-form-builder" id="UNIQUE_ID"></div>

Where UNIQUE_ID is the same persisted globally unique identifier created in the previous scenario.

Scenario: Dropdown to select where to add Form Builder in the product configuration

WHEN a user clicks “POWr Form Builder” in a product

THEN a dropdown option to select which POWr Plugin should be present \ AND Form Builder should be selected by default

AND when switching between options, the relevant plugin should be displayed

Details:

Label: Select POWr Plugin

Dropdown options: Form Builder, Social Feed, Countdown Timer

Tech note:

When user switches between between the plugins, the embed code should be updated as follows:

Form Builder is selected:

<div class="powr-form-builder" id="form-builder-UNIQUE_ID"></div>

Social Feed is selected:

<div class="powr-social-feed" id="social-feed-UNIQUE_ID"></div>

Countdown Timer is selected:

<div class="powr-countdown-timer" id="countdown-timer-UNIQUE_ID"></div>

Scenario: Sidebar when multiple POWr Plugins are installed

WHEN a user installs Form Builder plugin

AND a user installs Social Feed plugin

THEN both plugins should appear on POWr Plugins (main menu)

AND both plugins should appear on Product edit page