Referenced content in tabs and accordions do not render the translated version.

To reproduce:
Set up a tab or accordion type
Set the proper translation settings for all fields (!paragraphs settings)
Translate Content

CommentFileSizeAuthor
#21 bt_text.png19.63 KBcri2mars
#21 bt_accordion_section.png20.55 KBcri2mars
#21 bt_accordion.png25.15 KBcri2mars
#4 Screen Shot 2017-05-23 at 6.23.07 PM.png52.05 KBphanosd
#4 Screen Shot 2017-05-23 at 6.23.21 PM.png47.37 KBphanosd
#6 fix_translations.patch2.23 KBMikechr
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

SoYeah created an issue. See original summary.

phanosd’s picture

phanosd CreditAttribution: phanosd at Tabs & Spaces commented

Facing the same issue.

Specifically in our stack the situation is likewise.
Our primary version of the website is in English with the following layout

- Content Type Basic Page
- - Title Field
- - Body Field
- - Bootstrap Paragraph Accordion
- - - Background None
- - - Width None
- - - - Accordion Section 1
- - - - - - Accordion Section Title
- - - - - - Accordion Section Body
- - - - Accordion Section 2
- - - - - - Accordion Section Title
- - - - - - Accordion Section Body

Expected behavior
We can translate the content of the paragraphs in order to have a page translation (Greek Translation)

Actual Behavior:
- - Title Field (GR)
- - Body Field (GR)
- - Bootstrap Paragraph Accordion
- - - - Accordion Section 1
- - - - - - Accordion Section Title (GR)
- - - - - - Accordion Section Body (EN)
- - - - Accordion Section 2
- - - - - - Accordion Section Title (GR)
- - - - - - Accordion Section Body(EN)

Also, we've experienced the following:

If you translated the content and go and add another field in the original accordion it does not show in the translated node.

thejimbirch’s picture

thejimbirch CreditAttribution: thejimbirch commented

Related Paragraphs Issue: https://www.drupal.org/node/2864682

phanosd’s picture

phanosd CreditAttribution: phanosd at Tabs & Spaces commented
FileSize
Screen Shot 2017-05-23 at 6.23.07 PM.png52.05 KB
Screen Shot 2017-05-23 at 6.23.21 PM.png47.37 KB

Was looking at the same thing since yesterday.

Got pretty upset with my current website and decided to test on a new installation.

Followed the paragraphs issue here: https://www.drupal.org/node/2864682

Can confirm workaround is not working with this module

- - - - Accordion Section 1
- - - - - - Accordion Section Title
- - - - - - Accordion Section Simple
- - - - - - Accordion Section Simple dummy

- - - - Accordion Section 2
- - - - - - Accordion Section Title
- - - - - - Accordion Section Simple dummy

Actual Behavior:
- - Title Field (GR)
- - Body Field (GR)
- - Bootstrap Paragraph Accordion
- - - - Accordion Section 1
- - - - - - Accordion Section Title (GR)
- - - - - - Accordion Section Simple (EN)
- - - - - - Accordion Section Simple dummy (EN)

- - - - Accordion Section 2
- - - - - - Accordion Section Title (GR)
- - - - - - Accordion Section Simple (EN)
- - - - - - Accordion Section Simple dummy (EN)

The problem still remains also when adding new sections to original content

SoYeah’s picture

SoYeah CreditAttribution: SoYeah commented

I build a standalone PG-Tab-Type based on bootstrap.js which is fully translatable as expected.
(Accordions are just some other classes for bootstrap in the template to behave that way.)

1. PG-Type with a PG reference field (Tab Section)
2. PG-Type Tab Section with two fields:

a) Tab Section Title (hidden in display)
b) PG reference field for the tab body

Twig template: 

