Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
Furniture website
A furniture website, which I was responsible on the dev side only.
link: herbert.co.il
A video of the customized CMS back-end: http://youtu.be/yYCqYuqmT7o
Plugins:- adi_calc
- bot_image_upload
- bot_write_tab_customize
- cbs_live_search
- ebl-image-edit
- gbp_admin_library
- gbp_permanent_links
- glz_custom_fields
- jbx_multiple_image_upload
- rah_external_output
- rah_replace
- smd_browse_by
- smd_faux_role
- smd_user_manager
- smd_wrap
- smd_write_cats
- upm_insert_tab
- wet_peex
- wet_quickopen
- zem_contact_lang
- zem_contact_reborn
Thanks for the help support I got here in the forums.
The Hebrew version is working fine you can view each page in Hebrew by changing “.co.il” to “.co.il/he” in the url, the reason the button on the top is not available it’s because that the client yet didn’t fill all the content in Hebrew for the products.
There is indeed a lot of JS going on in the back-end to customize it like that, but it was worth it! :)
Offline
Re: Furniture website
Hey !
This works great, is a pleasure to navigate in and looks slick…
Nice one !
Nice ref for Txp as well.
Last edited by hablablow (2012-04-17 16:57:10)
_
_I plant seeds for future visions. Farmer of your eyes. Subliminal engineer of your minds. eion founder__
Offline
Re: Furniture website
A lovely website. My only doubt is the use of scroll-bars for very short texts.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: Furniture website
Thanks Guillaume and Yiannis.
colak wrote:
A lovely website. My only doubt is the use of scroll-bars for very short texts.
Yes the scroll-bars in the products’ about-text are there for low screen resolutions (1024×768 and so), for high screen resolutions there will be no scroll-bars if the text will fit the space.
(making JS calculations to adjust the size)
You can see it by zoom in & out (ctrl + / ctrl – / ctrl 0)
I personally don’t see a reason for scroll-bars at all but that what’s the designer and the client decides they want, so I delivered it ;)
Offline
#5 2012-04-17 19:03:28
- uli
- Moderator
- From: Cologne
- Registered: 2006-08-15
- Posts: 4,304
Re: Furniture website
As always in case of your websites, it’s the biggest pleasure to look at the changes you did to the admin side, and I really enjoyed it, once more, great inspiration! It’s hard to recognize TXP any more. Sometimes I thought I were looking at an smd_tabber panel, but you don’t even mention it. Cool work!
In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links
Offline
Re: Furniture website
Very nice. The admin area is practically unrecognisable. I can see some of the usual suspect plugins there, but other things like setting the category dynamically or the multiple sections (or are they tags?) are new to me.
TXP Builders – finely-crafted code, design and txp
Offline
Re: Furniture website
Whow, massive backend redo! Very nice!
It would be great if you can describe more of how you handle multilingualism — always a tricky thing with TXP. Also, another thing I wonder is, if you already have a strategy for system updates?
Offline
Re: Furniture website
Thanks Uli, Jakob and Ralitza!
uli wrote:
Sometimes I thought I were looking at an smd_tabber panel, but you don’t even mention it. Cool work!
Yes in this case there is no use of smd_tabber, it’s all in the Write tab, and the JS sits in rah_external_output.
jakob wrote:
but other things like setting the category dynamically or the multiple sections (or are they tags?) are new to me.
I’m not sure what you mean by “setting the category dynamically”, but if you are talking about the option to create a new category while publishing a product, then it’s done using smd_write_cats and this JS to insert it into a specific parent and assign it to category2
$('.publish').click(function(){
if ($('#section').val() == 'products'){
var new_category = $('#smd_writecat').val();
$('#smd_writecat').val(', products -> '+new_category);
}
});And if you are talking about publish a new brand and create a category for it then I use the same trick only that this time #smd_writecat is hidden.
$('.publish').click(function(){
if ($('#section').val() == 'brands'){
var bname = $('#title').val();
$('#smd_writecat').val('brands -> '+bname);
}
});And if you are talking about the Categories page where it’s always assign a new category to a specific parent which in my case it’s “products” then I used the new txp_category.php file beta update that Stef(Bloke) sent me for testing (it started here) + this JS
$('.action-create.article select.list[name="parent"]').val('products').parent().hide();————————
About that “multiple sections” for products, the client wanted to be able to assign a product to more then one “section” and because both category1&2 are already taken, so I created a custom-menu and used an hidden custom field for it with JS
$('.custom_menu.products_sections a').click(function(){
$(this).parent().toggleClass('active');
$(this).blur();
$('#custom-35').val('');
var value = '';
$('.products_sections li.active').each(function(){
var cn = $(this).children('a').attr('class');
value += cn+',';
});
value = value.slice(0, -1);
$('#custom-35').val(value);
});For output I’m using:
(where “psections” is #custom-35 name)
<txp:article>
<txp:article_custom section="products" psections='%<txp:section />%' limit="999" sort="Title asc">
<txp:title />
</txp:article_custom>
</txp:article>All the 4 fake-sections are using this one txp-page code, and by visiting one of them for example “Indoor” it will show the products that have “indoor” in they #custom-35 value, and by visiting “Outdoor” it may also show the same product cause it’s also got “indoor” in it’s #custom-35 value.
By that the client can assign a single product to “multiple sections”.
I personally never used tags before, but will try it in the next project where there will be a need for it, if you got tips for how to use tags to end with the same result as this, then I will love to know please.
datorhaexa wrote:
It would be great if you can describe more of how you handle multilingualism — always a tricky thing with TXP.
I did it using this code
And in the txp-pages/forms codes I used it like this:
<txp:if_variable name="langName" value="English">English content</txp:if_variable>
<txp:if_variable name="langName" value="Hebrew">Hebrew content</txp:if_variable>
<txp:if_variable name="langName" value="English">
English content
<txp:else />
Hebrew content
</txp:if_variable>Which is really easy, but the problem is that categories don’t have custom-fields or any other fields besides of name&title, so how can I translate the categories?
So after a lot of thinking I came-up with an idea of that “Categories Translations” article as you saw in the video.
What I done was using:
- JS to create that UI (The JS is in rah_external_output which let use of all txp-tags in it like category_list)
- Use of 3 textarea-custom-fields (hidden)
- rah_replace
// Creating the main div of the UI with the languages names and an empty <ul> tag
$('textarea#body').parent().before('<div class="ctranslate"><h4 class="en">English</h4><h4 class="he">עברית</h4><ul/><div class="clear" />');
// Create an array of all categories under the parent "products"
var pcat_en_list = new Array();
pcat_en_list = [<txp:category_list exclude="products,all" parent="products" sort="title asc" type="article" break=",">'<txp:category title="1" />'</txp:category_list>];
// Append each category as <li> to the <ul> tag with an input field, and create a var for the "from" text to replace
var ctranslate_fromTxt = '';
$(pcat_en_list).each(function(index, value){
$('.ctranslate ul').append('<li><label for="ct_'+index+'">'+value+'</label><input type="text" id="ct_'+index+'" /></li>');
ctranslate_fromTxt += value + '|';
});
ctranslate_fromTxt = ctranslate_fromTxt.slice(0, -1);
// Grab the Hebrew translations from a custom field separated by a comma
// that each comes with both English & Hebrew values separated by a colon
// Example: "bla|בלה , bla2|בלה2 , bla3|בלה3"
// Insert each value into it's input field we created
var pcat_he_list = $('#custom-48').val().split(',');
$(pcat_he_list).each(function(index, value){
value = value.split('|');
$('.ctranslate label:contains('+value[0]+')').parent().find('input').val(value[1]);
});
// Clicking on "Save" copies content to the 3 textarea-custom-fields
$('.publish').click(function(){
if ($('#section').val() == 'catranslate'){
var ctranslate_toTxt = '';
var pcat_new_he_list = '';
$('.ctranslate input').each(function(index){
var ival = $(this).val();
// If there's no translation (empty field) it will use the English instead
var ltxt = $(this).parent().find('label').html();
if(ival == ''){ival = ltxt;}
ctranslate_toTxt += ival + '|';
pcat_new_he_list += ltxt +'|'+ ival +',';
});
ctranslate_toTxt = ctranslate_toTxt.slice(0, -1);
pcat_new_he_list = pcat_new_he_list.slice(0, -1);
$('textarea#body').val(ctranslate_fromTxt);
$('textarea#custom-48').val(pcat_new_he_list);
$('textarea#custom-13').val(ctranslate_toTxt);
}
});That’s was the JS which is hard to explain but hope you got the point of it.
In the end you got 3 textareas:
- first is for the “from” text to replace with
- second for the “to” text
- third is just for use for the UI to know exactly where to insert each value to it’s right input field.
now we can use rah_replace to replace English with Hebrew in this way:
<txp:if_variable name="langName" value="Hebrew">
<txp:variable name="pct_from"><txp:article_custom id="115"><txp:body /></txp:article_custom></txp:variable>
<txp:variable name="pct_to"><txp:article_custom id="115"><txp:custom_field name="custom-13-name" /></txp:article_custom></txp:variable>
<txp:rah_replace delimiter="|" from='<txp:variable name="pct_from" />' to='<txp:variable name="pct_to" />'>
<txp:category2 title="1" />
</txp:rah_replace>
</txp:if_variable>Yep.
datorhaexa wrote:
Also, another thing I wonder is, if you already have a strategy for system updates?
If you mean how do I gonna update TXP to it’s future versions, then I didn’t done a lot of changes to the core,
just a little things here and there, so it will not take a lot of time to do it again to the new core files.
Offline
Re: Furniture website
hi gil,
very good work, amazing. the admin area is a work on it’s own. and thanks for sharing your how to’s with us. there is so much that can be done with textpattern, but sometimes you don’t know how. than insights like you share with us are extremely helpful.
best, christoph
Offline
Offline
Re: Furniture website
Impressive x 2!
Great front end and amazing back-end (which compares very favorably with other CMSs).
Thanks for sharing this.
Offline
Pages: 1