Category: Tutorials

Divi makes it possible to achieve almost any layout, insert almost any content element, and style things in almost any way. But what about payment forms? What about payment forms within modal popups?

By default, Divi doesn’t have options for modals or payment forms. That’s why we’ll be using our Payments for Divi plugin, and the Popups for Divi plugin. In just three simple steps, we’ll have an awesome looking modal popup that contains a custom payment form.

Step 1: Create a Button to Launch the Payment Form Modal

Once you’ve installed both the Payments for Divi and Popups for Divi plugins, head over to your page, and enable the Divi Visual Builder. Go ahead and add a button wherever you want. I’ve added a button with the text of “Order Now.”

The main requirement for the button is the “Button Link URL” setting. This setting normally takes a URL for the button link. However, to launch our payment form modal popup, we’ll use a hash link. A hash link looks like #id_of_target_element, where id_of_target_element will be the ID of our modal’s section. This tells your browser to open the modal when the button is clicked.

On my test site, I’ve used #order as the Button Link URL, which means my modal section will need to have an ID or order.

Step 2: Create a Modal Popup Section for the Payment Form

Next, you create the modal popup section, which is done with the Popups for Divi plugin. To create the modal, just add a new section to your page. I added mine at the bottom, but it doesn’t matter where you add it because the section will be hidden until the modal is toggled open.

To add my payment form popup, I styled my new section with a full row, and limited the row to 400px in width. I also made sure it was centered in the page.

To enable the section as a popup, the Popups for Divi plugin adds a “Popup” tab to the section’s settings. Click that tab. Under the General dropdown, toggle the setting to enable the section as a popup. Then, give it a “Popup ID” of whatever you used in your Button Link URL above, excluding the # symbol. Since I added #order as my button link, I’ll give the popup an ID of order.

After the basic requirements are set, you can style and configure your popup however you wish.

Step 3: Add the Payment Form

Finally, we’ll add the payment form to the popup section. Simply add a new module to your section’s row, and select the Payment Form module. You can read more about how to create payment forms for Divi here. I also added a text module, with a title for the modal. After saving, this is what my payment form modal looks like.

Gutenberg makes it super simple to create your content, such as pages and blog posts. As WordPress and Gutenberg continue to grow, the new editor will be extended to work on other parts of your site, so the possibilities will only continue to grow!

Using WordPress’s native blocks and third-party blocks, you can achieve unique layouts, filled with design elements that are beautifully crafted by top-notch block developers and designers.

What is CoBlocks

CoBlocks, founded by Rich Tabor at GoDaddy, is a suite of blocks for the WordPress editor. It includes a bunch of blocks that not only help content creators add new features to their websites, but they look flat out awesome!

In this post, we’ll look at how you can use CoBlocks with Ad Injector to bring the same powers of Gutenberg to your WordPress post archives, such as Blog page, custom post type listings, and even WooCommerce product grids!

What is Ad Injector?

With Ad Injector, you can use Gutenberg to create content like advertisements, promotions, calls to action, and much more. You can then insert that content anywhere within your blog page.

For example, say you’re launching a new product, and you’d like to display a promotional call to action after the first blog post on your Blog page. You can use Ad Injector to create the ad, insert it after the first post, and even schedule it for when to start and/or end. You can use CoBlocks to make it look great!

Here’s what we’ll be creating…

Here, we’ve created a promotional call to action using CoBlocks and Ad Injector, and have inserted it after the first post on the Blog page.

Prerequisites

You won’t need anything special here – just CoBlocks and Ad Injector!

CoBlocks is a free plugin you can download from your WordPress admin, or upload the zip file.

Ad Injector is available from Elegant Modules, with a Basic license starting at just $39. You can download the plugin’s zip file, and upload it in your WordPress admin. Make sure to add your license key in the Ad Injector settings to ensure you get access to automatic updates and support.

Creating the Promotion

