Daha fazla oku

Özellikle SEO alanları oluşturmak için kullanılır#

Kategori Üst Vitrin- Alt Vitrin için kullanılabilir.

Daha fazla oku Üst Alt Vitrin#

Smarty

{category id="{$TABLE_ID}" assign="CATEGORY"}
{if $CATEGORY|@count ||  $SHOWCASE_CONTENT}
    {if $SHOWCASE_CONTENT != ""}
        <div class="col-12 px-0 my-1">
            <div class="w-100 readmore-wrapper position-relative pb-5 pb-sm-3 px-0">
                <div class="readmore-content-{$BLOCK.ID} ease overflow-hidden p-1 top-bottom-info" style="height: 140px;">
                {if $CATEGORY.NAME}
                    <h2 class="category-name">{$CATEGORY.NAME}</h2>
                 {/if}
                 {if $CATEGORY.DESCRIPTION}
                    <div class="category-description">{$CATEGORY.DESCRIPTION}</div>
                 {/if}
                    {if $SHOWCASE_CONTENT}
                        <div class="showcase-content-{$BLOCK.ID}">{$SHOWCASE_CONTENT}</div>
                    {/if}
                </div>
                <div class="readmore-btn-wrapper px-1 w-100 position-absolute bottom-0">
                    <span class="more-{$BLOCK.ID} readmore-btn-{$BLOCK.ID} py-1 fw-bold">{#read_more#}</span>
                    <span class="less-{$BLOCK.ID} readmore-btn-{$BLOCK.ID} py-1 fw-bold d-none">{#read_less#}</span>
                </div>
            </div>
        </div>
    {/if}
{/if}

Javascript#

javascript

let content = T(`.readmore-content-${BLOCK.ID}`);
if (content.length) {
  let contentHeight = content.height();
  let contentScrollHeight = content[0].scrollHeight;
  if (content && contentHeight >= contentScrollHeight) {
    T(`.readmore-btn-wrapper`)[0].remove();
  } else {
    content.height(contentHeight);
    T(`.more-${BLOCK.ID}`).attr("data-height", contentScrollHeight);
    T(`.less-${BLOCK.ID}`).attr("data-height", contentHeight);
  }

  T(`.readmore-btn-${BLOCK.ID}`).on(`click`, function (e) {
    T(`.readmore-btn-${BLOCK.ID}`).toggleClass("d-none");
    content.toggleClass("active");
    content.height(T(this).attr("data-height"));
  });
}

Scss#

scss

@include BLOCK {
  .top-bottom-info {
    line-height: 166%;
  }
  [class^="readmore-btn-"] {
    span {
      color: $textPrimary;
      cursor: pointer;
      display: inline-block;
      font-size: 1rem;
      font-weight: 500;
      text-decoration: underline;
    }
  }
}

Dil Değişkenleri#

conf

read_less="Read Less"
read_more="Read More"