How to alter an article form according to where it is called from?

dorka · 2015-11-25 13:35:05

Hi, I guess my question involves a little bit of all – javascript, php and textpattern put together, but I don’t know to put them together.
I have a list of articles, each item in the list is a link to the individual article page with a basic article layout. Besides that, in each article in the list there is a button saying “Order this item”. What I want is, when clicking “Order this item” an ordering form (zem_contact) to be displayed in the individual article page below the basic article layout. Also, it should be possible to display/hide the ordering form from within the individual article page, which, by itself, could be achieved easily by js. What I can’t do is: altering the way the individual article form displays, depending on which option has been clicked in the list?
Teach me, please :-).

jakob · 2015-11-25 13:58:17

If I’ve understood you correctly, you could do this by passing a variable with the link, e.g.

A normal link would be domain.com/section/item, and
An order link would be domain.com/section/item?order=1

On your article form you can then use adi_gps or smd_if to detect if order=1. With adi_gps, you retrieve the order GET variable in the url as a textpattern variable and then use txp:if_variable. With smd_if, I believe you can build it straight into your if tag.

What I’d do is to include the contact form in your page template in a separate div but hide it with css, e.g.

.order-form-wrapper { display: none; }

Then use an additional class like is-open to change the open state of the div, e.g.:

.order-form-wrapper.is-open { display: block; }

If your variable order=1 then include the class is-open in the div output and it will show automatically. To toggle visibility with a separate show/hide button, add a little javascript to add or remove the is-open class from the order-form-wrapper.

Rough example:

<!-- retrieve get variable -->
<txp:adi_gps name="order" quiet="1" />

<!-- show/hide button -->
<button class="order-form-toggle">Show/hide order form</button>
…
<div class="order-form-wrapper<txp:if_variable name="order" value="1"> is-open</txp:if_variable>">
  <!-- zcr form goes here -->
</div>
…
  <!-- using jQuery -->
<script>
  $( ".order-form-toggle" ).click(function() {
    $(".order-form-wrapper").toggleClass( "is-open" );
  });
</script>

Note: you may find you also need to include is-open if the order form returns an error (e.g. if required fields haven’t been filled out). Have a look at the zem_contact_reborn plugin for detecting if an error appears and including is-open accordingly.

uli · 2015-11-25 14:53:49

dorka wrote #296809:

What I can’t do is: altering the way the individual article form displays, depending on which option has been clicked in the list?

I guess what you want here is displaying different form elements for different groups of items shown (i.e. article dependent HTML forms). You might have categories in use for your items, anyway, or be presenting items in separate sections. Then if_article_category and if_section might be helpful. If you can’t use these or for more finegrained display options if_custom_field can be the solution, combined with the glz_custom_fields plugin for offering your client ready-made selects in the backend.

Edit: wording.

Last edited by uli (2015-11-25 14:56:28)

dorka · 2015-11-26 11:42:10

Hi Uli, hi Jacob, thank you both!

uli wrote #296811:

I guess what you want here is displaying different form elements for different groups of items shown (i.e. article dependent HTML forms).

Uli, actually it is not that complicated. I just want to open the individual article either with the form displayed or with the form hidden, depending on which link is clicked in the list of articles. Jakob got it right.

jakob wrote #296810:

If I’ve understood you correctly, you could do this by passing a variable with the link, e.g.

A normal link would be domain.com/section/item, and

An order link would be domain.com/section/item?order=1

This is exactly what I need, I only I am not sure how to achieve the second url – “domain.com/section/item?order=1” url”:
<a href='<txp:permlink/>?order=1'>Order this item</a>
Is this it?

Last edited by dorka (2015-11-26 11:44:31)

jakob · 2015-11-26 12:34:54

<a href='<txp:permlink/>?order=1'>Order this item</a>

Yes, that should do it.

Be sure to test your order form with false information to test that error case I mentioned.

Textpattern CMS

Textpattern CMS support forum

#1 2015-11-25 13:35:05