Best practice question for client editable section???

43 Posts

aaron4osu Reply #1, 7 years, 10 months ago

We build a static site and now our clients want to be able to edit a section of the site themselves. Basically there will be 6 to 9 identical divs each with the following editable pieces of data:

Name (text field)
Status (dropdown menu - Sold or Available)
Sold To Location (optional text field)
Price (text field)
Data available (data picker)
Image (upload)

The customer needs to be able to add or remove these divs as well as edit them.

It's been a few years since I've used modX. I'm trying trying to remember how best to accomplish this.

Here is the html:

<!-- KITTEN 1 -->
<div class="kitten-wrap" id="kitten1">
	<div class="kitten-head">
		<div class="half">
			<h3>Kitten Name</h3>
		</div>
		<div class="half">
			<span>Status: <span class="status">AVAILABLE</span></span>
		</div>
	</div>	
	<div class="kitten-info">
		
		<div class="info">
			<p class="soldto">Sold to Florida</p>
			<p class="price">Price: $900</p>
			<p class="availability">Available: 2/10/16</p>
		</div>

	</div>
</div>
<img class="b-lazy" src="../img/blink.gif" data-src="../img/kittens/december-2015/halla-1.jpg">
<!-- end kitten 1 -->

I think I should start with putting this into a chunk [[$kitten]]? But I'm not really sure how to make each of the sections editable.

Here is an url to the current page:
http://aesavannahs.com/cats/index.php?id=2

Any help would be greatly appreciated!

This question has been answered by Bruno17. See the first response.

5,888 Posts

Bruno17 Reply #2, 7 years, 10 months ago

you could use a MIGX - TV

Then, you would list them with getImageList.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

43 Posts

aaron4osu Reply #3, 7 years, 10 months ago

Thanks Bruno, I installed MIGX - TV, and followed the directions for the example in the following documentation:
https://rtfm.modx.com/extras/revo/migx/migx.backend-usage

I'm not really sure how to use the add-on though. Can you help me understand this bit more?

so using the example from the documentation I now have a MIGX template variable named kitten1 for my page where I can add a tv title and image. How do I add that to the template? In other words how do I access each of the tv's fields?

<h3> [[*kitten1 title ]] </h3>
<img class="b-lazy" src="[[*kitten1 img url ]]">

5,888 Posts

Bruno17 Reply #4, 7 years, 10 months ago

you would put a getImageList - call to your template like

[[getImageList?
&tvname=`kitten`
&tpl=`kittenTpl`
]]

if the name of your MIGX-TV is kitten.
The chunk kittenTpl would look like that, simplyfied:

<h3> [[+title]] </h3>
<img class="b-lazy" src="[[+image]]">

This would output all kitten, you have added to the TV in that resource.

you can add as many fields (and formtabs) as you need to the formtabs of this TV

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

43 Posts

aaron4osu Reply #5, 7 years, 9 months ago

Thanks Bruno that helped alot!

So now I have all my fields working with this:

[
{"caption":"Info", "fields": [
    {"field":"title","caption":"Title (required)"},
    {"field":"status","caption":"Status: SOLD or AVAILABLE (required)"},
    {"field":"price","caption":"Price (optional)"},
    {"field":"location","caption":"SOLD To Location (optional)"},
    {"field":"date","caption":"Date (optional)","inputTVtype":"date"}
]},
{"caption":"Image", "fields":[
    {"field":"image","caption":"Image","inputTVtype":"image"}
]}
]

Two questions though:

1) How can I make "status" a drop down or radio with the options "AVAILABLE" and "SOLD"?

2) Using the date field includes the time by default. How can I exclude the time and use this format: %b %e, %Y -> Apr 1, 2011

Thanks again!!!!

discuss.answer

5,888 Posts

Bruno17 Reply #6, 7 years, 9 months ago

{"field":"status","caption":"Status: SOLD or AVAILABLE (required)","inputTVtype":"listbox","inputOptionValues":"AVAILABLE||SOLD"},

For date without time-field, you could create a helper date-TV, where you hide the time-option.
Don't assign this TV to any template, otherwise you might run into conflicts with that TV and MIGX-fields, which use that TV as a helper-TV!

then use that helper-TV as the inputTV like so:

{"field":"date","caption":"Date (optional)","inputTV":"myDateHelperTV"}

for the formated output, use an output-filter in your tpl-chunk:

[[+date:strtotime:date=`%b %e, %Y`]]

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

43 Posts

aaron4osu Reply #7, 7 years, 9 months ago

That worked perfectly!!!

THANKS AGAIN!

Answered Best practice question for client editable section???