Product Attribute Pictures v1.3 - User Guide

We hope you will find this software easy to install and use. The User Guide section of this document is also available online via the help buttons in the PAPs admin panel. If you have a support question or comment, please don't hesitate to contact us using the channels shown in the Further Support section, below.

Contents

System Requirements
Installation
User Guide
  Uploading Images
  Adjusting Display Settings
  Popup Viewers
Troubleshooting
Premium Version Info
Further Support, Customization and Development Services

System Requirements

  • PHP 4.3 or later
  • MySQL 5.0 or later (earlier versions may work)
  • osCommerce 2.2 Milestone 2 (earlier versions may work, but are not supported)


Installation

The installation process for this version of PAPS requires:

  • 5 steps
  • 2 files to edit
  • 3 database tables

Fresh Installation

Step 1 - Copy all the files and folders (even if some are empty) from the 'catalog' directory of this distribution to their respective folders.
Step 2 - Backup your database, and then run the code in the file sql/paps_v1.3.sql using your favorite database interface program. REMEMBER: if you are using prefixes for your database tables you need to add the prefix to the table names in the SQL file before you run the SQL commands.
Step 3 - Open the file catalog/admin/includes/boxes/catalog.php
Find the line: '<a href="' . tep_href_link(FILENAME_PRODUCTS_ATTRIBUTES, '', 'NONSSL') . '" class="menuBoxContentLink">' . BOX_CATALOG_CATEGORIES_PRODUCTS_ATTRIBUTES . '</a><br>' .
and add beneath it: '<a href="' . tep_href_link('paps.php', '', 'NONSSL') . '" class="menuBoxContentLink">Attribute Pictures</a><br>' .
Save and close the file.
Step 4 - Open the file /catalog/product_info.php

Place the following lines:
//BOF Product Attribute Pictures
require_once(DIR_WS_CLASSES . 'paps_delegate.php');
$paps_delegate = new paps_delegate();
$arr_globals = $paps_delegate->getProductGlobals($product_info['products_id']);
//EOF Product Attribute Pictures

immediately BEFORE this line:
$products_attributes_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "'");


Place the following lines:
//BOF Product Attribute Pictures
$heading_conf = $paps_delegate->getAttributeHeaderDisplaySettings($products_options_name['products_options_name'], $product_info['products_id']);
if((!$heading_conf['aas']) || ($arr_globals['unlink'])){
//EOF Product Attribute Pictures

immediately AFTER this line:
while ($products_options_name = tep_db_fetch_array($products_options_name_query)) {


Place the following lines:
//BOF Product Attribute Pictures
}
//EOF Product Attribute Pictures

immediately AFTER these lines:
<tr>
<td class="main"><?php echo $products_options_name['products_options_name'] . ':'; ?></td>
<td class="main"><?php echo tep_draw_pull_down_menu('id[' . $products_options_name['products_options_id'] . ']', $products_options_array, $selected_attribute); ?></td>
</tr>
<?php


Place the following lines:

<?php include(DIR_WS_MODULES . '/paps.php'); ?>

At the point in the file at which you would like the Product Attribute Pictures to be displayed. When placing this line, please bear in mind the following points:
  • placement should be within an existing table - the display begins and ends with <tr></tr> tags
  • placement should be anywhere after the line: $products_attributes = tep_db_fetch_array($products_attributes_query);
Step 5 - Ensure the following folder is fully writeable:

images/paps

Installation is now complete. You are now ready to proceed to the User Guide and follow the steps outlined there.


User Guide

Uploading Images


To set up your images for any given product:

1) In the Admin component, go to Catalog->Attribute Pictures via the main menu.
2) Select the product to which you would like to add images using either its model number or name. Use the dropdown menus to choose.
3) Initially, you will see a message stating that there are no pictures available for this product. Beneath this message, you will see the upload section.
4) In the uploads section you will see:

