Okay
  Public Ticket #3738429
Event Layout Builder - Address Format
Open

Comments

  •  1
    mvanderweide started the conversation

    I hope you're well. I'm reaching out regarding the STEC Calendar plugin and need some assistance with customizing the Event Layout Builder template.

    Specifically, I'd like to modify the address display format to follow the standardized US format, presented in a linear fashion. Currently, the layout uses a format, which isn't ideal for my audience and doesn't allow for the specific placement of the address element, like this shortcode allows for: 

    • misc__address_order - Address order Values: Comma-separated values “country,state,city,address,postal_code

    I would like the address in the event builder template to appear as follows:

    [Street Address], [City], [State] [Zip Code]

    This linear format aligns with US conventions and would be much more intuitive for my users. I'm providing a screenshot that demonstrates the desired outcome to better illustrate my request.

    I appreciate any guidance or support you can provide in making this change.

    Thank you in advance!

    Attached files:  Screenshot - 2024-10-04T222319.000.png

  •  852
    Zhivko replied

    Hi,

    1) Enforce the misc__address_order parameter for both the calenar and the single event page via these two PHP hooks.

    add_filter('stec_shortcode_atts', function ($atts) {
        $atts['misc__address_order'] = 'address,city,state,postal_code,country';
        return $atts;
    });
    
    add_filter('stec_single_shortcode_atts', function ($atts) {
        $atts['misc__address_order'] = 'address,city,state,postal_code,country';
        return $atts;
    });
    

    You will have to insert this hook in your child-theme functions.php file since I don't have access to do it myself.

    ---

    2) If you want to convert the Address Element to a one line text you can do so with js like I did in your template (HeyGR Event Layout) here:

    1399441104.png

    The JS code there is:

    (function () {
    
        const addressContainer = document.querySelector('.stec-event-location-address.custom-address');
    
        const allLines = Array.from(addressContainer.querySelectorAll('stec-div stec-span:nth-child(2)'))
            .map(element => element.textContent.trim());
    
        let displayAddress = '';
    
        if (allLines.length === 5) {
            displayAddress = `${allLines[0]}, ${allLines[1]}, ${allLines[2]} ${allLines[3]}`;
        } else {
            displayAddress = allLines.join(', ');
        }
    
        addressContainer.innerHTML = `
            <span>${displayAddress}</span>
        `;
    
    })();

    If course you can modify it. This is just an example.


    Stachethemes Developer

  •  1
    mvanderweide replied

    Hello, thank you for your reply!


    I have applied the html/js solution to my Basic Event Layout template and also see that you put it in the HeyGR template. However, it appears that the modified address is not being displayed at all on any of our single event pages.


    Example This event is using the Basic Event Layout. The reformatted address is not rendering.

    https://heymichigan.com/event/tuesday-trivia-in-grand-rapids-mammoth-distilling/2024-10-08T19:00/


    Please advise. Thank you.


    Attached files:  Screenshot - 2024-10-08T142650.672.png
      Screenshot - 2024-10-08T142949.742.png

  •  852
    Zhivko replied

    You forgot to place the custom class to the address element ( custom-address ).

    9092566789.png

    The js expects the element to have this class name otherwise nothing will happen.

    2005241735.png


    Stachethemes Developer