Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Шаблоны (TPL) » Вывод название фала доп поля в fullsory?

Вывод название фала доп поля в fullsory?


     18.03.2026    Все вопросы » Шаблоны (TPL)    261

вопрос
Всем привет! Подскажите пожалуйста. Возможно ли вывести название загруженного файла доп-поля в fullstory.

Столкнулся с такой проблемой:
В fullstory вывожу окно с 3д моделью, ниже список с кнопками. В attachment вывожу только ссылку, так как ссылка мне нужна для скачивания файлов и для вывода 3д модели.

https://3d-lab.pro/7-prochnyj-nastolnyj-organajzer.html

Почему я это все делаю в полной новости!? Если я все это буду делать в attachment то каждое доп поле будут выводить окно и кнопку. Соответственно 10 полей, 10 окон, а нужно одно окно и 10 кнопок под ним. И хотелось чтоб у каждой кнопки было свое названия файла.

Ответил: TModules


<div id="main-3d-viewer"></div>
<div id="model-buttons"></div>

<!-- Тут выводится ваше доп.поле с файлами -->
<div id="model-links-src" style="display:none;">
  {xfvalue_model_files}
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const src = document.getElementById('model-links-src');
  const box = document.getElementById('model-buttons');
  const links = src ? src.querySelectorAll('a[href]') : [];

  if (!links.length) return;

  // const stl_viewer = new StlViewer(...);

  function fileNameFromUrl(url) {
    try {
      const clean = url.split('?')[0].split('#')[0];
      return decodeURIComponent(clean.substring(clean.lastIndexOf('/') + 1));
    } catch(e) {
      return url;
    }
  }

  function loadModel(url) {
    // stl_viewer.remove_model(0);
    // stl_viewer.add_model({ id:0, filename:url });
    console.log('load:', url);
  }

  links.forEach(function (a, i) {
    const url = a.getAttribute('href');
    const text = (a.textContent || '').trim();
    const title = text && text !== url ? text : fileNameFromUrl(url);

    const btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'model-btn';
    btn.textContent = title;
    btn.dataset.file = url;
    btn.addEventListener('click', function () { loadModel(url); });

    box.appendChild(btn);
    if (i === 0) loadModel(url);
  });
});
</script>

7 комментариев

Апельсин
Юзер

Апельсин - 19 марта 2026 08:41 -

у меня тоже сайт с 3d моделями и печатью, так же лазерная резка. могу помочь тебе, не сложно это

Да, это можно сделать, но тут важно разделить attachment и доп-поле с файлом.

На вашей странице уже видно, что названия файлов выводятся как отдельные ссылки сверху — например Название файла.3mf и Название файла.tpl. Значит имя файла в принципе у вас уже доступно в выводе вложений.

Что здесь главное:

1. Если файл загружен через attachment
Тогда у DLE обычно правильный путь — выводить список кнопок через attachment.tpl, потому что там у каждого файла есть собственные данные, в том числе название.
То есть:

одно общее окно 3D-просмотра — в fullstory.tpl

список кнопок файлов — через цикл attachment

текст кнопки — название вложения

Именно это вам и нужно: 1 окно + 10 кнопок, а не 10 окон.

Схема такая:

<div class="model-viewer-box">
  <div id="model-viewer"></div>
</div>

<div class="model-files">
  {attachments}
</div>



А в attachment.tpl уже только кнопка:

<button class="model-file-btn"
        type="button"
        data-model="{link}">
  {name}
</button>


де:

{link} — ссылка на файл

{name} — название файла для кнопки

Тогда JS подставляет в одно общее окно нужную модель по клику на кнопку.

2. Если файл загружен именно в доп-поле (xfield)
Вот тут уже проблема: штатно в fullstory.tpl DLE обычно отдает ссылку, а не отдельное “красивое имя файла”.
То есть вывести название файла как в attachment — чаще всего нельзя одним стандартным тегом, если у вас это именно xfield-типа “файл”.

В таком случае есть 3 варианта:

Вариант A — лучший:
Использовать attachments для файлов моделей, а не xfield.
Тогда названия можно выводить нормально через {name}.

Вариант B — хранить отдельное доп-поле с названием
Например:

model_file_1 — ссылка/файл

model_name_1 — текст для кнопки

И выводить так:
<button data-model="{xfvalue_model_file_1}">{xfvalue_model_name_1}</button>


Вариант C — вытаскивать имя из URL через JS
Например из ссылки /uploads/files/model_organizer_v2.3mf сделать текст кнопки model organizer v2.3mf.
Но это уже костыль, потому что:

имя может быть “техническим”

могут быть латиница/транслит/рандомные суффиксы

красивое имя не всегда совпадает с именем файла

Как сделать именно вашу задачу правильно

Для вашей логики лучше всего так:

3D viewer оставить в fullstory.tpl один раз

