Как встроить HTML блок со своими .css; .js?

Общее Общие вопросы
1

Структура файлов:
.html - блок, для главной страницы сайта
.css - стили для блока
.js (в том числе и jquery.js)
.jpg - изображения для блока

В файле .html прописаны ссылки на файлы .css; .js; .jpg

Что сделано:

  • для теста, в структуре файлов cs-cart, создал каталог и поместил туда файлы .html .css; .js; .jpg
  • на домашней страницы, редактора макета cs-cart, создал HTML блок.
  • в параметрах блока прописал iframe, в который загружается .html посредством скрипта

Проблемы:

  • Приходится изолировать блок html, так как стили прописанные для блока воздействуют на всю страницу сайта
  • Высота блока, не адаптируется если менять размер окна браузера, без обновления.

Вопросы:

  1. Как правильно распределять файлы .css; .js; .jpg в файловой структуре cs-cart (имеет ли это значение)?
  2. Как правильно подключить сторонний .css, что бы он не воздействовал на всю страницу?
  3. Как правильно создать адаптивность html блока под размеры изменяющегося окна браузера без его обновления?
  4. Как связать jQuery (используемый в cs-cart) с html блоком, а не подгружать свой файл jquery.js?
2
  1. Стандарты разработки — Документация docs.cs-cart.ru 4.16.x
  2. Простой ответ – никак. Сложный ответ: ну можно на реакте или чём-то подобном стили под компоненты накидать и стили будут изолированы под компонент.
  3. Не хочу давать токсичный ответ, но мой ответ – стилями. Как Вам удалось сделать так, чтоб блок не адаптировался, это ж немного даже постараться нужно :slight_smile:
  4. Да никак, оно автоматически свяжется.

Что там вообще происходит? Это с конструктора страничка, да?

2 лайка
3

Это с конструктора страничка, да?

Она самая ))

мой ответ – стилями

Ну да )). Каков вопрос, таков и ответ. Следовало спросить про адаптивность окна iframe, а именно его высоту.

На данный момент, реализовал изменение высоты iframe по содержимому HTML, но только в сторону его увеличениея. Т.е. при загрузке страницы, под разный размер экрана, высота iframe подгоняется под содержимое HTML. Само содержимое HTML конечно же адаптивно при помощи стилей )). Если с большего размера браузера, уменьшать его ширину, то содержимое HTML перестраивается и увеличивается его высота, при этом высота окна iframe увеличивается, под содержимое. Но вот если с меньшего размера браузера, увеличивать его ширину, то содержимое HTML уменьшается по высоте, а высота окна iframe не уменьшается. И визуально, под блоком остаётся пустое пространство.

Может кто подскажет, как заставить уменьшаться окно iframe по содержимому HTML? (да-да, это не имеет прямого отношения к cs-cart :upside_down_face:).

ну можно на реакте или чём-то подобном стили под компоненты накидать и стили будут изолированы под компонент.

Стоит ли вообще задумываться о написании модуля, для решения задачи связи конструктора и cs-cart?

4 
iframe {
    max-width: 100%;
    // зависит от того, какие стили на блоке с обёрткой
}

Ну это задача не из лёгких. У мариусвеб есть модуль, который позволяет встраивать вёрстку из тильды на страницы магазина разные. И поддерживать этот модуль – очень геморно (простите за непрофессиональное слово).

А нужно заменить всю страничку или вставить только отдельный блок?
Вообще iframe – это такой отдельный тип костыля, с которым никогда не хочется связываться.

Может лучше встроить блок напрямую в страницу чем через фрэйм?

5

Ширина-то меняется. Речь о высоте, и то когда изменение размера окна с меньшего на большее.

Отдельный блок.

Конечно лучше, но не проще. Стили надо переписывать.

1 лайк