Broken Brochure Links in Sidebar after adding Trustpilot Widget

[feemish]

Hi,

I am inserting a Trustpilot widget into my left sidebar.

I have entered the Head Code in the Responsive Outer Layout in the head;

<!-- TrustBox script --> <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script> <!-- End Trustbox script -->

and I am placing the Widget Code in the Left Sidebar layout.

<!-- TrustBox widget - Mini  -->
<div class="trustpilot-widget" data-locale="en-GB" data-template-id="53aa8807dec7e10d38f59f32" data-businessunit-id="4d600abe00006400050eb921" data-style-height="110px" data-style-width="80%" data-theme="light">
  <a href="https://uk.trustpilot.com/review/arka-shop.co.uk" target="_blank">Trustpilot</a>
</div>
<!-- End TrustBox widget -->

I can make it all work fine if I put the widget right at the top of the sidebar... just under;

<div class="sidebar">

However if I put it anywhere else in the sidebar (I want it under the brochure links) it breaks all the brochure links above it. They no longer highlight on hover or open the links.

I've been trying to put it above the Best Sellers list just above this;

<actinic:block if="%3cactinic%3avariable%20name%3d%22Wiz9%5fBestSellers%22%20%2f%3e%20%3d%3d%20%22Left%20Side%22%20AND%0d%3cactinic%3avariable%20name%3d%22BestsellersListIsEnabled%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22BestSellerListLocation%22%20%2f%3e%20%21%3d%20%22Home%20Page%20Only%22" >
<div id="bestSellerLeft" class="sidebar-element"<actinic:block if="%3cactinic%3avariable%20name%3d%22MobileLeftColumn%22%20%2f%3e%20%3d%3d%20%22After%20Main%20Content%22"> style="display:block;"</actinic:block>>
<actinic:variable name="BestSellerListSidebar" />
</div>
</actinic:block>

but as I say, it breaks the brochure links there and anywhere else I put it. I have it working but dont really want it right at the top.

Any ideas?

[Gareth Wanklin]

You will have a layout something like below

<actinic:block if="%3cactinic%3avariable%20name%3d%22Wiz5%5fBrochureList%22%20%2f%3e%20%3d%3d%20%22Right%20Side%22" >
				<div class="sidebar-element">
					<h3>Information</h3>
					<div class="side-menu">
						<actinic:variable name="BrochurePageList" />
					</div>
				</div>
			</actinic:block>
		</actinic:block>

		<actinic:block if="%3cactinic%3avariable%20name%3d%22Wiz9%5fBestSellers%22%20%2f%3e%20%3d%3d%20%22Right%20Side%22%20AND%0d%3cactinic%3avariable%20name%3d%22BestsellersListIsEnabled%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22BestSellerListLocation%22%20%2f%3e%20%21%3d%20%22Home%20Page%20Only%22" >
			<div class="sidebar-element">
				<actinic:variable name="BestSellerListSidebar" />
			</div>
		</actinic:block>

make it and it should work.

<actinic:block if="%3cactinic%3avariable%20name%3d%22Wiz5%5fBrochureList%22%20%2f%3e%20%3d%3d%20%22Right%20Side%22" >
				<div class="sidebar-element">
					<h3>Information</h3>
					<div class="side-menu">
						<actinic:variable name="BrochurePageList" />
					</div>
				</div>
			</actinic:block>
		</actinic:block>

               <!-- TrustBox widget - Mini  -->
<div class="trustpilot-widget" data-locale="en-GB" data-template-id="53aa8807dec7e10d38f59f32" data-businessunit-id="4d600abe00006400050eb921" data-style-height="110px" data-style-width="80%" data-theme="light">
  <a href="https://uk.trustpilot.com/review/arka-shop.co.uk" target="_blank">Trustpilot</a>
</div>
<!-- End TrustBox widget -->

		<actinic:block if="%3cactinic%3avariable%20name%3d%22Wiz9%5fBestSellers%22%20%2f%3e%20%3d%3d%20%22Right%20Side%22%20AND%0d%3cactinic%3avariable%20name%3d%22BestsellersListIsEnabled%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22BestSellerListLocation%22%20%2f%3e%20%21%3d%20%22Home%20Page%20Only%22" >
			<div class="sidebar-element">
				<actinic:variable name="BestSellerListSidebar" />
			</div>
		</actinic:block>

[feemish]

Hi Gareth,

Thanks for the reply. That is exactly what I have been doing.

However, when I place the trustbox code there, and upload it, it breaks all the brochure links above it.

(curiously it doesnt break them on preview only online)

[Gareth Wanklin]

odd as when i place it in it renders fine other than a slight alignment issue that would be resolved with some basic css.

images attached.

[feemish]

Hhmmm, that is odd. Are you looking at this online or in preview?

[Gareth Wanklin]

Online as the preview only renders the word trustpilot and not the logo

[feemish]

and the brochure links above it all work ok?

Hmmmmm ok... must be something else on my page thats not on yours.

[skinnybloke]

For anybody who is interested I have just had the same issue which I resolved by modifying the javascript from:

<!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End Trustbox script -->

to

<!-- TrustBox script -->
<script type="text/javascript" src="https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End Trustbox script -->

otherwise Sellerdeck appends the src URL with your own domain e.g.

<!-- TrustBox script -->
<script type="text/javascript" src="https://www.domain.com//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End Trustbox script --