Magento 2.0 UB Content Slider


[Magento 2.0] UB Content Slider is a handy extension that allows you to create and manage unlimited images, products or video sliders for your Magento 2.0 store. The userguide below will walk you through installation and configuration process to set up UB Content Slider. Let’s get started.

The download package is available via your profile:

DOWNLOAD NOW

  • Step 1. Unzip the download package
  • Step 2. Copy and paste the folder app of the package to your web root
  • Step 3. Open the command window, then go to web root folder and run commands below:
    • php -f bin/magento module:enable --clear-static-content Ubertheme_UbContentSlider
    • php -f bin/magento setup:upgrade
    • php -f bin/magento cache:clean

Now your extension has been installed on your web.

At present, it supports 6 types of slider. In this guide, we will introduce to you a few kinds of slider as follows.
1.1. Slider Hot Products with signle_item = “1”

Shortcode to show in CMS Pages, Static Blocks

{{block class="Ubertheme\UbContentSlider\Block\Slider" qty="5" name="ub.content.slider2.col.left" title="Hot Products" single_item="1" show_paging="1" show_navigation="1" show_thumbnail="0" show_name="0" show_price="0" show_wishlist="0" show_compare="0" show_review="0" show_desc ="0" show_add_cart="0" show_readmore="0" content_type="hot_products" auto_height="0" slide_transition="fadeUp"}}

1.2. Uploaded Image

Shortcode to show in CMS Pages, Static Blocks

{{block class="Ubertheme\UbContentSlider\Block\Slider" name="ub.content.slider.images" title="Image Slider" content_type="slider" slider_key="sl-image" single_item="1" auto_height="1" show_thumbnail="1" thumb_width="160" thumb_height="88" slide_transition="backSlide" addition_class="ub-style-1" show_navigation="1" show_paging="1"}}

1.3. Random Product Slider

Shortcode to show in CMS Pages, Static Blocks

{{block class="Ubertheme\UbContentSlider\Block\Slider" name="ub.content.slider1" title="Random Product Slider" content_type="random_products" number_items="4"}}

1.4. Video Slider

Shortcode to show in CMS Pages, Static Blocks

{{block class="Ubertheme\UbContentSlider\Block\Slider" name="ub.content.slider.video" title="Video Slider" content_type="slider" slider_key="sl-video" number_items="2" item_width="480" item_height="270"}}

1. How to call Content Slider

A few ways to call content slider.
#1. Shortcode to call in CMS Pages, Static Blocks
This allows user to create static block in the backend:

{{block class="Ubertheme\UbContentSlider\Block\Slider" name="ub.content.slider.video" title="Video Slider" content_type="slider" slider_key="sl-video" number_items="2" item_width="480" item_height="270"}}

#2. Define in XML
You can call Content Slider via XML file:

{{block class="Ubertheme\UbContentSlider\Block\Slider" name="ub.content.slider1" title="Random Products" content_type="random_products"}}

#3. Call uploaded image slider via CMS Block:
You must input slider_key to call the image slider

{{block class="Ubertheme\UbContentSlider\Block\Slider" name="ub.content.slider1" title="Random Product Slider" content_type="slider" slider_key="YOUR_SLIDER_KEY_HERE"}}

View more parameters to call slider easily

2. Slider Management

2.1. Create New Slider for Uploaded Image/Video Slider
Go to Content >> >> UB Content Slider >> Manage Slider , click [Add new Slider]

  • Slide Title: Enter the slide title
  • Slide Key : Enter Slide Key. This key is [slider_key] parameter that will be used in the shortcode to show a slider with images/videos content type when creating a static block
  • Store View : Select Store to display the slider
  • Description : Enter the description of slider
  • Status : To enable/disable slider

2.2. Create Slider Item for Image/Video Slider
Go to Content >> >> UB Content Slider >> Manage Slider. From Slider Listing, click Slider

Manage slider
  • Title: Enter the title of the slide item
  • Show In Slider : Choose the slider that item will be shown in the frontend. Only choose if you want to move the next slide.
  • Link : Link direction for each slide item
  • Link Target : The target attribute specifies the default target for all hyperlinks and forms in the page.
  • Content Type : Select content type for slide.
  • Image : Upload image of the slide
  • Publish time : Start time slide show on page
  • End time : End time slide show on page
  • Description : Input description of the slide
  • Status : To enable/ disable slider
  • Sort order : Order of the slide

2.3. Create New Product for New Product Slider
Go to Product >> Catalog .
Create [New Product].
At Advance Settings >> Autosetting , select datetime to set date for new product

2.4. Create Hot Product for Hot Product Slider
Go to Product >> Catalog .
Create [New Product].
At Product Details tab, select field Is Hot = YES

3. Create Static Blocks

First, you must create a new static block.
Go to Content >> Blocks and Add New Block. You can use the parameter listing above to configure your slider content.
The screenshot below represents the way to create static block and call parameters.


