Problems, need help? Have a tip or advice? Post it here.
16 posts Page 1 of 2
@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 3134 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 3134 times

Hope this helps.
Thanks for sharing this useful snippet KK!

I have a bit more complex opening hours. For example, I have different summer and winter hours in the table head. What looks like the screenshot attached. What would be the best way to implement this?

Attachments

@aleks, your screenshot is a good hint towards the possible solution - duplicate the repeatable's fields!
P.S. Enumerating weekdays can be automated as well :)

2019-02-04-001.png
2019-02-04-001.png (31.53 KiB) Viewed 2816 times


Does it help?
And for some Javascript explorers, repeatable region's data can be listed as follows (with the same result as in previous post) inspired by https://stackoverflow.com/a/39065147 -

Code: Select all
<table>
    <thead>
        <tr>
            <th></th>
            <th>September - May</th>
            <th>June - August</th>
        </tr>
    </thead>

    <tbody>
    </tbody>
</table>


<script>
    const Item = ({ my_day,
                    my_winter_off_day,
                    my_winter_opening_time,
                    my_winter_closing_time,
                    my_summer_off_day,
                    my_summer_opening_time,
                    my_summer_closing_time }) => `
        <tr>
            <td>${my_day}</td>`
            + ( my_winter_off_day ? `<td>Closed</td>`: `<td>${my_format(my_winter_opening_time)}-${my_format(my_winter_closing_time)}</td>` )
            + ( my_summer_off_day ? `<td>Closed</td>`: `<td>${my_format(my_summer_opening_time)}-${my_format(my_summer_closing_time)}</td>` ) + `
        </tr>
    `;

    //Then you could easily render it, even mapped from an array, like so:
    $('tbody').html(<cms:show_repeatable 'schedule' as_json='1' />.map(Item).join(''));

    function my_format(str){
        return new Date(str).toLocaleTimeString([],{ hour: '2-digit', minute:'2-digit', hour12: true});
    }
</script>

Thanks for your reply Trendoman!

When I select all the required dates and save in the admin panel I then see dates in the following format Jan/01/1970. Please see the attached screenshot.

How can I make the dates in admin panel to display exactly what I have specified? For example, 9:00am to 11:00am.

Attachments

Output of the date and its format (https://docs.couchcms.com/tags-referenc ... tml#format) is entirely your scope of work. My sample is perfectly correct and shows only hours in format 'g.ia'. Try to run my sample as is and you'll see it works fine.

I am sure you missed something in editable definition or changed output code.
In case you need more help here, care to provide the code you are using, otherwise it's all ungrounded claims. I spent a good hour to craft that solution (that you called a measly 'reply') and made sure it works out of the box.
trendoman wrote: Output of the date and its format (https://docs.couchcms.com/tags-referenc ... tml#format) is entirely your scope of work. My sample is perfectly correct and shows only hours in format 'g.ia'. Try to run my sample as is and you'll see it works fine.


Your code works as you have described, there is no problem with that whatsoever. I highly appreciate your prompt response.

The issue what I am referring to is located in admin panel. I have a mosaic setup with one tile inside of that tile there are multiple editable and repeatable regions including your code for the opening hours. When I specify the correct time like on the first attached screenshot and save what I have specified. I see the time displayed in admin panel in the following format Jan/01/1970.

My question is - why would not mosaic in admin panel display the correct specified time in the tile and instead show Jan/01/1970?

Attachments

Interesting. I'd take a look at your definition codes of mosaic. Please post full definition so I could drop it into my local installation and see the issue first hand.
trendoman wrote: Interesting. I'd take a look at your definition codes of mosaic. Please post full definition so I could drop it into my local installation and see the issue first hand.


Sure. Here it is:
Code: Select all
<cms:template title='Business directory' clonable='1' order='4'>

   <cms:config_list_view orderby='weight' order='asc'>
      <cms:field 'k_selector_checkbox' />
      <cms:field 'k_page_title' sortable='0' />
      <cms:field 'k_up_down' />
      <cms:field 'k_actions' />
   </cms:config_list_view>

   <cms:editable type='image' show_preview='1' preview_width='150' name='directory_header_image' label='Header Image' order='1' />
   <cms:editable type='richtext' name='directory_category_desc' label='Category Description' order='2' />

   <cms:mosaic name='business_list' label='Business list' order='3'>
      <cms:tile name='add_business' label='Add new business'>
         <cms:repeatable name='business_slider' label='Image slider' order='3'>
            <cms:editable type='image' show_preview='1' preview_width='150' name='business_image' label='Business image' order='3' />
         </cms:repeatable>
         <cms:editable type='text' name='business_name' label='Name' order='4' />
         <cms:editable type='text' name='business_desc' label='Description' order='5' />
         <cms:editable type='text' name='business_location_link' label='Google Maps location link' order='6' />
          <cms:editable type='text' name='business_phone' label='Phone' order='7' />
          <cms:editable type='text' name='business_website' label='Website' order='8' />
          <cms:editable type='text' name='business_email' label='Email' order='9' />
          <cms:editable type='text' name='business_facebook_link' label='Facebook' order='10' />
          <cms:editable type='text' name='business_instagram_link' label='Instagram' order='11' />
         
         <cms:repeatable name='trade_hours' label='Opening hours' order='12'>

            <cms:editable type='dropdown' name='week_day' label='Day'
               opt_values='Monday | Tuesday | Wednesday | Thursday | Friday | Saturday | Sunday | Public Holidays'
            />

            <cms:editable
               type='checkbox'
               name='winter_off_day'
               label='Closed'
               opt_values='=Yes'
               col_width='100'
               />

            <cms:func _into='my_cond' winter_off_day=''>
               <cms:if "<cms:is 'Yes' in=winter_off_day />">hide<cms:else />show</cms:if>
            </cms:func>

            <cms:editable
               type='datetime'
               name='winter_opening_time'
               label='Winter Opening Time'
               only_time='1'
               am_pm='1'
               minute_steps='30'
               default_time='2018-01-01 00:00:01'
               not_active=my_cond
            />

            <cms:editable
               type='datetime'
               name='winter_closing_time'
               label='Winter Closing Time'
               only_time='1'
               am_pm='1'
               minute_steps='30'
               default_time='2018-01-01 00:00:01'
               not_active=my_cond
            />

            <cms:editable
               type='checkbox'
               name='summer_off_day'
               label='Closed'
               opt_values='=Yes'
               col_width='100'
               />

            <cms:func _into='my_cond' summer_off_day=''>
               <cms:if "<cms:is 'Yes' in=summer_off_day />">hide<cms:else />show</cms:if>
            </cms:func>


            <cms:editable
               type='datetime'
               name='summer_opening_time'
               label='Summer Opening Time'
               only_time='1'
               am_pm='1'
               minute_steps='30'
               default_time='2018-01-01 00:00:01'
               not_active=my_cond
            />

            <cms:editable
               type='datetime'
               name='summer_closing_time'
               label='Summer Closing Time'
               only_time='1'
               am_pm='1'
               minute_steps='30'
               default_time='2018-01-01 00:00:01'
               not_active=my_cond
            />
         </cms:repeatable>
            
         <cms:config_form_view>
            <cms:style>
               #f_trade_hours .dt_month,
               #f_trade_hours .dt_month  + .dt_sep,
               #f_trade_hours .dt_day,
               #f_trade_hours .dt_day  + .dt_sep,
               #f_trade_hours .dt_year,
               #f_trade_hours .dt_year  + .dt_sep
               { display:none; }
            </cms:style>
         </cms:config_form_view>

      </cms:tile>
   </cms:mosaic>

</cms:template>
16 posts Page 1 of 2