Changing the look of the import

Issues to do with installing and configurating Norcat.
Post Reply
ProSite

Changing the look of the import

Post by ProSite » Thu Dec 02, 2004 2:28 pm

Hi

I am trying to customise the look of the product layout and the section layout is this all controlled in Norcat ?

I take it that I no longer edit act_productline and act_sectionline

Best

Jez

The site for temp is http://www.escapeclothing.co.uk/acatalog/buy_temp.html

norman
Site Admin
Posts: 1237
Joined: Sat Feb 07, 2004 9:55 pm

Post by norman » Thu Dec 02, 2004 11:18 pm

SECTIONS

The Section Layout is standard Actinic. However Norcat sticks in a default product image (changeable in Norcat / Config / SectionImage / Default).

You can also attach custom images and descriptions to each section if you like - documented in the Installation / Configuration Guide. There's actually 2 ways to do this - via Norcat / Config / Headers or by having images that match the section names.

PRODUCTS

Product Layouts are done by 4 Norcat specific templates. They all start Norcat_ProductLine or Norcat_CompactLine. The ProductLine ones deal with products that come in more than 1 size and / or colour. The Compact ones are only used if a product has a single size and colour and the colour and size codes are in the NonColours / NonSizes table in Norcat / Config.

Each template comes in 2 flavours one with the image commented in and the other with it coimmented out. Don't alter this as it's a cunning trick to get Actinic to upload images that belong to other products. Norcat allows you 1 main image per product AND one for every colour. This is beyond Actinics capabilities so we resort to some trickery to get these images uploaded by assigning them to products that don't have an image but prevent them being displayed.

You can move things around in there as you like but read below.

