Re: Help with code on Event Calendar App

cid_gk · ‎06-10-2023

Hello, I have the Canopy theme on Shopify and am using the Event Calendar App. Currently there is no way for me to do this through the developer of the app, but was wondering if it was possible to create additional code to place with the embed code of my widget in order for specific filters to be auto-selected.

For example, on my shop I have different store locations, each with their own pages. Each page has their own event calendar area, (we also have a main all events page as well) but would like the widget to auto-select a filter (location).

https://gamekastle.myshopify.com/pages/santa-clara-ca-event-calendar

For Santa Clara, I want the filter for Santa Clara, CA to be auto-selected for example.

For Fremont > Fremont, CA filter. I want separate code to place with each of these embed codes on their individual pages.

Is this possible? Can someone help if I made them collaborator?

website passcode: gameon

sherpabot · ‎06-10-2023

in your theme.liquid file you can create a simple function and fetch the filters via a document object with classes. You do a query through all the

filters__name

classes and dynamically check the inner HTML text against "Santa Clara, CA" and force check the #10436-checkbox input. I would set a timeout for 3-5 seconds assuming the event calendar is externally imported.

Screenshot 2023-06-10 at 7.07.38 PM.png

cid_gk · ‎06-11-2023

Hi there,

Glad to know this is possible, but I'm not sure how to do this myself. Can you paste html here that I can put with the embed code for the Santa Clara store page, that I can base all the other store event page codes off of? That way I'll know exactly what to look for and input in each time. And yes, the event calendar is externally imported from a Shopify app.

sherpabot · ‎06-11-2023

Go to the theme > Edit Code > and in the Layout folder find the theme.liquid file to add code SIMILAR to this:

setTimeout(function() {
  var navmenuLinks = document.querySelectorAll('span.filters__name');

  navmenuLinks.forEach(function(link) {
    var spanText = link.textContent;

    if (spanText === "Santa Clara, CA") {
      var inputElement = link.nextElementSibling;
      if (inputElement && inputElement.tagName === "INPUT") {
        inputElement.checked = true;
      }
    }
  });
}, 500);

remember each theme is different and I am not able to verify/validate but this should get you close.

We are finding the list of elements (<span> tags) with the class. Since it is a list (array) we can loop through all instances of span tags with the class name and do a check against the inner text against the string "santa clara, ca". Be sure to use correct spacing, spelling as the comparrison is exact.

Once we find the correct <span> we perform another check against it's siblings to find the <input> tag and finally mark it as checked.

This sets inside a timer that is set after 5 seconds (5000).

Please be sure to like and approve the solution to help me in my Shopify dev partner journey to better assist other merchants like you!

cid_gk · ‎06-11-2023

Couldn't find this in Layout > Themes, was not able to apply the code. Thank you for trying.

sherpabot · ‎06-12-2023

Online sales channel should host your themes. Inside the page with all the themes you have implemented select the theme you wish to apply this to and select edit code.

To the left will have a tab of folders, one of which is called layout. Inside that folder you can find the theme.liquid file.

Be sure to add between the <head> tags.

Re: Help with code on Event Calendar App

Can you add custom code to auto-select filters in Event Calendar App?

Community Blog Articles