PageCarton Documentation

Interested in coding widgets, classes, or methods? Check out the Code section!

HTML Syntax & API for Embedding Widgets

Share

article by Ayoola Falola in

In a recent update to be available to the public August 2020, we are adding a completely different way to create and customize PageCarton Themes. In addition to existing ways of creating and customizing themes, you can now customize themes completely from the raw HTML code section using your favorite code editor. Before now, most of the theme layout design functions has been limited to the visual Page Editor in the PageCarton Admin Panel, we noticed that this has proved to be difficul...

In a recent update to be available to the public August 2020, we are adding a completely different way to create and customize PageCarton Themes. In addition to existing ways of creating and customizing themes, you can now customize themes completely from the raw HTML code section using your favorite code editor.

Before now, most of the theme layout design functions has been limited to the visual Page Editor in the PageCarton Admin Panel, we noticed that this has proved to be difficult for developers who have become familiar and convenient using IDEs and standalone Advanced Code Editors. So we thought to build this new feature specifically for developers – basically those who are comfortable writing their own HTML codes.

New Features

  • Compose PageCarton themes using any code editor of your choice
  • Use HTML/JSON syntax to embed PageCarton Widgets in your theme design
  • Include one HTML document in another recursively so you can reuse code easily
  • Automatic HTML file to PageCarton Page conversion
  • Embed PageCarton Widgets into any text-based files; so you can include dynamic contents in JavaScript and CSS files
  • Recursively Embed PageCarton Widgets into other Widgets
  • Use all existing PageCarton Theme design syntax interchangeably with new ones. E.g. Embed Static Replaceable Texts, PageCarton Logo, etc.
  • Pass parameters into PageCarton Widget with JSON right in your HTML code.

How to use widgets in HTML Files

PageCarton Widgets are usually “embedded” in HTML codes to add some “dynamic” nature to the page. E.g. to display posts, display site categories, etc. Here is how to use the new syntax to embed a PageCarton widget in any HTML document

Embedding Widget

Use <widget> element to Embed PageCarton Widgets
 

<widget>

  …

  <!-- Your  Regular HTML Content for widget goes here  -->

  …

</widget>

 

Passing Parameters

You can pass parameters to the widget as HTML attributes. Attribute name would be “parameters” and value would be set to raw JSON values for the parameters. The “class” parameter is required for all widget because that is how the system will know which widget to embed for you

<widget parameters='{ "class": "Application_Article_ShowAll", "parameter_name1": "parameter_name1" , "parameter_name2": "parameter_value2" }'>

  …

</widget>

Sometimes, some parameters can be too complicated to fit into an attribute.  Here is another way to pass parameters to widgets

<widget>

  <script type="application/json">
  {

    "class": "Application_Article_ShowAll",

    "parameter_name1": "parameter_name1",

    "parameter_name2": "parameter_value2"

  }

  </script>

  …


</widget>

Embedding Widget Recursively

Inner Widgets are always processed first when embedding widgets recursively by nesting <widget> element in another <widget> element.

<widget>

  …

  <widget>

    …

  </widget>

  …

</widget>

 

To make the outer widget process first, use <widget-inner> for inner elements instead.

<widget>
  
  …

  <widget-inner>

    …

  </widget-inner>

  …

</widget>

You can also use “-inner” suffix syntax recursively. To help guide the system on the order, when processing the widget

<widget>
         
  …

  <widget-inner>

    …

    <widget-inner-inner>

    …

    </widget-inner-inner>

  …

  </widget-inner>

  …

</widget>

Recursion And Displaying Data

Sometimes we have a multi-dimensional array data to display from a widget. e.g. when displaying a lot of posts or categories. Though not all widget support recursion – only widgets with multidimensional data would function this way. This is the general syntax to repeat HTML content for a multidimensional dataset

<repeat>

<!-- HTML content to repeat goes in here e.g. when showing posts or menu items  -->

</repeat>

Displaying the nth  data in the general set. Sometimes it may be required to use this method of displaying multi-dimensional data instead of <repeat> . Especially when the HTML syntax to display each data isn’t quite the same.

<data-n>

<!-- HTML Content to display the nth  data in the set -->

</data-n>

Repeat a specific column in the dataset – used when there is a child-multi-dimensional dataset

<repeat-data_column_name>

<!-- HTML content to repeat goes in here e.g. when showing posts or menu items  -->

</ repeat-data_column_name >

 

Including Another HTML Document

Use this syntax to bring an HTML file into another file recursively.

<include href="another.html">

Examples