UB Content Slider Params

[enable] to enable/disable the block. Value is 0 to disable and 1 to enable
[title] allows to set the module’s title. Valid value : text
[content_type] allows to enable the products filter with the following values:

  • latest_products -- Latest Product was created
  • new_products -- New Products
  • hot_products -- Hot Products
  • random_products -- Products display random
  • slider -- this slider will be uploaded manually by admin
[category_ids] allows to set Category ID. The Category ID must exist under the Categories of yourstore. Example: category_ids = “9, 10, 15”
[qty] allows to set the number of products will be displayed in the list. Valid value: number. Default is 10
[slider_key] the key of Slider to show. Only apply for content_type = ‘slider’
[item_width] allows to set the extension block width. Valid value : number. Only apply for content_type = ‘slider’
[item_height] allows to set the extension block height. Valid value : number. Only apply for content_type = ‘slider’
[show_item_title] allows to show or hide the Item’s title. Valid value : 1/ 0. Default is 1. Only apply for content_type = ‘slider’
[show_item_desc] allows to show or hide the Item’s description. Valid value : 1/ 0. Default is 1. Only apply for content_type = ‘slider’
[thumb_width] width of thumbnail (px). Only apply for content_type = ‘slider’ and single_item = 1 and show_thumbnail = 1
[thumb_height] height of thumbnail (px). Only apply for content_type = ‘slider’ and single_item = 1 and show_thumbnail = 1
[show_name] allows to show or hide the product name. Valid value : 1/ 0. Default is 1
[show_price] allows to show or hide the product price. Valid value : 1/ 0. Default is 1+
[show_add_cart] allows to show or hide “Add to cart” button of the product. Valid value : 1/ 0. Default is 1
[show_desc] allows to show or hide the product description. Valid value : 1/ 0. Default is 1
[desc_length] allows to set Max Length of Product Description. Default is 100
[show_review] allows to show or hide the review button. Valid value : 1/ 0. Default is 1
[show_wishlist] allows to show or hide the wishlist button. Valid value : 1/ 0. Default is 1
[show_compare] allows to show or hide the compare button. Valid value : 1/ 0. Default is 1
[show_readmore] allows to show or hide the compare button. Valid value : 1/ 0. Default is 1
[single_item] allows to show only one item or not. Valid value : 1/ 0. Default is 0
[auto_run] allows to auto run or not. Valid value : 1/ 0. Default is 1
[auto_height] allows to auto height by content. Valid value : 1/ 0. Default is 1
[slide_speed] the speed of slider. Default is 200 mini second.
[stop_on_hover] the slider after auto running will be stopped when user hover mouse on slide. Valid value : 1/ 0. Default is 1
[show_navigation] allows to show navigation button or not. Valid value : 1/ 0. Default is 1
[show_paging] allows to show paging or not. Valid value : 1/ 0. Default is 1
[paging_numbers] Paging is number or not. Valid value : 1/ 0. Default is 1
[show_thumbnail] allows show thumbnail. Only apply when single_item = 1. Valid value : 1/ 0. Default is 1
[enable_lazyload] allows to enable/disable lazy load. Valid value : 1/ 0. Default is 1
[show_processbar] allows to show progress bar. Valid value : 1/ 0. Default is 1
[slide_transition] select slide transition: fade, backSlide, goDown, fadeUp. Default is ‘fade’
[number_items] visible Items (width > 1199), default is 6. Only apply when single_item = 0 Example: number_items = 6.
[number_items_desktop] visible Items on Desktop (979 <= width <= 1199), default is 5. Only apply when single_item = 0
[number_items_desktop_small] visible Items on Desktop small (768 <= width <= 979) default is 4. Only apply when single_item = 0
[number_items_tablet] visible Items on Tablet (479 <= width <= 768) default is 3. Only apply when single_item = 0
[number_items_mobile] visible Items on Mobile (width <= 479) default is 1. Only apply when single_item = 0
[addition_class] CSS class addition. Styles Supported: ub-style-1, ub-style-2

4. Assign to widget

Magento 2 uses Widget to manage content blocks. By using widget, you can place block anywhere you wish on your website.
Navigate to Content >> Widget, then click Add Widget (e.g Hot Product)

and fill in Storefront Properties tab to configure widget in the frontend.

  • Type: Select your type of widget. Default type = CMS Static Block
  • Design Package/Theme : Name of theme
  • Widget Title : Title of widget
  • Assign to Store Views : Default is All Store View
  • Add Layout Update : This section to set up the display of static block.
    • Categories: define what categories to display the static block
    • Container: define the position of static block
    • Template: default is CMS Static Block Default Template

Select static block at Widget Options tab

