Cornerstone / Pro theme compatibility

[Ryvix]

Hi there,

qTranslate-XT doesn't seem to work properly with the Pro theme from theme.co. This basically uses the Cornerstone plugin which is a visual page builder.

First it seems to be necessary to manually add the translation codes like [:en] etc. for the languages into the content boxes when editing the page with Pro/Cornerstone. However once I do this to one element and save the page and view it then all elements no longer display for some strange reason. Maybe it's due to some strange conflict but I'm not too sure yet.

I did ask them at the Pro forums and they said it should be compatible with qtranslate-x and I told them about qtranslate-xt and about the issue I'm having. They said that in that case I should contact the qtranslate-xt developers and if they can't help then I may have to switch to WPML instead.

Are there any tips or ideas or ways you can think to make this compatible or will I just have to switch to WPML? And if I do have to do that is there any simple way to do that that you are aware of or do I just have to do it manually or invent something?

Thank you!

[Ryvix]

OK, somehow I got the translation part to work now by using those codes properly. I'm not sure why exactly it didn't work before when I tried but I tried it again and it seems to work ok now. Possibly there was a conflict with a cache or something. I dunno but it works now so woohoo!

The other issue is that clicking the Edit with Pro button when editing the page does nothing. There are no javascript errors either. When editing a page like normal in WP, and when using the Pro theme there is another tab at the top beside Visual and Text that says Pro and when switching to that tab displays a button in the content editor area to edit the content with Pro. However when qTranslate-XT is enabled it does nothing when I click it. If I disable qTranslate-XT it works properly. I know I probably have to create a custom i18n-config.json file but I'm not exactly sure what to put in it to fix this. I don't know how to exclude that tab from interfering with qTranslate-XT given that the main i18n-config.json seems to be responsible for it.

The postarea looks like this:

<div class="postarea wp-editor-expand" style="">
  <div class="wp-core-ui wp-editor-wrap cornerstone-active" style="padding-top: 21px;">
    <div class="wp-editor-tools">
      <div class="wp-editor-tabs">
        <button type="button" id="content-tmce" class="wp-switch-editor switch-tmce">Visual</button>
        <button type="button" id="content-html" class="wp-switch-editor switch-html">Text</button>
        <button type="button" id="content-cornerstone" class="wp-switch-editor switch-cornerstone">Pro</button>
      </div>
    </div>
    <div class="wp-editor-container">
      <div class="cs-editor-container pro">
  <div class="cs-logo"><!-- <svg class="cs-custom-icon" width="100%" height="100%" viewBox="0 0 345 232" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"> -->
