Element Layout

 Objective

For both the Shopping Cart and Catalog components, the solution offers two different display modes for your items.
  • A Detailed mode allowing you to display the complete description of the item. This page allows you to display additional images and your item's options.
  • A List mode displaying, in general, a short description of your products, allowing you to give a quick, global view of the items in a given category.
The [Commerce \ Shopping Cart (Shop)] and [Commerce \ Catalog (Brochure)] menus allow you to edit the "List" mode by clicking on the Element Layout tab.

Click image to zoom

You can configure a separate layout for each of these components.

 
 General Concepts

The editor is divided into 3 separate zones:

Click image to zoom
  • General Properties
    The left hand column allows you to define the general structure of the page: number of rows and columns, image behavior, etc.

  • Preview Zone
    This zone gives you a quick idea of how your catalog will be displayed. However, this zone uses imaginary items and you will need to save your changes to see the actual layout in your site.

  • Editing Block
    The first block in the preview zone is dynamic and is your working block. You can organize the available elements to display your products as desired. The model created in the first block will be automatically duplicated in the rest of the preview zone to give you an overall view of the page.
 
 Editing Block

The editing block is your working block and allows you to organize the elements that will be used to present each of your items in the catalog: name, price, description, buttons...

The internal structure of the block is shown with dotted orange lines:



You are going to select items from the general properties section and place them in the desired location. The idea is to drag an element from the general properties zone and drop it in one of the cells of the editing block.

You must "grab" the elements using the red tab. Drag them to the desired cell. The destination zone will be highlighted in orange. Several elements can be placed in the same cell.
Click image to zoom
Click image to zoom
Click image to zoom


It is also possible to move elements around inside the editing block using the same drag and drop procedure.

Note that it is not mandatory to display all of the available elements in the general properties list.

The X that appears when you hover over an element allows you to remove the element from the block and sends it back to the general properties list:

Click image to zoom


The icons next to the X allow you to horizontally align the element. Each element can be separately aligned, even when placed in the same cell.

Click image to zoom


A pop-up menu, available by right clicking on a cell in the editing block, allows you to access additional settings for the selected cell and add new rows and columns.

Click image to zoom

 
 Pop-Up Menu in Editing Block

The contents of this menu can change in relation to the contents and settings of each separate cell in the editing block.



This pop-up menu allows you to modify the structure of the editing block and the layout of each cell therein. Below is an overview of the features available in this menu:
  • Remove All Elements:
    Allows you to remove all of the elements in the cell and send them back to the general properties list.

  • Vertical Cell Alignment:
    Allows you to define a top, middle or bottom alignment for the cell. Attention:
    • This alignment will be applied to all of the elements in the cell
    • This alignment is NOT applied in the editing block. It can be seen in the rest of the preview zone.

  • Cell Merging Options:
    The elements in this zone allow you to merge and unmerge neighboring cells.

  • Column and Row Dimensions:
    By default, the system displays equally sized columns, provided that the images or descriptions don't expand one of the columns.

    However, it is possible to fix the width and/or height in pixels for each of the cells. The system will indicate the zones that have been fixed with a red line.

  • Structure Options:
    This zone allows you to add or delete rows and columns from the editing block.
 
 General Properties

The left-hand zone allows you to define the global properties of your product list display.

The first section allows you to select the overall layout: number of elements per row (from 1 to 6 columns) and number of rows per page.

You also have access to a selection of ready-to-use layouts.

Click image to zoom


The following features are available in the general properties section.
  • Image Source:
    Decide here if you want to display the thumbnail or main images for your items in the item list display. Attention: The choice of displaying the main image will probably not be compatible with a layout of more than 3 columns.

    The system also proposes "intelligent" modes capable of displaying a given image first if it exists in your item file, and another if it doesn't.

  • Fix Dimensions:
    This feature allows you to set fixed dimensions for your images. Attention:
    • If the original images are smaller in size than the value entered here, the image will be blurry.
    • If you enter a value for the width AND the height, your images may be distorted.

  • Alternate Image Alignment:
    If your image is left or right aligned, you can use this feature to alternate the alignment of your images in each column. The alignment of the image in the first cell is used as the reference.

  • Fix Padding:
    This is very useful when the description is wrapped around the image. In this case, this feature allows you to define a fixed space around the image so that the text is not directly attached to the image.

  • Wrap Descriptions Around Image:
    This feature allows you to modify the layout of your description (or descriptions, if two are displayed). The text will be wrapped around the image and the two will be grouped together in a single block.



  • Image Behavior:
    This is where you will determine the action that takes place when the image of your item is clicked on or hovered over.

    For experts with extensive experience using JavaScript, Actinic has allowed the possibility to execute a JavaScript function when clicking on the image. This function, named OxOnImgClick, contains the ID of the cell and the URL of the main image converted in parameters. The OxOnImgClick function can be defined in the HTML Insertion Points section of your back office.
  • Description Sources:
    An item file allows you to enter two descriptions: a short description and a detailed description. This section allows you to choose the descriptions that will correspond to descriptions 1 and 2 in your page layout.

    As with your images, the system proposes "intelligent" modes capable of displaying a given description first if it exists in your item file, and another if it doesn't.

    You can also limit the number of characters that are displayed for each description provided they were created in simple text format (and not rich text or using a WebBlock).
 

Add to favorites: http://www.actinic.co.uk/Help/HelpCenterContent.asp?ActionID=512&TID=55371&MID=9000%7C55321&LangID=1
© 2001-2018 Oxatis. All rights reserved.