[Pro] Adding items to a list for form sending

Legacy Dynamo
1

I’m not sure if Dynamo is the right place for this, can move it if not…

I want users to be able to click a graphic link called “Add To Hire List” - a bit like an ‘add to cart’ I suppose, but the difference is that the item just gets added to a list in a form, and when the form is completed the list of hire items is sent to the company for them to quote based on the list.

There is no need or desire at this time for a hire and payment completion online. It is simply to enable the ‘shopping list’ to be sent to the company who can then contact the customer with a quote (we’re talking industrial stuff here, not retail).

What would be the best way to do this? It would be nice to have a ‘My Hire List’ where users can see their hire choices and complete the form with contact details before sending.

Any ideas on easiest way to do this?

Hugh

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

The lightest-weight way to do this is with cookies, in the browser. You could do it with a server-side application, and that would be more robust and offer more options, but it depends on how you are managing the list of jobs or applicants how you would best proceed.

I have a multi-page example (using cookies) here: Catalog and another one-page example using a JavaScript object in the page to hold all the ordered items here: JavaScript Shopping Cart

To be clear, the one-page example doesn’t use cookies at all, it’s a classical one-page application, in that everything in all categories is built out of JavaScript and manipulated in the browser’s memory while you interact with it. Note that the URL doesn’t change when you move from “page” to “page”.

Both of these examples would fit an application process where you want to maintain the listings in a static file. If you wanted to have a database, where you client could update job listings or applicants could advertise their availability, without you needing to get involved in the day-to-day data entry, then you would need a different approach than this, and frankly, the time you would spend on the cart part would be dwarfed by the data-sanitization and database connection portion of the project.

Walter

On Mar 14, 2013, at 9:49 AM, hugh wrote:

I’m not sure if Dynamo is the right place for this, can move it if not…

I want users to be able to click a graphic link called “Add To Hire List” - a bit like an ‘add to cart’ I suppose, but the difference is that the item just gets added to a list in a form, and when the form is completed the list of hire items is sent to the company for them to quote based on the list.

There is no need or desire at this time for a hire and payment completion online. It is simply to enable the ‘shopping list’ to be sent to the company who can then contact the customer with a quote (we’re talking industrial stuff here, not retail).

What would be the best way to do this? It would be nice to have a ‘My Hire List’ where users can see their hire choices and complete the form with contact details before sending.

Any ideas on easiest way to do this?

Hugh

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Hi Walter,

Nice examples, thanks for those. I feel the cookies one is closer to what I want. At this stage there is no need for a complex database application; this is merely an information gathering exercise, the information being sent to the site owner to respond manually. I’d see it as very much a form action as opposed to a database application. (but what would I know!)

The client has about 100 pieces of heavy plant and this will be spread across about 20 product pages on the site. If the user needs a 20 tonne dumper he clicks ‘add to hire list’ on the dumper page and carries on looking for the other equipment he needs, adding them as he goes. At the end he would go to his ‘My Plant List’ page (effectively a checkout page) where he sees the list of equipment he’s ‘added’, supplies contact information and perhaps hire period dates, and sends the form off.

That’s it, really.

I have wondered whether a simple shopping cart couldn’t be used for this - ie. a shopping cart without any prices or payment connections. But maybe a shopping cart is too close to the purchase model. I simply want to build a list of variables to be sent by a form.

Hugh

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

The /catalog example is the one for you, then. DeltaDave did a clone of it in Freeway (my example was hand-coded) and he’s posted it on his list of examples somewhere. There’s no reason that the pricing and so forth is needed to make it work. All it’s doing is storing all of the “products” that the customer chooses in a cookie, and the playing them back as hidden elements on the final form (where you fill in the address). I think this would map very neatly to your use-case.

Walter

On Mar 14, 2013, at 11:51 AM, hugh wrote:

I have wondered whether a simple shopping cart couldn’t be used for this - ie. a shopping cart without any prices or payment connections. But maybe a shopping cart is too close to the purchase model. I simply want to build a list of variables to be sent by a form.

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Everything is in one script: http://scripty.walterdavisstudio.com/catalog/cart.js Line 9 loads the cookie into memory as a data structure called a Hash, and then lines 13-18 modify the form if it is present to include a hidden field for each product chosen from that hash.

Please contact me off-list if you’d like to contract for coding this to fit your application.

Walter

On Mar 14, 2013, at 11:51 AM, hugh wrote:

I feel the cookies one is closer to what I want.

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Hi Walter,

Yes, the /catalog one would seem preferable, dressed in whatever site design we end up with.

At the moment I want to get something working in a rudimentary fashion, enough to show the client and get them interested. I’ll have a play with your cart.js based on the example, see if I can integrate it in some fashion.

But if they like it and we move to integrate it properly, then your fit-for-purpose coding might be very welcome, and I’d definitely consider contracting that out to you.

Hugh

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Two further points, Walter:

Do you know where DeltaDave’s “list of examples” might be found?

In your catalog example, i notice the ‘add to cart’ links are not actually … ? How does that work exactly?

Hugh

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Lines 20 through 36 of cart.js, inclusive. These “links” are just spans decorated with the class style .fake_link. The script observes a click on those, and uses it as the trigger for the following:

  • Line 25: look up from the element that was clicked (the span) to find its immediate parent (a P), grab all of the text inside it, then strip out the span containing the link.
  • Line 26: determine if this element has been added to the cart already, or set the quantity to 0
  • Line 28: set the quantity to existing quantity + 1
  • Line 30: stash the new value in the cookie
  • Line 32 - 35: re-paint the cart element with the new list of “purchases”.

In order for this to work properly, you need to create a style called .fake_link in the Styles palette (you can add the underline and other accouterments to make it appear link-like) and apply that to each “link”. The remaining text in the same parent container (a p or a li or whatever element you choose for your list of products) will become the name of the product. In this example, the cart is an HTML box with its Name/ID set to ‘cart’. If you change this, you must change any instance of $(‘cart’) in the script to match.

Walter

On Mar 14, 2013, at 2:50 PM, hugh wrote:

Hi Walter,

Yes, the /catalog one would seem preferable, dressed in whatever site design we end up with.

At the moment I want to get something working in a rudimentary fashion, enough to show the client and get them interested. I’ll have a play with your cart.js based on the example, see if I can integrate it in some fashion.

But if they like it and we move to integrate it properly, then your fit-for-purpose coding might be very welcome, and I’d definitely consider contracting that out to you.

Hugh

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

http://www.deltadesign.co/fw_examples/walts_scripts/index.html

Not all FW - some markup added. If you want a FW example I can give you that.

David

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

Hi Walter,

OK, reckon I grasp most of that. Only difference with the link/span classes is I’m using images not text for the ‘link’, but that can be part of the class easily enough.

Thanks, Dave - similar to Walter’s example I guess. Looking at the Freeway file would be most interesting.

Thanks both.

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options