Перейти к содержимому


Внедрить Спойлер На Страницу Товара


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 5

#1 Remix

Remix

    Пользователь

  • Пользователи
  • PipPip
  • 16 сообщений
  • ГородМосква

Отправлено 27 Август 2013 - 15:58

Здравствуйте!
У меня есть код спойлера, уже заточенный под меня. я его использую в блоге на Blogspot. вот так это выглядит: http://aplgo.blogspo...013/04/alt.html после слов "Компоненты ALT".

Помогите внедрить скрипт спойлера в магазин на страницу описания товара. я пробовала делать примерно, как в блоггере - не получилось. не знаю в какое место правильно вставить коды. :huh:
Да, картинка и сами файлы скриптов у меня лежат на Dropbox. ссылки, соответствующие в коде.

В общем, понятно, что вставлять надо в файлы HTML и main.css, но куда? Вот сами коды:

Код CCS

.bar {
background: url('https://dl.dropboxusercontent.com/u/********/Scripts/spoiler-back.gif') no-repeat;
border-radius: 3px ;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
padding-left: 30px;
color: #000;
font-size: 14px;
font-family: 'Arial', Arial, sans-serif;
cursor: pointer;
}

.spoiler-hidden .bar {
background-position: 0 0;
}

.spoiler, .spoiler-hidden .text {
display: none;
}

.spoiler-visible .bar {
background-position: 0 -20px;
border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
box-shadow: 0 0 1px 1px #9A2412;
-webkit-box-shadow: 0 0 1px 1px #9A2412;
-moz-box-shadow: 0 0 1px 1px #9A2412;
}

.spoiler-visible .text {
display: visible;
padding: 5px 1em 0;
border: 1px solid #9A2412;
border-top-width: 0;
border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
box-shadow: 1px 1px 1px #bbb;
-webkit-box-shadow: 1px 1px 1px #bbb;
-moz-box-shadow: 1px 1px 1px #bbb;
}


Подключение скрипта

<script type='text/javascript'>WidgetSpoilerManager.setOption("defaultTitleText", "Подробнее");</script>
<script src='https://dl.dropboxusercontent.com/u/********/Scripts/widget_spoiler.js' type='text/javascript'/> 


Потом, при написании товара просто вставляется:

<div class="spoiler" title="заголовок спойлера">спрятанный текст</div>

И все должно работать. :)

Или, чтобы работало обязательно надо закачивать файлы со скриптом в админку магазина? если да, то подскажите, как будут тогда правильно выглядеть ссылки.

Спасибо!

Прикрепленные изображения

  • 2013-08-27_16-33-23.jpg


#2 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 27 Август 2013 - 19:06

Просмотр сообщенияRemix (27 Август 2013 - 15:58) писал:

Здравствуйте!
У меня есть код спойлера, уже заточенный под меня. я его использую в блоге на Blogspot. вот так это выглядит: http://aplgo.blogspo...013/04/alt.html после слов "Компоненты ALT".

Помогите внедрить скрипт спойлера в магазин на страницу описания товара. я пробовала делать примерно, как в блоггере - не получилось. не знаю в какое место правильно вставить коды. :huh:
Да, картинка и сами файлы скриптов у меня лежат на Dropbox. ссылки, соответствующие в коде.

В общем, понятно, что вставлять надо в файлы HTML и main.css, но куда? Вот сами коды:

Код CCS

.bar {
background: url('https://dl.dropboxusercontent.com/u/********/Scripts/spoiler-back.gif') no-repeat;
border-radius: 3px ;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
padding-left: 30px;
color: #000;
font-size: 14px;
font-family: 'Arial', Arial, sans-serif;
cursor: pointer;
}

.spoiler-hidden .bar {
background-position: 0 0;
}

.spoiler, .spoiler-hidden .text {
display: none;
}

.spoiler-visible .bar {
background-position: 0 -20px;
border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
box-shadow: 0 0 1px 1px #9A2412;
-webkit-box-shadow: 0 0 1px 1px #9A2412;
-moz-box-shadow: 0 0 1px 1px #9A2412;
}

.spoiler-visible .text {
display: visible;
padding: 5px 1em 0;
border: 1px solid #9A2412;
border-top-width: 0;
border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
box-shadow: 1px 1px 1px #bbb;
-webkit-box-shadow: 1px 1px 1px #bbb;
-moz-box-shadow: 1px 1px 1px #bbb;
}


Подключение скрипта

<script type='text/javascript'>WidgetSpoilerManager.setOption("defaultTitleText", "Подробнее");</script>
<script src='https://dl.dropboxusercontent.com/u/********/Scripts/widget_spoiler.js' type='text/javascript'/> 


Потом, при написании товара просто вставляется:

<div class="spoiler" title="заголовок спойлера">спрятанный текст</div>

И все должно работать. :)

Или, чтобы работало обязательно надо закачивать файлы со скриптом в админку магазина? если да, то подскажите, как будут тогда правильно выглядеть ссылки.

Спасибо!