Here are examples of these functionalities in action. You can paste them into your code and start practicing them. You can use them intuitively or adapt them in your own design

Show Page Info

<widget parameters='{ "class": "Ayoola_Page_Info" }'>

<li class="active"><a href="#"></a></li>

</widget>

 

Display Site Categories

<widget>

    <script type="application/json">

    {

        "class": "Application_Category_ShowAll",

        "add_a_new_post": 3,

        "no_of_post_to_show": 6

    }   

    </script>

    <repeat>

        <li><a href="/2020/07/11/html-syntax-api-embedding-widgets.html"></a></li>

    </repeat>

</widget>

Display Shopping Cart

<widget parameters='{ "class": "Application_Subscription_Cart" }'>

    <a href="cart"></a>

    <!-- Shopping Item -->

    <div class="shopping-item">

        <div class="dropdown-cart-header">

            <span> Items</span>

            <a href="/cart">View Cart</a>

        </div>

        <ul class="shopping-list">

            <!--

            <li>

                <a href="" class="remove" title=" "><i

                        class="fa fa-remove"></i></a>

                <a class="cart-img" href=""><img src="?width=70&height=70"></a>

                <h4><a href=""></a></h4>

                <p class="quantity"> x - <span class="amount"></span></p>

            </li>

            -->

        </ul>

        <div class="bottom">

            <div class="total">

                <span>Total</span>

                <span class="total-amount"></span>

            </div>

            <a href="/cart" class="btn animate">Checkout</a>

        </div>

    </div>

    <!--/ End Shopping Item -->

</widget>

 

Effecting URL Whitelisting on a Widget

<widget parameters='{ "class": "Application_Global", "url_whitelist": "/test" }'>

    <div class="col-lg-9 col-12">

        <p>This content will only show on a page with URL "/test"</p>

    </div>

</widget>

 

Effecting a URL blacklist on a Widget

<widget parameters='{ "class": "Application_Global", "url_blacklist": "/test" }'>

    <div class="col-lg-9 col-12">

        <p>This content will be hidden on a page with URL "/test"</p>

    </div>

</widget>

 

Sample Implementation of a Navigation System

<ul class="nav main-menu menu navbar-nav">

    <li class="active"><a href="/">Home</a></li>

    <!--Display default PageCarton Navigation-->

    <widget parameters='{ "class": "Ayoola_Menu" }'>

        <li><a href=""></a></li>

    </widget>

    <li>

        <a href="#">Shop<i class="ti-angle-down"></i><span

                class="new">New</span></a>

        <ul class="dropdown">

            <!--Dynamically create a new PageCarton Navigation named "shop-option"-->

            <widget parameters='{ "class": "Ayoola_Menu", "menu_name": "shop-option" }'>

                <li><a href=""></a></li>

            </widget>

        </ul>

    </li>

    <li>

        <a href="#">Blog<i class="ti-angle-down"></i></a>

        <ul class="dropdown">

            <!--Dynamically create a new PageCarton Navigation named "blog-option"-->

            <widget parameters='{ "class": "Ayoola_Menu", "menu_name": "blog-option" }'>

                <li><a href=""></a></li>

            </widget>

        </ul>

    </li>

    <li><a href="/contact">Contact Us</a></li>

</ul>

Displaying Site Info
 

<widget>

    <script type="application/json">

        {

            "class": "Application_SiteInfo"

        }

    </script>

    <h1>

        <span> {Organization Name} </span></h1>

    <p></p>

</widget>


Using <widget-inner> and <data-n>

 <div class="col-12">
            <div class="tab-content">
                <widget parameters='{ "class": "Application_Category_ShowAll", "add_a_new_post": 3 }'>
                    <data-0>
                        <div>
                            <widget-inner parameters='{ "class": "Application_Article_ShowAll", "category": "", "add_a_new_post": 4, "true_post_type": "product", "trending": 100 }'>
                                    <div>
                                        <repeat>
                                                <h3><a href="/2020/07/11/html-syntax-api-embedding-widgets.html"></a></h3>
                                                <div class="product-price">
                                                    <span></span>
                                                </div>
                                        </repeat>
                                    </div>
                            </widget-inner>
                        </div>
                    </data-0>
                    <data-1>
                        <div>
                            <widget-inner parameters='{ "class": "Application_Article_ShowAll", "category": "", "add_a_new_post": 4, "true_post_type": "product", "trending": 100 }'>
                                    <div>
                                        <repeat>
                                                <h3><a href="/2020/07/11/html-syntax-api-embedding-widgets.html"></a></h3>
                                                <div class="product-price">
                                                    <span></span>
                                                </div>
                                        </repeat>
                                    </div>
                            </widget-inner>
                        </div>
                    </data-1>
                    <data-2>
                         - In a recent update to be available to the public August 2020, we are adding a completely different way to create and customize PageCarton Themes. In addition to existing ways of creating and customizing themes, you can now customize themes completely from the raw HTML code section using your favorite code editor.