After both CoBlocks and Ad Injector are installed and activated, you can create your promo. In your WordPress admin, in the admin menu on the left side of the screen, click on Ads –> Add New.

Creating a new ad is just like creating any other post or page in Gutenberg. For our example, we’ll be using the “Media Card” block available in CoBlocks. The setup will look similar to this:

The Media Card block looks great, and is simple to configure. We just need to select our image, and add a title and description. You can also set thing like a background color, the amount of padding, card or image shadows, and more.

After you’ve added the content for your promo, it’s time to insert it into your blog with Ad Injector.

Inserting the Ad

The Ad Injector settings next. Since we want to display the promo after the first post in our blog, we’ll select “Posts” as our post type, and enter “1” as the position. You can also set a start and end date for your ad, if desired. Your settings will look like…

After designing your promo and configuring the Ad Injector settings, you can save and public your ad. You can now create any kind and any number of promos you’d like, and insert them into whichever post type archives you wish. Use Ad Injector to insert things like email opt-ins, product upsells, and anything else you can do in Gutenberg!

By default, SyncS3 for Gravity Forms uploads files to Amazon S3 with private file permissions. This means the only way to access them is with a signed URL – SyncS3 signs the URLs in the admin so you can easily view them. If you want to offer public access to the files, such as viewing images or downloading zip files, you’ll need to adjust the files’ permission settings.

The Bucket Policy

To change a file’s permission settings, you first need to ensure that access to the file isn’t denied at the bucket level via the bucket policy. The easiest solution may be to not have any bucket policy. This will let you set access permissions on a per-file basis. However, if you have a reason for a bucket policy, you’ll need to adjust it to exclude the files you want to keep public.

Here’s an example bucket policy that denies access to bucket files, unless requested from an authorized website.

{
    "Version": "2012-10-17",
    "Id": "http referer policy example",
    "Statement": [
        {
            "Sid": "Allow get requests referred by mywebsite.com.",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::my-bucket/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": "https://mywebsite.com/*"
                }
            }
        },
        {
            "Sid": "Explicit deny to ensure requests are allowed only from specific referer.",
            "Effect": "Deny",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::my-bucket/*",
            "Condition": {
                "StringNotLike": {
                    "aws:Referer": "https://mywebsite.com/*"
                }
            }
        }
    ]
}

This policy denies access to any file in the my-bucket bucket, unless the request is from https://mywebsite.com. You’ll need to modify the policy to set your bucket name and website URL. You can also modify the Resource path if your public files are saved to a subfolder.

SyncS3 Filter

It is currently on our development roadmap to build a feature into SyncS3 that lets you select a canned ACL option for your file uploads. Until then, you can use the syncs3_put_object_acl filter to override the file’s ACL permission.

add_filter( 'syncs3_put_object_acl', 'em_syncs3_object_acl', 10, 6 );
/**
 * Filters the Access Control List for an object.
 * For possible choices, see https://docs.aws.amazon.com/AmazonS3/latest/dev/acl-overview.html#canned-acl.
 *
 * @param  string 	$acl       	ACL (default: 'private')
 * @param  string 	$file      	Local file URL when uploaded
 * @param  string 	$file_name 	Name of uploaded file
 * @param  int 		$field_id  	ID of the fileupload field
 * @param  int 		$form_id   	ID of the form
 * @param  array 	$entry     	Entry data
 *
 * @return string
 */
function em_syncs3_object_acl( $acl, $file, $file_name, $field_id, $form_id, $entry ) {
	// Logic here if needed
	return 'public-read';
}

This snippet sets all files uploaded by SyncS3 to public-read. You’ll need to add your own logic if needed. The filter make available data about the entry, form, and field so you can run your own logic.

After you’ve set your bucket policy and filtered the file’s ACL permission, files will be accessible according to your custom permissions. If you’ve set your bucket policy and ACL to allow for public-read access, you can link to the files with the stored S3 URLs, and user won’t get the “Access Denied” XML error they’d normally receive when the file is set to private.