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
.tplfiles, 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))
==
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-optionsfw-optionstext-optionsbtn-optionsbtn-outline-optionsbtn-outline-optionsposition-desktop-relativeposition-desktop-stickyposition-desktop-absoluteposition-desktop-fixedposition-relativeposition-stickyposition-absoluteposition-fixedflex-direction-columnflex-direction-rowflex-direction-row-reverseflex-wrapflex-wrap-reverseflex-shrink-optionsalign-items-centeralign-items-flex-endalign-items-flex-startjustify-content-centerjustify-content-betweenjustify-content-betweenjustify-content-aroundjustify-content-evenlyjustify-content-flex-startjustify-content-flex-endcontainer-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_LOGGEDIS_LAZY_LOAD_ACTIVEIS_MEMBER_LOGGED_INIS_MOBILEIS_VENDORLANGUAGELANGUAGE_SELECTEDLANGUAGE_LISTIS_HTTPS_ACTIVEFILTER_PROPERTY_LISTIS_RECOMMENDATION_ACTIVESYMBOL_optionsLAZY_LOAD_LOADING_IMAGEDISPLAY_FAVOURITE_BUTTONDISPLAY_COMPARISON_BUTTONDISPLAY_CART_BUTTONDISPLAY_LANGUAGESCAMPAIGN_LISTCURRENCY_LISTdata-toggle="options"CURRENCYCHILDRENCHILDREN|@countMEDIUM_WEBP_JPGVARIANT_TYPE_IDVARIANT_IDSTITLESMALLMEDIUMBIGP.optionsSUB.optionsVARIANT_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_FOLDERASSETSTABSMENUoptions$smarty.foreach.name.iterationRELATED_PRODUCTS_IDS1_optionsSYMBOL_optionsADDITIONAL_FIELD_optionsNUMERIC1COUNTER<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.IDjavascript: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.optionsSETTING.optionsIMAGE.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}/4block,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-primaryeffect-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;}
}