кнопки файлов выводить списком из attachment.tpl

по нажатию на кнопку менять файл в одном viewer

Пример:

fullstory.tpl

<div class="fs-model-wrap">
  <div id="main-3d-viewer" class="main-3d-viewer"></div>

  <div class="fs-model-buttons">
    {attachments}
  </div>
</div>


attachment.tpl
<button class="fs-model-btn" type="button" data-file="{link}">
  {name}
</button>


JS


<script>
document.addEventListener('DOMContentLoaded', () => {
  const viewer = document.getElementById('main-3d-viewer');
  const buttons = document.querySelectorAll('.fs-model-btn');

  function loadModel(fileUrl) {
    viewer.innerHTML = 'Здесь загружается модель: ' + fileUrl;
    
    // Тут уже подставляете ваш код загрузки 3D-модели
    // например через <model-viewer> или Three.js
  }

  buttons.forEach((btn, index) => {
    btn.addEventListener('click', () => {
      loadModel(btn.dataset.file);
    });

    if (index === 0) {
      loadModel(btn.dataset.file);
    }
  });
});
</script>


Итог

Да, вывести название файла можно, если использовать attachment.
И это как раз лучше всего подходит под вашу задачу:
одно окно 3D + много кнопок с именами файлов.

Если же файлы лежат в xfield, то штатно отдельно имя файла в fullstory обычно не вытащить, и тогда либо:

переходить на attachments,

либо делать отдельное поле под название,

либо вытаскивать имя из ссылки через JS/PHP.

С практической точки зрения для вас самый чистый вариант — оставить viewer в fullstory.tpl, а кнопки и названия брать из attachment.tpl.

doc123
Юзер

doc123 - 19 марта 2026 19:38 -

Спасибо Апельсин! Из вашего варианта подходит только добавить доп поле с названием.

TeraMoune
Эксперт

TeraMoune - 19 марта 2026 21:50 -

На самом деле тут ничего никуда не надо вытаскивать. Тут основной момент разделить всё. И так и должно быть так правильно.

Отдельно одна область просмотра, файлы attachment содержат только html кнопки скачивания и просмотра. В них ничего постороннего быть не должно, ни скриптов ни стилей. Саму функцию нужно делать общей для всех кнопок но в них каждая передаёт какой-то свой параметр от чего код функции применяется соответствующий. Как в примере кода выше. Там loadModel принимает fileurl.

В примере кода выше хоть и передаётся url можно и передать id. Но в таком случае в вызове функции нужно будет уже сперва обратиться к соответствующей ссылке по её id или классу с тем самым id. И от туда достать ссылку для загрузки модели.

Единственное что отметить надо, это создание первичного объекта stl_viewer который у вас в функциях создавался постоянно. Это не надо делать. Если stl_viewer уже был создан. То с ним можно взаимодействовать повторно, вызывая в нём методы, remove_model, add_model.


byroot
Юзер

byroot - 19 марта 2026 10:20 -

Посмотри модуль "Conclusion attachments", с ним возможно будет проще оформление сделать как нужно и выводить только нужные данные из прикрепленного файла

doc123
Юзер

doc123 - 19 марта 2026 19:41 -

Этот вариант я уже пробовал. Плагин выводит все файлы из доп поля, даже которые были удалены из новости.

TModules
Юзер

TModules - 24 марта 2026 21:01 -

1. сделать решение через плагин
2. попробуйте данный вариант
<div id="main-3d-viewer"></div>
<div id="model-buttons"></div>

<!-- Тут выводится ваше доп.поле с файлами -->
<div id="model-links-src" style="display:none;">
  {xfvalue_model_files}
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const src = document.getElementById('model-links-src');
  const box = document.getElementById('model-buttons');
  const links = src ? src.querySelectorAll('a[href]') : [];

  if (!links.length) return;

  // const stl_viewer = new StlViewer(...);

  function fileNameFromUrl(url) {
    try {
      const clean = url.split('?')[0].split('#')[0];
      return decodeURIComponent(clean.substring(clean.lastIndexOf('/') + 1));
    } catch(e) {
      return url;
    }
  }

  function loadModel(url) {
    // stl_viewer.remove_model(0);
    // stl_viewer.add_model({ id:0, filename:url });
    console.log('load:', url);
  }

  links.forEach(function (a, i) {
    const url = a.getAttribute('href');
    const text = (a.textContent || '').trim();
    const title = text && text !== url ? text : fileNameFromUrl(url);

    const btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'model-btn';
    btn.textContent = title;
    btn.dataset.file = url;
    btn.addEventListener('click', function () { loadModel(url); });

    box.appendChild(btn);
    if (i === 0) loadModel(url);
  });
});
</script>

doc123
Юзер

doc123 - 30 марта 2026 14:50 -

Спасибо TModules! Ваше решение мне подходит.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх