[Pro] Shopping list on Freeway

Freeway
1

I’m developing a new website that requires something as a shopping list. It’s a catering website where the costumer can order several cakes, starters, foods and so on.
The way I create it, the costumer, starts to fill a personal information page and then chooses several items from some different pages (separated by the kind of food)…
My question is if Freeway has some kind of action (like a shopping list) where the client after finish the order, can check it and send by email.

Best regards

Rui Santos

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

2

Is this page just for ordering - no payment processing?

FW does make it very easy to create forms to submit this sort of information. The problem will be in storing that info from several pages before sending it.

It would be much easier if there was only one ordering page but I suppose that will depend on the number of products.

A bit more information would help.

David

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

3

David

I’ve sent an email, but I’ve attached a pdf file.
Afterwards received a message from FW support about the size from the message.
Do you have an email, where I can send you the file?

This is the email I’ve send you:

"David

Thank you very much for the fast reply.
There’s no payment in the order.

For you understand it in a better way, I’ll send you the design I’ve created for this website, in a PDF file (it’s in portuguese, hope you’ll understand it).
The first page,is where the costumer enter the personal information. After that, they can choose witch kind of food they desire to order (starters, cakes, food and so on).
My idea, is after the costumer ends the order, check it and finally, send it by email ( like on a submit button, but with a different design that doesn’t says submit)

First I’ve made the design in Illustrator (because for me, it’s more simple to first design the pages on that kind of program and afterwards make it on FW).

Maybe you can suggest a better way to do it on FW.
I’ve just think on a shopping list page, because it’s the kind of action that I know, and it might work."

If you have any questions, feel free to send me an email.

Thanks in advance, for your help

Rui Santos

Wait for feedback

Best regards

Rui Santos

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

4

Hi Rui

If you click on my name in the header of the post (the online version at freewaytalk.net) this will take you to my entry on the People page where you can see my email address.

D

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

5

There is the Freeway Shop application, which uses the Mals cart system. You might be able to use that. It’s based around actually taking the customer’s money on line, if you don’t want to do that specifically, you may still be able to use the cart.

Otherwise, you’ll need to store the user’s selections somewhere. If all you’re doing is saving some very lightweight thing, like the text of the product names, then you could build something using JavaScript and cookies, and use that to populate your final page – where you would have the form set up with the PHP Feedback Form Action to send the mail to you. Shouldn’t be too difficult to do.

If you look at Cookie Puss! there’s a very simple example of collecting user input in a cookie.

Walter

On Apr 20, 2012, at 5:52 PM, RuiSantos wrote:

I’m developing a new website that requires something as a shopping list. It’s a catering website where the costumer can order several cakes, starters, foods and so on.
The way I create it, the costumer, starts to fill a personal information page and then chooses several items from some different pages (separated by the kind of food)…
My question is if Freeway has some kind of action (like a shopping list) where the client after finish the order, can check it and send by email.

Best regards

Rui Santos

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

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

6

Even simpler than the cookie_puss system, which used a much heaver solution than I remembered:

http://scripty.walterdavisstudio.com/catalog

This uses CookieJar.js, which is a Prototype extension to help with manipulating cookies. It only took 34 lines of JavaScript to create a working cookie-based cart system with add and remove. I’ve added some comments to the script so you can see what’s going on there.

http://scripty.walterdavisstudio.com/catalog/cart.js

Walter

On Apr 20, 2012, at 7:14 PM, Walter Lee Davis wrote:

Otherwise, you’ll need to store the user’s selections somewhere. If all you’re doing is saving some very lightweight thing, like the text of the product names, then you could build something using JavaScript and cookies, and use that to populate your final page – where you would have the form set up with the PHP Feedback Form Action to send the mail to you. Shouldn’t be too difficult to do.

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

7

Very interesting Walter

You don’t show the form side of the item removal/update mechanism - can you add that to your example please. When you get a minute.

Note to self: Walter lives in a world where time is compressed. Or at least it seems that way as he seems to handle so many “When you get a minute…” requests!

Many thanks for sharing.

David

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

8

Line 44 and 58 of cart.js do that trick. It’s essentially the same trick as the visible elements – remove everything that looks like a hidden element with the name ‘items’ and then re-add them inside the loop over the cart contents from the cookie.

Walter

On Apr 21, 2012, at 6:42 AM, DeltaDave wrote:

Very interesting Walter

You don’t show the form side of the item removal/update mechanism - can you add that to your example please. When you get a minute.

Note to self: Walter lives in a world where time is compressed. Or at least it seems that way as he seems to handle so many “When you get a minute…” requests!

Many thanks for sharing.

David

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

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

9

Just realised that when you hover over the item in the Cart a minus sign appears to the left (to remove it).

Too subtle for an old git like me.

Thanks Walter - got it working and I am sure I can find a use for it. Meanwhile it has gone in the Walter Treasure Chest with all the other goodies.

D

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

10

That’s a fun trick, using the :before pseudo-class. The selector is #cart p:hover:before. So no rollovers were harmed in the making of that effect.

#cart p { cursor: pointer }
#cart p:hover:before { content: '- ' }

Walter

On Apr 21, 2012, at 8:36 PM, DeltaDave wrote:

Just realised that when you hover over the item in the Cart a minus sign appears to the left (to remove it).

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

