Calendar Widget

[saumier]

We would like to use the same widget for another 3rd party site. In this example, another web site in the region of Outaouais is called "MRC Collines-de-outaouais".

Features to add to html for installing the widget on another website:

• config to hide the navbar for event/workshop/organization
• config to keep event list open rather than opening/closing like on toutculture.ca
• links to "view all" on toutculture.ca should have the same number of total hits in both places
• config to set a filter by region ie. Tout culture wants to show only events and workshops in the region "collines-de-outouais".
• config to open new tab/window when clicking events or any click leaving the widget. The Toutculture.ca site should open full screen (not inside the 3rd party site).

Additional request from Minimal for the search widget:

1. session cookie storage of the current search term, tab (event, workshop, org) and date or date range so that a new page load does not erase the search settings in progress.
2. Adjust the thumbail image to use the image's natural aspect ratio (remove fitimage: cover) but still set the max height.

[troughc]

@SyamBabu-M please assign this issue to me after you do the estimate.

[SyamBabu-M]

@troughc I have some doubts regarding this tickets. Can we discuss this in todays standup?

[SyamBabu-M]

@saumier https://docs.google.com/spreadsheets/d/1NgK_C-MSRr4qEwTDhSCDiOtU6bfrq_eyKe7ZjKRcw7s/edit#gid=0

[saumier]

Estimate of 24 hours by Syam.

[troughc]

UPDATE to design from the client (slightly different from the mockup design): MRC des Collines-de-l’Outaouais would like to have Events in one tab and workshops in another tab in the widget (just like they are right now). @SyamBabu-M I will now assign to you, let me know if you have any questions. cc @saumier

[saumier]

@SyamBabu-M I have updated the Readme with my suggested parameters and created a PR here https://github.com/culturecreates/minimal-footlight-search-widget/pull/82

Please review and let me know if you have any questions or ideas to do the configurations differently. You can merge the PR if you agree with the changes.

[SyamBabu-M]

@saumier I have merged the PR. The suggestions looked great to me.

[SyamBabu-M]

@troughc Is the design completed?

[saumier]

Blue line is external to the widget. Design is complete, keeping in mind that there are 2 tabs Events and Workshops.

[saumier]

@troughc please do a first pass and I will do a second

[SyamBabu-M]

@saumier @troughc http://demo.staging-tout-culture.s3-website.ca-central-1.amazonaws.com/ http://staging.minimal-footlight-search-widget.s3.ca-central-1.amazonaws.com/v2/test-dist.html

please use these links to test the widget.

[troughc]

Tested on chrome, this link: http://staging.minimal-footlight-search-widget.s3.ca-central-1.amazonaws.com/v2/test-dist.html

Caitlin's tests

Search bar seems to be working as expected: PASSED Two tabs - Events and Workshops with correct lists: PASSED click an event to get to event on tout culture website (in new tab): PASSED click see all results to get to list of filtered resulst on tout culture website (in new tab): PASSED select specific dates to sort: PASSED Select date range: PASSED

@SyamBabu-M Two questions:

• this link provides the ENGLISH page - is there a French version that we could test?
• I didn't test the following link because it has THREE tabs so I don't think it's relevant. Is that right? http://demo.staging-tout-culture.s3-website.ca-central-1.amazonaws.com/

Ready for you @saumier

[saumier]

@troughc The link with the 3 tabs is relevant because it is the new widget that will be seen on toutculture.ca. So we need to test that the new widget works in both places at the same time.

[saumier]

The region ID for collines de l'outouais is 63bc0b2d1c6b6c005aad5253

[saumier]

@SyamBabu-M I did some testing and there are things that need to be fixed. Please work on this as a priority so I will be able to test again tomorrow end of your day. Below is my list divided into MUST FIX and NICE TO HAVE. Please only do the must fix and after you have tested the must fix and you still have time then you can work on the nice to have.

MUST FIX

