This is the multi-page printable view of this section. Click here to print.

Return to the regular view of this page.

Activity Finder

Provides an interactive tool to help members find and book activities.

YCloudYUSA/yusaopeny_activity_finder is bundled as a “decoupled application” that ships with the YMCA Website Services distribution.

Requirements

This module requires the following modules:

  • openy_map (For pulling the list of location-related content types.)

This module also requires one of the following to store data:

  • A Solr server (preferably a server or index per-environment).
  • A subscription with access to the Daxko API.

Activity Finder is most often used with a syncer to pull data from an external source.

Installation

Activity Finder version 4 is the current major version. Prior to 9.2.10.0, the distribution required ^3.1 || ^4.0, allowing you to choose which version you want to use depending on the project requirements.

Deprecations

Outdated implementations are not removed immediately, allowing you to update your projects and migrate to new components without breaking your site. They are marked with [deprecated] notices in the next version and are planned to be removed in the future releases.

New Projects

Install as you would normally install a contributed Drupal module. For further information, see Installing Drupal Modules.

New projects should enable:

  • Activity Finder (openy_activity_finder)

then choose one or both of the front ends:

  • LB (Layout Builder) Activity Finder (lb_activity_finder)
  • Open Y Paragraph Activity Finder (openy_prgf_activity_finder_4)

and finally enable one of these data stores:

  • Search API Solr (search_api_solr)
  • Daxko API v2 integration (openy_daxko2)

Existing Projects

You have a choice of either staying on the same version you use or to update to the next version. It depends on your project requirements and customizations. We recommend updating to the latest release if you have resources for it.

Update from version 3.x to version 4.x

Activity Finder is a complex functionality, it connects together many different pieces and might require additional steps to make it working. The list of actions below outlines the major steps to get Activity Finder updated to version 4.

  • Update the codebase using the composer command: composer require ycloudyusa/yusaopeny_activity_finder:"^4.0"
  • Run database updates drush -y updb.
    • Verify there were no errors and updates went fine.
  • Install the new "Open Y Paragraph Activity Finder" (openy_prgf_activity_finder_4): drush en openy_prgf_activity_finder_4
  • Create or update a existing Landing Page with Activity Finder.
  • Add Activity Finder paragraph (replace the deprecated paragraph), configure it and save the page.
    • Verify the page and Activity Finder functionality is working fine
  • The previous version of Activity Finder used 2 landing pages with 2 paragraph types - one for wizard and another one for results. Find and remove these pages.
  • Uninstall "OpenY Paragraph Activity Finder" (openy_prgf_activity_finder).
  • Uninstall "OpenY Paragraph Activity Finder Search" (openy_paragraph_activity_finder_search).

Configuration

Set up Solr

In order to install Solr - check the documentation on Drupal.org.

After enabling the above modules you should visit /admin/config/search/search-api and obtain config.zip from preconfigured by Open Y Solr Server setup image

This configuration should be installed on your Solr server as an independent core. it should be extracted to the conf directory of a solr core

image

Once it is done - ensure the name of your core from core.properties file added to Solr Server config in Open Y image

Solr server configuration could be found in Dropdown at /admin/config/search/search-api image image

If you prefer drush configuration you may use commands below, just replace SOLR_CORE_IS_HERE with real core name

drush cset -y search_api.server.solr backend_config.connector_config.host 127.0.0.1 -y
drush cset -y search_api.server.solr backend_config.connector_config.core ${SOLR_CORE_IS_HERE} -y
drush search-api:reset-tracker
drush search-api:index

Once this is done you should see Solr Server as Index as Enabled on a /admin/config/search/search-api

If you installed Open Y with Demo content now it is time to create a Landing Page with the Activity Finder v4 component on it.

In Open Y we have a specially created module which can this for you

Enable openy_prgf_af4_demo by drush command

drush en openy_prgf_af4_demo

and you’d get /activity-finder-v4 Landing Page created automatically which should look like image

when you visited it. By visiting /activity-finder-v4?step=results or clicking on suggested buttons you should see results, activities with filters and all other functionality, shipped with Activity Finder v4 For the Demo content from OpenY, it should look like image

Set Trusted Redirect Host patterns