Здравствуйте, в main.css вставьте вот этот блок
.bar {
background: url({ASSETS_IMAGES_PATH}spoiler-back.gif) no-repeat;
border-radius: 3px ;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
padding-left: 30px;
color: #000;
font-size: 14px;
font-family: 'Arial', Arial, sans-serif;
cursor: pointer;
}
.spoiler-hidden .bar {
background-position: 0 0;
}
.spoiler, .spoiler-hidden .text {
display: none;
}
.spoiler-visible .bar {
background-position: 0 -20px;
border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
box-shadow: 0 0 1px 1px #9A2412;
-webkit-box-shadow: 0 0 1px 1px #9A2412;
-moz-box-shadow: 0 0 1px 1px #9A2412;
}
.spoiler-visible .text {
display: visible;
padding: 5px 1em 0;
border: 1px solid #9A2412;
border-top-width: 0;
border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
box-shadow: 1px 1px 1px #bbb;
-webkit-box-shadow: 1px 1px 1px #bbb;
-moz-box-shadow: 1px 1px 1px #bbb;
}

Далее перед </head> вставьте
<script type='text/javascript'>WidgetSpoilerManager.setOption("defaultTitleText", "Подробнее");</script>
<script src='{ASSETS_JS_PATH}widget_spoiler.js' type='text/javascript'/>

и уже на нужной странице вставляйте
<div class="spoiler" title="заголовок спойлера">спрятанный текст</div>

осталось только загрузить файлы в раздел сайт -> редактор шаблонов:
widget_spoiler.js
spoiler-back.gif
У Вас сейчас в коде эти файлы где-то на другом сайте находятся, но всегда лучше загружать их к себе, т.к., если их удалят с тех сайтов, у Вас спойлер тоже перестанет работать. Если же Вы не хотите их загружать на свой сайт, тогда Вам нужно вместо
{ASSETS_IMAGES_PATH}spoiler-back.gif
{ASSETS_JS_PATH}widget_spoiler.js
вставить нужные и полные ссылки на те файлы

#3 Remix

Remix

    Пользователь

  • Пользователи
  • PipPip
  • 16 сообщений
  • ГородМосква

Отправлено 28 Август 2013 - 11:05

support 2.0, спасибо за ответ, конечно. но Вы, видимо, не внимательно читали то, что я написала. потому что предложили сделать мне ровно то же самое, что я и делала и после чего у меня спойлер не заработал. единственное отличие - предложили файлы загрузить в админке.

Вы пишите:

Цитата

У Вас сейчас в коде эти файлы где-то на другом сайте находятся, но всегда лучше загружать их к себе, т.к., если их удалят с тех сайтов, у Вас спойлер тоже перестанет работать.

Ну так я же написала выше:

Цитата

Да, картинка и сами файлы скриптов у меня лежат на Dropbox. ссылки, соответствующие в коде.

Dropbox - мой и никуда файлы с него не денутся. я использую его, как хостинг для хранения файлов для разных сайтов. а раз там эти скрипты уже лежат, то и решила их использовать.
Я, конечно, попробую сейчас закачать файлы в админке и подключить их. возможно, все же в этом проблема. как сделаю - отпишусь получилось или нет.

#4 Remix

Remix

    Пользователь

  • Пользователи
  • PipPip
  • 16 сообщений
  • ГородМосква

Отправлено 28 Август 2013 - 11:32

В общем, от смены прописки файлов - ничего не изменилось. закачала файлы, прописала новый адреса - спойлер не работает. вообще, ничего не отображается.
Может, все дело в том, что у меня описание продукта в табе размещено?

Какие еще предложения будут?

P.S. нет, проверила - в новостях, страницах спойлер тоже не работает. значит, дело не в табах.

#5 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 29 Август 2013 - 02:41

Попробуйте сделать следующее - найдите подключенный код в шаблоне "HTML"

<script type='text/javascript'>WidgetSpoilerManager.setOption("defaultTitleText", "Подробнее");</script>
<script src='{ASSETS_JS_PATH}widget_spoiler.js' type='text/javascript'/>

и замените его на

<script src='{ASSETS_JS_PATH}widget_spoiler.js' type='text/javascript'/>

далее перенесите эту строку, вставив её перед строкой

<!-- Скрипты магазина -->
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

получиться

<!-- Скрипты магазина -->
<script src='{ASSETS_JS_PATH}widget_spoiler.js' type='text/javascript'/>
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

затем в файле "widget_spoiler.js" найдите и удалите строку

WidgetSpoilerManager.init();

после в файл main.js (самый конец файла) добавьте

$(function() {
	WidgetSpoilerManager.setOption("defaultTitleText", "Подробнее");
	WidgetSpoilerManager.init();
});


#6 Remix

Remix

    Пользователь

  • Пользователи
  • PipPip
  • 16 сообщений
  • ГородМосква

Отправлено 29 Август 2013 - 12:39

Продвинутый пользователь, спасибо большое за совет!
Все сделала, как Вы написали. правда, опять ничего не заработало. :) но я подумала: а не заменить ли мне <div> на <p>? возможно, какие-нибудь стили перебивают. заменила - и все заработало! :) так, вот, думаю, может, и с прежней конструкцией все было в порядке, если бы я там догадалась дивы на обзац поменять. но переделывать не хочется уже - работает и славно!
Всем большое спасибо за помощь!




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных