Please help us to make AbanteCart Ideal Open Source Ecommerce Solution for everyone.

Support AbanteCart eCommerce

Author Topic: RTL Languages Support  (Read 15015 times)

Offline looling

  • Newbie
  • *
  • Posts: 4
  • Karma: +1/-0
    • View Profile
RTL Languages Support
« on: November 03, 2014, 03:39:52 PM »
Hello All, 8) 8)

I intend to built my own store and I need to have it dual language (English & Arabic)

As you know Arabic is Right To Left (RTL) language. I have a few questions in this regards,

1-The store will be completely right to left starting from the Logo which needs to be transferred to the right. to all the other blocks. (Featured, Latest Products, Bestsellers, etc...) also the words should be starting from right to left

2- What's my first stage of making the changes? are they all going to be only at style.css ?

3- Do I need to create two style.css to make one for Arabic and the other for English? if yes, how do I link it? so when the user select any of the languages it will automatically read from the correct style .css

4- How to make the changes and also make it possible to get the future updates?

Thank you All

Offline looling

  • Newbie
  • *
  • Posts: 4
  • Karma: +1/-0
    • View Profile
Re: RTL Languages Support
« Reply #1 on: November 04, 2014, 03:01:56 PM »
Well  :-*

I try to do something by my self  8)

I figure out these things.

1- In order to offer dual language in the website (RTL) & (LTR) I need to make two style.css file

A: will be as default named (style.css) for English default language.
B: will add another style file and customize it as required to view the website from right to left. will name it (style-arabic.css

2- I need to let the website knows that I have a two style.css files. and depending on the user selected language the website should choose which one of (style) file will use.

3-If I do point number (2).. That will need customization on file called (head.tpl) to be exact on the line


<link href="<?php echo $this->templateResource('/stylesheet/style.css'); ?>" rel="stylesheet" />


I'm not sure if the above correct.. still looking for the expert solutions.

Ps. I try it by my self the website stopped working and gives error referring me to (head.tpl)

Thanks all..
« Last Edit: November 05, 2014, 02:47:40 AM by looling »

Offline abantecart

  • Administrator
  • Hero Member
  • *****
  • Posts: 4358
  • Karma: +298/-10
    • View Profile
    • Ideal Open Source Ecommerce Solution
Re: RTL Languages Support
« Reply #2 on: November 05, 2014, 12:34:06 PM »
It should be simpler than this.

If you look in main language XML file (english.xml) you can fine blow node:

Code: [Select]
<definition>
<key>direction</key>
<value><![CDATA[ltr]]></value>
</definition>

Change this setting to rtl
Remove this language from the database, clear cache

If there are some layout related issues, you will need to adjust styles for this.
Please  rate your experience or leave your review
We need your help to build better free open source ecommerce platform for everyone. See how you can help

Offline looling

  • Newbie
  • *
  • Posts: 4
  • Karma: +1/-0
    • View Profile
Re: RTL Languages Support
« Reply #3 on: November 05, 2014, 03:51:52 PM »
Thanks for your assistance Abanecart :) I try to follow your directions, but I'm still not getting the results that I'm looking for, I guess your setup will make my website with only one language (Right to left). while I need my website to be able to show 2 languages.

Allow me to explain what in my mind again, it's might be not clear on my previous post.

I'll use screenshot to make it much clear..

1- The website on its English version must be like this:
from this screen I'm trying to show that I have on the website:
A- The default Abantecart format. for the languages (left to right)
B- My website offering Two Languages.



The other screen:
explain how I need the ARABIC website to appear,

So when the user select Arabic language it should make the website look like this screen.


Hope the images get it more clear as this is exactly what I'm thinking of right now.

**I attached the two screenshot.

Offline abantecart

  • Administrator
  • Hero Member
  • *****
  • Posts: 4358
  • Karma: +298/-10
    • View Profile
    • Ideal Open Source Ecommerce Solution