Activity Finder has a feature to track redirects to 3rd party systems. In order to control the URLs to redirect to you should use the trusted host patterns. This feature works similar to Drupal core trusted_host_patterns setting.

Example - add this section to the settings.php:

// Trusted hosts to redirect to for Activity Finder.
$settings['activity_finder_trusted_redirect_host_patterns'] = [
  '^apm\.activecommunities\.com$',
];

It is also recommended to disallow these paths in robots.txt:

# Activity Finder redirects
Disallow: /af/register-redirect/
Disallow: /index.php/af/register-redirect/

Add the Activity Finder block

See the full documentation on Activity Finder for information on how to add the block to your page and block options.

Troubleshooting & FAQ

To demo Activity Finder, see these sandboxes:

Limitations with using Daxko backend

When using the Daxko backend. Developers should be aware of these limitations:

  • We can't use home branch functionality on start screen.
  • We have to use Legacy mode.
  • We can't display count of result for each age on the age's wizard step.
  • We can't display count of available spots for each activity, before user click by activity details.
  • Limited pager on results page. We can display only previous and next page link and can't display count of pages.

How to override processResults in Activity Finder

See openy_activity_finder.api.php

/**
 * Implements hook_activity_finder_program_process_results_alter().
 */
function custom_module_activity_finder_program_process_results_alter(&$data, NodeInterface $entity) {
  // Get formatted session data from some custom service.
  $formatted_session = \Drupal::service('ymca_class_page.data_provider')
    ->formatSessions([$entity], FALSE);
  $formatted_session = reset($formatted_session);

  // Fix pricing according to YMCA price customization.
  $data['price'] = '';
  if (!empty($formatted_session['prices'])) {
    foreach ($formatted_session['prices'] as $price) {
      $data['price'] .= implode(' ', $price) . '<br>';
    }
  }

  // Fix availability and registration according to YMCA customization.
  $messages = [
    'begun' => t('This class has begun.'),
    'will_open' => t('Registration for this class opens shortly. Please check back.'),
    'inperson' => t('Online registration is closed. Visit a YMCA branch to register.'),
    'included_in_membership' => t('Included in Membership'),
  ];

  if (isset($messages[$formatted_session['reg_state']])) {
    $data['availability_note'] = $messages[$formatted_session['reg_state']];
  }
}

How to add external functionality to analytics event

See openy_af4_vue_app/main.js

// Listen to a custom event to pass events in Google Analytics.
document.addEventListener('openy_activity_finder_event', (e) => {
  const { action, label, value, category } = e.detail

  if (window.gtag) {
    window.gtag('event', action, {
      event_category: category,
      event_label: label,
      value: value
    })
  } else if (window.ga) {
    window.ga('send', 'event', category, action, label, value)
  }
})

Example of custom event

document.addEventListener('openy_activity_finder_event', (e) => {
  const { action, label, value, category } = e.detail // Properties you can use for analitics.
  ...
  { your_functionality }
  ...
})

Add custom component in between of results

it allows flexibility in terms of results rendering for the developer:

          <ResultsList
            :results="data.table"
            :ages="ages"
            :selected-ages="selectedAges"
            :legacy-mode="legacyMode"
            :disable-spots-available="disableSpotsAvailable"
            @showActivityDetailsModal="showActivityDetailsModal($event)"
          />

can be changed to this:

          <ResultsList
            :results="data.table.slice(0, 2)"
            :ages="ages"
            :selected-ages="selectedAges"
            :legacy-mode="legacyMode"
            :disable-spots-available="disableSpotsAvailable"
            @showActivityDetailsModal="showActivityDetailsModal($event)"
          />
          <YGBWAds />
          <ResultsList
            :results="data.table.slice(2)"
            :ages="ages"
            :selected-ages="selectedAges"
            :legacy-mode="legacyMode"
            :disable-spots-available="disableSpotsAvailable"
            @showActivityDetailsModal="showActivityDetailsModal($event)"
          />

where YGBWAds is custom component to render custom content in between the results. See https://github.com/ymcatwincities/openy_activity_finder/pull/148

1 - Adding Activity Finder to your site

Both v4 and v3 could live together as independent programs on your site, and they will show the same data from the Program Event Framework of Open Y image

On the screenshot above you can see Open Y components in a list for both Activity Finder v3 and v4

