Kryptronic Software Support Forum

m j · 03-31-2004 21:12:03

I just got through doing an extensive modification of CCP5.1 with its HTML in order for it to conform to the design of the rest of the site.

This is on a development server right now, so its not live and doesn't really do anything, we are just testing it right now.

Going through everything modifying the 50 or so HTML sections from the admin site, and then having to go into the Perl scripts themselves and modify the HTML directly in the scripts I'm beginning to wonder if there is some better way of doing this so its easier to template the design of the site.

I did a quick look around to see if there was any way I could include the template files I use on the rest of my site in the shopping cart and didn't find anything so I wrote my own module file and figured out how to initialize it in CCP along with the other module files in cgi-bin/library/modules.

Code:

#######################################################################
# Matt Johnson's SSI hack                                             #
#######################################################################

sub ste_mattjohnson_ssi {
    my $include_path = shift;

    &initialize_sub_add('ste_mattjohnson_ssi');
    
    #########
    ######### This routine grabs a file and inserts the contents of the
    ######### file into the script as HTML
    #########
    
    
    if ($include_path ne '') {
        $include_path =~ s/^\///;
        
        # requires $server_web_root_path variable set in cp-app.pl and cp-admin.pl
        my $file_path = $server_web_root_path . $include_path;
        
        if (open(MJ_INCLUDE_FILE, "< $file_path")) {
            my @file = <MJ_INCLUDE_FILE>;
            my $file = "@file";
            undef(@file);
            close(MJ_INCLUDE_FILE);
            
            $file =~ s/<!--PERL_(\w+)=qq\^(.*)\^-->(.*)<!--PERL_\1\/-->/$2/gs;
            $file =~ s/\(CGIVAR\)(.*?)\(\/CGIVAR\)/display_print_var($1)/ges;
            print $file;
        } else {
            print "<!-- Couldn't open $file_path for reading: $! $? -->";
        }
    } else {
        print qq^<!-- No file was specified in PARAMS="" -->^;
    }
    
    &initialize_sub_remove('ste_mattjohnson_ssi');

} ######### End of subroutine.

My template files are made up of like 5 files to include with gaps for the top menu, bread crumbs, sub menu, and main content area. I ran into a problem with needing CCP to parse the (CGIVAR) tags, but those tags wouldn't work on the rest of the stie, so I wrote the code to parse comment tags and replace them when the template files are run through CCP.

Code:

<table width="100%%"  border="0" cellspacing="0" cellpadding="0">
  <tr align="left" valign="top">
    <td width="132" rowspan="2"><a href="/"><img src="/images/logo.gif" width="132" height="102" border="0" /></a></td>
    <td nowrap="nowrap"><img src="/images/top_art.gif" width="109" height="74" /><img src="/images/top_slogan.gif" width="210" height="74" /></td>
    <td width="299" align="right" valign="top" class="utility_menu"><!--PERL_mycart=qq^<a href="(CGIVAR)common_url(/CGIVAR)&pg=cart">^--><a href="/shopping/cgi-bin/cp-app.pl?pg=cart"><!--PERL_mycart/-->My Cart</a> | <!--PERL_myaccount=qq^<a href="(CGIVAR)common_url_custacct(/CGIVAR)">^--><a href="/shopping/cgi-bin/cp-app.pl?pg=ste_custacct"><!--PERL_myaccount/-->My Account</a> | <!--PERL_wishlist=qq^<a href="/shopping/wishlist.pl?usr=(CGIVAR)fd_usr(/CGIVAR)">^--><a href="/shopping/wishlist.pl"><!--PERL_wishlist/-->Wish List</a> | <a href="/help.htm">Help</a><br />
      <br />
    <!--PERL_search=qq^<a href="(CGIVAR)common_url(/CGIVAR)&pg=search">^--><a href="/shopping/cgi-bin/cp-app.pl?pg=search"><!--PERL_search/-->Store Search</a></td>
  </tr>
  <tr>
    <td colspan="2">