Existing PAPs Attribute - Use this dropdown box to select an attribute (either native or PAPs-only) to which you have already assigned images but now wish to add some more. The new images will be grouped together with the attribute's existing images.

SUGGESTION: You should upload at least 2 pictures for each new attribute. Enter a number in the box provided and click 'Submit'.

5) You will now see a number of rows allowing you to upload your product attribute images. You will need to fill every row before uploading. Each row has 2 columns:

  • Group Value - This is the specific name of the individual attribute (e.g. Red, Large, Gothic etc). If you chose to add images for an existing native attribute, you will see the first column automatically populated with a list of all relevent attribute values. These attribute values are the ones you previously set up either in the Products Attributes section of the osCommerce Admin component.
  • File - This is the filepath and name of the image file that you will choose by clicking on the 'Browse' button. All attribute values must be assigned a filename or the files will not be properly uploaded.
For example, if you wanted to upload 3 pictures showing different colors, your upload section would look like this:

Group ValueFile
Red[FILENAME].jpg
Green[FILENAME].jpg
Blue[FILENAME].jpg

SUGGESTION: Attribute Names and Values can contain spaces, but please avoid using apostrophes as these could affect the normal operation of PAPs. Attribute Values will be displayed exactly as you enter them here.

WARNING: If you plan to upload several large image files, make sure that the total aggregate size of all files added together does not exceed the 'upload_max_filesize' or 'post_max_size' settings in your web server's php.ini file.



6) When you have entered the information in both columns of the uploads section and entered the watermark information (if required), click 'Upload'. Congratulations! Your pictures have been attached to the selected product and you should now be able to see them if you look at the item's product info page in your store.
At this point, you can make adjustments to the way your pictures are displayed. The next section deals with these options.


Adjusting Display Settings

After you have uploaded a set of images for at least one attribute, you can now make various adjustments to the way in which the images are displayed. To make adjustments for images already uploaded for a different product simply select the product from the dropdown menus at the top of the screen.

You should now see the Current Images section, which has the heading: 'CURRENT PRODUCT ATTRIBUTE PICTURES FOR: ' followed by the product name and model number. Below this you will see the following product-level options:


Ignore Product Attributes (Yes/No):

'Yes' (default): your pictures will be displayed in the product info page even if you have not set up any attributes for the product via the Products Attributes section of the Admin component. In effect, this means that you can add images that are unrelated to specific product attributes to the product info page.
'No': your pictures will only be displayed AFTER you have set up corresponding attributes using the 'Products Attributes' section of the Admin component. In this mode, you will have the option to show the price differential of each attribute value below its picture. You will also be able to allow customers to select their desired attribute using radio buttons below each picture. Please note, the Attribute Value and Attribute Names you use when uploading the image files must exactly match those that you set up in the Products Attributes section.
NB - This setting applies to ALL pictures associated with the selected product.

Viewing Area Title:

Edit this textbox to change the main heading for PAPs viewing section on your product information page. This textbox will be reproduced for all the available languages in the store.

Viewing Area Subtitle:

Edit this textbox to change the text below the main title. This could include a brief instruction for users on how to use the viewing area. This textbox will be reproduced for all the available languages in the store.

Main Image Title:

Edit this textbox to change the text which will appear above the enlarged image which the user has selected. If you check the 'Use Option Name' checkbox next to the text box, the title of the selected (main) image will automatically revert to the attribute value whose thumbnail the user has selected. This textbox will be reproduced for all the available languages in the store.

Popup Type:

If you want the user to have a choice of viewing an even larger image of the selected attribute picture as a popup, here you can choose the method by which the popup will be rendered. Please note - even if you have selected one of the viewers from this list, the user will only be able to activate the selected (enlarged) picture and view the popup if the image file you originally uploaded as the product attribute picture is larger than the selected (enlarged) picture. The PAPs system automatically calculates if the uploaded file's image size is larger than the enlarged picture, and creates a link to the popup if this is the case. For more information on the various viewers you can choose from, see the Popup Viewers section.