In order to create v3 Activity Finder application you need to create 2 landing pages, referencing each other, one with Activity Finder [deprecated], another one with Activity Finder Search [deprecated] image See

image See

In order to create v4 Activity Finder application, you need to create 1 landing page, with the Activity Finder component on it image See sandbox

2 - Bootstrap version support for Activity Finder

In the Carnation theme we use bootstrap v 4.6 and for this case we have a special option Bootstrap version in settings form for Activity Finder v4 (/admin/openy/settings/activity-finder)

image

Rose and Lily themes are using Bootstrap v3, Carnation theme is on Bootstrap v4 And when we set it to 4 then the AF4 result page looks good for the tablet screen on Carnation image image

3 - Configuring Solr for Activity Finder

In order to install Open Y and Activity Finder v4 you need to run command

composer create-project ymcatwincities/openy-project build --no-interaction --prefer-dist

Which will pull Open Y on Drupal stable version with Activity Finder v4 latest stable version Then you should proceed with a regular installation with Demo content enabled as described in our tutorials. It’s better to setup Extended or Custom( only via drush ) in order to skip a bunch of manual steps

When you have YMCA Website Services (former Open Y) installed, list of the command you need to run in order to enable Activity Finder v4

# Solr 8.8.1, Activity Finder v4
drush en -y search_api_solr_legacy openy_prgf_activity_finder_4 || true
drush en -dvy openy_prgf_af4_demo || true

After enabling the above modules you should visit /admin/config/search/search-api and obtain config.zip from preconfigured by Open Y Solr Server setup image

Hint: Open Y module’s infrastructure supports SOLR versions 8 up to the latest 8.8.1 as well. Activity Finder is tested against Solr 8.8.1. In order to install Solr - check the documentation on Drupal.org. Solr versions prior 7.7 are End of Life, Open Y team is working on upgrading support for decent versions of Solr.

This configuration should be installed on your Solr 8.8.1 server as a independent core. it should be extracted to conf directory of a solr core

image

Once it is done - ensure the name of your core from core.properties file added to Solr Server config in Open Y image

Solr server configuration could be found in Dropdown at /admin/config/search/search-api image image

If you prefer drush configuration you may use commands below, just replace SOLR_CORE_IS_HERE with real core name

# Solr 8.8.1, Activity Finder v4

drush cset -y search_api.server.solr backend_config.connector_config.host 127.0.0.1 -y || true
drush cset -y search_api.server.solr backend_config.connector_config.core ${SOLR_CORE_IS_HERE} -y
drush cset -y search_api.server.solr backend_config.connector_config.solr_version 8 -y
drush search-api-mark-all || true
drush sapi-i || true

Once you done this you should see Solr Server as Index as Enabled on a /admin/config/search/search-api

If you installed Open Y with Demo content now it is time to create a Landing Page with the Activity Finder v4 component on it. In Open Y we have a specially created module which can this for you Enable openy_prgf_af4_demo by drush command

# Solr 8.8.1, Activity Finder v4
drush en -dvy openy_prgf_af4_demo || true

and you’d get /activity-finder-v4 Landing Page created automatically which should look like image

when you visited it. By visiting /activity-finder-v4?step=results or clicking on suggested buttons you should see results, activities with filters and all other functionality, shipped with Activity Finder v4 For the Demo content from OpenY, it should look like image See sandboxes

Activity Finder v3 also installed when you chose Custom Installation with Demo content and is part of demo content. Could be accessed via /activity-finder url See sandboxes

Development SOLR 8 installation

Solr Docker readme https://github.com/docker-solr/docker-solr/blob/master/README.md

mkdir solr8
sudo chown 8983:8983 solr8
docker run -v "$PWD/solr8:/var/solr" -p 8984:8983 --name d9_sandbox_rose_custom solr solr-precreate d9_sandbox_rose_custom
# stop docker and remove created container
# unpack solr_8.x_config.zip into data/d9_sandbox_rose_custom/conf/

docker run -v "$PWD/solr8:/var/solr" -p 8984:8983 --name d9_sandbox_rose_custom solr solr-precreate d9_sandbox_rose_custom

Configure Open Y to change Solr version to 8.x Change address port to 8984

Rebuild index information Reindex Check Activity Finder v4 is working now