How to change labels/headings for filter menu?

[karlafalk]

Exploring how we can change the text labels for the filter headings on the wordpress page?

Would this be in the 'Show assurance, list classifications, options' workflow code nodes? I hesitate to change something in the code in case it breaks the workflow. I am assuming if we change column headings in the Airtable base it won't get read correctly in the code, so we shouldn't try making changes to the Airtable column headings?

[karlafalk]

@mkllnk Just noting that understanding how we can edit these labels is the next priority for the tech aspects of the Waterloo Project. Thanks!

[mkllnk]

There are a few options:

1. Use smaller parts of the component and change the labels there.
2. Fork the component and create a version with your text.
3. Add some Javascript which changes the text.

I haven't investigated how much work the first option would be. But if we are only talking about a few words then option 3 seems to be the most attractive. Can you tell me the new text and I'll provide you with code for the Wordpress site?

[karlafalk]

Thanks @mkllnk for that info. Looking at this more closely, ideally we would be able to modify how the component displays in few other ways. Here is a mockup of our wishlist modifications:

Our top priorities would be to:

1) Move the 'Assurance Partners' filter menu to a top menu and have all the 3 options visible (no dropdown) along with a 'show all' option. This would remove the need to change the 'Assurance Partners' text as we wouldn't be using this category heading. 2) Change the 'First Nations Led' text on the left hand menu to 'Indigenous Led' and change the flag icon to one relevant for Canada. 3) Modify one of the other Filter menus (maybe Certifications) and add it back into the component to allow the Waterloo Directory to additionally be sorted by a 'Category' field (to replace the category heading of 'Certifications'), and have options all be displayed instead of a drop down menu.
4) Specify how many profiles to show before loading more.

Can you let us know how feasible these changes would be, what would be involved, and how long they would take to implement? Thanks!

[mkllnk]

Changing labels and text should be relatively easy. So that would be point 2. But moving things around and changing the type of input field (select vs dropdown) is a dev task that would require us to create a copy of the current component and develop it alongside it, increasing maintenance cost. So I think that point 1 is too expensive.

Point 3: I'm not sure how this is supposed to work. In our component, enterprises can select produce type and be filtered by that, for example, meat or fruit. But it requires input to Airtable which would be manual in your case.

Point 4: This is a bit more tricky. I need to check the code.

[mkllnk]

Hm, I just experimented with changing some of the text and it's trickier than I thought. I managed to replace the First Nations part though. You can replace the style block with this code to achieve it:

<style>
div.row[name="set-line-produce"] { display: none }

custom-search-firstnationsled label {
  color: white !important;
}

custom-search-firstnationsled label:before {
  content: "Indigenous Led";
  color: black;
  display: block;
  position: absolute;
}
</style>

I confirmed that changing the flag icon is very easy though. Can you supply me with one?

Anything that goes beyond text or image changes, would need at least a whole day of work from me. I reckon that Startin'Blox could do a better and quicker job though. Let's get a quote from them.

[karlafalk]

Ok Thanks @mkllnk for addressing those items. We will look into getting a quote from Startin'Blox (@David-OFN-CA) for changes that require moving things around or changing the type of input field.

Point 3: I'm not sure how this is supposed to work. In our component, enterprises can select produce type and be filtered by that, for example, meat or fruit. But it requires input to Airtable which would be manual in your case.

Yes, the inputs into Airtable would be manual (not through OFN) for this - we would have the users fillout a form to get the data to be inputed into the 'Certifying body' field in Airtable to reflect our Categories. Then presumably the n8n workflow would work the same to move the data to the wordpress site? And then we would also need to change the text label as you described above with a the style edit.

[mkllnk]

we would have the users fillout a form to get the data to be inputed into the 'Certifying body' field in Airtable to reflect our Categories.

That's how we do it. But we use Miniextensions for this form and it's very expensive. Maybe you can find a better solution. I thought that you were trying to avoid an additional form.

