I thought I was 'ok' with HTML. Actinic Software proves I know nothing!

[parekh81]

Hello guys,

For the last week I have 'attempted' to learn the basics of how Actinic templates work, I am getting the hang of things slowly, but I just don't seem to be able to make any headway when it comes to editing templates.

I need some help, what changes would I need to make to the templates to have three images of a product in a single row per product page. ( I am selling curtains so need to show them clearly what they are getting ) with a pop up window on-click to show them a .jpg image for a clear view.

I would like the description to appear under the images and 'add to cart' button along side the description on the right.

| image 1 | image 2 | image 3 |
|description | quantity | add to cart |

If someone could help me out with this, I might be brave enough to edit further things, I think i just need a push to get going and understanding the template concepts.

ps: i have brought back all my tempates to default actinic templates. and i am using actinic catalog to get me started.

thanks a million!!

anish

[jont]

Hi Anish,

welcome to the forum. Yep - the Actinic templates can be a little confusing to start with. If you know HTML you should be OK.

Edit Act_ProductLine.html in the root of the site folder - this is a single table .. top tip is to span the <tr> tags with a <table> and </table> so you can see the layout. Arrange the table to give say a row for the images and everything else beneath.

To add in 2 other images you will need to use CUSTOMVAR's. Under Advanced | Custom Properties add in 2 new values IMAGE1 and IMAGE2. In the Act_ProductLine.html template add in

<img src="CUSTOMVAR:IMAGE1" />
<img src="CUSTOMVAR:IMAGE2" />

if you want to get tricky you can add in the alt="n" option setting up another CUSTOMVAR as required. You can format the <img> tag for borders etc as per usual HTML coding... or incorporate and Javascript for the popup etc. If doing a pop up you can use another CUSTOMVAR for the popup page source.

Save the template.

Against the product go to hte properties tab and select IMAGE1 from the drop down - browse to the source (keep images in a sub folder of the root directory) and tick use as Customvar and file name (untick searchable). Repeat for IMAGE2.

Apply and preview

HTH

[NormanRouxel]

I've done an add-on that allows products in columns. See www.drillpine.biz/actinicstuff

This also sets each product within it's own TABLE so it may be a little easier to re-arrange things to your liking.

Only change the stuff between

<!-- START each product lives in this table - alter below to rearrange items -->

and

<!-- END each product lives in this table - alter above to rearrange items -->

[wjcampbe]

I would approach this one differently. Since you want the product details, quantity and add to cart to be spread out across the three images, then Norman's three column, three product option would not fit the bill (though I highly recommend you look at using Norman's add-on wherever you need that functionality).

I would use a fragment to hold the three images and build that using standard html. Below the fragment, I would use a compact product line template with no image for the product details, qty and add to cart.

Higher maintenance than jont's offer, but gives you the flexibility to have more than one product on a page.

[parekh81]

Firstly the responses on this forum are absolutely brilliant. Thank you so much for the help.

Ok i tried jont's and Norman's ideas. and I have to admit what 'wjcampbe' said was right.

But I tried playing about with the templates to get this sorted, just couldn't get it right. infact I might have made things worse.

Any help for ' wjcampbe's ' method would be appreciated.

Thank you people again for such great and fast responses..

anish

[NormanRouxel]

Ooops. I missed the point that it was three images of the same product that you wanted. Sorry.

If you intend to have lots of products containing 3 images, then this could be done by editing an existing product template and using Custom Properties for each image and its associated popup.

Here's how to do it using Custom Properties.
Note this code is untested.

Go to Advanced / Custom Properties and create properties

IMAGE1SMALL
IMAGE1LARGE
IMAGE2SMALL
IMAGE2LARGE
IMAGE3SMALL
IMAGE3LARGE

Edit Your Product Template and replace the first

<tr>

with

<tr>
  <td colspan=3>
    <table width=100%>
      <tr align="center">
        <td>
          <a href="javascript:ShowPopUp('CUSTOMVAR:IMAGE1LARGE', 400, 400)">
            <img src="CUSTOMVAR:IMAGE1SMALL" alt="Click for larger image">
          </a>
        </td>
        <td>
          <a href="javascript:ShowPopUp('CUSTOMVAR:IMAGE2LARGE', 400, 400)">
            <img src="CUSTOMVAR:IMAGE2SMALL" alt="Click for larger image">
          </a>
        </td>
        <td>
          <a href="javascript:ShowPopUp('CUSTOMVAR:IMAGE3LARGE', 400, 400)">
            <img src="CUSTOMVAR:IMAGE3SMALL" alt="Click for larger image">
          </a>
        </td>
      </tr>
    </table>
  </td>
</tr>
<tr>

Make 3 small and 3 large images for each product. Keep them in Site1.
(as well as the usual product image if you want it).

Now in your Product Details / Properties for IMAGnSMALL and IMAGEnLARGE
enter the filenames of the images you want to use.
Also check Is File Name, and Actinic will know to upload the image for you.
If using Business, uncheck Searchable and check Use as CUSTOMVAR.

[wjcampbe]

The other way,

Add a text only fragment. Inside the fragment type

!!<<img src="pic1.gif" alt="descriptive text"><img src="pic2.gif" alt="descriptive text"><img src="pic3.gif" alt="descriptive text">>!!

Add a new product. On the layout tab, choose "No image, laid out in rows". This will give you the description on the left, quantity and add to cart button alongside.

[jont]

Higher maintenance than jont's offer, but gives you the flexibility to have more than one product on a page.

@Bill - this works for multiple products as the Act_ProductLine takes the CUSTOMVAR from against each individual product in turn in that section - each product can be assigned with a different (or the same) image accordingly so long as specified against the product properties tab - not at section or gloabal level

[wjcampbe]

jont - of course it does - forgot for the moment that each product has its own properties tab, and customvars can be re-used and given new values on each product.

[NormanRouxel]

And Anish also wanted popup larger images.

I was also presuming that he'd have lots of products and editing 6 bits within an embedded HTML string would be very error prone. Plus he'd have to remember to add these images via Advanced / additional files.

Anish, making a custom template is a bit more inital work, but this is more than compensated by being able to change the layout by a single template change, rather than having to go through every product and tinker with the description.

[parekh81]

Thank you Jont, Bill and Norman... you can't imagine how much I appreciate your prompt help.

I have been trying to understand your posts, and have tried to cange the templates according to your instructions, though I don't seem to understand what I am really changing and what effect these changes are having.

I am going to have to sit down this weekend and absord all your ideas and try and makes head and tails of them, cos at the moment i feel really lost.

I think I might get actinic's support package and ask them for help, I need to have my site up and running in 3 weeks, this puts the pressure on me.

I shall attempt to implement your suggestions and shall get back to you in case of any further problems.

thanks again

anish