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

cid_gk
Excursionist
34 1 9

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

Replies 5 (5)

sherpabot
Shopify Partner
17 1 3

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
Excursionist
34 1 9

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
Shopify Partner
17 1 3

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
Excursionist
34 1 9

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

sherpabot
Shopify Partner
17 1 3

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.