PDA

View Full Version : Shop layout with filters



Roel Westhoff [W4]
13-Mar-2014, 10:42 AM
Hi All,

A client wants to have a layout of his products in a webapp simular to the attached picture.
A list of products on the right (with layout options on the top - list, small pictures, big pictures,details) and filters on the left.
7523

Can anyone give me suggestion how i can create this interface in the webapp framework.
I have been looking at cHtmlReport-class but without much result. No examples available and the older cWebreport seems not to work in WAF

Tia
Roel

Vincent Oorsprong
13-Mar-2014, 03:00 PM
Roel,

Look at the example Harm uses in the WAF training (Music viewer).

matthewd
13-Mar-2014, 03:03 PM
You might need to create a custom class... this reminds me of the cDJCase class in the "MediaStore" sample workspace used at training sessions. Basically the way the class works the items are stored in a tWebRow array, and each element needed to display each item (name, image, price, item #, etc in your case; the cDJCase class just displays an image an a title) is placed in the aValues array for each tWebRow. On the JavaScript side, these values are then used to render the HTML for each product that needs to be displayed, each item in its own DIV.

If you have access to this code I would probably start with it and extend it to your needs.

Roel Westhoff [W4]
13-Mar-2014, 04:07 PM
Hello Vincent and Mathew,

Found the code.

Has some work to be done because it is df17.1 and i'm using df18a2
Thanks for the hint.

Roel

Anders Ohrt
14-Mar-2014, 01:36 AM
Roel,

I've recently done something very much like this. Use some panels to divide your view. Then use a card container with cards for the different layout options.


Object cLayoutPanel is a cWebPanel
Set peRegion to prTop
// Put layout objects here.
End_Object

Object oCenterPanel is a cWebPanel
Set peRegion to prCenter

Object oFilterPanel is a cWebPanel
Set peRegion to prLeft
// Put filter objects here.
End_Object

Object oProductPanel is a cWebPanel
Set peRegion to prCenter

Object oProductCardContainer is a cWebCardContainer

Object oListCard is a cWebCard
// Put product objects here.
End_Object

Object oSmallPictureCard is a cWebCard
// Put product objects here.
End_Object

Object oBigPictureCard is a cWebCard
// Put product objects here.
End_Object

Object oDetailsCard is a cWebCard
// Put product objects here.
End_Object

End_Object

End_Object

End_Object

DaveR
14-Mar-2014, 10:44 AM
;273434']Hello Vincent and Mathew,

Found the code.

Has some work to be done because it is df17.1 and i'm using df18a2
Thanks for the hint.

Roel

Roel, where did you find it? (I couldn't)

Vincent Oorsprong
14-Mar-2014, 11:45 AM
Dave,

Roel was in one of Harm's training sessions. Speak to Harm at DISD...

DaveR
17-Mar-2014, 01:11 PM
Dave,

Roel was in one of Harm's training sessions. Speak to Harm at DISD...

I shall, but Roel NG-emailed me Friday (?) asking for a direct email so it might be on the way...

DaveR
18-Mar-2014, 02:30 PM
Hmmm,

Roel, you said in your 18a2 version you were having difficulty in cDJCase.pkg. When I run under 17.1 I get 'a could not find class djcase' which I'm guessing refers to a js class. Is this the same issue?

Dave

Roel Westhoff [W4]
22-Mar-2014, 04:24 AM
Hello Dave,

I think it is something different,

There has been technology change in the way the client interacts with server. In df17.1 it was based on tWebRow. In df18 it is based on the tWebValueTree. I got a pointer from Harm. You can see the changes in the cWebList.pkg. I made some changes to DJCase.Pkg and DJCase.js but have not got it working in df18. Javascript is not my cup of tea yet.

Roel

Tom Murphy
23-Mar-2014, 09:17 AM
Hi guys

We have converted the djCase for use as a shop filter class in 17 and 18, and are happy share it however I just haven't had time to clean it up a bit. Im hoping in the couple of days I will and then we'll post in the user contrib area.

Cheers
Tom

Sent from my GT-I9505 using Tapatalk

DaveR
24-Mar-2014, 08:41 AM
Hi guys

We have converted the djCase for use as a shop filter class in 17 and 18, and are happy share it however I just haven't had time to clean it up a bit. Im hoping in the couple of days I will and then we'll post in the user contrib area.

Cheers
Tom

Sent from my GT-I9505 using Tapatalk

cheers Tom

Tom Murphy
24-Mar-2014, 09:59 PM
Check out http://support.dataaccess.com/Forums/showthread.php?53233-Web-Catalogue-and-Image-Gallery&p=274165#post274165

Roel Westhoff [W4]
25-Mar-2014, 07:26 AM
Hello Tom,

I'm impressed. A very nice and very usefull extension to the webapp classes.
Exactly what i need.

The code looks very clean. Study material.

THANKS

Roel

DaveR
25-Mar-2014, 08:57 AM
Check out http://support.dataaccess.com/Forums/showthread.php?53233-Web-Catalogue-and-Image-Gallery&p=274165#post274165

very nice indeed, thank you Tom. This gets the imagination going....

Tom Murphy
25-Mar-2014, 09:21 AM
Yes, a couple of easy examples (in the end) of how to extend the framework.

It does start to make you think of what else be can be done easily.

Sent from my GT-I9505 using Tapatalk