I also wrote my own wishlist... but that's another story. The regular expression in my function above parses the comment:

Code:

<!--PERL_wishlist=qq^<a href="/shopping/wishlist.pl?usr=(CGIVAR)fd_usr(/CGIVAR)">^--><a href="/shopping/wishlist.pl"><!--PERL_wishlist/-->

There are two comment tag sets, the beginning tag  and the ending tag set . So for the main part of the site what is inbetween the comment sets gets displayed, but when my function parses it the HTML inbetween the comment tag sets gets removed and whatever is in the qq^^ comment gets put in its place. I looked at adding (CGIGET) support, but I didn't need it in my template so I decided not to try and figure out what all was needed to make them work too.

So here you have an example of a problem I had, and everything I used to fix that problem in regards to the HTML include files, but my other problem is just in navigating the whole template system in general. I end up banging my head agains the admin site half the time just trying to figure out which one of the 100 elements or system sections, or any of the other 7 sections where HTML is split up all over the place.

There were even several instances where I had to go browsing around some of the Perl scripts like ste_prod.pl and ste_cat.pl or a few of the others to find the specific HTML that I was wanting to modify to make it work the way I wanted it to.

There has to be some kind of way that we can have both an easy way for novice users to modify the HTML templates and a way that extreme users can have the flexibility to modify the HTML templates in a better fashion.

Maybe if I was logged in as an admin and I went to a specific page in the store I'd have the ability to click "edit this page" and see all the elements that affected just that page, so I wouldn't have to wade through all the others.

With what I've done so far I just got the majority of the modifications done to the HTML, where I know I'm going to have management want me to tweak all kinds of little things which will be a pain to locate and figure out which HTML element or Perl script the HTML is in that I need to edit.

I've been doing a little reasearch on the side into the capabilities of the parsing engine of HTML Mason to see if I can just use the parser to process template files for something like this. So Perl code would be written inside tags like <%perl> </%perl> and you could edit the majority of the HTML in standard HTML editors like Dreamweaver.

scoutch · 03-31-2004 22:06:57

Oh ! joy.

Traductions to make. Here's what I, at least, know about this :

Code:


#######################################################################
# Matt Johnson's SSI hack                                             #
#######################################################################

sub ste_mattjohnson_ssi {
&initialize_sub_add('ste_mattjohnson_ssi');
   
   #########
   ######### This routine grabs a file and inserts the contents of the
   ######### file into the script as HTML
   #########
      
   if ($store_secure_site_url ne "") {
       $store_secure_site_url =~ s/^\///;

       } ######### End of if statement.
       
       #########
       ######### Instead of this :
       #########

       ######### requires $server_web_root_path variable set in cp-app.pl and   cp-admin.pl
      #########  my $file_path = $server_web_root_path . $include_path;
       
      #########       if (open(MJ_INCLUDE_FILE, "< $file_path")) {
      #########       my @file = <MJ_INCLUDE_FILE>;
      #########       my $file = "@file";
      #########       undef(@file);
      #########       close(MJ_INCLUDE_FILE);
           
      #########           $file =~ s/<!--PERL_(\w+)=qq\^(.*)\^-->(.*)<!--PERL_\1\/-->/$2/gs;
      #########           $file =~ s/\(CGIVAR\)(.*?)\(\/CGIVAR\)/display_print_var($1)/ges;
      #########           print $file;

       #########
       ######### You can call the &initialize_sub_require command and right below : &theroutine instead.
       ######### I.e : &initialize_sub_require('ste_yourroutine');
       ######### Then : &ste_yourroutine;
       #########

       #########
       ######### The following routines are for the error message (if found any).
       #########
         
       if (!(-e "$data_elements_path/$display_fileref.$data_text_ext")) {

       if ($display_fileref !~ /^ste_mail_/) {

       print "<!-- DISPLAY ERROR: ELEMENT $display_fileref DOES NOT EXIST - Couldn't open : $page_id -->";

        #########
        ######### If everything shows ok for the $page_id but not for the PARAMS function.
        #########

    } else {

       print "<!-- No file was specified in PARAMS="$fd_sub_pg" -->";
   
   } ############## End of if statement.

   } ############## End of if statement.
     
    &initialize_sub_remove('ste_mattjohnson_ssi');

} ######### End of subroutine.