Before now, most of the theme layout design functions has been limited to the visual Page Editor in the PageCarton Admin Panel, we noticed that this has proved to be difficul...
                    </data-2>
                </widget>
            </div>
        </div>

Using “pc_post_item_0” instead of <data-0>

<widget parameters='{ "class": "Application_Category_ShowAll", "add_a_new_post": 5 }'>
    <div class="row">
        <repeat>
            <img src="/widgets/name/Application_IconViewer?url=&width=600&height=370">

            <div class="content">

                <p>In a recent update to be available to the public August 2020, we are adding a completely different way to create and customize PageCarton Themes. In addition to existing ways of creating and customizing themes, you can now customize themes completely from the raw HTML code section using your favorite code editor.

Before now, most of the theme layout design functions has been limited to the visual Page Editor in the PageCarton Admin Panel, we noticed that this has proved to be difficul...</p>

                <h3></h3>

                <a href="/2020/07/11/html-syntax-api-embedding-widgets.html">Shop Now</a>

            </div>
        </repeat>
        

        
    </div>
</widget>

 

Embedding Widget in comment section in a CSS File

This sample shows how to set the PageCarton Site color in CSS

/*

<widget parameters='{ "class":  "Application_Global" }'>

<widget-inner parameters='{ "class":  "Application_SearchReplace", "search":  ["#F7941D", "#f6931d"], "replace":  "" }'>

*/
.preloader-icon span {
  position: absolute;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background:#F7941D;
  -webkit-animation: preloader-fx 1.6s linear infinite;
  animation: preloader-fx 1.6s linear infinite;
}

#scrollUp i:hover{
    background:#F7941D;
    color:#fff;
}

.header .nav li .dropdown li .dropdown.sub-dropdown li a:hover{
    color:#fff;
    background:#F7941D;
}

/*

</widget-inner>

</widget>

*/

 

For more information on the variables and parameters, consult the codes of the widget using link similar to this:

3 months ago

PageCarton Admin Panel

Share

article by Ayoola Falola in

The PageCarton Admin Panel is the default control center of PageCarton. While PageCarton is built with privileges from ground up, which allows to customization even from the frontend, the Admin Panel now serves as the control center where all the administative functions can be found in one place. The Admin Panel is a component of PageCarton system that provides the ability to view and change application settings. It consists of a set of widgets that include adding or removing fun...

The PageCarton Admin Panel is the default control center of PageCarton. While PageCarton is built with privileges from ground up, which allows to customization even from the frontend, the Admin Panel now serves as the control center where all the administative functions can be found in one place.

The Admin Panel is a component of PageCarton system that provides the ability to view and change application settings. It consists of a set of widgets that include adding or removing functionalities and software options, controlling user accounts, changing accessibility options, and accessing networking settings.

URL

By default, the PageCarton Admin Panel resides on the "/pc-admin" url. Meaning that it could be accessed by going to example.com/pc-admin, where example.com is the domain name of the site where PageCarton is installed.

Changing the Admin Panel Url

The Admin Panel of PageCarton may be changed from the default "/pc-admin" url. Just like any other PageCarton page which is preloaded in the core, the page may be overridden when a new page with the same URL is created on the site

  1. Update your software to the latest version of PageCarton
  2. Go to the Page Copy widget on example.com/widgets/Ayoola_Page_Copy. Copy "pc-admin" to the new page URL you want to change the admin panel to.
  3. Go to the Page Creator widget on example.com/widgets/Ayoola_Page_Creator. Use the utility to Create a new page with URL /pc-admin to override the main admin panel.
  4. Update the newly created page to display whatever you want.
1 yr ago

Contact Messages

Share

article by Ayoola Falola in

[This Article Needs Content]

[This Article Needs Content]

1 yr ago

New Site Wizard

Share

article by Ayoola Falola in

[This Article Needs Content]

[This Article Needs Content]

1 yr ago

File Manager

Share

article by Ayoola Falola in

[This Article Needs Content]

[This Article Needs Content]

1 yr ago

Mailing List

Share

article by Ayoola Falola in

[This Article Needs Content]

[This Article Needs Content]

1 yr ago
Next →