Price Plan Mods

Curious on what others have done to change up the visual Price Plans display for your customers. Below is what I have been done so far. I have taken the original MW look and feel and just expanded on it a bit.

EG_PricePlans.PNG
and the Price Plan "Description" is only the
EG_PricePlans2.PNG

As for prices, I currently have no real idea as Im just starting down this road. I have looked at a handful of others and just been trying to work out the best strategy that works for my customer base, so any input and/or comments are certainly welcome. For me, this is my starting point.

What have others done for looks?
 
I do owe you all this .. LOL ...

the file we will be modifying will be:
apps/customer/views/price-plans/list.php

We will be replacing the block of code Line 40 to Line Line 60 ...
PHP:
<div class="row">
                <?php foreach ($pricePlans as $index => $plan) { ?>
                    <div class="col-lg-3 price-plan-box-wrapper">
                        <div class="box box-<?php echo $plan->group_id == $customer->group_id ? 'primary' : 'success';?> price-plan-box borderless">
                            <div class="box-heading">
                                <h3 class="box-title"><?php echo $plan->name;?></h3>
                                <div class="box-tools pull-right">
                                    <?php if ($plan->isRecommended) { ?>
                                        <span class="badge bg-<?php echo $plan->group_id == $customer->group_id ? 'blue' : 'red';?>"><?php echo Yii::t('app', 'Recommended');?></span>
                                    <?php } ?>
                                    <span class="badge bg-<?php echo $plan->group_id == $customer->group_id ? 'blue' : 'red';?>"><?php echo $plan->formattedPrice;?></span>
                                </div>
                            </div>
                            <div class="box-body">
                                <p> <?php echo $plan->description;?> </p>
                            </div>
                            <div class="box-footer">
                                <div class="pull-right">
                                    <a class="btn btn-<?php echo $plan->group_id == $customer->group_id ? 'primary' : 'success';?> btn-flat btn-do-order" href="#payment-options-modal" data-toggle="modal" data-plan-uid="<?php echo $plan->uid;?>">
                                        <?php echo $plan->group_id == $customer->group_id ? Yii::t('app', 'Your current plan, renew it') : Yii::t('app', 'Purchase');?>
                                    </a>
                                </div>
                                <div class="clearfix"><!-- --></div>
                            </div>
                        </div>
                    </div>
                    <?php if (($index+1) % 3 === 0) { ?><div class="clearfix"><!-- --></div><?php } ?>
                <?php } ?>
                <div class="clearfix"><!-- --></div>
            </div>
We are changing from 3 columns by default to 4, and just adding abit of theme styling to it all.

There are some custom css classes that I grabbed from https://forum.mailwizz.com/threads/how-to-add-a-custom-payment-page-options.70/
To use custom css, go to MailWizz/customer/assets/css/ and create a new css file called "style-custom.css" You can add all your custom css code there. MailWizz will load it automatically.
PHP:
* {
    box-sizing: border-box;
}


.hider1 {display: none;}
.hider2 {display: none;}
.hider3 {display: none;}
.columns {
    float: left;
    width: 33.3%;
    padding: 8px;
}

.price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.price .header {
    color: white;
    font-size: 25px;
}

select { width: 75%; text-align-last:center; }

.price li {
    border-bottom: 1px solid #eee;
    padding: 5px;
    text-align: center;
}

.price .grey {
    background-color: #eee;
    font-size: 20px;
}

