Mobile Pricing Plans Repeater Code

Ask the community
, ,
1

Hello,

When viewing the wix pricing plans on the mobile, the repeater automatically collapses. Whereas on the desktop version, it displays fully (see screenshots below). I would like to replicate this with another customized repeater (outside of the pricing plan app).

Since the code already exists (as its already part of a wix app), would it be possible for someone from the wix team to share it here please?

Thank you so much.

771×1277 53.5 KB

641×1249 35.3 KB

2

Hi there! Instead of using the app, you could customize the Paid Plans layout in a repeater by following this handy tutorial and catering it to your needs. Here’s the API for Paid Plans.

For the expanding/collapsing, you could reference this post and this API to build something like this:

export function yourButton_click(event) {
    $w("#repeaterName").onItemReady(($item, itemData, index) => {
 if (event.context.itemId === itemData._id) {
 // #box1 is the id of all the boxes, but $item maps through each item on the repeater   
            $item("#box1").expand();
        }
    })
}
3

Thanks so much for your response and all the information.

I followed the code instructions you provided but for some reason, on clicking the expand button on mobile, it doesn’t do anything. As a note, if I remove the $w(“#repeater3”) line below and change $item to $w(‘#box9’).expand(); the expand function works but as predicted it expands all the 3 repeater columns and not just one.

In the desktop version, I have the button hidden and then using if (wixWindow.formFactor === “Mobile” ) I display it on the mobile version.

Here’s what I have so far:

import wixWindow from ‘wix-window’ ;
$w.onReady( function () {
if (wixWindow.formFactor === “Mobile” ) {

    $w( "#box9" ).collapse();

//this is the box I want to collapse in mobile version only
$w( “#vectorImage18” ).show();
//this is the button to expand the collapsed box
}
});

export function vectorImage18_click(event) {
$w( “#repeater3” ).onItemReady(($item, itemData, index) => {
if (event.context.itemId === itemData._id) {
$item( ‘#box9’ ).expand();
}
})
}

4

@arjunchahal Now I understand more fully, I thought you were trying to make a custom Paid Plans layout, but it sounds like you just want to recreate how its repeater works/looks. Makes sense.

Are you testing in Preview or on the live site? After reviewing this API for code that runs only on mobile, I found it says that any mobile-only code will not work in desktop Preview.

1524×998 97.7 KB

5

I think I previously gave you the wrong advice with my code example ( this post dealt with a similar problem).
It looks like the solution is to get rid of the event handler in the Properties panel, and move the Click event into the onReady function for the page. This way everything happens at once.

I tested this on my site and it worked:

import wixWindow from 'wix-window';

$w.onReady(function () {
 if (wixWindow.formFactor === "Mobile") {

        $w("#box9").collapse();
        $w("#vectorImage18").show();

 // Use this instead of the event handler from the Properties panel
        $w("#vectorImage18").onClick((event) => {
 // $item limits the event to only the relevant repeater item
 let $item = $w.at(event.context);
            $item("#box9").expand();
        });
    }
});
6

That did the trick @lmeyer

You’re amazing! Thanks so much.