Hi. I'm having a problem with creating an editable area to let my client edit some html.
I have an isotope portfolio on my page and this has buttons where you can make a selection to choose which items in the list are displayed when it is clicked.
Currently the DIV looks like this

<div class="button-group js-radio-button-group" data-filter-group="area">
<button class="button is-checked">Any</button>
<button class="button" data-filter-min="1" data-filter-max="1">Worsley</button>
<button class="button" data-filter-min="2" data-filter-max="2">Walkden</button>
<button class="button" data-filter-min="3" data-filter-max="3">Salford</button>
</div>

I want my client to be able to add new buttons when he has a property in a new area

e.g. add
<button class="button" data-filter-min="4" data-filter-max="4">Bury</button>
to the end

I've tried adding this

<cms:editable name='buttonschange' >
<button class="button is-checked">Any</button>
<button class="button" data-filter-min="1" data-filter-max="1">Worsley</button>
<button class="button" data-filter-min="2" data-filter-max="2">Walkden</button>
<button class="button" data-filter-min="3" data-filter-max="3">Salford</button>
</cms:editable>

But when I update Couch, it shows like this in the edit area

&lt;button class=&quot;button is-checked&quot;&gt;Any&lt;/button&gt;
&lt;button class=&quot;button&quot; data-filter-min=&quot;1&quot; data-filter-max=&quot;1&quot;&gt;Worsley&lt;/button&gt;
&lt;button class=&quot;button&quot; data-filter-min=&quot;2&quot; data-filter-max=&quot;2&quot;&gt;Walkden&lt;/button&gt;
&lt;button class=&quot;button&quot; data-filter-min=&quot;3&quot; data-filter-max=&quot;3&quot;&gt;Salford&lt;/button&gt;

and doesn't show up at all on the page

Please could someone point me in the right direction

Thanks

[trendoman]

When you use <cms:editable name='buttonschange' > without specifying the type, it is assumed by default to be textarea.

Try this: <cms:editable name='buttonschange' no_xss_check='1' > It will lower your security protection and is not recommended to provide for the client, but it is up to you to decide.

Best way to go is to create a clonable template for properties, so each new property is a new clonable page. Client would add a page and will not need to mess with html code in admin panel. Why not try this instead:

Code: Select all

<div class="button-group js-radio-button-group" data-filter-group="area">
  <button class="button is-checked">Any</button>   
       <cms:pages masterpage='template-for-property.php' >
          <button class="button" data-filter-min="<cms:show k_count />" data-filter-max="<cms:show k_count />"><cms:show k_page_title /></button>
       </cms:pages>
</div>

If, however, there is not much other data besides property name, description, image, but only those, then you can use repeatable regions. Very cool thing too!
Here you go: http://docs.couchcms.com/concepts/repea ... gions.html

[trendoman]

Hey, @joel
This is your second post here on forum. I'm glad if you find it useful.

Did the solution in the first post helped you?

Did this solution help you?

Please, do not hesitate to talk to us and provide a feedback. I do it here to help and be helped, we are not paid answering robots. I hope to have helped you twice, but if you ignore to be nice here, let someone else answer you next time. Have a nice day!

