X-Cart Module

Closed - This job posting has been filled and work has been completed.

Job Description

Looking for someone who can develop a custom X-Cart Module for me.

The module will be called 'Product Grid'.

What's a Product Grid?
It's a way to display 10 images on your X-Cart home page (for example) in a grid-like pattern. Sure, this can easily be done using HTML and CSS, but I want the x-cart administrator user to be able to SPECIFY WHICH PRODUCTS appear in the grid. Also, when a visitor hovers over an image, the adjacent grid displays info about that item. For an example, please visit the following website:
http://www.tiffany.com/Shopping/CategoryBrowse.aspx?cid=622067&mcat=148204

(The effect I am looking for is very similar)

Visit the link above, the hover over any image on the grid.
You will notice:
1. The image changes to another image
2. The adjacent grid displays the details of the product (price, etc)

I am looking for a custom X-Cart module that will allow an admin to easily specify which products should appear in a Product Grid. The admin should also be able to specify:
1. The text that appears in the 'pop-up' div
2. The alternate image that appears when the visitor hovers over the grid
3. The size (width and height in pixels) of the 'pop-up' div
4. The relative position of the 'pop-up' div

(NOTE: I am not familiar with module development for x-cart. If the above 'wish list' takes too much effort, then eliminate 3 and 4. Instead, the sizes and positions will be hard-coded on the page. That's fine for now.)

Module needs to work in the latest version of X-Cart (currently 4.6).

Example use case:

- User logs into X-Cart admin and goes to Product Manager.

- User selects a product (or adds a new product)

- At the bottom of the page, there should be a new section called 'Product Grid'. (If possible, this section should only be visible if the 'Product Grid' module is activated)

- Here, the user can select a Product Grid from a drop-down list. (This implies that the Product Grid already exists and is active. It also implies that on a site, there can be multiple Product Grids) (Possible?)

- Next, the user selects the 'position' where the product image will appear in the grid, from a drop-down list.(Example: Position 1, Position 2, etc). (The number of positions depends on the Product Grid that the user selected above - When the user creates a 'new' Product Grid, they select a pre-designed pattern - maybe one grid design has 4 images. While another design has 10 images.)

- Next, the user clicks the Browse button to select (or upload) the *default* image. This is the image that appears in the grid by default. The uploaded image should be the same size as the 'cell' in the specified grid. (for example, maybe the image in position 3 on the grid has to be 80px x 80px.). If the Grid patterns are pre-designed, the module can inform the user of the required size via a message on the screen.

- The user should also be able to upload (or select) a second image. This is the 'hover' state image. That is, the image that is displayed when the user hovers over the grid.

Next, in a multi-line text box, the admin can type in some html-formatted text. When entering text into this field, they should be able to use placeholder variables (specific to this module). For example, if they enter {{short-description}} then the module will simply take the already existing short description and place it here. Likewise, they can use a variable called {{price}}, which the module will replace with the actual price of the item (already specified on the Product Management page).

Finally, if possible (and only if it is not too much effort), I would like the user to be able to specify the size of the 'pop-up' div that displays the text, as well as the offset (from top left corner).

A few comments on the actual grids: I'd like them to be pre-designed. This way the admin only has to pick it from a list. The actual html div that contains the grid is 'responsive', meaning, if the site is built as a responsive site, and if the visitor views the page from a smaller screen, the 'cells' in the grid move around to accommodate the screen size (So for example, instead of the grid being 5 images across x 2 rows, when viewed from a smart phone, it changes to 2 columns x 5 rows (vertical)

I am VERY OPEN to suggestions so if we work together, you can help me design the functionality of the module. When this project is finished, all of the code must be turned over to me, and you cannot re-use or sell this module.

Open Attachment