11

Hi Walter,

I’ve just ordered a bacon sandwich - would have ordered two (greedy) but there doesn’t seem to be a way of doing this, though the ‘cookie puss’ does potentially. ?

s

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

12

Actually, that’s just an implementation detail. Originally, I had the cart stored in an array, so you could have as many of anything you wanted. But it made the delete work funny – if you deleted one, you’d delete all of the same name. It wouldn’t be hard to allow multiples, just hook the add method to track quantities, and the remove to decrement the counter until all are gone. If I get a moment this afternoon, I’ll add that to the example. It’s very simple.

By the way, if you get the chance, fly Southwest Airlines. I am cooling my heels in the Houston airport, waiting for my connecting flight to Austin. Pleather club chairs, little cocktail tables between each pair of chairs, with USB and AC charging ports in each. Very civilized.

Walter

On Apr 22, 2012, at 7:27 AM, “seoras” email@hidden wrote:

Hi Walter,

I’ve just ordered a bacon sandwich - would have ordered two (greedy) but there doesn’t seem to be a way of doing this, though the ‘cookie puss’ does potentially. ?

s

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

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

13

It’s very simple

Ha ! the magnificence of that phrase.

Thanks Walter and have a good flight.

s

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

14

Have another look. If you see any errors, just run through the checkout to clear your cookie and go back and look again. It now tracks the number of elements you’ve put in your cart.

Walter

On Apr 22, 2012, at 12:23 PM, seoras wrote:

It’s very simple

Ha ! the magnificence of that phrase.

Thanks Walter and have a good flight.

s

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

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

15

Cool, very cool. Definitely one to have at hand. Shall play more with it tomorrow.

thanks Walter,

s

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

16

Walter

Thank you very much
That´s exactly watch I was been looking.

Best regards

Keep up the excellent work and support

Rui Santos

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

17

Walter

Sorry to bother you again with the question about the shopping-list javascript on freeway.
I’ve download an action from Freeway to place a JS, but after that I can´t figure what to do next to start personalizing this JS and start using it on the website.
I don’t have knowledge about programing.
Can you help me again?

Rui Santos

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

18

Here’s a short list of things to try. First, use the External JavaScript Action to attach the cookiejar.js and cart.js files to your page. Be sure that they are added in that order. Next, use the Protaculous Action to add prototype-packed to your page. Finally, you need some carefully-constructed styles and box names.

Draw an HTML box where you want your cart to appear. In the Inspector, be sure that the Title field reads ‘cart’. Put some text in that box – anything at all – so that it doesn’t publish with a 1px font-size. It’s actually a good idea to put something like “You must have JavaScript enabled to use this cart”, since the only people who will see that text are those with JavaScript disabled for some reason.

Draw another HTML box where you want your list of available items to appear. Put each item on a separate line, with a full return after it.

Create a new style, with the Name set to ‘fake_link’ (without the quotes). In this style, use the Extended dialog to add the following attributes:

cursor: pointer
color: blue
text-decoration: underline
float: right

(For each of these attributes, click New, then put the part to the left of the colon in the Name field, and the part to the right of the colon in the Value field. Don’t enter the colon or anything else.)

Now click right after the name of your first product, type the words “Add to Cart”, then highlight just those three words and click on your new fake_link style in the Styles palette. While the three words are still selected, copy them and paste them at the end of each of the other product names.

At this point, if you preview in a browser, you should be able to add things to your cart.

If you duplicate these steps on each of the other pages in your multi-page cart, you should be able to carry a collection of items from one page to another. Finally, if you are on the checkout page (with the form) you’ll need to do a little more magic to get the order to submit. Depending on how you have set up your form, you may need to add an ID to the page or to the table that holds your form. When you get to that part, upload the site so far on a server where we can see it and post a link back to the list.

Walter

http://scripty.walterdavisstudio.com/catalog/cart.js

http://scripty.walterdavisstudio.com/catalog/cookiejar.js

On Apr 29, 2012, at 2:46 PM, RuiSantos wrote:

Walter

Sorry to bother you again with the question about the shopping-list javascript on freeway.
I’ve download an action from Freeway to place a JS, but after that I can´t figure what to do next to start personalizing this JS and start using it on the website.
I don’t have knowledge about programing.
Can you help me again?

Rui Santos

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

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

19

Walter - it has just occurred to me that if you hook this up to a -go.php generated by the PHPFF action and you submit the cart without an email address you get the error page.

But even with a javascirpt history back button that takes you back to the cart the items in the cart are wiped.

Of course you could avoid any validation (whether supplied by the PHPFF action or not) to stop this but is there another way round it?

D

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

20

Well, I don’t have any sort of callback from the form processor in there at the moment, and the last step of the submit process is to erase the cookie. (I think that’s commented in there.) You could certainly extend this example with a “thanks” page, and do the erasing there, when you know the “purchase” has been successful.

Walter

On May 8, 2012, at 7:25 PM, DeltaDave wrote:

Walter - it has just occurred to me that if you hook this up to a -go.php generated by the PHPFF action and you submit the cart without an email address you get the error page.

But even with a javascirpt history back button that takes you back to the cart the items in the cart are wiped.

Of course you could avoid any validation (whether supplied by the PHPFF action or not) to stop this but is there another way round it?

D

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

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