<svg class="cs-custom-icon" width="100%" height="100%" viewBox="0 0 281 317" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
  <g id="pro-solid" style="fill:#265998">
    <g id="Pro-Logo">
      <path d="M127.406476,2.7395047 C133.616099,-0.858480949 143.727203,-0.915998835 149.978168,2.60422723 L269.977989,70.1820261 C276.234367,73.7053001 281.306163,82.3896987 281.306163,89.5607286 L281.306163,225.974417 C281.306163,233.153704 276.249926,241.851898 270.007866,245.405149 L149.948291,313.74828 C143.708414,317.300289 133.633456,317.241619 127.435773,313.61169 L11.2142214,245.541739 C5.02077793,241.914293 1.07802775e-13,233.145446 1.03838259e-13,225.974417 L2.84217094e-14,89.5607286 C2.44526274e-14,82.3814407 5.03711142,73.6428704 11.2435182,70.0467487 L127.406476,2.7395047 Z M78.801,128.209 C68.791,128.209 58.781,128.3 48.771,128.3 L48.771,192 L60.783,192 L60.783,173.254 L78.801,173.254 C110.014,173.254 109.923,128.209 78.801,128.209 Z M166.798,191.181 L147.506,169.432 C159.609,166.975 163.613,158.148 163.613,149.412 C163.613,138.401 155.696,128.391 140.681,128.3 C130.58,128.3 120.479,128.209 110.378,128.209 L110.378,192 L122.39,192 L122.39,170.706 L133.947,170.706 L152.511,192 L166.798,192 L166.798,191.181 Z M140.681,139.493 C148.234,139.493 151.601,144.589 151.601,149.685 C151.601,154.781 148.325,159.877 140.681,159.877 L122.39,159.877 L122.39,139.493 L140.681,139.493 Z M80.6799927,138.490005 C88.2327319,138.490005 90.6000061,145.583993 90.6000061,150.679993 C90.6000061,155.775993 88.3237288,162.880005 80.6799927,162.880005 L60.3899994,162.880005 L60.3899994,138.493 L80.6799927,138.490005 Z M201.651,127.026 C179.629,127.026 168.891,143.861 168.891,160.605 C168.891,177.349 179.265,193.456 201.651,193.456 C224.037,193.456 234.138,176.985 234.32,160.514 C234.502,143.861 223.582,127.026 201.651,127.026 Z M201.651,137.946 C216.666,137.946 222.672,149.958 222.49,160.696 C222.308,171.161 216.666,182.445 201.651,182.445 C186.636,182.445 180.994,171.252 180.721,160.787 C180.448,150.049 186.636,137.946 201.651,137.946 Z" id="Combined-Shape"></path>
    </g>
  </g>
</svg>

</div>
  <button href="#" data-cs-edit-button="" class="cs-edit-btn">
    <span>Edit with Pro</span>
  </button>
</div>
    </div>
  </div>
</div>

[Ryvix]

I discovered something else which might be useful to someone who sees this in the future. I can switch the languages either through the language selector or visiting the URL directly to other languages and edit the page in Pro with that language in the URL and it will actually automatically be using the translated language. I don't know why I didn't think of this before. So the only big issue really seems to be the edit button not working in the backend. However a workaround is to view the page and edit it from the frontend, there is another edit link in the admin bar that works.

Actually though it seems to save that across all languages rather than using the language codes. Meaning it will overwrite the other languages with the one currently being edited.

[herrvigg]

Great you made some progress! But without license it's really hard for me to understand what's going on. Seen this software is on the client-side some screenshots could help to better visualize the problem. I'm not sure the tab behavior can be changed with a standard i18n config file, but in the worst case you could try to integrate your own JS code.

[Ryvix]

OK, well no worries, I figured I would probably have to write some things to make it work and realized it would take a lot of time to make it work right which is unfortunate. I think in this case the client will be better off using WPML as it will be cheaper for them. So unfortunately I can't make any screenshots now but maybe I could eventually find some that other people make. I'm sure more people are going to have these issues eventually and come knocking.

To explain a little better, aside from the button on the tab not working to edit the page which is kind of minor, the major issue preventing it from being usable at all is that if I use the translation codes for the separate languages and manually put those into the content using the Cornerstone editor then when I save and then close the page and then try to edit that content again with Cornerstone then those codes are now gone and only the content for the language I currently have selected will show. Which seems normal up to that point except that now when I save the page again it will only save the content of that specific language to the page and overwrite all the other languages with that content. So it seems like it doesn't resave the codes or separate the languages properly when saving, only when loading.

When I edit a page in Cornerstone with WPML installed now it shows flags for the languages that when clicked allow me to switch between them. Though of course it will load a different page through AJAX when clicking those since WPML uses per page languages rather than codes to separate them like qTranslate-XT does.

So I'm not sure if it's that the theme isn't completely compatible with qTranslate-XT or visa versa or a little of both but I've reported what the issues are to both parties and now I've switched this particular site to use WPML and after some initial issues and reconfiguring it to work properly everything seems ok for now in my case. So if anyone ever has the time and desire to fix them Pro/Cornerstone and qTranslate-XT to work together then hopefully they can figure it out.