Skip to main content

Feature-based landing pages

Context: We want to create landing pages highlighting specific features on each of our plugins to increase content and help with SEO.

Landing pages we will create:

  • Form Builder:
    • Star Rating
    • Mailchimp Forms
    • Form File Upload
    • Multi-Step Form
  • Popup
    • Exit Intent Popup
    • Onclick Popup
  • Gallery
    • Secure Gallery
    • Gallery with Lightbox
  • PayPal Button
    • PayPal Donate Button
  • Comments
    • Anonymous Comments
  • Countdown Timer
    • Animated Countdown Timer
    • Repeat Countdown Timer

Full mock up can be seen here:

https://www.figma.com/file/0KSygWZxoDoWuZy3ieQQ1k/Feature-landing-page-Copy?node-id=64%3A2

Copies and simple copy keys can be found here: https://docs.google.com/spreadsheets/d/1Cpn9x1jaxr2MKgW5N5H789s4ws45xaRP_tpY5j3a7KI/edit#gid=714673333

Note - many sections of the page copy the sections from tutorial pages. Example - https://www.powr.io/tutorials/how-to-add-form-builder-app-to-your-shopify-site?app_slug_by_locale=form-builder&locale=en&platform=shopify&platform_type=plugin

\

Eng notes: \ Route: plugins/:app_type/features/:feature_name (from Daniyar) \ From Praneeta: ensure we are using restful routes. \ AppFeaturesSimpleCopy

    id => :integer,



    :app_detail_id => :integer,



      :slug_en => :text, (eg: form-file-upload)

      :created_at => :datetime,


      :updated_at => :datetime (edited) 


    related to AppSlugSimpleCopy via app_detail_id


    with an understanding that we will add more translations in the future if needed

Backfill for migration

Scenario: Feature landing pages should use the tutorial system (HAML).

Given an admin user has created both feature_name and plugin_name simple copies

When a feature landing page is generated

Then it should use the tutorial landing page HAML system.

Scenario: Feature-based landing pages should support multiple languages.

Given that a user is viewing POWr’s website in a different language

When the user is on a feature-based landing page

Then they should see all the generic copy, feature name, and custom quote translated into the viewing language

And the language dropdown will allow the user to change between languages.

Scenario: Feature-based landing pages should be added to sitemap.rb

GIVEN i go to powr.io/sitemap.xml

THEN a link should be present with the sitemap details for feature-based landing pages

First block​

alt_text

Scenario: The header of the feature landing page will be taken from feature.[app_name].[feature_name].header

Given an admin user has created feature.[app_name].[feature_name].header simple copy

When a feature-based landing page is generated

Then it should include the corresponding header.

Scenario: The subheader of the feature landing page will be taken from feature.[app_name].[feature_name].sub_header

Given an admin user has created feature.[app_name].[feature_name].sub_header simple copy

When a feature-based landing page is generated

Then it should include the corresponding sub header.

Scenario: There is a clear CTA on the page (same as tutorial landing pages).

Given that a user is on a feature-based landing page

When they click on the “Get Started for Free” button

Then they are taken to the app standalone page

Scenario: The header image should be taken from AWS

Given that there is a feature-based landing page for a plugin

When the page is rendered

Then the header image should be taken from https://powr.s3-us-west-1.amazonaws.com/Feature+landing+pages/[app_name]/[feature_name]

Quote block (second block)​

alt_text

Scenario: There should be a quote block as on tutorial pages

Scenario: The quote will be taken from feature.[app_name].[feature_name].quote.

Given an admin user has created feature.[app_name].[feature_name].quote simple copy

When a feature-based landing page is generated

Then it should include the corresponding quote.

Scenario: The quote author will be taken from feature.[app_name].[feature_name].author

Given an admin user has created feature.[app_name].[feature_name].author simple copy

When a feature-based landing page is generated

Then it should include the corresponding quote author.

Scenario: The quote image will be taken from AWS

Given that there is a feature-based landing page for a plugin

When the page is rendered

Then the header image should be taken from [https://powr.s3-us-west-1.amazonaws.com/Feature+landing+pages/quote+image/[](https://powr.s3-us-west-1.amazonaws.com/Feature+landing+pages/quote+image/comments)feature_name]

Third block​

alt_text

Scenario: The H2 above the two paragraphs will be taken from feature.[app_name].[feature_name].h2.

Given an admin user has created feature.[app_name].[feature_name].h2** **simple copy

When a feature-based landing page is generated

Then it should include the corresponding H2.

Scenario: The first paragraph will be taken from feature.[app_name].[feature_name].paragraph1.

Given an admin user has created feature.[app_name].[feature_name].paragraph1 simple copy

When a feature-based landing page is generated

Then it should include the corresponding first paragraph.

Scenario: The second paragraph will be taken from feature.[app_name].[feature_name].paragraph2.

Given an admin user has created feature.[app_name].[feature_name].paragraph2 simple copy

When a feature-based landing page is generated

Then it should include the corresponding second paragraph.

Scenario: the three blocks on the bottom should be taken from existing tutorial pages of the plugin

Soft alias block​

alt_text

Scenario: Soft and hard alias names for the plugin are included on the feature landing page for the corresponding plugin.

Given that there is a feature-based landing page for a plugin with soft and hard aliases

When the user is on the page

Then they should see a list of soft and hard aliases for the plugin mentioned on the landing page

And they should be able to click “See More” to see the complete list (if list is truncated, max number of rows - 3)

And the buttons should take the user to the standalone for that alias if pressed.

Eng notes:

AppDetail.where(alias: 'formBuilder', active: true).pluck(:common_name) and delete the one you are looking at

Other features block​

alt_text

Scenario: “Why POWr is Best” block should be taken from tutorial pages

Scenario: Other features for the same plugin should be displayed on the feature landing page.

Given that there is a feature-based landing page for a plugin with other feature based landing pages.

When the user is on the page

Then they should see a list of the other features for the plugin mentioned on the landing page

And the user should be able to click on them to take them to those feature landing pages.

alt_text

Scenario: “Why POWr is Best” block should be centered if There are no Other features block on the page

Locale picker - get example from homepage - use ?locale=es