New pricing block update

Bug Reports
1

The hack to switch from yearly to monthly looks broken in the latest pricing block update.

$('.switch_1').click();

It updates the toggle fine but not the blocks.

2

Fixed by changing the code to:
document.querySelector('.switch_1').click();

thanks ChatGPT !

1 Like
3

Hey, thanks for updating us!

4

Not on mobile though. Can we get this fixed? Pricing is so critical.

5

Hey everyone, this code isn’t working for me either, @Marine.Hovhannisyan. I tried your code, @cooper, but it’s not working :cry: Any solutions? Can Softr update the block to allow users to choose default settings?

<script>
document.addEventListener("DOMContentLoaded", function() {
    document.querySelector('.switch_1').click();
    $('#pricing19 .year').text('Annuel');
    $('#pricing19 .month').text('Mensuel');
    $('#pricing20 .year').text('Annuel');
    $('#pricing20 .month').text('Mensuel');
});
</script>
6

UPDATE from @Aramo, the code for translation is now :

<script>
window.addEventListener('block-loaded-Block id', () => {
$("span:contains('Yearly')").text('aaa');
$("span:contains('Monthly')").text('bbb');
});
</script>
1 Like
7

I can just add that in the header custom code and replace “block-loaded-Block id” with the block’s id? Is that it? It doesn’t seem to work for me. What am I missing? :slight_smile:

8

I currently use:

<script>
        window.onload = function() {
            var pricing1 = document.getElementById('pricing1');
            var cssTy7r4z = pricing1.querySelector('.css-ty7r4z');
            var cssPelz90 = pricing1.querySelector('.css-pelz90');

            if (cssTy7r4z) {
                cssTy7r4z.textContent = 'Quarterly';
            }

            if (cssPelz90) {
                cssPelz90.textContent = 'Monthly';
            }
        }
    </script>

Thanks to @matthieu_chateau :raised_hands:t3:

But I have a slight delay still until the text is changed.

10

You can adapt the code this way and check if it’s better:
Anyway, the code given above by Lea is also working.

<script>
    window.addEventListener('block-loaded-pricing1', function() {
        var pricing1 = document.getElementById('pricing1');
        var cssTy7r4z = pricing1.querySelector('.css-ty7r4z');
        var cssPelz90 = pricing1.querySelector('.css-pelz90');

        if (cssTy7r4z) {
            cssTy7r4z.textContent = 'Quarterly';
        }

        if (cssPelz90) {
            cssPelz90.textContent = 'Monthly';
        }
    });
</script>
1 Like