slider for sidebar

[nimafire]

Hello

i see a simple slider that several website use and think there is a free module for it but cant find any data

or if there is a way to add this, im glad to hear about

check attached file,

[brian!]

some third-party templates might have sliders, but not aware of any addon that can create them for sidebars.... technically, it wouldn't be difficult though... just find a slider (plenty free online) and then add the required slider source code to the body of the sidebar... if it's purely an image slider (no text etc), then it should be simple... the trick will be finding the correct slider...

[wp4all]

Hi Nimafire,

you can use a BS4 Carousel if you wanna just slide some pictures.

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</div>

https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp

Greetings Christian

 

[brian!]

On 06/08/2018 at 05:29, wp4all said:

you can use a BS4 Carousel if you wanna just slide some pictures.

except I don't believe WHMCS supports BS4 yet, so you'd have to resort to using BS3.

https://www.screencast.com/t/cZVAfydiC

<?php

# Image Slider Sidebar for @nimafire
# Written by brian!
 
add_hook('ClientAreaSidebars', 1, function()
{
	GLOBAL $smarty;
	$templatefile = $smarty->getVariable('templatefile');
	$allowedpages = ['clientareahome','homepage'];
	if (in_array($templatefile, $allowedpages)) {
		$secondarySidebar = Menu::secondarySidebar();
		$title = 'Image Slider';
		$bodyHtml = '<div id="myCarousel" class="carousel slide" data-ride="carousel">
		<div class="carousel-inner">
			<div class="item active">
				<a href="http://www.la">
				<img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="First Slide">
				<div class="carousel-caption">
					<h4>Los Angeles</h4>
				</div>
				</a>
			</div>
			<div class="item">
				<img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Second Slide">
			</div>
			<div class="item">
				<img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="Third Slide">
			</div>
		</div>
	</div>';
		$secondarySidebar->addChild('slider1')
			->setLabel($title)
			->setBodyHtml($bodyHtml);
	}
});

i've trimmed the above example sidebar hook down to its bare bones - so the navigation controls have been removed... but you can easily add them back if required...

as currently coded, the sidebar is only going to be shown on two pages - the homepage (non-logged in users) and client homepage (logged-in clients)... you can expand that list it necessary be editing the array in the hook and adding the relevant templatename to it...

$allowedpages = ['clientareahome','homepage'];

i've added a caption and link to the first image to show how to do that... the hook itself could be expanded to display different sliders on specific pages, or sliders based on whether the user is logged in or not... the sky is the limit, so let your imagination run free! 😀

if you need to change the sidebar's position with regards to the other sidebars, you can either use ->moveToBack() to move it to the bottom, ->moveToFront() to move it to the top, or ->SetOrder to give it a specific order value to place it between existing sidebars (that order value will alter depending on the page and which sidebars are already shown there).

[wp4all]

Brian! is right as usual 😄

I had not considered that with BS4 but on the linked page you can find also BS3 snippeds --> https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

So sorry for that didn't test it before 😔

Greetings Christian

Edited August 6, 2018 by wp4all

[twgh]

Hello,

Thank you, Brian, very much for the code. It helped me a lot.

Is it possible to add the slider to cart pages that have the sidebar? I added the names of the templates I wanted it to show on. However, it still doesn't show 😔.

I don't know that I am doing wrong.
Can you please help?

[brian!]

you could try replacing the equivalent lines of code in the hook with...

	$templatefile = $smarty->getVariable('templatefile');
	$filename = $smarty->getVariable('filename');
	$allowedpages = ['clientareahome','homepage'];
	if (in_array($templatefile, $allowedpages) OR $filename == "cart") {

and that should add the sidebar to each step of the cart process, but not the MarketConnect sales pages.

[twgh]

Hello @brian!

Thank you so much 😁. 

I will test this out and let you know.

[twgh]

@brian!

Thank you so much.

Your suggestion worked perfectly