New to the community? Start here

Pro Site error and mobile question

My site was working fine last night, then today I notice the following error displayed:
http://loprabbitwp.net/websites/

Warning: Invalid argument supplied for foreach() in /home/lopwp/public_html/wp-content/plugins/pro-sites/pro-sites-files/lib/ProSites/View/Front/Checkout.php on line 134

Warning: Invalid argument supplied for foreach() in /home/lopwp/public_html/wp-content/plugins/pro-sites/pro-sites-files/lib/ProSites/View/Front/Checkout.php on line 134

What do I need to do to make that go away?

I'm seeing 3 enter coupon boxes, are they supposed to be at the bottom of each column? If so how do I fix it? If that is not where they go, can I put them under each option?

My next question is I want everything to be as mobile friendly as possible, when I go to the page on my phone, it is scrunched and the words are broken onto multiple line. Is there a mobile friendly version of the order pages? Maybe make them into stacked items or even click for details?
Do you have any pre made display options to I can change what my table looks like on my desktop site or do I have to play with all of that in custom css?

Little off topic, but it is related to pro sites. I remember when I looked at market press before there was an option that I could turn on market press at the network level and create an esty like site where I could charge a percentage to use the store on their site. Does that option still exit? I could not find it.

More Pro Sites discussions
Pro Sites
    Michelle Shull

    Hi Rob, happy Friday!

    Just FYI, we usually ask members to break their support questions up into individual threads, rather than asking four or five different questions in the same thread. It helps our support be more efficient.

    My site was working fine last night, then today I notice the following error displayed:
    http://loprabbitwp.net/websites/

    Warning: Invalid argument supplied for foreach() in /home/lopwp/public_html/wp-content/plugins/pro-sites/pro-sites-files/lib/ProSites/View/Front/Checkout.php on line 134

    Warning: Invalid argument supplied for foreach() in /home/lopwp/public_html/wp-content/plugins/pro-sites/pro-sites-files/lib/ProSites/View/Front/Checkout.php on line 134

    What do I need to do to make that go away?

    Resave your settings and that error should go away, as per this thread: https://premium.wpmudev.org/forums/topic/bug-in-prosites-35-invalid-argument-on-checkout-page

    I'm seeing 3 enter coupon boxes, are they supposed to be at the bottom of each column? If so how do I fix it? If that is not where they go, can I put them under each option?

    If you're using the default styling, you should only be seeing one add coupon field, under the far left column. Can you grab me a screenshot? Your page isn't loading for me.

    My next question is I want everything to be as mobile friendly as possible, when I go to the page on my phone, it is scrunched and the words are broken onto multiple line. Is there a mobile friendly version of the order pages? Maybe make them into stacked items or even click for details?

    I'm working with the dev right now on creating a set of different CSS styles for the pricing table, so members can more easily give it some sass. I can look into working with one of my more JS-inclined co-workers to see if we can integrate an accordion into the pricing table for mobile. That's a great idea!

    Do you have any pre made display options to I can change what my table looks like on my desktop site or do I have to play with all of that in custom css?

    It's in the works! I'm working on a handful of styles right now, including a version in color, one using gradients/shadows, and a flat design, along with an updated version of the minimalist original style. I can't give an ETA, my support duties have top priority, but it is actively in the works. For now, you can do whatever you like with custom CSS. It's pretty easy to style! Rheinard gave us some really well defined classes to tweak, so there's a LOT you can do. I've played with a lot of terrible CSS in my day, this is delightful to adjust.

    Little off topic, but it is related to pro sites. I remember when I looked at market press before there was an option that I could turn on market press at the network level and create an esty like site where I could charge a percentage to use the store on their site. Does that option still exit? I could not find it.

    I think you might be looking for this video right here: https://youtu.be/1QMaf5FDrWg. There are a handful of additional steps outside the plugin settings you need to do to enable the global store.

    Hope this helps!

    Rob

    I tried resaving everything and the errors did not go away.

    Resave your settings and that error should go away, as per this thread: https://premium.wpmudev.org/forums/topic/bug-in-prosites-35-invalid-argument-on-checkout-page

    `

    I attached a screen shot of what my menus look like with the enter coupon circled.
    I also attached a screen shot of how horrible it looks on my phone.

    Rob

    Since I posted the last message the errors have disappeared.
    The mobile version still looks ugly, so I'm still wondering if there is any work around to make that pretty yet?

    The latest change is even though premium plugin has "is visible" unchecked it still appears.
    While I'm talking about changes, I've noticed when I make updates (change wording under compare features, rearrange order I want levels to appear in product compare table, change the verbiage about the trial under the table, etc) there is a delay before if appears. I've cleared everything and no change, then later suddenly when I check back later its updated. Is there a delay or what might cause it?

    Michelle Shull

    Hey there, Rob!

    I have some CSS I just tried on my own site that makes it look better (not perfect) on mobile. It requires hiding some elements, and forcing things just a bit, but it may help tide you over until we release the next update. 

    @media screen and (max-width: 480px) {
	#prosites-checkout-table {
		width: 100%;
	}
//remove bottom border under title
	.pricing-column .title:after {
		border-bottom: 0;
		margin: 10px 5px 0;
	}
//adjust width of columns
	#prosites-checkout-table .pricing-column {
		width: 24% !important;
	}
//remove default featured border
	.pricing-column.featured .title {
		border-width: 1px;
	}

	.pricing-column.featured .summary {
		border-width: 1px;
	}

	.pricing-column.featured .feature-section {
		border-width: 1px;
	}

	.pricing-column.featured .button-box {
		border-width: 1px;
	}
//shrink price font
	.price.price_1 {
		font-size: .8em;
	}
//hide far left column, goodies
	.pricing-column-psts-level-0 {
		display: none;
	}

	.level-summary.price_1 {
		display: none;
	}

	.pricing-column.psts-level-0 .sub-title {
		display: none;
	}

	.pricing-column.psts-level-0 .feature-section {
		display: none;
	}
//change level title font size
	#prosites-checkout-table .title {
		font-size: .8em;
		padding-bottom: 2%;
	}
//hide unneeded subtitle box
	#prosites-checkout-table .sub-title.no-title {
		display: none;
	}
}

    I attached a screenshot of how it looks in a mobile emulator, which matches my iPhone5 view. There's no coupon code, and there's no duration (monthly/quarterly/annual) checker, I'm reading out to my friend and colleague @Ashok, who is a javascript wizard to see if he can find a way to move those items so we can show them again.

    If you have less than (or more than) four levels, change this line in the CSS I gave you above: 

    #prosites-checkout-table .pricing-column {
		width: 24% !important;
	}

    to either 32% (for three levels) or 19% (for five, but it's not going to look great that small.)

    As for the errant coupon fields, can you link me to your checkout page? You can use a link shortener to protect your URLS, like bit.ly.

    Hope this helps! We'll keep you posted on the update and new CSS.

    Rob

    I have another ticket for anther issue and I have a happy accident. The CSS they gave me to fix my check and X's alignment setup my mobile page almost like I want. I'm going to do some tweaks to the info on the feature table, but it is close enough to what I want with the bellow css

    .feature-section .icon-tick, .feature-section .icon-cross {
  display: inline-block;
  width: 30px;
}

@media screen and (max-width: 768px) {
	#prosites-checkout-table .pricing-column {
	  width: 100%!important;
	  margin: 30px 0;
	}
}