.button {
    background-color: #00A8D1;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}

The above CSS is from vladmedv.27's tutorial linked above. Not all the CSS is needed, but I didnt feel like cutting down the unneeded css for this. There isnt much anyways.

That should do it. Good luck to all!
 

Attachments

  • priceupdate01.PNG
    priceupdate01.PNG
    63.6 KB · Views: 88
Last edited:
I do owe you all this .. LOL ...

the file we will be modifying will be:
apps/customer/views/price-plans/list.php

We will be replacing the block of code Line 40 to Line Line 60 ...
PHP:
<div class="row">
                <?php foreach ($pricePlans as $index => $plan) { ?>
                    <div class="col-lg-4 price-plan-box-wrapper">
                        <div class="box box-<?php echo $plan->group_id == $customer->group_id ? 'primary' : 'success';?> price-plan-box borderless">
                            <div class="box-heading">
                                <h3 class="box-title"><?php echo $plan->name;?></h3>
                                <div class="box-tools pull-right">
                                    <?php if ($plan->isRecommended) { ?>
                                        <span class="badge bg-<?php echo $plan->group_id == $customer->group_id ? 'blue' : 'red';?>"><?php echo Yii::t('app', 'Recommended');?></span>
                                    <?php } ?>
                                    <span class="badge bg-<?php echo $plan->group_id == $customer->group_id ? 'blue' : 'red';?>"><?php echo $plan->formattedPrice;?></span>
                                </div>
                            </div>
                            <div class="box-body">
                                <p> <?php echo $plan->description;?> </p>
                            </div>
                            <div class="box-footer">
                                <div class="pull-right">
                                    <a class="btn btn-<?php echo $plan->group_id == $customer->group_id ? 'primary' : 'success';?> btn-flat btn-do-order" href="#payment-options-modal" data-toggle="modal" data-plan-uid="<?php echo $plan->uid;?>">
                                        <?php echo $plan->group_id == $customer->group_id ? Yii::t('app', 'Your current plan, renew it') : Yii::t('app', 'Purchase');?>
                                    </a>
                                </div>
                                <div class="clearfix"><!-- --></div>
                            </div>
                        </div>
                    </div>
                    <?php if (($index+1) % 3 === 0) { ?><div class="clearfix"><!-- --></div><?php } ?>
                <?php } ?>
                <div class="clearfix"><!-- --></div>
            </div>
We are changing from 3 columns by default to 4, and just adding abit of theme styling to it all.

There are some custom css classes that I grabbed from https://forum.mailwizz.com/threads/how-to-add-a-custom-payment-page-options.70/
To use custom css, go to MailWizz/customer/assets/css/ and create a new css file called "style-custom.css" You can add all your custom css code there. MailWizz will load it automatically.
PHP:
* {
    box-sizing: border-box;
}


.hider1 {display: none;}
.hider2 {display: none;}
.hider3 {display: none;}
.columns {
    float: left;
    width: 33.3%;
    padding: 8px;
}

.price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.price .header {
    color: white;
    font-size: 25px;
}

select { width: 75%; text-align-last:center; }

.price li {
    border-bottom: 1px solid #eee;
    padding: 5px;
    text-align: center;
}

.price .grey {
    background-color: #eee;
    font-size: 20px;
}

.button {
    background-color: #00A8D1;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}

The above CSS is from vladmedv.27's tutorial linked above. Not all the CSS is needed, but I didnt feel like cutting down the unneeded css for this. There isnt much anyways.

That should do it. Good luck to all!

Perfect, Thanks buddy got it working, had to write code just like yours :p

https://www.dropbox.com/s/acpqr088tmryi44/Screenshot 2017-04-19 10.49.14.png?dl=0

Really appreciate it.
 
Hello,

Can someone help me out. I've been messing with the css and html and I cannot for the life of me
figure out how to make it 4 columns instead of 3.

Thanks in advance...
 
In my example I actually put it incorrectly ... it should be:
HTML:
<div class="col-lg-3 price-plan-box-wrapper">
Bootstrap is based off a grid that is 12 "blocks" wide. We are setting each block to a width of 3 units, so that you can get 4 payments each row.
 
Hi,

can you share your modifications to get that great look ?

Thanks,
Paulo


Curious on what others have done to change up the visual Price Plans display for your customers. Below is what I have been done so far. I have taken the original MW look and feel and just expanded on it a bit.

View attachment 3446
and the Price Plan "Description" is only the
View attachment 3447

As for prices, I currently have no real idea as Im just starting down this road. I have looked at a handful of others and just been trying to work out the best strategy that works for my customer base, so any input and/or comments are certainly welcome. For me, this is my starting point.

What have others done for looks?
 
This code is on line number 40 on the file apps/customer/views/price-plans/list.php
PHP:
            <div class="row">
                <?php foreach ($pricePlans as $index => $plan) { ?>
                    <div class="col-lg-3 price-plan-box-wrapper">
                        <div class="box box-<?php echo $plan->group_id == $customer->group_id ? 'primary' : 'success';?> price-plan-box borderless">
                            <div class="box-heading">
                                <h3 class="box-title"><?php echo $plan->name;?></h3>
                                <div class="box-tools pull-right">
                                    <?php if ($plan->isRecommended) { ?>
                                        <span class="badge bg-<?php echo $plan->group_id == $customer->group_id ? 'blue' : 'red';?>"><?php echo Yii::t('app', 'Recommended');?></span>
                                    <?php } ?>
                                    <span class="badge bg-<?php echo $plan->group_id == $customer->group_id ? 'blue' : 'red';?>"><?php echo $plan->formattedPrice;?></span>
                                </div>
                            </div>
                            <div class="box-body">
                                <p> <?php echo $plan->description;?> </p>
                            </div>
                            <div class="box-footer">
                                <div class="pull-right">
                                    <a class="btn btn-<?php echo $plan->group_id == $customer->group_id ? 'primary' : 'success';?> btn-flat btn-do-order" href="#payment-options-modal" data-toggle="modal" data-plan-uid="<?php echo $plan->uid;?>">
                                        <?php echo $plan->group_id == $customer->group_id ? Yii::t('app', 'Your current plan, renew it') : Yii::t('app', 'Purchase');?>
                                    </a>
                                </div>
                                <div class="clearfix"><!-- --></div>
                            </div>
                        </div>
                    </div>
                    <?php if (($index+1) % 3 === 0) { ?><div class="clearfix"><!-- --></div><?php } ?>
                <?php } ?>
                <div class="clearfix"><!-- --></div>
            </div>

And this CSS is under /customer/assets/css/style-custom.css
HTML:
* {
    box-sizing: border-box;
}


.hider1 {display: none;}
.hider2 {display: none;}
.hider3 {display: none;}
.columns {
    float: left;
    width: 33.3%;
    padding: 8px;
}

.price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.price .header {
    color: white;
    font-size: 25px;
}

select { width: 75%; text-align-last:center; }

.price li {
    border-bottom: 1px solid #eee;
    padding: 5px;
    text-align: center;
}

.price .grey {
    background-color: #eee;
    font-size: 20px;
}

.button {
    background-color: #00A8D1;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}

I'm getting style like this
https://www.dropbox.com/s/76u5ctcetz4d4y1/Screenshot 2017-10-21 13.08.25.png?dl=0

Please help me solve the issue.

Thanks.
 
Back
Top