[ic] Vertical Category List Question

Hostmaster hostmaster at zipp.net
Thu Nov 13 04:07:10 EST 2003


----- Original Message ----- 
From: "Ed LaFrance" <edl at newmediaems.com>
To: <interchange-users at icdevgroup.org>
Sent: Wednesday, November 12, 2003 11:46 AM
Subject: Re: [ic] Vertical Category List Question


[snipped my introduction]

> Take a look at the bar_link subroutine that is defined in
> VENDROOT/catalog_before.cfg; you'll see that the href is constructed near
> the bottom of the routine, and that is where the class for the same is
> called out.
>
> I'd think you could just add a new CSS definiton for the other link
> appearance you want to use, and then just add some if logic to choose one
> or the other for the href, determined by the value of $base (which
> essentially tells you if this is a link against the area or cat tables).
> For instance, if you want to use barlink for categories, and new class
> called grouplink for product groups:
>
> Sub <<EOR
> sub bar_link {
>          my $base = shift || 'cat';
>          my $extra;
>
>          ### NEW STUFF ###
>          ### define a var for the CSS class for links...
>          my $link_css;
>
>          $base =~ s/(\W.*)//s
>                  and $extra = $1;
>          my $ref = shift;
>          my $code = $ref->[0];
>
>          my $record =  tag_data($base, 'n/a', $code, { hash => 1 });
>          return $ref->[0] unless $record;
>
>          my $url;
>          my $anchor;
>          my $highlight;
>          my $first;
>          my $expand;
>
>          LINK: {
>                  if($record->{link_type} eq 'external') {
>                          $first = $record->{url};
>                          $first =~ s/\s+$//;
>                          $first =~ s/^\s+//;
>                          $url = $first;
>                  }
>                  elsif   ($record->{link_type} eq 'internal') {
>                          my ($page, $form) = split /\s+/, $record->{url},
2;
>                          my $current = $Tag->var('MV_PAGE', 1);
>              $highlight = 1 if   $page eq $current
>                                      or
>                                  $page eq $CGI->{ui_explode};
>                          $url = $Tag->area( { href => $page, form =>
$form });
>                  }
>                  elsif   ($record->{link_type} eq 'simple') {
>                          my (@items) = split /\s*[\n,]\s*/,
> $record->{selector};
>                          my @out;
>                          my $fi = $record->{tab};
>                          my $sp = $record->{page};
>                          my %options = (
>                                  href => 'scan',
>                          );
>                          push @out, "fi=$fi" if $fi;
>                          push @out, "sp=$sp" if $sp;
>                          push @out, "st=db";
>                          if(! @items) {
>                                  push @out, "ra=yes";
>                                  $options{arg} = join "\n", @out;
>                                  $url = $Tag->area(\%options);
>                                  last LINK;
>                          }
>                          push @out, "co=yes";
>                          for(@items) {
>                                  my ($col, $string) = split /\s*=\s*/;
>                                  push @out, "sf=$col";
>                                  push @out, "se=$string";
>                          }
>                          push @out, $record->{search}
>                                  if $record->{search} =~ /^\s*\w\w=/;
>
>                          push @out,
> qq{va=banner_image=$record->{banner_image}} if ($record->{banner_image});
>                          push @out,
> qq{va=banner_text=$record->{banner_text}} if ($record->{banner_text});
>                          $options{arg} = join "\n", @out;
>                          $url = $Tag->area(\%options);
>                  }
>                  elsif   ($record->{link_type} eq 'complex') {
>                          $record->{search} =~ s/[\r\n+]/\n/g;
>                          $record->{search} .=
> qq{\nva=banner_text=$record->{banner_text}} if ($record->{banner_text});
>                          $record->{search} .=
> qq{\nva=banner_image=$record->{banner_image}} if
($record->{banner_image});
>                          $url = $Tag->area('scan', $record->{search});
>                  }
>                  else {
>                          $url = "";
>                  }
>          }
>
>          ANCHOR: {
>                  my $display_text = $record->{banner_text} ||
$record->{name};
>                  $display_text =~ s/"/&quot;/g;
>                  if($record->{display_type} eq 'url') {
>                          $anchor = "";
>                  }
>                  elsif ($record->{display_type} eq 'name') {
>                          $anchor = $display_text;
>                  }
>                  elsif ($record->{display_type} eq 'icon') {
>                          $anchor = qq{<img src="$record->{image}"
> alt="$display_text"};
>                          $anchor .= " $record->{image_prop}"
>                                  if $record->{image_prop};
>                          $anchor .= '>';
>                          $anchor .= $display_text;
>                  }
>                  elsif ($record->{display_type} eq 'image') {
>                          $anchor = qq{<img src="$record->{image}"
> alt="$display_text"};
>                          $anchor .= " $record->{image_prop}"
>                                  if $record->{image_prop};
>                          $anchor .= '>';
>                  }
>                  else {
>                          $anchor = $display_text;
>                  }
>          }
>          return $url if ! $anchor;
>          return $anchor if ! $url;
>          EXPAND: {
>                  if ($url =~ /\?/) {
>                          $expand = "&expand=$code";
>                  }
>                  else {
>                          $expand = "?expand=$code";
>                  }
>          }
>
>          ### NEW STUFF ###
>          ### set the CSS class to use....
>
>          if ( $base eq 'cat' ) {
>                  $link_css = 'barlink';
>          }
>          else {
>                  $link_css = 'grouplink';
>          }
>
>          my $tmpl = $record->{link_template}
>                          || $extra
>                          || $Variable->{BAR_LINK_TEMPLATE}
>                          || q{<A HREF="$URL$" class=barlink>$ANCHOR$</A>};
>          $record->{ANCHOR} = $anchor;
>          $record->{EXPAND} = $expand;
>          $record->{URL} = $url;
>          $tmpl =~ s!{HIGHLIGHT}(.*?){/HIGHLIGHT}! $highlight ? $1 : ''
!gise;
>          $tmpl =~ s/\$(\w+)\$/$record->{$1}/g;
>          return $tmpl;
> }
> EOR
>
Hello again Ed.  I've made your recommended modifications to
catalog_before.cfg.  Essentially, the only lines I added were (numbered for
clarity):
1)  my $link_css;