Click the button [Select Block..]
System will display the list of static blocks to select which has been created before.
For example: Select [Hot Products] block
Click [Save] to save all configurations.
Final step is to clear cache: System>> Cache Management>> select all Cache Type>> select Refesh>> click Submit button or Flush Magento Cache button

Now your slider should be displayed in the frontend.

For more details about widget, you can read this blog Introducing Magento 2 Widgets to have an overview about widget in Magento 2

Beside the parameters configuration via the shortcode, it can also possible to configure via Magento 2 module configuration. Provided that UB Content Slider module is installed properly, you can follow the following steps to configure this Magento extension for your eCommerce website.

1. General settings

1. Log in to your Admin Panel on the stage localhost: http://localhost/magento/index.php/admin/.

2. Navigate to Store >> Configuration >> UBERTHEME >> UB Content Slider

or Content >> UB Content Slider >> Setting

3. Add values for these following parameters as per screenshot:

  • Enabled : select to publish/unpublish Slider.
  • Block Title : fill in the title of the slider.

2. Data settings

Parameters explanation:

  • Content Type : choose the type of product displayed, including: Latest/Best Buy/Most Viewed/Most Reviewed/Top Rated/Featured Product.
  • Max Quantity to Show : Amount of products shown on product slider. Maximum is 20
  • Show Name: Select to show name of product or not.
  • Show Price : Select whether to display the product price or not.
  • Show Description : Show description of product
  • Length of Description: Set max length for description of product
  • Show Add to cart: Show Add to cart of product
  • Show Read more: Show Read more of product
  • Show Review: Show product review
  • Show Wishlist: Display [Wishlist] button or not
  • Show Compare: Display [Compare] button

3. Slider Configure

Parameters explanation:

  • JS Library: Select the JS library to include
  • Single Item : Set No to display more than one item on slider
  • Number Items Per Page (on large screen) : Amount of products will be show on one page
  • Number Items Per Page (on desktop) : define the quantity of products displayed.
  • Number Items Per Page (on desktop small) : define the quantity of products displayed on desktop small.
  • Number Items Per Page (on Tablet) : define the quantity of products displayed on tablet.
  • Number Items Per Page (on Mobile) : define the quantity of products displayed on mobile.
  • Auto Run : select whether to play slider automatic or not.
  • Auto Height: If you select Yes, the slider wil auto height by content
  • Slider Speed : define duration of an animation, in mili-seconds
  • Stop On Hover : select to stop slider when hover mouse on image or not
  • Show Slider Navigation: show slider navigation or not
  • Show Slider Paging: select to show slider paging or not
  • Show Paging Numbers: Select ‘Yes’ to show the slider paging with numbers.
  • Enable Lazy Load? : lazy load is an effect in displaying product. select this field to enable effect


(This enhanced feature is added since version 1.0.6) It is now possible to add sliders anywhere using widget module manager.

demo slider via widget

Demo slider via widget

The process of adding widgets is almost the same for all other types. Follow one of the options below:

NOTE: Supposed you have slider in place already (You can learn more how to create slider in Section 2. Slider Management above)

    • Step 1. Navigate to widget section in the admin panel of your store.
  • Navigate to Content | Widgets | Add Widget. Then select UB Content Slider type at your choice

Slider Widget type

Add UB content Slider via Widget

  • Step 2. In the Storefront Properties tab, fill in the widget configuration.

create slider step 2

  • Step 3. In the Widget Options, define your own settings:

create slider step 3

If you want to have UB Content Slider extension uninstalled, please follow steps below:

  • Step 1:[Important] Remove related widgets if they were created.

Go to your Backend | Content | Widget, delete all created widgets with Widget Type ‘UB Content Slider (products slider)’ OR ‘UB Content Slider (images/videos uploaded)’.

  • Step 2: Disable UB Content Slider module and clean associated database tables.

-- Open your terminal, go to your Magento 2 folder <your magento installation path> and run the following CLI commands:

php -f bin/magento maintenance:enable
php -f bin/magento deploy:mode:set developer
php -f bin/magento module:disable -c Ubertheme_UbContentSlider
rm -rf app/code/Ubertheme/UbContentSlider

-- Open your Mysql cpanel (eg. PHPMyAdmin), and run the following SQL syntax:
NOTE: Make sure you replace with your own <table_prefix>:

DELETE FROM '<table_prefix>setup_module` WHERE `module`= 'Ubertheme_UbContentSlider';
DROP TABLE '<table_prefix>ubcontentslider_slide_item`;
DROP TABLE '<table_prefix>ubcontentslider_slide_store`;
DROP TABLE '<table_prefix>ubcontentslider_slide`;
DELETE FROM '<table_prefix>eav_attribute` WHERE `attribute_code` = 'is_hot';

    Step 3: Once done, run the following commands:

NOTE: You can still keep the developer mode if you continue development process. Otherwise, run the following commands to switch to production mode:
php bin/magento deploy:mode:set production
php bin/magento maintenance:disable