Check if we are on the root URL with Liquid | Adobe Business Catalyst

if else condition in business catalyst

{% if globals.get == blank -%}
    // we are on the root URL - do something
{% else -%}
    // we are not on the root URL
{% endif -%}

Placeholder for Captcha | Adobe Business Catalyst

<script>
$(document)
    .ready(function () {
        $('#CaptchaV2')
            .attr("required", true)
            .wrap('<div/>')
            .after("<small class='error'>Captcha is required.</small>");
        $('.contact-form .captcha')
            .find("input[type=text]")
            .each(function (ev) {
                if (!$(this)
                    .val()) {
                    $(this)
                        .attr("placeholder", "Enter text to verify");
                }
            });
    });
</scrip>

Dev-in-a-Box Jquery plugin is useful to build better websites, faster | Adobe Business Catalyst

It allows you to add the most common JavaScript-based features to your BC sites using simple HTML5 data attributes. Dev-in-a-Box is simple enough for the noobie, yet powerful enough for a developer. It's the ideal plugin for any Business Catalyst site.

Dev-in-a-Box is being integrated into the BC Pie framework and is now FREE! You can currently find Dev-in-a-Box on theBC App Store.

Add span tag to first word in title | Adobe Business Catalyst

<script>

$('#content h1').each(function(){

   var me = $(this)

      , t = me.text().split(' ');

   me.html( '<span>'+t.shift()+'</span> '+t.join(' ') );

 });

</script>

Smooth Page Scrolling when click a tag ID | Adobe Business Catalyst

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script>

$(function() {

   $('a[href*="#"]:not([href="#"])').click(function() {

       if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

           var target = $(this.hash);

           target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

           if (target.length) {

               $('html, body').animate({

                   scrollTop: target.offset().top

               }, 1000);

               return false;

           }

       }

   });

});

</script>

Words limit for title using jquery | Adobe Business Catalyst

<script>

$(document).ready(function(){

   $('.project-details').each(function(i, e){

       var projTypeTitle = ($(e).find('h3'));

       var projTypeTitleArr = projTypeTitle.text().split(' ');

       suffixText = '';

       

       if(projTypeTitleArr.length >= 4){

           suffixText = '...';

           projTypeTitleArr.splice(4);

       }

       projTypeTitleChanged = projTypeTitleArr.join(" ") + suffixText;

       projTypeTitle.text(projTypeTitleChanged);

   })

});
</script>

Remove photo gallery table using jquery | Adobe Business Catalyst

<script>
$('table.photogalleryTable').replaceWith($('table.photogalleryTable').html()
  .replace(/<tbody/gi, "<div id='photogalleryTable' class='row'")
  .replace(/<tr/gi, "")
  .replace(/<\/tr>/gi, "")
  .replace(/<td class="photogalleryItem"/gi, "<div class='col-md-4'")
  .replace(/<\/td>/gi, "</div>")
  .replace(/<\/tbody/gi, "<\/div")
);
</script>

Disable mouse scroll wheel zoom on embedded Google Maps | Adobe Business Catalyst

<div id="google-maps">
  <iframe frameborder="0" height="450" src="***embed-map***"  width="100"> </iframe>
</div>

<style>
#google-maps iframe { pointer-events:none; }
</style>

<script>
  $(function() {
    $('#google-maps').click(function(e) {
        $(this).find('iframe').css('pointer-events', 'auto');
    }).mouseleave(function(e) {
        $(this).find('iframe').css('pointer-events', 'none');
    });
  })
</script>

Page redirects | Adobe Business Catalyst

<script type="text/javascript">
 (function() {
  var originalPage = document.location.pathname;
  switch (originalPage) {
   case "/html/contact.htm":
    document.location.href = "/contact";
    break;
   case "/html/herdBull.htm":
    document.location.href = "/index.htm";
    break;
  }
 })();
</script>

Custom liquid shopping cart summary | Adobe Business Catalyst

Include:

{module_shoppingcartsummary template="/Layouts/OnlineShop/shoppingcartsummary.tpl"}

Styles:

