About
This WordPress plugin was developed for the proposed project “Viking Imports” website. At the time of writing this post, the project is not confirmed. A demo of this plugin can be found in https://innovriver.com/test-astra/about-us/
This website would have a CPT called Product. This plugin uses a shortcode to display products in a card form in a row. The shortcode takes this format:
[vik_show_product_cards prod_id=”xxxx, yyyy, zzzz” ]
where prod_id is a text string containing the product id or project no., separated by comma. Currently the number of product ids is limited to a maximum of 3, but this can be changed in the php file.
Each product card has a hidden “Enquire” button. This button appears when the mouse hovers on it. By clicking this button, a modal will pop up which will display the concerned product featured image, product number, product title and an enquiry form.
The enquiry form is created using the CF7 plugin. In submitting this form, the customer contact details, the hidden product number and title are sent to the site admin via email.
If the email is sent successfully, CF7 will trigger the DOM event ‘wpcf7mailsent’. By listening to this event, the Thank You message is displayed in the modal.
Key Operations
- At the ‘ini’ hook, registers ‘ivr-vik-style.css’ and ‘ivr-vik-script.js’.
- At the ‘wp_enqueue_scripts’ hook, enqueue the above css and js files.
- At the ‘wp_body_open’ hook, create the model html markup under the <body> tag.
- In future, conditional logic should be implemented to create the modal only on concerned pages.
- Register the shortcode using the function add_shortcode( ‘vik_show_product_cards’, ‘ivr_vik_show_cards’ ).
Folders and Files
ivr-vik-product-cards/ivr-vik-product-cards.php
- the main file of the plugin. It triggers the required functions at the various hooks mentioned above.
ivr-vik-product-cards/uninstall.php
- Currently do nothing. It is created for completeness for the plugin.
ivr-vik-product-cards/inc/loader.php
- when called, it loads in all files in the ‘inc’ folder.
- but excludes itself and index.php
ivr-vik-product-cards/inc/ivr-vik-product-cards-functions.php
- defines all functions called by ivr-vik-product-cards.php
ivr-vik-product-cards/public/css/ivr-vik-style.css
- the main CSS file
ivr-vik-product-cards/public/js/ivr-vik-script.js
- the js file
Key Technique
- Use WP_Query($args) to extract the CPT.
$args = array(
'post_type' => 'product',
'post_status' => 'publish',
'meta_key' => 'prod_id',
'meta_value' => $prod_id
);- Attach the ‘active’ class to the DOM of the post card when the mouse is moved over it. Remove the class when the mouse is moved out.
- The ‘.active’ class triggers the display of the Enquire button.
<div class='vik-card' onmouseover='this.className = \"vik-card active\"' onmouseout='this.className = \"vik-card\"'>- Create HTML markup under <body> tag
- Use the wp_body_open hook.
add_action('wp_body_open', 'add_modal_html');- Pass product meta data from database to HTML, then to button’s onclick event, then to modal HTML
- store meta data to variables.
- create data attributes and set their values to the meta data.
- create the on click function loadPopUp(x, y, z)
- use the function ‘this.getAttribute( )’ to get the data attributes and pass them to the loadPopUp function.
- in the loadPopUp function, use innerHTML to populate the argument values to the modal HTML
// php
$prodID = get_field("prod_id");
$prodTitle = get_the_title();
$prodImg = get_the_post_thumbnail(null, array(120, 96));
$btn = "<button class='vik-btn'
data-prod_img = '$prodImg'
data-prod_id = '$prodID'
data-prod_title = '$prodTitle'
onclick = 'loadPopUp(this.getAttribute(\"data-prod_img\"), this.getAttribute (\"data-prod_id\"), this.getAttribute(\"data-prod_title\") )' >Enquire</button>";
$output .= $btn;- Add contact form to modal popup
- Create the contact form and get its shortcode.
- Use the function do_shortcode( ) in the modal html.
<div class="enq-form">
<?= do_shortcode('[contact-form-7 id="833" title="Enquiry Form"]'); ?>
</div>- Display the Thank You message when the contact form email is successfully sent
- listen to the CF7 event ‘wpcf7mailsent’.
- Other CF7 events can be found _here_.
document.addEventListener( 'wpcf7mailsent', function( event ) {
document.getElementById('page-form').style.display = "none";
document.getElementById('page-thanks').style.display = "block";
}, false);Screenshots
Version History & Download
| Ver. | Rel Date | Remark |
| 1.0.0 | 2021-03-31 | First release |