Flatsome donate paypal element

01 Jun 2020
0 Comments

flatsome-child\change\shortcodes\donate.php

                
                    
<?php
function donate_sc($atts, $content = null)
{
    extract($atts = shortcode_atts(array(
        'donate_value' => '',
        'currency' => 'usd',
        'paypal' => '',
        'give_asia' => '',
        'class' => '',
        'visibility' => '',
    ), $atts));
    $classes = array('gap-element', 'clearfix');
    if ($class) {
        $classes[] = $class;
    }
    if ($visibility) {
        $classes[] = $visibility;
    }

    $classes = implode(' ', $classes);
    $donate_value = explode(",", $donate_value);

    ob_start();
    ?>
    <div class="form-donate">
        <input type="text" name="" placeholder="Tôi đóng" class="form-donate__info round">
        <ul class="form-donate__choice">
            <?php $count = 0;
            foreach ($donate_value as $value): ?>
                <li title="html" data-value="<?php echo $value.$currency ?>" class="<?php if ($count == 0) echo "selected" ?>">
                    <div class="uppercase"><?php echo $value ?><?php echo $currency ?></div
                </li>
                <?php $count++; endforeach; ?>
        </ul>
        <button type="button" class="form-donate__paypal expand button submit is-xlarge round lowercase" data-url="<?php echo $paypal ?>">
            <img src="<?php echo get_stylesheet_directory_uri()."/change/assets/img/paypal.png"?>" alt="">
        </button>
        <button type="button" class="expand button submit is-xlarge round lowercase"
                data-url="<?php echo $give_asia ?>">Give ASIA
        </button>
    </div>
    <?php
    $content = ob_get_clean();
//    ob_end_clean();
    return $content;
}

add_shortcode('donate', 'donate_sc');
                
            

flatsome-child\change\builder\shortcodes\donate.php

                
                    
<?php
add_ux_builder_shortcode('donate',array(
    'name' => __("Donate"),
    'options' => array(
        'donate_value' => array(
            'type' => 'textfield',
            'heading' => 'Donate Value',
            'default' => ''
        ),
        'currency' => array(
            'type' => 'select',
            'heading' => 'Currency',
            'default' => 'usd',
            'options' => array(
                'usd' => 'USD',
            ),
        ),
        'paypal' => array(
            'type' => 'textfield',
            'heading' => 'Paypal Link',
            'default' => ''
        ),
        'give_asia' => array(
            'type' => 'textfield',
            'heading' => 'Give Asia',
            'default' => ''
        ),
        'advanced_options' => require( FS_THEME_SHORT_CODE_PATH . '/commons/advanced.php'),
    ),
));
                
            

flatsome-child\change\assets\css\pages\_page-dong-gop.scss

                
                    
.dong-gop--ss1{
  .row2{
    .col1{
      .col-inner{
        background-color: $white;
        padding: 40px;
        .form-donate{
          margin: 0 auto;
          max-width: 400px;
          .form-donate__info{
            height: 45px;
            border-radius: 5px;
            box-shadow: none;
            margin-bottom: 10px;
          }
          .form-donate__choice{
            list-style: none;
            -js-display: flex;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-flow: row wrap;
            flex-flow: row wrap;
            margin-left: -10px;
            margin-right: -10px;
            li{
              max-width: 50%;
              -ms-flex-preferred-size: 50%;
              flex-basis: 50%;
              cursor: pointer;
              display: block;
              text-align: center;
              margin: 0px;
              padding: 10px;

              div{
                padding: 12px 16px;
                border: 1px solid #b8b8b8;
                border-radius: 4px;
              }
              &.selected{
                div{
                  border-color: $green1;
                }
              }
            }
          }
          .form-donate__paypal{
            background-color: #FFAF50;
          }
        }
      }
    }
  }
}
                
            

flatsome-child\change\assets\js\change.js

javascript Donate
                
                    
changeThemeModule.formDonate = function () {
    $(".form-donate__choice").on("click", "li", function () {
        $(this).addClass("selected");
        $(this).siblings().removeClass("selected");
    });
    $(".form-donate button").click(function () {
        window.open($(this).data("url")+"/"+$(".form-donate__choice li.selected").data("value"), '_blank');
    })
}
                
            

Leave a Reply

This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.