[karlafalk]

That's how we do it. But we use Miniextensions for this form and it's very expensive. Maybe you can find a better solution. I thought that you were trying to avoid an additional form.

Yes, we would use a simpler form builder (Fillout) that we have used before. It is not as powerful as Miniextensions, but should be adequate enough for our purposes, and easily integrates with Airtable.

[David-OFN-CA]

Okay - thanks guys - I'm going to loop Alex in now and get a quote from him

[karlafalk]

@mkllnk While we wait for a quote from Startin'Blox, I thought I would try and add in the Certification menu to our wordpress site.

I have done this but am not sure how to get rid of the menu with all the AUS regen options (Organic, Biodynamic, etc.). I have tried changing the code of workflow - 'List certification options', the code - node from:

to this:

But this doesn't seem to change the options on the wordpress site:

Also, I am not really sure how the certifications get linked from Airtable into the wordpress:

Which n8n workflow is responsible for moving this info from Airtable to the wordpress site? It doesn't seem to work the same as with the Assurance Partners?

[karlafalk]

@mkllnk I just wanted to give you an update. I couldn't figure out how to adapt the certification filter menu to filter buy the 'certifying body' field in airtable, so I tried a different approach of using 'Produce Category' as our group type filter. So please disregard the previous question about modifying certifications. This looks like a more straightforward modification.

One question I had was why we are getting 'undefined' for the state code when we have text in that field for our 2 producers?

I was also wondering how we can eliminate the duplication display on the Producers Page?

Thanks!

[mkllnk]

@karlafalk, I think that you just didn't wait long enough for the certification options to come through. I just added them on this page:

• https://regenerative.org.au/canada-test/

For that, I added this attribute:

      range-producer-certifications="https://api.regenerative.org.au/webhook/regen_CAN/certifications"

The filter doesn't work yet though. I don't see any certifications on the producer. In Airtable, that is an assurance of Type certification. It needs a certified enterprise, a certifying body etc. The field Certification status contains values like Organic in Australia but you can put something else in there. It needs to match the filter options. And currently, each certification can have only one status, otherwise the filter doesn't work.

[mkllnk]

But if you want to use the produce types, which is much simpler, then the undefined value was due to a bug in the workflow. It didn't encode the ampersand & properly. I hope I fixed it but I won't be able to test it today.

[karlafalk]

In Airtable, that is an assurance of Type certification. It needs a certified enterprise, a certifying body etc. The field Certification status contains values like Organic in Australia but you can put something else in there. It needs to match the filter options. And currently, each certification can have only one status, otherwise the filter doesn't work.

Thanks @mkllnk I think I didn't have all the fields in Airtable filled properly before. Regardless I think that the produce type category might work better for us. It is good to have the options though too.

[karlafalk]

Hello @mkllnk I just wanted to make sure that we are able to change the labels for the filter options of the Waterloo directory. Would we be able to change the label 'Produce Types' to 'Services Offered'?

Previously you had changed the text 'First Nations Led' to 'Indigenous Led' with this edit to the style code:

>

So I imagine it is something similar? Thanks!

[karlafalk]

Also @mkllnk can we have the First Nations/Indigenous flag removed altogether from that toggle? Thanks!

[karlafalk]

@mkllnk Just to follow up here. Since we are moving forward with forking the components for the Waterloo Project, maybe we will hold of on troubleshooting these last 2 items (changing the 'Produce types' label and removing the Indigenous flag), and they might get taken care of as part of that work.

[karlafalk]

Also @mkllnk I just wanted to let you know that 'Show social media' workflow doesn't seem to be getting triggered by the wordpress site for the Waterloo project as no social links are displaying on the producer profile pages despite there being data in the Airtable base for these fields.

Also there is no history of executions for the that workflow in n8n. Maybe this is something we can circle back once forking the components has been completed. I just wanted to make a note of it now so it can be circled back to.