• [x] 1. Unable to configure the filter by region. The widget must be configurable to only show events from the region "collines de l'outaouais". This should be configurable with the parameter data-search-events-filter='&region=63bc0b2d1c6b6c005aad5253'. There are only 2 events today and no workshops. Test by comparing with this result: https://toutculture.ca/filter-evenements/?region=63bc0b2d1c6b6c005aad5253
• [x] 2. there is a delay when clicking the search box. It appears that the throbber starts and only after about 1 second then the Footlight API is called. The API should be called right away when you click on the search box, and only while the person is typing should there be a debounce.
• [x] 3. Setup the test-dist.html file with all the parameters we will be giving to MRC colline-de-outaouais to put the widget on their website. This includes data-locale="fr" and the region filter mentioned above. The urls should point to the production site of toutculture.ca.

NICE TO HAVE

• [x] 1. The parameters inline and float are backwards. The float is when the search results are in a layer above the webpage, inline is when the search box and results all appear in the page together. The default is "float" so it remains compatible with toutculture.ca.
• [x] 2. concept ids for event filters should no be hardcoded. You currently hardcode "type=64776b93fbeda20064d2332f" and "exclude-type=64776b93fbeda20064d2332f". These should be passed in to the widget using parameters like data-search-events-filter. You will probably need to add a new parameter for workshops like data-search-workshop-filter and the other related urls.
• [x] 3. There appears to be only 9 events listed, but the API call has a limit of 10. Why are we only displaying 9 of the 10? Either the limit is decreased or the display increased.

[troughc]

Tested: PASSED

[saumier]

The footer label says no events are found, but there are events. Label is incorrect.

[saumier]

@troughc I found a bug in the footer label (see above) so I am assigned back to Syam.

[saumier]

@troughc I tested and it looks good. I am pushing to production.

[troughc]

@SyamBabu-M here are the links: Customer site: https://mrcdescollinesdeloutaouais.qc.ca/nos-services/culture/ Culture Creates site (blog post): https://culturecreates.com/calendar-widget/ Please look at it on different platforms. @saumier will provide feedback that can also feed into phase 2 (and provide direction to fix a few things in this one)

[saumier]

@SyamBabu-M Issues with the Minimal widget:

• [ ] In the mobile view, the "X" does not seem to do anything. Should it clear the text search?
• [x] The widget on ToutCulture's site, clicks open a new window. Expected behaviour is for the same window to be redirected when the widget is on ToutCulture, or open a new window when widget is on a 3rd party site.
• [x] Please create a test page with an example iframe setup (like test-dist.html)

[saumier]

@SyamBabu-M Please be careful with the test-dist.html file. It must remain configured for MRC's website. They are using this page in their iframe in their live website. When you add the param to "open in a new window" please set the default to "same window" and add the new param for "open in new window" to the test-dist.html file so MRC's widget will work as expected.

Once you have updated V3, please test on both:

• [ ] Toutculture demo site (should open same window)
• [ ] MRC's website (should open in new window)

[SyamBabu-M]

@saumier you can access the test page using the link given below. http://staging.minimal-footlight-search-widget.s3.ca-central-1.amazonaws.com/v3/test-iframe.html

[troughc]

test according ot the MRC story:

• when you click results, open in a new tab
• inline (not float)
• uses iFrame
• limiting set of filters (targets third party website)
• No organizations

[saumier]

@SyamBabu-M What is the status? I need to let the client know when they can start using v3 on the Minimal site. Does the default click in production now open in the same window?

[SyamBabu-M]

@saumier Yes it will open in the same tab. I have added a PR

[saumier]

@troughc Have you tried the widget on MRC with the click opening in the iframe instead of opening a new window? It is interesting. Maybe even better? Try it out and let me know what you think.

[troughc]

@saumier in my marketing experience customers (i.e. a customer like Tout Culture) often use a widget like this as a way of:

• promoting events
• promoting their own calendar So having the calendar open on another tab helps bring traffic to the Tout Cutlure website. But, I can also talk with Isabelle at Tout Culture about this to get her feedback directly. Because it is interesting.