Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


therealmiguel

Question

  • Answers 16
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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[&

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.

That did it! Thank you thank you thank you!

Posted Images

16 answers to this question

Recommended Posts

  • 1

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.

Edited by creedon
clarified SS version and template family

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0

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>

 

Link to post
  • 0

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! 

Link to post
  • 0
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.

Link to post
  • 0

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!

Link to post
  • 0

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!

Edited by MayaViolet
Link to post
  • 0
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!

Link to post
  • 0
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

Link to post
  • 0

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0
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

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...