.addtocart { position: fixed; width: 100%; top: 0; right: 0; padding: 22px 0; text-align: center; background: #d4563f; color: #fff !important; z-index:999999; border-radius: 0px; font-size: 16px; }
.addtocart table { background:none !important; margin-bottom: 0 !important; border:0px !important; color:#fff !important; }
.addtocart .cartSummaryLink { font-size: 14px; color: #FFFFFF; background: rgba(160, 48, 28,0.8); padding: 2px 5px; border-radius: 4px; border: solid 1px #9A3321; }
.addtocart.empty1 { display:none; }
.addtocart.empty0 { display:block; }

shoppingcartsummary.tpl

<div class="addtocart empty{tag_isEmpty}">
{% if itemCount == 0 -%}
<span>Shopping cart empty</span>
{% else -%}
{{itemCount}} item{% if itemCount != 1 -%}s{% endif -%} |
{{currencyFormat}} {tag_totalAmount}
<a href="{{cartUrl}}" class="cartSummaryLink">View Cart</a>
{% endif -%}
</div>

Removing alert box when click on the Add to Cart button | Adobe Business Catalyst

<span class="cartalert" style="display:none"></span>
<style>
.cartalert {
position: fixed;
bottom: 10%;
right: 10%;
padding: 15px 20px;
text-align: center;
background: #333;
color: #fff !important;
z-index:999999;
border-radius: 5px;
font-size: 16px;
}
</style>
<script>
$(function() {
window.alert = function(msg) {
msg = msg.replace('ERROR: ','');
$('.cartalert').text(msg).fadeIn().delay(1000).fadeOut()
}
});
</script>

Redirect (worldsecuresystems page) to non-secure version of page | Adobe Business Catalyst

Note: 'Check out page':
Add this code to top of the check out page ( Admin area = Site Manager -> Module Templates - > Online Shop Layouts -> Registration - Buy )
==========================================

<script type="text/javascript">
$(function () {
var str = '{{globals.site.host}}';
var res = str.split('.')[0];
// redirect to non-secure version of page
$("a").each(function () {
var href = $(this).attr("href");
href = "http://"+res+".businesscatalyst.com" + href;
$(this).attr("href", href);
});
});
</script>

Multi level Liquid Menu | Adobe Business Catalyst

{module_menu render="collection" menuId="1725685" template="" collection="menu1"}
<ul>
{% if menu1.items %}
{% for i in menu1.items %}
<li class="{{i.CSS class name}}"><a href="{{i.url}}">{{i.label}}</a>
{% if i.items %}
<ul class="dropdown">
{% for j in i.items %}
<li><a href="{{j.url}}">{{j.label}}</a></li>
{% endfor %}
</ul>
{% endif %} </li>
{% endfor %}
{% endif %}
</ul>

Single level Liquid Menu | Adobe Business Catalyst

{module_menu render="collection" menuId="1425822" template="" collection="menu2"}
<ul>
{% if menu2.items %}
{% for i in menu2.items %}
<li class="{{i.CSS class name}}"><a href="{{i.url}}">{{i.label}}</a> </li>
{% endfor %}
<li><a href="#">Copyright © 2016. All Rights Reserved.</a> </li>
{% endif %}
</ul>


Use default Lightbox anywhere in website for image | Adobe Business Catalyst

<link type="text/css" href="/CatalystStyles/lightbox.css?vs=b1951.r480527-phase1" rel="StyleSheet">
<script type="text/javascript" src="/CatalystScripts/Cache/lightbox2022.js?vs=b1951.r480527-phase1"></script>


<a onClick="myLightbox.start(this);return false;" rel="lightbox[2451]" href="{tag_image}">
<img src="{tag_image}?Action=thumbnail&Width=250&Height=150&algorithm=fill_proportional">
</a>

Liquid photogallery | Adobe Business Catalyst

{module_photogallery id="15301" collection="photogallerys" template="" }
{% for item in photogallerys.items %}
<img src="{{item.thumbnaillink}}">
{% endfor %}

Compress image size | Adobe Business Catalyst

( proportional, fill_proportional, fill )

<img src="{tag_logo_value}?Action=thumbnail&Width=170&Height=70&algorithm=proportional" />

Lightbox Responsive css | Adobe Business Catalyst

#outerImageContainer { max-width: 90%; overflow: hidden; height: auto !important; font-size:0!important; }
#imageDataContainer { max-width: 90%; overflow: hidden; }
#lightboxImage { max-width: 100%; }