Customising the text on "View event" and "Back to All Events" links

You can try something like the following.

$( '.eventitem-backlink' ).attr ( 'href', '/workshops' );

This is for a v7 site using a Brine family template.

That targets the class of the link.

Let us know how it goes.

You can add the following JS below.

Features:

• Update the value of the eventButtonText['default'] variable to update all buttons.
• Target individual buttons using the eventButtonText[<POSITION>] syntax. If you want to customize the button of the 2nd event item, you'd use, eventButtonText[2]. The example below has items 1 and 3 commented out based on the 2 forward slashes in front of the variable. Remove those slashes to uncomment.  
• Update the value the back to events link by updating the value of the eventBackButtonText variable

JavaScript

(function (document) {

  var eventButtonText = {}; // DO NOT DELETE

  // Back button text.
  var eventBackButtonText = 'Go back to my awsome events!'

  // Default text for all buttons for each event listing item.
  eventButtonText['default'] = 'View my awesome event!';

  // Target specific item in the event listing. Remove the 2 forward slashes
  // below before the `eventButtonText` variableto uncomment the lines. Update
  // the number in the bracket to equal the position of the event in the listing.
  // eventButtonText[1] = 'Event 1';
  // eventButtonText[3] = 'Event 3';

  /**************************************************************************
   * DO NOT EDIT CODE BELOW, unless you know what your doing.
   ***************************************************************************/

  // Initialized code depending on if the user places it in the header or footer
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init() {
    addNodeListForEachPolyfill();

    var eventButtons = document.querySelectorAll('.eventlist .eventlist-button');
    var backLink = document.querySelector('.eventitem-backlink');
    var text;

    if (eventButtons) {
      eventButtons.forEach(function (button, index) {
        index = index + 1;
        text = eventButtonText[index] || eventButtonText['default'];
        if (text) {
          button.textContent = text;
        }
      });
    }

    if (backLink) {
      backLink.textContent = eventBackButtonText;
    }

  }

  function addNodeListForEachPolyfill() {
    if (window.NodeList && !NodeList.prototype.forEach) {
      NodeList.prototype.forEach = Array.prototype.forEach;
    }
  }

})(document);

Be sure to place the code above between <script> tags, example:

<script>
  // Add js code here
</script>

Good morning @jpeter! That is incredible! It's worked like a charm, I can't be thankful enough! 

Have a great rest of the week and stay healthy and happy!

I am trying to do the same thing and I can't get the code to update my buttons and back link. Miguel, did you place this in the page header code injection section or add the code in the footer? Would you mind taking a screen shot of how you accomplished this? I'm new to JS coding, so I would be very appreciative! 

5 hours ago, HaileeWestberry said:

I am trying to do the same thing and I can't get the code to update my buttons and back link. Miguel, did you place this in the page header code injection section or add the code in the footer? Would you mind taking a screen shot of how you accomplished this? I'm new to JS coding, so I would be very appreciative! 

Yesterday I solve a same question, if you search on forum, I think you can find it out.

Or can you share link to event? We can check easier.

This solutions works on the all events/calendar blocks. I use a lot of summary blocks of events filtered by tag/category. The "view event" button doesn't even show up. Users can't tell where to click. Is there code to insert the view event button on a page or summary block? Thanks!

Hey all - 

I'm on a similar, but different quest. I am trying to redirect the "Back to all events" link to a different page itself. I have used the script below, but I'm missing something - I can't get it to work.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script> 
   $(document).ready(function() { 
     $('.eventitem-backlink[href="/events-workshops?view=calendar&amp;month=07-2020"]').attr("href", "/workshops");
   }); 
</script>

Web page: https://fairfaxbackyardfarmer.squarespace.com/events-workshops/template-workshop

I would appreciate any direction or ideas! Thank you!

Or a modification of your selector.

$( '.eventitem-backlink[href^="/events-workshops"]' );

The href begins with...

On 9/25/2020 at 9:18 PM, creedon said:

You can try something like the following.

$( '.eventitem-backlink' ).attr ( 'href', '/workshops' );

That targets the class of the link.

Let us know how it goes.

That did it! Thank you thank you thank you!

On 9/29/2020 at 4:27 AM, MayaViolet said:

That did it! Thank you thank you thank you!

Hi, I'm a bit lost here, where do you paste that code? Thanks

9 hours ago, perezalex said:

Hi, I'm a bit lost here, where do you paste that code? Thanks

Page Header or Code Injection Header/Footer

On 9/28/2020 at 2:27 PM, MayaViolet said:

That did it! Thank you thank you thank you!

Worked for me too, thanks @creedon!

This worked perfectly for me - one additional question - how can you make it so that the "view event" button on click opens in a new tab?

@AziJamalian

Please post the URL for a page with the view event "button" on your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

@creedon @jpeter

Hi guys! This helps a lot. Where can I edit this code? I tried to do it within events code block but it didn't work out.

21 minutes ago, Zkoster said:

@creedon @jpeter

Hi guys! This helps a lot. Where can I edit this code? I tried to do it within events code block but it didn't work out.

Settings > Advanced > code Injection > Footer or Header