A way to add a header to a page

LiteCart Fan
Dari United Kingdom
Anggota sejak Jul 2019

I had a requirement to add a warning style header to the front page of my site to give a “heads up” to visitors that we were going to be closed on certain dates.

While access to the server was not a problem and the file could be dropped in as required I wondered if there was a more elegant solution that wouldn’t involve leaving the site itself.

I offer this as a possible solution to anyone who may have had a similar requirement. It goes without saying that the principal could be carried over to other pages.

I would also like to note that there may actually be a way to do this “out of the box” that I have missed - if there is my apologies.

1

First thing to do is add the BOX

In my case this was added to
includes / templates / MYCAT.catalog / views / BOX-ADDED-HERE

in my case BOX-ADDED-HERE is box_header.inc.php (you do not have to use “box-header”, change as required)


  <div>
    ...
  </div>
</section>```

#2

You now need to add this to the index.inc.php file

includes / templates / MYCAT.catalog / pages / index.inc.php

Open file and add (the line below) below {snippet:notices}

```<?php include vmod::check(FS_DIR_APP . 'includes/boxes/box_header.inc.php'); ?>```

This will give you a box (box_header in this case), it goes without saying that you could perform a similar addition where you require.

#3

Use the vmod system to add the content to the box.

Below is the downloaded xml file from my noodling.

You can create the vmod directly in the admin panel and change names, descriptions etc as per your requirements.

The thing to note is that in the INSERT part of the vmod you can add html to build the box as you require.

Create a setting in the vmod and this will allow you to change things using the “CONFIGURE” to avoid editing the vmod.

```<?xml version="1.0" encoding="UTF-8"?>
<vmod>
  <name>header text</name>
  <version/>
  <description>Add text to box_header</description>
  <author/>

  <setting>
    <title>HTML fill</title>
    <description>Add your HTML here - it will be between the &lt;div&gt; &amp; &lt;/div&gt;</description>
    <key>html-fill</key>
    <default_value><p>This is the default</p></default_value>
    <function>text()</function>
  </setting>

  <file name="includes/templates/YOUR-VERSION-HERE.catalog/views/box_header.inc.php">

    <operation method="after" type="inline" onerror="warning">
      <find><![CDATA[<div>]]></find>

      <insert><![CDATA[{setting:html-fill}]]></insert>
    </operation>
  </file>
</vmod>```

#4

Finally instead of adding the CSS to a user.css file you can add the necessary CSS to the variables.css file which can be accessed from the admin panel  under Appearance -> Edit styling

In my case  I added at the end of the file to centre the box - the h3 and .xcv just me noodling, not relevant, use you own id’s and classes.

```/* vmod box header */
}
#box-header{
  display: flex;
  justify-content: center;
}
#box-header h3{
  color: skyblue;
}
.xcv{color: green;
}```

#5

How could this be improved?

It would be handy I suppose if the insert could be done in a wysiwyg type way, but possibly overkill?

It would also be useful to be able to set a date/time range for the vmod to be active
LiteCart Fan
Dari United Kingdom
Anggota sejak Jul 2019

Tim
You are quite correct and my bad for not pointing this out.
I probably should have (for this specific purpose) looked further into the Important Notice and wrangling it to do the job.

In our current (not Litecart) site I have a similar notice which appears as required in the sub-header position and was looking to add the same. 
I could certainly have added the necessary without using the admin side and hard coding the box direct to the server, but I'm blaming you (joking) for mentioning in a previous correspondance that I should really use the vmod system.

That set me to thinking if it would be possible to have an admin enabled addition which when the bones had been added at the server side would let the user work in the admin panel.
I really only posted this ( I'm not sure if it should have been posted here or as a "How to" somewhere else, feel free to move/relocate/delete as you deem necessary ) to hopefully help someone else who may be looking to achieve the same result.

Dave

tim
Founder
Dari Sweden
Anggota sejak Mei 2013
tim

It sounds like you dipped your toe in the nice warm water, and it will be exciting to see you come up with new ideas. :)

Anda
This website uses no cookies and no third party tracking technology. We think we can do better than others and really think about your privacy.