Beneath these settings, you will see one column of settings for each product attribute name that you have already uploaded pictures for. Each column consists of the following:

  • A 'Current Product Attributes Pictures' table -

    This table shows which pictures representing attribute values (e.g. Nylon, Cotton etc.) you have already uploaded to the server, and the attribute name (e.g. Material) with which they are associated. You can also view or delete any of the pictures via this table. The fields in this table are:
    • Group Name - The name of the generic group of pictures to which the group values (i.e. the names of the pictures in the group) belong.
    • Group Value - A list of all the group values (i.e. names) currently associated with the group name. If 'Ignore Product Attributes' is set to 'Yes', an icon will appear next to each group value which will allow you to edit the value however you wish.
    • Attribute Price - Displays the price differential of the attribute relative to the default product's price. This field will only be displayed if 'Ignore Product Attributes' is set to 'No' and 'Display Attribute Prices' is set to 'Yes'.
    • View - View the uploaded image for a particular group value. This field is displayed for all non-swatch picture sets.
    • Sort - Here you can change the position of the thumbnails as they are displayed in the product info page.
    • [ICON] Delete - Check the box if you wish to delete a particular group value, then click 'delete' below.

    NB - The fact that your uploaded pictures appear in this table does NOT necessarily mean that they are currently being displayed in the product info page.

  • Display Group Name:

    'Yes' (default): the group name (general heading e.g. Material, Size etc.) will be displayed above the group of pictures showing the different attribute values.
    'No': the attribute name is hidden.

  • Display Group Values:

    'Yes' (default): the group value (specific title e.g. Cotton, Large etc.) will be displayed below each attribute value picture.
    'No': the group value (i.e. name of the picture) is hidden.

  • Display Attribute Prices (only available if 'Ignore product attributes' is set to 'No'):

    'Yes': the price differential (e.g. +$2.00, -$3.50) will be displayed below each attribute value picture.
    NB - the price differential should already be set via the Products Attributes section.
    'No' (default): the price differential is hidden.

  • Allow Attribute Selection: (only available if 'Ignore product attributes' is set to 'No'):

    'Yes': a radio button will be displayed below each attribute value picture. Customers can select which attribute value they would like to purchase by clicking on the radio button. When the item is added to the shopping cart, the attribute value will be added to the cart, together with the price differential. The standard attribute selection dropdown menu for the attribute name will not be displayed.
    'No' (default): the radio buttons will be hidden, and customers will use the standard attribute selection dropdown menu to select which attribute value they require.

  • Number of pictures per row:

    Default: 3 - enter the maximum number of thumbnail pictures to be displayed per row next to the main selected picture frame.

  • Width of thumbnails (pixels):

    Default: 80 - enter the width in pixels of each thumbnail (attribute value picture).

  • Width of selected pic (pixels):

    Default: 300 - enter the width in pixels of the enlarged picture which displays the selected thumbnail.

NB - Only image widths can be set in order to maintain the aspect ratio of each image. You should always ensure that you upload pictures which are slightly larger than required because the system can reduce large images but will not increase the size of smaller images. Again, this is to maintain the quality of the image.

Popup Viewers


You have a choice of 3 popular open source popup viewers to allow your customers to get an even closer look at your attribute pictures. Certain features of these viewers can be customized to varying degrees. To make customizations, you will need to find the relevent .js or .css files for each viewer in the catalog/includes/popups folder. Further support for each viewer can be found at the websites shown below:
  • Thumbnail Viewer - This is the most lightweight, no-frills viewer of the eleven available. Few customizations are possible. Support can be found at http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm
  • Facebox - This is a fairly popular viewer derived from the popup viewer used on the Facebook website. Still fairly lightweight but slightly more configurable than thumbnail viewer. Website is at http://famspam.com/facebox
  • Lightbox - A very popular and versatile viewer, although more complex to customize. More information at http://www.huddletogether.com/projects/lightbox2/