Re: RTL Languages Support
« Reply #4 on: November 08, 2014, 03:53:12 PM »
It does not look right? Browser automatically flips elements from left to right.
Now you need to change English text to Arabic and it will be correct, is not it?
Please  rate your experience or leave your review
We need your help to build better free open source ecommerce platform for everyone. See how you can help

Offline abantecart

  • Administrator
  • Hero Member
  • *****
  • Posts: 4358
  • Karma: +298/-10
    • View Profile
    • Ideal Open Source Ecommerce Solution
Re: RTL Languages Support
« Reply #5 on: November 08, 2014, 03:54:14 PM »
Please  rate your experience or leave your review
We need your help to build better free open source ecommerce platform for everyone. See how you can help

yonghan

  • Guest
Re: RTL Languages Support
« Reply #6 on: November 08, 2014, 10:10:41 PM »
I would like to add bootstrap version as abantecart is using bootstrap version 2 which I found from google.

https://github.com/AbdullahDiaa/Bootstrap-RTL

Offline looling

  • Newbie
  • *
  • Posts: 4
  • Karma: +1/-0
    • View Profile
Re: RTL Languages Support
« Reply #7 on: November 09, 2014, 05:06:54 PM »
Thanks Abantecart &  handoyo,

I really appreciate your assistance,

Abantecart:
The pictures on my last post I made it by (PAINT) and is not real but It shows how I want the site to look.

I would like to congratulate you on the major enhancement for version 1.2 you make life really easy, congrats. great job.

I notice when I install it, the storefront needs to balance the drawing vertically (refer to the attachment "right red line")

handoyo:
I'm sorry I don't know what's the use of (bootstrap). can you hint me? I try to Google it but I couldn't understand.



I'm doing my best. but until know all the results that I'm getting leading me to ask for expert assistance.

I have no idea about web programming but I as I been reading & trying, I found that CSS easy to learn and do amendments. specially with the use of (Firebug) It will almost get me to the point where I need to make the change.

Now let's get back to my issue  ;D

I made two separated abantecart installation to make sure that my point are clear. :)

1- English version,
(Link at the attachment (number one)

Number1 above link is the default installation for the script. (I just add ARABIC language) as just second language.

2-ARABIC Language

Link at the attachment (Number two)

for above link,
A: I made changes on logo move it to the right.
B: I move the search box to the left.
C: I translate the text to Arabic.

Now, the issues with the website in Arabic:
A: Button "Home" is on the left. (How to move it to the right)?
B:the other blocks which I translate the text, how can I change it to be starting from the right?

while checking through (Firebug) I found if I made changes to this line it will the text will be shifted from the right to left.
<html lang="en" xml:lang="en" dir="ltr" xmlns="XXXXXXXXXX">

Even when I change the english.xml and I made the changes as you mentioned Abantecart before, but nothing has been changed?


NOW, If I above got solved. is it possible to get combined the two website with two design into one website (contain Arabic & English) where ARABIC the logo will be on the right and the ENGLISH will be on the left?

How to make the script understand that layout depend on the language selection?


Thanks again, sorry for bothering you, soon will make abantecart with full support for RTL languages :)

yonghan

  • Guest
Re: RTL Languages Support
« Reply #8 on: November 09, 2014, 09:43:51 PM »
Hi,sorry if my post is not clear.Here is the link to a more detailed about bootstrap rtl.

http://pyjamacoder.com/2012/02/01/twitter-bootstrap-v2-rtl-edition/

I think you can use a conditional to check the selected language,if it was arabic,then the html lang will be ar and load the rtl bootstrap css.But that's what on my mind.Need to test if it's working correctly.
« Last Edit: November 10, 2014, 01:19:22 AM by handoyo »

Offline HADY

  • Sr. Member
  • ****
  • Posts: 324
  • Karma: +27/-5
    • View Profile
Re: RTL Languages Support
« Reply #9 on: August 21, 2019, 06:25:32 AM »
Hi!

this is a big project to be proceed I think.


Regards
Thank you In Advanced
Regards
HADY

 

Powered by SMFPacks Social Login Mod