Ivr – RE Collective Properties Carousel Plugin for WordPress

About

This plugin is developed for the RE Collective website. It provides a shortcode to display “Properties” or “Rental” post types in a 2-column carousel.  This plugin employs the “Slick” library to build the carousel.

The Property and Rental are Custom Post Types generated by the Easy Property Listings (EPL) plugin.

A demo of this plugin can be found in test-astra/sell-with-us/

The shortcode is:

[ivr_carousel_properties type="post_type" status="ppty_status" total="total_slides" scroll="num_to_scroll" speed="ms" auto="true/false"]

This plugin accepts the following parameters:

• type (required) = property type (examples: property, rental…)
• status (required) = property status (examples: current, leased, sold, etc….)
• total (optional) = total slides in the carousel (default = 3)
• scroll (optional) = number of slides to scroll each time (default = 1)
• speed (optional) = scroll speed in millisecond (default = 8000)
• auto (optional) = true for auto scroll (default = true)

Key Operations

• At the ‘ini’ hook, registers these css and js files:
  • /public/css/ivr-rec-carousel-style.css
  • /public/css/slick.css
  • /public/css/slick-theme.css
  • /public/css/fontello/css/ivr-fontello.css
  • /public/js/slick.min.js (with dependency on jquery)
  • /public/js/ivr-rec-carousel-script.js (with dependency on jquery)

• At the ‘wp_enqueue_scripts’ hook, enqueue the above files.
• Register the shortcode using the function add_shortcode (‘ivr_carousel_properties’,  ‘ivr_rec_carousel_properties’);

Points to Note

• When CSS files have the same name in two different plugins, they will conflict with each other. Therefore they must use different names. The same applies to JS file. (to be checked further)
• The Slick slider library requires these 3 files and 1 font folder to work:
  • slick.css
  • slick-theme.css
    • slick’s font folder at the same level
  • slick.min.js
• The default Prev and Next arrows icons don’t meet the design. Using CSS, removed the default arrows by setting an empty content in ::before {content: ”}. Then add the new arrows by using ::after { content: ‘\e801’} and ::after {content: ‘\e802’}. These arrows are provided by the Fontello icons.
• To pass data from PHP to JS, inject the php variable to a data attribute in HTML. Then in JS, use jQuery to retrieve the variable. For example jQuery(‘.class’).attr(‘data-name’).
• The <button> tag does not support writing mode and therefore cannot implement vertical text for the PREV and NEXT labels. The solution is to use the Slick slider settings prevArrow and nextArrow to inject a span tag to the label.

prevArrow: '<button type="button" class="slick-prev"><span class="cu-carousel-prev">PREV</span></button>',

• The Slick carousel has a bug in layout. Below is a a fix obtained from the internet

/* the slides - debug spacing */
.slick-slide {
    margin: 0 17px;
}

/* the parent - debug spacing */
.slick-list {
    margin: 0 -17px !important;
}

Folders and Files

ivr-rec-carousel-properties.php

• the main file of the plugin. It triggers the required functions at the various action hooks mentioned above.

uninstall.php

• Currently do nothing. It is created for completeness for the plugin.

Version History & Download

Ver.	Rel Date	Remark
1.4.1	2022-02-28	v1.4.1 (2022-02-28) * The version for go-live on 1-mar-2022. * Thousand separator changed back from space to comma. v1.4.0 (2022-01-23 @1820) * Changed: Replaced Leased and Sold stickers with images accroding to TDO design. * Changed: Replaced Title with Address. * Added: New header line. * Added: SchnyderM font. * New: Re-style the text according to TDO design v1.3.1 (2021-12-05 @0129) * Made stickers for “Leased” and “Sold” responsive. * Applied CSS keeping image aspect ratio at 1.5:1 (or 3:2).     – Using the “height = 0 and padding-top = %” approach. v1.3.0 (2021-12-03 @0246) * Added the price meta line to the bottom. * Added stickers to ‘Sold’ and ‘Leased’ properties. v1.2.2 (2021-12-19 @2251) * Changed: Change defalut total posts from 3 to 6. * Fixed:     > if ‘Property’ and ‘Current’, orderby = list_date (fallback post_date)     > if ‘Property’ and ‘Sold’, orderby = sold_date (fallback post_date)     > if ‘Rental’ and ‘Current’, orderby = list_date (fallback post_date)     > if ‘Rental’ and ‘Leased’, orderby = available_date (fallback post_date) v1.2.1 (2021-12-17 @1900) * New: Car Total also includes open space carpark. * New: When only 1 slide in the slider, align the item to left. * Fixed: Change title margin-top from 66px to 35px. * Fixed: Applied CSS keeping image aspect ratio at 1.5:1 (or 3:2).     – Using the “height = 0 and padding-top = %” approach.
1.2.0	2021-10-23	Added <a> tag to Title to link to its page.
1.1.0	2021-09-02	The 3 pages that require this plugin are hard-coded in the wp_enqueue function. These pages are Home, Sell, and LeaseWithUs. Only these pages will load the CSS and JS files. This is to avoid the JS error on the Buy page which has a Stamp Duty Calculator that loads another version of jQuery.
1.0.0	2021-08-24	First release