Javascript, smarty (.tpl) and scss snippets The aim of this extention is to help tsoft.com.tr and tsoftecommerce.com frontend developers.
-
To have a better syntax highligting in
.tpl
files, it is adviced to install Smarty Template Support beforehand. -
For Emmet Abbreviations you can paste the following into your settings.json file (press
F1
, then searchOpen Settings (JSON)
)
"emmet.includeLanguages": {
"smarty": "html"
}
==
or you can write includeLanguages
in the setting input field and add item => "smarty" and value =>"html".
JAVASCRIPT V5
Here is Javascript code snippets for tsoftecommerce.com V5.
ON_PAGE_READY.push(()=>{
//alt şablonlardaki js işlemleri bu fonksiyon içine yazılmalıdır
})
console.log();
console.log('variable',variable);
selector.addEventListener("click",e=>{
console.log(e)
});
document.addEventListener("DOMContentLoaded",e=>{
console.log(e)
});
Vue.createApp(appName).mount('#appSelector');
window['appName'] = {
data() {
return {
P:``,
}
},
}
Vue.creatApp(appName).mount(`#app-selector`);
T(`#selector`).on('submit', e => {
e.stopPropagation();
e.preventDefault();
const formEl = e.target;
if(!T.checkValidity(formEl))
return;
var data = new FormData(formEl);
axios.post('/srv/service/servicepath', data).then(response => {
const result = response.data;
console.log('result:', result);
formEl.reset();
T.notify({
text:"element",
className: 'success',
duration: 3200
});
});
});
new Swiper(selector, {
slidesPerView: 2,
spaceBetween: T.isMobile() ? 8 : 15,
navigation: {
nextEl: `#swiper-next-${BLOCK.ID}`,
prevEl:`#swiper-prev-${BLOCK.ID}`,
},
pagination: {
el: '.swiper-pagination',
clickable: true
},
breakpoints: {
576: {
slidesPerView: 3
},
768: {
slidesPerView: 4
}
}
});
axios.get("url").then((res)=> {
console.log(res.data);
})
.catch((error)=> {
console.log(error);
})
axios.post("url", formData).then((res)=> {
console.log(res.data);
})
.catch((error)=> {
console.log(error);
})
fetch("users.json").then(res=> res.json())
.then(data=> {
data.forEach(el => {
console.log(el);
});
})
.catch(err => console.log(err))
Cart.callback.add.push((res)=>{
console.log(res)
})
T.ready(function(){
})
T.isEmptyObject(obj)
T.each(T(`div`),(i, el)=>{
console.log(i, el);
});
T.setCookie(cookieName, cookieValue, exdays)
T.getCookie(cookieName)
BLOCK.
SETTING.
IMAGE.
T.getLink(`param`,'value','link');
popoverAlert.show(
T(`selector`)[0], msg, false, `btn btn-danger text-left`, true, `inline`
);
popoverAlert.hide(item, [`btn`, `btn-outline-danger`, `text-left`]);
popoverAlert.hideAll();
loadSubFolder({
pageId: 1,
blockParentId: 1000,
subFolder: 'subfoldername',
params: { oneparam: oneparam, twoparam: twoparam },
success: function(loadRes){
T.modal({ html: loadRes, width:'480px' });
evalScripts(loadRes)
}
});
T.isMobile()
getUrlParam('param')
scrollToElm(`[href='#id']`);
LocalApi.get(`key`);
evalScripts(content);
T(`selector`);
T.wrap(T(`toWrapSelector`)[0],'','classname');
T(`selector`).addClass('active');
T(`selector`).removeClass('active');
T(`selector`).toggleClass('active');
T(`selector`).hasClass('active');
T(`selector`).index();
T(`#selector`).on(`click`, e => {
e.stopPropagation();
e.preventDefault();
const el = e.target;
});
T(`#selector`).off(`click`, e => {
e.stopPropagation();
e.preventDefault();
const el = e.target;
});
T(`#selector`).one(`click`, e => {
e.stopPropagation();
e.preventDefault();
const el = e.target;
});
T(`selector`).trigger('click');
T(`selector`).html('element');
T(`selector`).text('text');
T(`selector`).height(400);
T(`selector`).height();
T(`selector`).show(`flex`);
T(`selector`).hide();
T.notify({
text:`messageandtext`,
className: `success`,
duration: 3200,
stopOnFocus: true,
close: true,
gravity:`top`,
position: `left`,
iconClass: `ti-thumbs-up`,
});
T.modal({
id: 'new-modal',
class: `classname`,
width: `480px`,
title: `ModalTitle`,
html: result.statusText,
close: true,
openCallback: () => {
},
closeCallback: () => {
}
});
window.publishingPopupCallback=function(){
}
T.tooltip(T(`selector`)[0], {
placement:`top`
});
if(!T.checkValidity(e.target)) return;
T.priceToFloat(strPrice);
T.vat(price, vat);
T.format(number);
T.timeConverter(1652702396000, `d.m.y`);
const button = T(`#form_submit_button`)[0];
T.buttonLock.dom = button;
T.buttonLock.tmp = button.innerHTML;
T.buttonLock.lock();
T.buttonLock.unlock();
`/srv/service/order-v4/order-return/${product_id}`
`/srv/service/gallery/video-detail/${product_id}`
`/srv/service/product-detail/view/606`
`/srv/service/content/get/${BLOCK.ID}/folder_name`
`/srv/service/language/change/${tr}`
`/srv/shopping/shopping/set-currency/${tl}`
`/srv/shopping/shopping/set-country/${TR}`
`/srv/service/content/get-block/1003/category/${catID}`
`/srv/service/category/get/${catID}`
`/srv/service/product/filter/category/${catID}?pg=1`
`/srv/service/category/getTree/${catID}`
`/srv/service/content/get-block/1018/content/${içerik_id}`
`/srv/service/product-detail/credit-card-installment-list/${product_id}/${sub_product_id}`
`/srv/service/product-detail/payment-options/${product_id}/${sub_product_id}`
`/srv/campaign-v2/campaign/get-list-by-type/product/${product_id}`
`/srv/campaign-v2/campaign/get-list-by-type/cart`
`/srv/campaign-v2/campaign/get-list-by-type/category/${id}`
`/srv/service/cart/load?link=sepet`
`/srv/service/product-detail/comments/${product_id}`
`/srv/service/product-detail/comment-average/${product_id}`
`/srv/service/filter/get/brands`
`/srv/service/content/getBlock/1070/product/${product_id}`
`/srv/service/product/get-related-products/${product_id}/1`
`/srv/service/product/get-related-products/${product_id}/2`
`/srv/service/product/get-related-products/${product_id}/3`
`/srv/service/product/get-related-products/${product_id}/4`
SMARTY
Here is Smarty code snippets for tsoftecommerce.com V5.
border-options
fw-options
text-options
btn-options
btn-outline-options
btn-outline-options
position-desktop-relative
position-desktop-sticky
position-desktop-absolute
position-desktop-fixed
position-relative
position-sticky
position-absolute
position-fixed
flex-direction-column
flex-direction-row
flex-direction-row-reverse
flex-wrap
flex-wrap-reverse
flex-shrink-options
align-items-center
align-items-flex-end
align-items-flex-start
justify-content-center
justify-content-between
justify-content-between
justify-content-around
justify-content-evenly
justify-content-flex-start
justify-content-flex-end
container-options
{format price=($P.PRICE_SELL - ($P.PRICE_SELL * $P.NUMERIC1/100))}
{format price=($P.PRICE_SELL - ($P.PRICE_SELL * $P.NUMERIC1/100))}
{vat price=($P.PRICE_SELL - ($P.PRICE_SELL * $P.NUMERIC1/100)) vat=$P.VAT}
<div id="selector" class="row" v-cloak>
</div>
<script>
const appName = {
data() {
return {
}
}
};
Vue.createApp(appName).mount('selector');
</script>
IS_ADMIN_LOGGED
IS_LAZY_LOAD_ACTIVE
IS_MEMBER_LOGGED_IN
IS_MOBILE
IS_VENDOR
LANGUAGE
LANGUAGE_SELECTED
LANGUAGE_LIST
IS_HTTPS_ACTIVE
FILTER_PROPERTY_LIST
IS_RECOMMENDATION_ACTIVE
SYMBOL_options
LAZY_LOAD_LOADING_IMAGE
DISPLAY_FAVOURITE_BUTTON
DISPLAY_COMPARISON_BUTTON
DISPLAY_CART_BUTTON
DISPLAY_LANGUAGES
CAMPAIGN_LIST
CURRENCY_LIST
data-toggle="options"
CURRENCY
CHILDREN
CHILDREN|@count
MEDIUM_WEBP_JPG
VARIANT_TYPE_ID
VARIANT_IDS
TITLE
SMALL
MEDIUM
BIG
P.options
SUB.options
VARIANT_FEATURE1_LIST
/srv/service/content-v5/sub-folder/{$PAGE_ID/{$BLOCK.PARENT_ID}/subfoldername/?product={$P.ID}&variant={$P.VARIANT_ID}
{for $i=1 to $P.STOCK}
$i
{/for}
{vat price=$P.PRICE_SELL vat=$P.VAT}
{format price=$P.PRICE_SELL}
|string_format:'%.1f'
|date_format:'Y,m,d,H,i,s'
|strip_tags|escape:'html'
|strpos:''
|default:''
|replace:'':''
|@count
|options
{exchange price=$P.PRICE_SELL from=$P.TARGET_CURRENCY to='USD'}
THEME_FOLDER
ASSETS
TABS
MENUoptions
$smarty.foreach.name.iteration
RELATED_PRODUCTS_IDS1_options
SYMBOL_options
ADDITIONAL_FIELD_options
NUMERIC1
COUNTER
<pre>{$smarty.server|@debug_print_var}</pre>
{assign var="CATARRAY" value=","|explode:$P.CATEGORY_IDS}
{in_array('20', array('10','20','30'))}
{math assign="SEPETTUTARI" equation="x*((100+v)/100)*((100-y)/100)" x=$P.PRICE_SELL y=$P.ADDITIONAL_FIELD_1 v=$P.VAT}
https://api.whatsapp.com/send?phone=9{$WHATSAPP_NO}&text=
json_decode($P.VARIANT_DATA, true)
{$P.ID}
BLOCK.ID
javascript:void(0)
|substr:0:5
{url type='page' id='68'}
<pre>{arr|@debug_print_var}</pre>
<pre>{$arr|@var_dump}</pre>
/Data/EditorFiles/v5images/
{debug}
{debug}
BLOCK.options
SETTING.options
IMAGE.options
/srv/service/order-v4/order-return/${$P.ID}
/srv/service/order-v4/order-return/${$P.ID}
/srv/service/gallery/video-detail/${$P.ID}
/srv/service/product-detail/view/606
/srv/service/content/get/block_id/folder_name
/srv/service/language/change/tr
/srv/shopping/shopping/set-currency/tl
/srv/shopping/shopping/set-country/TR
/srv/service/content/get-block/1003/category/catID
/srv/service/category/get/catID
/srv/service/product/filter/category/catID?pg=1
/srv/service/category/getTree/catID
/srv/service/content/get-block/1018/content/içerik_id
/srv/service/product-detail/credit-card-installment-list/${$P.ID}/${$P.VARIANT_ID}
/srv/service/product-detail/payment-options/${$P.ID}/${$P.VARIANT_ID}
/srv/campaign-v2/campaign/get-list-by-type/product/${$P.ID}
/srv/campaign-v2/campaign/get-list-by-type/cart
/srv/campaign-v2/campaign/get-list-by-type/category/id
/srv/service/cart/load?link=sepet
/srv/service/product-detail/comments/${$P.ID}
/srv/service/product-detail/comment-average/${$P.ID}
/srv/service/filter/get/brands
/srv/service/content/getBlock/1070/product/${$P.ID}
/srv/service/product/get-related-products/${$P.ID}/1
/srv/service/product/get-related-products/${$P.ID}/2
/srv/service/product/get-related-products/${$P.ID}/3
/srv/service/product/get-related-products/${$P.ID}/4
block,inline-block,flex,inline-flex,none,hidden,visible,transition-none,scale,scale-lg,grayscale,grayscale-reverse,blur,blur-reverse,opacity,opacity-reverse,to-up,to-down,to-left,to-right,shadow,bg-transparent,text-primary,bg-primary,border-primary
effect-wrapper
{category id="{$TABLE_ID}" assign="MY_CATEGORY"}
{product id="{$P.ID}" assign="MY_PRODUCT"}
{menu key="MENU_FOOTER" assign="MENU_FOOTER"}
SCSS V5
Here is Scss code snippets for tsoftecommerce.com V5.
transparentize($bgPrimary, 0.5);
darken($bgPrimary, 10%)
lighten($bgPrimary, 10%)
$gridColumns
$gridPadding
$mobileGridPadding
$xxlScreen
$xlScreen
$lgScreen
$mdScreen
$smScreen
$bgoptions
$bgBody
$bgPrimary
$bgSecondary
$bgWhite
$bgBlack
$bgGray
$bgLight
$bgDarkGray
$bgSuccess
$bgInfo
$bgWarning
$bgDanger
$borderoptions
$borderBody
$borderPrimary
$borderSecondary
$borderWhite
$borderBlack
$borderGray
$borderLight
$borderDarkGray
$borderSuccess
$borderInfo
$borderWarning
$borderDanger
$borderRadius
$buttonoptions
$buttonPrimary
$buttonSecondary
$buttonWhite
$buttonBlack
$buttonGray
$buttonLight
$buttonDarkGray
$buttonSuccess
$buttonInfo
$buttonWarning
$buttonDanger
$textoptions
$textPrimary
$textSecondary
$textWhite
$textBlack
$textGray
$textLight
$textDarkGray
$textSuccess
$textInfo
$textWarning
$textDanger
$textColor
$headingColor
$fontoptions
$fontH1
$fontH2
$fontH3
$fontText
$fontMaster
clamp(13px,1vw,20px)
@import "setting.scss";
@import "mixin.scss";
mask:url(#{$assets}/image_path);
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
-webkit-mask:url(#{$assets}/image_path);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: cover;
background-color:$bgPrimary;
@include scrollbar(5, 5, $bgPrimary);
@include line-clamp(2);
@include justify-content-evenly;
@include justify-content-center;
@include justify-content-flex-start;
@include justify-content-flex-end;
@include justify-content-between;
@include justify-content-around;
@include align-items-flex-end;
@include align-items-flex-start;
@include flex-direction-row;
@include flex-direction-column;
@include flex-wrap;
@include d-flex;
@include d-inline-flex;
@include d-flex;
@include align-items-center;
@include justify-content-center;
@include BLOCK {
}
box-shadow: 0 0 10px 0 rgb(40 40 40 / 30%);
text-shadow: 1px 1px 2px $bgBlack, 0 0 1em $bgBlack, 0 0 0.2em $bgBlack;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
@media (min-width: $mdScreen){
}
@media (max-width: $mdScreen - 1){
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}