{# The template default set classes. #}
{%
set classes = [
'paragraph',
'paragraph--type--' ~ paragraph.bundle|clean_class,
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
]
%}

{# Sets Unique ID for Tabs from Paragraph ID. #}
{% set paragraph_id = 'tab-' ~ paragraph.id.value %}

{# Prints Tabs template. #}
<div{{ attributes.addClass(classes).setAttribute('id', paragraph_id) }} role="tablist" aria-multiselectable="true">
  <div class="paragraph__column">
    <ul class="nav nav-tabs" role="tablist">
      {# Loops through the tab sections to print the tab section titles. #}
      {% for key, item in content.tab_section if key|first != '#' %}
        <li role="presentation" class="{% if loop.first %}active{% endif %}"><a href="#{{ paragraph_id }}-{{ key }}" aria-controls="{{ item['#paragraph'].tab_section_title.value }}" role="tab" data-toggle="tab">{{ item['#paragraph'].tab_section_title.value }}</a></li>
      {% endfor %}
    </ul>
    <div class="tab-content">
      {# Loops through the tab sections again to print the tab section bodies. #}
      {% for key, item in content.tab_section if key|first != '#' %}
        <div role="tabpanel" class="tab-pane{% if loop.first %} active{% endif %}" id="{{ paragraph_id }}-{{ key }}">
            {{ item }}
        </div>
      {% endfor %}
    </div>
  </div>
</div>
Mikechr’s picture

Mikechr CreditAttribution: Mikechr at Tabs & Spaces commented
FileSize
fix_translations.patch2.23 KB

I've found that accordions and tabs both loaded their inner entities without a translation in mind.
I've tweaked the code a little bit calling .getTranslation() passing the current content language as an argument.
I've uploaded a patch for it.

thejimbirch’s picture

thejimbirch CreditAttribution: thejimbirch commented

Thanks for the fix and the patch @Mikechr!

@SoYeah @phanosd Can you review please?

phanosd’s picture

phanosd CreditAttribution: phanosd at Tabs & Spaces commented

#6 Works for me!!

thejimbirch’s picture

thejimbirch CreditAttribution: thejimbirch commented
Status: Active » Fixed
thejimbirch’s picture

thejimbirch CreditAttribution: thejimbirch commented
Status: Fixed » Closed (fixed)

Closed in 8.x-2.0-alpha4. Thanks all!

thejimbirch’s picture

thejimbirch CreditAttribution: thejimbirch commented
Related issues: +#2900377: Tab/Accordion Bootstrap Paragraph Type Translation Issue: Invalid translation language specified
pyxio’s picture

pyxio CreditAttribution: pyxio commented

I am still seeing this issue with 8.x-2.0-beta2 ... when i translate a tab name i get the same error ..

Invalid translation language (cs) specified. in Drupal\Core\Entity\Sql\SqlContentEntityStorage->save() (line 805 of core/lib/Drupal/Core/Entity/Sql/SqlContentEntityStorage.php). 

Twig_Template->getAttribute(Object, 'getTranslation', Array, 'method') (Line: 257)
__TwigTemplate_c01bc38b4b0b054c8a3c3806d52b40f76985f994621299ccbcf734a151ecc30e->doDisplay(Array, Array) (Line: 432)
Twig_Template->displayWithErrorHandling(Array, Array) (Line: 403)
Twig_Template->display(Array) (Line: 411)
Twig_Template->render(Array) (Line: 64)
twig_render_template('themes/lifedesk/templates/paragraphs/paragraph--bp-tabs.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('paragraph', Array) (Line: 437)
pyxio’s picture

pyxio CreditAttribution: pyxio commented

this issue is not fixed and should not be marked as fixed. i still get these errors

The website encountered an unexpected error. Please try again later.Drupal\Core\Entity\EntityStorageException: Invalid translation language (cs) specified. in Drupal\Core\Entity\Sql\SqlContentEntityStorage->save() (line 805 of core/lib/Drupal/Core/Entity/Sql/SqlContentEntityStorage.php). 

Twig_Template->getAttribute(Object, 'getTranslation', Array, 'method') (Line: 257)
__TwigTemplate_c01bc38b4b0b054c8a3c3806d52b40f76985f994621299ccbcf734a151ecc30e->doDisplay(Array, Array) (Line: 432)
Twig_Template->displayWithErrorHandling(Array, Array) (Line: 403)
Twig_Template->display(Array) (Line: 411)
Twig_Template->render(Array) (Line: 64)
twig_render_template('themes/lifedesk/templates/paragraphs/paragraph--bp-tabs.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('paragraph', Array) (Line: 437)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 195)
Drupal\Core\Render\Renderer->render(Array) (Line: 490)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 57)
thejimbirch’s picture

thejimbirch CreditAttribution: thejimbirch commented
Status: Closed (fixed) » Active
thejimbirch’s picture

thejimbirch CreditAttribution: thejimbirch commented

Could this be related?

Sub-paragraph fields cannot be translated
https://www.drupal.org/project/paragraphs/issues/2864682

pyxio’s picture

pyxio CreditAttribution: pyxio commented

yes. i think i can say with confidence it is related.

thejimbirch’s picture

thejimbirch CreditAttribution: thejimbirch commented
Related issues: +#2864682: Sub-paragraph fields cannot be translated
thejimbirch’s picture

thejimbirch CreditAttribution: thejimbirch commented
Status: Active » Postponed
cri2mars’s picture

cri2mars CreditAttribution: cri2mars commented

hi

i encountered the same issue with tab and accordions

my pov, is that it is of course related and miro dietiker explained in #9 sub-paragraph can't be translated how to solve the issue

you have to activate the translation of the parent paragraph, not the field of the child paragraph of course as it is not permited, but for other fields, authored on or authored by, or anything else.
of course you will never translate this, but it makes the parent paragraph translatable, so the child one can inherit that property...

this way you can translate text (bt_text paragraph), nested into an accordion section (bt_accordion_section), nested into an accordion (bt_accordion), etc...

this works also for tabs of course

a more elegant way to solve this issue could maybe add some new field in the parents of nested paragraphs bundles, something like "translatability"
which would garantee that the translatability should be inherited

cri2mars’s picture

cri2mars CreditAttribution: cri2mars commented
FileSize
bt_accordion.png25.15 KB
bt_accordion_section.png20.55 KB
bt_text.png19.63 KB

here are some pics taken from $URL/fr/admin/config/regional/content-language
to explain it :

the container accordion paragraph

the nested accordion section
already checked as translatable because of his title

finaly the nested text paragraph (bt_simple)

now i can see accordion section titles translated, as the text nested into each section...

(i use bt language dropdown by the way)

ikaros123’s picture

ikaros123 CreditAttribution: ikaros123 commented

You could use this module https://www.drupal.org/project/paragraphs_asymmetric_translation_widgets.

I was able to translate all paragraph fields using this module.

thejimbirch’s picture

thejimbirch CreditAttribution: thejimbirch commented
Status: Postponed » Closed (works as designed)

Thanks @ikaros123!