Делаем pop-up окна для информационных страниц (VAMshop)

11.01.2011 | Написав

Была у меня не так давно задача, сделать несколько pop-up-окон с подсказками на странице товара. С помощью JavaScript я реализовал вывод в pop-up информационных страниц, тем самым сделав так, что текст в них стало возможным менять через админку.
Итак, как я это делал:

  1. Создаем в Админке –  Разное – Инструменты – Информационные страницы нужную нам страницу с текстом, который хотим видеть в pop-up’е. Допустим, это будет «Таблица размеров». Такая информация не помешает на сайтах, продающих одежду или обувь. Чекбокс “Показывать” не включаем.
  2. В шаблоне карточки товара templates/ваш шаблон/module/product_info/product_info_v1.html в нужном нам месте ставим ссылку вот такого вида:
    <span style="cursor:hand" 
    onclick="javascript:window.open('shop_content.php?coID=31', 
    'popup', 'toolbar=0, width=640, height=480')" alt="" />
    Посмотреть таблицу размеров
    </span>

    Здесь shop_content.php?coID=31 созданая нами инфостраница, width=640, height=480 – размеры открываемого окна.

  3. На этом можно было бы и остановится, но выглядит это не очень – в попап выводится целиком весь шаблон с шапкой, боковыми боксами и т.д. Создадим для этой страницы отдельный шаблон, в который будет выводится только содержание самой страницы. Для этого в корне шаблона создаем файл shop_content.php_31.html, где 31 – ID нашей инфостраницы. Вставляем в него следующее содержимое:
    {$main_content}
    <div class="pagecontentfooter">
    <a href="javascript:window.close()">
    <span class="underline">Закрыть окно</span> [x]
    </a>
    </div>

    Ссылка “Закрыть окно”, понятное дело, закрывает его.

  4. И еще один момент – по умолчанию на инфостраницах в конце есть кнопка “Вернуться”. Её нужно бы убрать, т.к. в наш pop-up она тоже выводится, но при этом не работает, кроме того целесообразность её на обычных страницах я считаю сомнительной. Для этого открываем templates/ваш шаблон/module/content.html и удаляем
    <div class="pagecontentfooter">
    {$BUTTON_CONTINUE}
    </div>

Таким образом, мы сделали страницу, которые можно выводить в pop-up.

Рубрика: Веброзробка
Позначки:,
6 коментарів читачів статті "Делаем pop-up окна для информационных страниц (VAMshop)"
  • Юлия пишет:

    здравствуйте, подскажите пожалуйста возможно ли сделать в vamshop анимацию добавления в корзину (как здесь __shop.prestadev.ru/laptops/6-macbook.html__) т.е. при нажатии “В корз.” рамка фото перемещается в корзину.
    И еще вопрос (извините за наглость) возможно ли сделать категории (как здесь __http://amway-odessa.at.ua/shop___), т.е. нажимаем на “Здоровье” – она разворачивается, остальные сворачиваются и т.д. (надеюсь понятно объяснила).
    P.S. Ваш сайт на порядок лучше/информативней оффсайта (у Вас узнала о Vamshop гораздо больше). Спасибо.

  • Владимир пишет:

    Как сделать такое окно для кнопок “купить” на странице листинга товара и “в корзину” на странице карточки товара? Заранее спасибо

  • Макс пишет:

    Подскажите как добавлять новости или другую информацию так что бы люди под статьей могли оставлять комментарии ?

  • Макс пишет:

    Спасибо за скорый ответ. Не пришлось долго ждать ) Есть появится какойто ява код или что-то подобное, буду рад прочитать, как и многие таких как я. Я видел когда то в инете есть такой код но я не понял как им пользоваться.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.

Цей сайт використовує Akismet для зменшення спаму. Дізнайтеся, як обробляються ваші дані коментарів.