2)  my $expand;

3)  EXPAND: {
                 if ($url =~ /\?/) {
                         $expand = "&expand=$code";
                 }
                 else {
                         $expand = "?expand=$code";
                 }
         }

4)  if ( $base eq 'cat' ) {
                 $link_css = 'barlink';
         }
         else {
                 $link_css = 'grouplink';
         }

5)  $record->{EXPAND} = $expand;

I then created the following classes (and some new variables for them) in
the theme.cfg file:

.grouplink {
  background-color: __CATEGORYBAR_BG__;
  color: __CATEGORYBAR_TEXT__;
  font-family: __GROUPLINK_FONT__;
  font-weight: __GROUPLINK_WEIGHT__;
  font-size: __GROUPLINK_FONTSIZE__;
}

.barlink {
  background-color: __CATEGORYBAR_BG__;
  color: __CATEGORYBAR_TEXT__;
  font-family: __BARLINK_FONT__;
  font-weight: __BARLINK_WEIGHT__;
  font-size: __BARKLINK_FONTSIZE__;
}

ALSO MODIFIED the vertical_cateogory_list component as follows:

<tr>
    <td valign="top" class="grouplink">

 <b>[box-exec bar_link]area[/box-exec]</b>
       </td>
  </tr>
  <tr>
    <td valign="top" class="barlink">
<ul class="vertcatlist">
[set found_cat]1[/set]
[loop prefix=cat
 search="
  fi=cat
  st=db
  co=yes
  tf=sort
  tf=name
  rf=code,name
  sf=sel
  se=[box-code]
 "
 ]
 <li>[cat-exec bar_link]cat[/cat-exec]</li><BR>
[/loop]
</li>
    </td>
  </tr>

NOTES:
1)  Applied changes
2)  Restarted Interchange
3)  Opened the catalog:  Nothing at all was affected in the vertical
category menu.
4)  I believe the new classes .grouplink and .barlink are being overwritten
by the link pseudo classes:
A.barlink:link, A.barlink:active, A.barlink:visited AND
A.barlink:hover
To test my "theory" I changed the A.barlink and A.barlink.hover to reflect
the .grouplink variables, and immediately thereafter both the 'area' and
'cat' items were changed to identical values accordingly.  Unfortunately,
there doesn't seem to be a way to create two different "link pseudo classes"
(one each for 'AREA' and 'CAT'.
5)  <b>[box-exec bar_link]area[/box-exec]</b>  <---Note on this IC Tag:  The
<b></b> tags that were in the default component do not in any way affect the
IC Tag [box-exec bar_link]area[/box-exec].  I don't know why (other than the
link pseudo class might take precedence), but it's somewhat frustrating,
because that really all I wanted to do in the first place.

All in all, this has been a wonderful learning experience - my first ever
with IC Tags, Components, and perl sub-routines.  The past several hours
flew by like they were just a few minutes.  How did all you boys and girls
ever get so smart?

By the way, the .vercatlist recommended by Ryan Grace worked beautifully.
Thanks for that Ryan.  I am using it regardless of whether I can solve the
problem of two different font weights for the Product Group and Category
navigation items.

Many thanks to you, Ed, and you Ryan.
Most gratefully,
Michael G.




More information about the interchange-users mailing list