Troubleshooting

Q) I've set up some images in the APPs admin page, but nothing shows up in the product page.
A) Several things could cause this:
- check that the code:
<?php include(DIR_WS_MODULES . '/paps.php'); ?>
is not placed inside a conditional PHP clause e.g. inside an 'if' clause within your product_info.php file.
- make sure the names of uploaded files do not contain whitespace or non alphanumeric characters
- make sure the images/paps folder is fully read/writeable

Q) My images are being displayed smaller than required even though I have set the image widths in the control panel.
A) You should create your images at least as large as the size required for the enlarged (selected) picture before uploading them. If you intend to use Javascript popups, the uploaded images should be larger than the intended size of the enlarged (selected) images.

Q) I'm getting an error similar to: 1146 - Table [TABLE_NAME] doesn't exist.
A) Please ensure that you have NOT added any database tablename prefixes to the PAPs database table names.

Q) I have added content to a tooltip, but now when I click the Tooltip icon in the PAPs admin area the textarea does not display.
A) This can happen if you have used double quotes in your tooltip content. To fix it you will need to access your database and look through the table called 'paps_tips_txt' for the 'tip_txt' column, then find the row associated with your attribute and eliminate the offending double quotes from the data. Refresh your PAPs admin page, then try to edit the tooltip content again.



Premium Version Features

The premium version of PAPs has many more features than this lite version. Extra features include:

  • Removal of 'Display by PAPs' links under enlarged image
  • 3 ways to enlarge thumbnails - hover, click thumbnails or radio button per thumbnail
  • 3 ways to select options for inclusion in the cart - hover/click thumbnails or radio button per thumbnail
  • Display selected attribute option pictures in shopping cart page
  • Dynamically update product price with aggregated product option price differentials
  • Create scrollable overflow panes to neatly contain large numbers of thumbnails
  • Add customizable, stylish CSS tooltips per thumbnail
  • Change position of enlarged picture relative to thumbnnails - above, below, to the left, to the right or detached
  • Choose from 9 stylish Javascript popup engines - Thumbnail Viewer, Facebox, Lightbox, Thickbox, Mojo Zoom, Mojo Magnify, ColorBox, FancyBox, Slimbox
  • Apply image effects to thumbnails including rounded/blurred edges, shading and frames
  • Create instant galleries inside popups with one click
  • Linked Attribute Pictures (LAPs) - Upload a separate image to display for each possible combination of selected attribute options
  • Merged Attribute Pictures (MAPs) - Dynamically merge and display existing individual option pictures as they are selected by the user
  • Swatch Attribute Pictures (SAPs) - Display thumbnails as swatches
  • Enable Javascript preloading for faster display when selected
  • Editable picture group and thumbnail titles when not linked to product options
  • Create product options on the fly when uploading images or copying to other products
  • Bulk Copy feature for cloning image sets, settings and even native attributes from one product to another
  • Versatile watermarking functionality
  • Multi-language support for store-side viewing area headings, subheadings and selected image title
  • Admin panel in English, Spanish, French, Italian and Dutch languages
  • Use Settings Profiles to apply stored user-defined settings configurations with one click

For more information visit us at http://www.product-attribute-pictures.com



Further Support and Customization Enquiries

Please remember to send us your versions of PHP, MySQL and osCommerce when sending a support or customization query.

Product Attribute Pictures Website http://www.product-attribute-pictures.com
Support & Discussion Forum http://www.product-attribute-pictures.com/index.php/component/option,com_ccboard/Itemid,30/view,forumlist/
Support Email it@product-attribute-pictures.com
Other Enquiries http://www.product-attribute-pictures.com/index.php/component/option,com_chronocontact/Itemid,60/

COPYRIGHT (c) 2010 OPEN SOURCE SERVICES. ALL RIGHTS RESERVED.
Copying or re-selling of this material is illegal.