#######
####### Step 2. According to your technical suggestion, you wish to make a table from element files.
#######

<table width="100%"  border="0" cellspacing="0" cellpadding="0">
 
<tr align="left" valign="top">

<td width="132" rowspan="2"><a href="(CGIVAR)design_firm_url(/CGIVAR)"><img src="(CGIVAR)images_path(/CGIVAR)/site/logo.gif" width="132" height="102" border="0" /></a></td>

<td nowrap="nowrap"><img src="(CGIVAR)images_path(/CGIVAR)/site/top_art.gif" width="109" height="74" /><img src="(CGIVAR)images_path(/CGIVAR)/site/top_slogan.gif" width="210" height="74" /></td>

<td width="299" align="right" valign="top" class="utility_menu"><a href="(CGIVAR)common_url(/CGIVAR)&pg=cart"><a href="(CGIVAR)common_url(/CGIVAR)&pg=cart"><!--PERL_mycart/-->My Cart</a> | <a href="(CGIVAR)common_url_custacct(/CGIVAR)"><a href="(CGIVAR)common_url(/CGIVAR)&pg=ste_custacct"><!--PERL_myaccount/-->My Account</a> | <a href="(CGIVAR)server_script_path(/CGIVAR)/wishlist.pl"><a href="(CGIVAR)server_script_path(/CGIVAR)/wishlist.pl"><!--PERL_wishlist/-->Wish List</a> | <a href="(CGIVAR)design_firm_url(/CGIVAR)/help.htm">Help</a><br />
     <br />
   <a href="(CGIVAR)common_url(/CGIVAR)&pg=search"><a href="(CGIVAR)common_url(/CGIVAR)&pg=search"><!--PERL_search/-->Store Search</a></td>

 </tr>

 <tr>

   <td colspan="2"> </td>

#######
####### Step 3. Same here, except for a simple URL.
#######

<a href="(CGIVAR)server_script_path(/CGIVAR)/wishlist.pl><a href="(CGIVAR)server_script_path(/CGIVAR)/wishlist.pl">

</tr>

</table>

#######
####### fd_usr command does not need to be placed in the URL since vars.pl already takes care of that.
#######

Hope this helps.

m j · 03-31-2004 23:55:23

scoutch,

I appreciate the effort you seem to have made, but I'm not sure if you understand the purpose of my post.

The partial code I posted was for example purpose only in better describing the details of my suggestion, and how I was able to achieve the desired result using the existing version incase Nick thought it might be useful in 6.0.

My post is for the purpose of suggesting something be changed with the next version of CCP (version 6.0) to make it more flexible to work with customizing the HTML templates for CCP.

I'm sorry you went through all the trouble of writing that out, but I don't think you understand completely why I made all the customizations I made.

The SSI code was for the purpose of emulating Server Side Includes inside of CCP, and for me to be able to utilize the same template files for CCP and non CCP content on my site, hense the <!--PERL stuff in the HTML.

Also I used fd_usr because I didn't want all the extra variables that are passed with the common_url, and because the script isn't in the path of the common_url.

common_url = cgi-bin/cp-app.pl?usr=51F2217374&rnd=1527541&rrc=N&act=

my wishlist script is not a part of cp-app.pl so there is no way that would work.

I included a link to my devlopment site so you could see the reality of what I did.

m j · 04-01-2004 02:05:22

While I was driving home I was trying to figure out why you might have replied the way you did to my post. I mean it made perfect sense to me :-)

Then I remembered that I forgot to post the code for Site HTML Layout element that helps to explain things, and I didn't explain where the HTML that I posted came from.