Hi
Thanks for your help. Actually, the page with the portfolio is part of a master page/cloneable setup (sorry, I can't get my head round the terminology - any help appreciated)
When the end user selects a property from the isotope portfolio, he goes to a page showing the property.

I've tried using an embed procedure but that also doesn't work - I can add the code in the menu area but it doesn't show on the page

I'll try and explain how I've set it up
In the root folder is a file called propertytemplate.php which is a template and this shows the individual properties
In the snippets folder is a file called portfolio_.list.html which has the isotope portfolio. Clients can filter on this page using 3 buttons - area/bedrooms/monthly rent and then select a property to view which takes them to the relevant propertytemplate page. I am using prettyurls which show the selected property page in a folder based on the area, so I have a separate place in the menu where my client can add/remove folders/categories.

I'm trying to let him also add/remove areas so that new buttons can be added/removed from the isotope portfolio to match the folders/categories

I've tried "embed" using a new template and I've tried "show" using the existing template but neither of these show on the portfolio page

I'm sure what I want to do is staring me in the face but I can't seem to work out how to do it

The draft website is here

www.pensionsmart.org.uk

and the relevant pages are Property to Rent and the resulting property pages which are clicked through from there

Hi Trendoman
Sorry I didn't get back to you yesterday, I had to go out and have only now had a chance to get back to you. Thanks for your help, it is much appreciated

[trendoman]

No, we cool
I'm sorry I am a visual person and just can't see the whole picture. Screenshots would be helpful.

template - a physical file somefile.php. Can be clonable/non-clonable.
Clonable templates have cloned pages. They can be simply called 'pages'.
Website's pages are URLs/just website's page.

Sometimes people are kinda frustrated with embedding. It is not necessary and is used only to put outside some parts of code. You can have a base structure in your clonable template like this:

Code: Select all

<cms:if k_is_page >
  ..here we show a single cloned page code with all html..
<cms:else/>
  ..here we show all pages at once or whatever data/editables we need from all of them..
<cms:if>

[trendoman]

Ok, from example provided in the other topic I get your idea.

You want the user to create more Areas.
Areas are just folders. So you have to follow the 'dynamic folders' concept, which is not difficult at all.

Once it is enabled, you can have unlimited Areas and assign unlimited properties to each area. Everything will be added-removed from admin panel with a button. Order of appearance can be managed too (this is almost always requested by clients )

In your existing snippet 'list.html' Areas will be outputted as a list of folders. See tag folders for reference.

Dynamic folders is an easy way to manage the whole thing.

Hi
Thanks. Yes, I have managed to do that and my client can add/remove folders. However, the thing I am stuck on is letting my client add extra buttons to the isotope filter to let a client select an area

Currently, there are 8 areas
He wants to add another area, say Bury
He can add the folder Bury in the couch menu
However, we need to add a button for Bury in the isotope filter so that a client can select this area
So on the page, I have the following html

<div class="button-group js-radio-button-group" data-filter-group="area">
<button class="button is-checked">Any</button>
<button class="button" data-filter-min="1" data-filter-max="1">Worsley</button>
<button class="button" data-filter-min="2" data-filter-max="2">Walkden</button>
<button class="button" data-filter-min="3" data-filter-max="3">Salford</button>
<button class="button" data-filter-min="4" data-filter-max="4">Tyldesley</button>
<button class="button" data-filter-min="5" data-filter-max="5">Leigh</button>
<button class="button" data-filter-min="6" data-filter-max="6">Manchester</button>
<button class="button" data-filter-min="7" data-filter-max="7">Bolton</button>
<button class="button" data-filter-min="8" data-filter-max="8">Monton</button>
</div>

I want my client to be able to edit this html and add in

<button class="button" data-filter-min="9" data-filter-max="9">Bury</button>

I tried to add an editable area in my snippets html (portfolio_list.html) file like this

<cms:show areabuttons/>

after defining it in propertytemplate.php like this
<cms:editable
name='areabuttons'
label='Area Buttons'
desc='Add area buttons'
type='textarea' no_xss_check='1'
/>
But although I can add the code in the property template page, it doesn't show on the portfolio_list.html page
Also, the edit box shows in each of the property pages in the menu area and of course, I only want to show it once.

So, I tried to use embedding
I created a php file (frise.php) in the root with this content

<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Frise' executable='0'>
<cms:repeatable name='my_repeatable'>

<cms:editable
name='but7'
label='but7'
desc='but7'
type='textarea' no_xss_check='1' />
</cms:repeatable>
</cms:template>
<?php COUCH::invoke(); ?>

and an html page (frise.html) in the snippet folder with this content

<cms:pages masterpage='frise.php'>
<cms:show_repeatable 'my_repeatable'>
<cms:show but7 />
</cms:show_repeatable>
</cms:pages>
and on my main page in the snippets folder (portfolio_list.html) I added this code

<cms:embed 'frise.html' />

When I did this, I got 2 problems
First, when I add the text in the menu area to the frise page it looks like this after I click save



but more importantly, it doesn't display on the page

Sorry for such a long post
I can let you have access to the site if you think it would help

Kind regards
Joel

[trendoman]

What you have to understand to remove the whole question is that Couch is a CMS. It generates html for you. Instead of writing the whole html for each folder, you should generate html according to the existing folders.
Client adds a folder -> it appears in html automatically.

I will try to code a sample for you.

You have this:

<div class="button-group js-radio-button-group" data-filter-group="area">
<button class="button is-checked">Any</button>
<button class="button" data-filter-min="1" data-filter-max="1">Worsley</button>
<button class="button" data-filter-min="2" data-filter-max="2">Walkden</button>
<button class="button" data-filter-min="3" data-filter-max="3">Salford</button>
<button class="button" data-filter-min="4" data-filter-max="4">Tyldesley</button>
<button class="button" data-filter-min="5" data-filter-max="5">Leigh</button>
<button class="button" data-filter-min="6" data-filter-max="6">Manchester</button>
<button class="button" data-filter-min="7" data-filter-max="7">Bolton</button>
<button class="button" data-filter-min="8" data-filter-max="8">Monton</button>
</div>

It can be reduced to this concept:

<div class="button-group js-radio-button-group" data-filter-group="area">
<button class="button is-checked">Any</button>
<button class="button" data-filter-min="{number}" data-filter-max="{number}">{name}</button>
</div>

Now, let's take this concept and create a working code.
I will continue in the following post.

[trendoman]

We will be displaying folders, so let's take them into consideration with the tag 'folders':
http://docs.couchcms.com/tags-reference/folders.html

First, let's have that number-counter. It is incrementing gradually, so this won't be a problem:

Code: Select all

<cms:set counter='0' scope='global' />

Now, let's show all our folders and generate html for them:

Code: Select all

<cms:folders masterpage=''propertytemplate.php' orderby='weight' order='asc' >
           <cms:set counter="<cms:add counter '1' />" />
           <button class="button" 
                      data-filter-min="<cms:show counter />" 
                      data-filter-max="<cms:show counter />" >
             <cms:show k_folder_title />
           </button>
</cms:folders>

The only tricky part above is that we rise our counter for every folder and store it in a variable.

Once we have everything set, let's integrate code with the rest of html. For illustrational/educational purpose I will also use another tag: cms:capture. It stores in variable whatever runs inside of it. The final thing would look like this:

Code: Select all

<cms:capture into='my_areas' >
<cms:folders masterpage=''propertytemplate.php' orderby='weight' order='asc' >
           <cms:set counter="<cms:add counter '1' />" />
           <button class="button" 
                      data-filter-min="<cms:show [b]counter [/b]/>" 
                      data-filter-max="<cms:show [b]counter [/b]/>" >
             <cms:show [b]k_folder_title [/b]/>
           </button>
</cms:folders>
</cms:capture>

<div class="button-group js-radio-button-group" data-filter-group="area">
        <button class="button is-checked">Any</button>
        <cms:show my_areas />
</div>

Please, try it and let me know if there is anything left to highlight.