The really complex part is the table that lays out colours and sizes matrix. Norcat generates custom HTML for this and embeds it into the Actinic product description. This code is controlled by Norcat / Config / Advanced / Tables. Although these parameters are visible they are really intended for expert (currently me I'm afraid) use only. However I'm happy to assist you if you can tell me what you'd like to tweak.

ProSite

Thanks

Post by ProSite » Thu Dec 09, 2004 1:08 pm

As ever, thanks Norman, site in progress

http://www.escapeclothing.co.uk/acatalog/buy_temp.html

norman
Site Admin
Posts: 1237
Joined: Sat Feb 07, 2004 9:55 pm

Post by norman » Thu Dec 09, 2004 2:22 pm

You're price isn't visible because the text is black upon black. You've added <font color=white> tags around NETQUOTEVAR:PRODUCTPRICE (in the Norcat... templates) but this is being overridden by the <span class=actxsmall) tags inside Act_ProductPrice.html

Remove your existing <font color=white> and </font> tags from the Norcat... templates and put them instead into Act_ProductPrice.html. E.g.

Code: Select all

<br><span class="actxsmall"><font color=white><b> NETQUOTEVAR:PRICEPROMPT &nbsp;NETQUOTEVAR:DISCOUNT_QUANTITY&nbsp;NETQUOTEVAR:COST</b></font></span><span class="actxxsmall"><font color=white>NETQUOTEVAR:TAXMESSAGE</font></span>
Alternatively you can add two new classes to actinic.css (copies of actxsmall and actxxsmall say whtxsmall and whtxxsmall but with the color:white) and change the class=tags in Act_ProductPrice.html to refer to it. E.g. Act_ProductPrice.html

Code: Select all

<br><span class="whtxsmall"><b> NETQUOTEVAR:PRICEPROMPT &nbsp;NETQUOTEVAR:DISCOUNT_QUANTITY&nbsp;NETQUOTEVAR:COST</b></span><span class="whtxxsmall">NETQUOTEVAR:TAXMESSAGE</span>
and actinic.css gets the lines added

Code: Select all

.whtxxsmall{
	font-size:9px;
	color:#ffffff;
}

.whtxsmall{
	font-size:10px;
	color:#ffffff;
}


Do you know that Norcat can include an image for each colourway of a product? Just save a small image with the name equal to the 1st 9 digits of the barcode and Norcat will put it where the colour name (BLACK, CAMEL, etc) goes. The advantage of doing this is that Norcat will carry that image through into the Cart and Checkout so customers can see exactly what they've ordered.

Norman

ProSite

Hi,

Post by ProSite » Mon Mar 07, 2005 1:19 pm

Thanks Norman been a while on this one,
The really complex part is the table that lays out colours and sizes matrix. Norcat generates custom HTML for this and embeds it into the Actinic product description. This code is controlled by Norcat / Config / Advanced / Tables. Although these parameters are visible they are really intended for expert (currently me I'm afraid) use only. However I'm happy to assist you if you can tell me what you'd like to tweak.
See what you mean by complicated! I have tried to hack around but failed, not overly concerned about that though. Ok the problem I have is the product layout, if there is a single product one size / colour etc the image is on the right, I would like to standardise the site and have all images on the left. For simplicity here is a sample table. The text layout is a little odd at the moment so I would like all images on the left with text to the right then the matrix to follow.

<table border="1">
<tr>
<td>Product Image
</td>
<td>Product Info Text<br><br>
NorMatrix Buy options
</td>
</tr>
</table>

Do you know that Norcat can include an image for each colourway of a product? Just save a small image with the name equal to the 1st 9 digits of the barcode and Norcat will put it where the colour name (BLACK, CAMEL, etc) goes. The advantage of doing this is that Norcat will carry that image through into the Cart and Checkout so customers can see exactly what they've ordered.
Yeah we have all that in there now, but I can not figure out getting all thumbs into the cart and cehckout.

Best

Jez

norman
Site Admin
Posts: 1237
Joined: Sat Feb 07, 2004 9:55 pm

Post by norman » Mon Mar 07, 2005 2:20 pm

Main (6 digit filename) image on left. Just replace Act_ProductImage with

Code: Select all

<!-- ProductImage HTML begin -->
<!-- This file is used to build the product image markup. -->

<IMG align=left SRC="NETQUOTEVAR:IMAGEFILE"
	  ALT="NETQUOTEVAR:ALTERNATETEXT"
	  BORDER=0
	  NETQUOTEVAR:IMAGEHEIGHT
	  NETQUOTEVAR:IMAGEWIDTH
	  NETQUOTEVAR:OTHERIMAGEMARKUP>

<!-- This file is used to build the product image markup. -->
<!-- ProductImage HTML end -->
This assumes, of course that you haven't made changes to the NorcatProductLine*.html and NorcatCompactLine*.html templates.

To get the Product Description above the size matrix. Go to Norcat / Config / Advanced / Tables and set TextPos (near bottom of screen) to Top.

If you are able to send me (on CD - it'll be too big for e-mail) a copy of your entire C:\Program Files\Actinic v7\Sites\Site1 and C:\Norcat then I'll be able to help with detailed customisation very easily.
Norman

ProSite

Post by ProSite » Mon Mar 07, 2005 5:46 pm

Thanks, I will give that a go tomorrow, not sure if aligning left will fix that, perhaps I can elaborate.

When you have a moment please look at
http://escapeclothing.co.uk/acatalog/On ... S-BAG.html

then
http://escapeclothing.co.uk/acatalog/On ... AINER.html

Where we have one product picture for data pulled in (top link) the image is to the right of the matrix, where we have multiple pictures pulled in (second link) the images are to the left of the matrix. What would be ideal is all pictures to the left of the matrix.

I think I am understanding how you are getting this together now, In your fudge you have a description that is pulled in from the notes in t2t then you create a matrix of available sizes this is pulled into the description field of actinic, so the default will always be product description if one or multiple images then a data table with image and matrix repeater if more than one image per product?.

Just one other note, I have tried the pop up window for a larger image, I am sure that I must be missing something, the image is called
t2trefno.jpg and the one for the pop up is called t2trefno-p.jpg in NorCat I have tried to both options for generating the popup (button and text) but it does not happen. anyhting obvious that may have been missed?

What address can I send the backup to? email it to me jez@prosite.co.uk if preferred.

Thanks

Jez

norman
Site Admin
Posts: 1237
Joined: Sat Feb 07, 2004 9:55 pm

Post by norman » Mon Mar 07, 2005 6:30 pm

Norcat allows more than one Product Image to be shown simultaneously. Actinic only allows one.

The way this is done is as follows:-

If you have an image whose filename is 6 digits long then Norcat uses this as the standard Actinic image and you can move it around by relocating NETQUOTEVAR:PRODUCTIMAGE in the Norcat*.html templates. You can also edit Act_ProductImage.html to alter the generated HTML. Thinnk of this image as the "general" one for the entire product colour/ size range.

*************

When you sell something in different colours then Norcat considerably extends Actinic by allowing you to have an additional image for each colour. Norcat picks up these images by looking for a 9 digit filename (6 for the main product and 3 for the individual colourway). There is no NETQUOTEVAR for this as the code is generated by Norcat and is added into the Product Description (the Notes and the table code are all laid out via NETQUOTEVAR:PRODUCTDESCRIPTION). The various bits of HTML that make up this table are in Norcat / Config / Advanced / Tables but, as mentioned earlier, aren't intended for end-user modification. There is a selector TextPos (also mentioned earlier) that you can use to place the Notes above, below or alongside the colour / size table.

You can also have a 6 digit main image and a set of colourway images. I.e. both systems above can be mixed.

The Templates Norcat uses have

NETQUOTEVAR:PRODUCTIMAGE
NETQUOTEVAR:PRODUCTDESCRIPTION

so adding align=left to the Act_ProductImage.html will cause all 6 digit images to be laid out to the left of the Description (which contains the table). It worked OK when I tested it here.

Watch out if you use big images as potentially you'll need screen width for your image, the colour description (or additional image) and up to 13 sizes and their Buy buttons. That's why out-of-the-box Norcat lays out the 6 digit image above any tables.

Note that there are 2 copies of each Norcat Template. I.e. Norcat_ProductLine.html and Norcat_ProductLine-NoImage.html. Norcat_ProductLine.html is the usual one and should be changed first. Any changes you make to Norcat_ProductLine.html should also be made to Norcat_ProductLine-NoImage.html. Norcat_ProductLine-NoImage.html is identical to Norcat_ProductLine.html but must have the NETQUOTEVAR:PRODUCTIMAGE commented out i.e. <!-- NETQUOTEVAR:PRODUCTIMAGE -->

This weird duplication is due to us having more than one image per product. Norcat adds extra colourway images to products that don't have a main image (to persuade Actinic to upload the images) and then uses the -NoImage template so that the image won't be displayed against the wrong product. This is somewhat cludgy but was the only efficient way to do this when Norcat was designed and Actinic was a few generations younger.

Norcat V4 (due soon) will use a better way to maintain extra images and will only need 1 template for most products.
Norman

Post Reply