The HTML that I posted earlier that had the <!--PERL stuff in it was from the /template1.htm file that I use my function to include via the Site HTML Layout element listed below. The reason I had to have the code in place for parsing the (CGIVAR) was because CCP parses the Site HTML Layout element when it generates a page, and it sees my function there, but if I output anything from my function, what I output doesn't get parsed for (CGIVAR) tags, and I figured I would follow suite on how perl variables were inserted into the HTML, so I just included the same (CGIVAR) parsing in my function as CCP does for every other element file.

My Site HTML Layout element in CCP is as follows:

Code:

(CGIGET TYPE="SUB" VALUE="ste_mattjohnson_ssi" PARAMS="/template1.htm")
(CGIGET TYPE="SUB" VALUE="ste_mattjohnson_ssi" PARAMS="/shopping/top_menu.htm")
(CGIGET TYPE="SUB" VALUE="ste_mattjohnson_ssi" PARAMS="/template2.htm")
(CGIGET TYPE="SUB" VALUE="ste_mattjohnson_ssi" PARAMS="/shopping/breadcrumbs.htm") > <a href="/shopping/online_store.htm">Online Store</a>
(CGIGET TYPE="SUB" VALUE="ste_cat_nav")
(CGIGET TYPE="SUB" VALUE="ste_mattjohnson_ssi" PARAMS="/template2.5.htm")
(CGIGET TYPE="SUB" VALUE="ste_mattjohnson_ssi" PARAMS="/shopping/sub_menu.htm")
(CGIGET TYPE="SUB" VALUE="ste_mattjohnson_ssi" PARAMS="/template3.htm")
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="150" align="left" valign="top">(CGIGET TYPE="SUB" VALUE="ste_cat_list")</td>
    <td align="left" valign="top">
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr><td><a href="(CGIVAR)common_url(/CGIVAR)&pg=new">New Items</a> <a href="(CGIVAR)common_url(/CGIVAR)&pg=specials">Specials</a> <a href="(CGIVAR)common_url(/CGIVAR)&pg=bestsell">Best Sellers</a><br>
       </td>
   </tr><tr>
    <td align="left" valign="top">(CGIGET TYPE="SUB" VALUE="ste_exec_message")
(CGIGET TYPE="SUB" VALUE="ste_exec_element" PARAMS="(CGIVAR)element_id(/CGIVAR)")</td>
   </tr>
     </table>
     </td>  
  </tr>
</table>
(CGIGET TYPE="SUB" VALUE="ste_mattjohnson_ssi" PARAMS="/template5.htm")

The calls to my function ste_mattjohnson_ssi send the param of the file name that I want to include. I added a new variable to the cp-app.pl file for my SSI script that references the root of the website.

Code:

$server_web_root_path = "/www/htdocs/pm/";

So then my function will check for a forward slash from the value specified in the PARAMS="" and see if it starts with a forward slash and if so it strips it off since I put the forward slash in the $server_web_root_path variable.

My template files are located at the root of my web site, where CCP is in /shopping/cgi-bin/ so instead of doing a bunch of ../../ I decided to just add my own variable to the cp-app.pl list of global variables.

I hope that helps to clearify what it is I'm doing.

scoutch · 04-01-2004 09:38:44

Your PARAMS can even be specified by numeric values. For instance, if you're planning to do your site with skins, you can use the HTML name many times by simply entering numbers (in ste_exec.pl, that would be predefined from : $page_id or $q->param('vars_url_page') command structure).

You even reduce the programming in the element files since, almost, all your readings would be running from ste_exec.pl (like my site).

Hope this helps.

Kryptronic Software Support Forum

#1 03-31-2004 21:12:03

Html Customization

Code:

Code:

Code:

#2 03-31-2004 22:06:57

Re: Html Customization

Code:

#3 03-31-2004 23:55:23

Re: Html Customization

#4 04-01-2004 02:05:22

Re: Html Customization

Code:

Code:

#5 04-01-2004 09:38:44

Re: Html Customization

Board footer