Problems, need help? Have a tip or advice? Post it here.
2 posts Page 1 of 1
@All... Hello!!!

I want to be able to select the opening and closing time of a store on each weekday from the couch admin panel.
I can have an editable region for the 7 days of the week
Each day will have a dropdown (custom, if possible) to select opening and closing times of the store(s).
This will be only on the backend.
While in the front end i need to just display what is selected in the back end.

How can this be done???

Regards,
GenXCoders
Image
where innovation meets technology
I know my answer to this post is too late but the solution perhaps would be helpful to many so I am going ahead and posting it.

The obvious answer that comes to mind is the use of repeatable-regions (one row for each day). While we can use the type 'datetime' editable region (http://www.couchcms.com/forum/viewtopic ... 667#p12667) to input the opening and closing time, a problem is that the datetime region insists upon displaying the 'date' part - i.e does not display only the 'time' part in isolation.

For our solution we require only the 'time' part so we'll use some CSS to hide the 'date' part.
This is what I defined within the <cms:template> block of my template -
Code: Select all
<cms:repeatable name='schedule' label='Weekly Schedule' >
    <cms:editable
        type='dropdown'
        name='my_day'
        label='Day'
        opt_values='Monday | Tuesday | Wednesday | Thursday | Friday | Saturday | Sunday'
    />

    <cms:editable
        type='datetime'
        name='my_opening_time'
        label='Opening Time'
        allow_time='1'
        am_pm='1'
        default_time='2018-01-01 00:00:01'
    />   

    <cms:editable
        type='datetime'
        name='my_closing_time'
        label='Closing Time'
        allow_time='1'
        am_pm='1'
        default_time='2018-01-01 00:00:01'
    /> 
</cms:repeatable>
   
<cms:config_form_view>
    <cms:style>
        #f_schedule .dt_month,
        #f_schedule .dt_month  + .dt_sep,
        #f_schedule .dt_day,
        #f_schedule .dt_day  + .dt_sep,
        #f_schedule .dt_year,
        #f_schedule .dt_year  + .dt_sep
        { display:none; }
    </cms:style>
</cms:config_form_view>

Please note that the CSS rule is using #f_schedule as the ID where the 'name' of our region is 'schedule' - that is to say, it appends a 'f_' to the region's name. Keep this in mind if you are using a different name for the repeatable-region.

Ok, with that definition I can get the following in the admin-panel -
Untitled-1.png
Untitled-1.png (14.35 KiB) Viewed 186 times

As can be seen, our datetime now shows only the time component which is perfect for our requirement.

On the frontend, we can use the <cms:date> tag with the proper 'format' (http://docs.couchcms.com/tags-reference/date.html) to isolate the time part from the inputted date. For example as follows -
Code: Select all
<table>
    <tr>
        <th>Day</th>
        <th>Opening Time</th>
        <th>Closing Time</th>
    </tr>

    <cms:show_repeatable 'schedule' >
        <tr>
            <td><cms:show my_day /></td>
            <td><cms:date my_opening_time format='h:i A' /></td>
            <td><cms:date my_closing_time format='h:i A' /></td>
        </tr>
    </cms:show_repeatable>
</table>

Output -
Untitled-2.png
Untitled-2.png (3.62 KiB) Viewed 186 times

Hope this helps.
2 posts Page 1 of 1

Who is online

In total there are 4 users online :: 0 registered, 1 hidden and 3 guests
(based on users active over the past 5 minutes)

Users browsing this forum: No registered users and 3 guests