[Free Module] Custom HTML Pages (Advanced CMS)

[mwrouse]

We have all probably been there, you ran in to limitations of the CMS module.

Whether you want more dynamic pages, or you just find the module annoying then the CustomHTMLPages Module is FOR YOU!

 

This module was created because I needed more flexibility in my shop by creating custom pages that could be tied to products and categories.

The CMS pages are unable to do this, and tied to the cms.tpl file in your template. LAME!

 

This module allows you to do (most-likely) anything you can dream of.  Write your own HTML layout for your pages (you can even use smarty!).

You now have the ability to tie products and categories to any of your custom pages. You can even do this dynamically through url parameters.

 

WARNING

This module is not for beginners. You should be experienced in HTML/CSS and PHP before using. Invalid code in this module can cause errors for users on the front shop.

 

Before you go any further please read the README on the GitHub repository

Example

Let me show you can example. My shop (Purgatory Props) needs a support page where I can give articles and documentation on products (general use stuff really) that would clutter the product page.

So I have my dedicated support page that is my custom page. Here is what the code for that page looks like:

<h1>{$page->meta_title}</h1>
<p>Welcome to our support page! Here you will find detailed documentation and instructions on the various products that we offer.</p>


{foreach from=$page->children item=child}
    <div class="template-full-width support-page-tile noselect">
        <a href="{$child->link}" class="textlink-nostyle">
            <img src="/img/customhtmlpages/{$child->url}.png" class="responsive-img" height="250"/>
            <span>{$child->meta_title}</span>
        </a>
    </div>
{/foreach}

For the subpage (light controller support) here is the source (with some theme-specific HTML stripped out to avoid clutter):

<h1>{$page->meta_title}</h1>

<p style="font-size: 1.1em">Which product do you need support with?</p>


{foreach from=$category->products item=product}
  <div class="product-tile">
    <a href="{$page->link}/product?id_product={$product->id}">
      <img src="{$link->getImageLink($product->link_rewrite, $product->id_image, 'home', null, ImageManager::retinaSupport())|escape:'html':'UTF-8'}" class="img-responsive" width="250" height="250">
      <span>{$product->name}</span>
    </a>
  </div>
{/foreach}


{if count($page->related) > 0}
	<h1>Support Articles</h1>
	<p>These articles provide detailed information on using your product.</p>

	{foreach from=$page->related item=relatedPage}
		<a href="{$relatedPage->link}" class="textlink article-name" style="display: block;line-height:1.2em">{$relatedPage->name}</a>
	{/foreach}
{/if}

Notice the following on that page

<a href="{$page->link}/product?id_product={$product->id}">

That is utilizing that url parameter to make that page tied to a product like I mentioned before.

Here is what that product page looks like:
 

{hook h='actionModifyProductForExtraFunctionality' product=$product}

<h1>{$product->name} Support</h1>
{if !$product->discontinued}
    {if $product->active}
        <a href="{$link->getProductLink($product)}" target="_blank" class="btn btn-default">View the Product</a>
    {/if}
{else}
    <div class="alert alert-warning">
        <strong>This product has been discontinued.</strong><br/>
        If you need additional service on this product other than what is provided in our Help & Support pages, please contact us.
    </div>
{/if}

<!-- Short Description -->
<h2>Brief Description</h2>
{$product->description_short}

<!-- Product Downloads -->
{if isset($product->attachments)}
    <h2>Downloads</h2>
    <p class="small">User Manuals and Other Documentation</p>

    {foreach from=$product->attachments item=attachment}
        <a href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")|escape:'html':'UTF-8'}" class="attachment-link textlink-nostyle" target="_blank" title="{$attachment.name}">
            <i class="fa fa-download"></i> {$attachment.name} <span class="attachment-size">({Tools::formatBytes($attachment.file_size, 2)})</span>
        </a>
    {foreachelse}
        There are no documents for this product.
    {/foreach}
{/if}

<!-- Find Support Articles -->
{assign var=supportArticles value=[]}

{foreach from=$page->related item=relatedPage}
    {assign var=hasSupportArticles value=false} {* Keep track of internally to prevent adding it more than once *}
    {foreach from=$relatedPage->_products item=p}
        {if $p == $product->id && !$hasSupportArticles}
            {assign var=hasSupportArticles value=true}
            {append var=supportArticles value=$relatedPage}
        {/if}
    {/foreach}
{/foreach}

{assign var=hasSupportArticles value=count($supportArticles) > 0}

<!-- List Support Articles -->
{if $hasSupportArticles}
  <h2>Support Articles</h2>
  <p class="small">Support articles for the {$product->name}</p>

  {foreach from=$supportArticles item=article}
  	<a href="{$article->link}" class="textlink" style="font-size: 1.2em;display: block;line-height: 1.2em">{$article->name}</a>
  {/foreach}
{/if}

<!-- Videos -->
<h2>Videos</h2>
{hook h='displayProductVideos' product=$product}

 

This is pretty complex if you've never used the module before (maybe if you haven't wrote it??).

The most complex section on this page discovers any related pages.

So if I write an article about a specific product I make that page shown on this page, and I add the product that the article is about to the article page. The two for loops in here will automatically discover that and allow it to be shown.

 

Edited May 12, 2021 by mwrouse

[mwrouse]

I am unable to add any of the modules I have been creating to the market place (I am getting a 500 error, and I have emailed support about it).

 

If anyone has any questions, please let me know!

I am excited about this module!