Вход • Регистрация

При добавление в корзину добавить временное окошко, о том что товар добавлен в корзину.

  •
  • 24 января 2015 г.
  • И такое же окошко, при нажатии на сердечко.
    •
    • 24 января 2015 г.
    • 1. Можно добавить в шаблон следующий блок
      Код

      <div id="black"></div>
      <div id="modal_shop">
      <div class="modal_shop">
      <div class="modal_name">Товар добавлен в корзину</div>
      <div class="modal_link">
      <a href="#" class="modal_close">Продолжить покупки</a>
      <a href="/shop/cart/?link=modal" class="modal_cart">Перейти в корзину</a>
      <div class="clear"></div>
      </div>
      </div>
      </div>

      2. Стили
      Код

      #black {position:fixed; top:0; left:0; z-index:50000; background:#000; height:100%; width:100%; opacity:0.8; display:none;}
      #modal_shop{width:400px;position:fixed;display:none;z-index:50000;background:#FFF;border-radius:10px;box-shadow:0 0 15px #000;top:150px;left:50%;margin-left:-200px}
      .modal_shop{padding:30px}
      .modal_name{text-align:center;font-size:18px;padding:0 0 20px}
      .modal_close{display:block;float:left;width:160px;padding:10px 0;border-radius:3px;background:green;color:#FFF;font-size:14px;text-decoration:none;text-align:center}
      .modal_cart{display:block;float:right;width:160px;padding:10px 0;border-radius:3px;background:#CC0000;color:#FFF;font-size:14px;text-decoration:none;text-align:center}
      .modal_close:hover,.modal_cart:hover{color:#FFF !important;opacity:0.8}

      3. Правим файл modules/shop/js/shop.buy_form.php
      Код

      /*В любое место*/
      $(".modal_close").click(function(){
      $("#modal_shop, #black").fadeOut("slow");
      return false;
      });
      $("input[action=buy]").click(function() {
      $(this).parents('form').find('input[name=action]').val('buy');
      $(this).parents('form').submit();
      $("#modal_shop, #black").fadeIn("slow");
      setTimeout(function(){$("#modal_shop, #black").fadeOut("slow");},5000);
      });



      Вроде всё
      •
      • 24 января 2015 г.
      • Пример тут http://www.komfort-son.ru/shop/pledy/traquair-dark13/
        •
        • 25 января 2015 г.
        • Код
          <form method="post" action="http://www.komfort-son.ru/" class="login">
          <input type="hidden" name="action" value="auth">
          <<input type="text" name="name" placeholder="Имя пользователя" autocomplete="off">

          Одна скобка треугольная лишняя в всплывающей форме авторизации.
        •
        • 26 января 2015 г.
        • Хорошо бы чтобы кнопка "продолжить покупки" вела на previous page например или на 1 уровень выше в иерархии каталога :)
      •
      • 26 января 2015 г.
      • Подскажите пожалуйста неопытному куда именно добавлять какой шаблон? (Можно добавить в шаблон следующий блок) и стили куда прописывать?
        • 26 января 2015 г.
        • Спасибо разобрался. Код нужно вставлять в site.php который находится в папке дизайна, стили в той же папке css ну и дальше все как написано... для кого то это покажется смешным но когда нет опыта то возникают и не такие вопросы :)

          Александр Биг Эпл (ba5) подскажите на примере сайта который вы указали http://www.komfort-son.ru/shop/pledy/traquair-dark13/ есть таблица по принципу ( вкладки на jQuery) доставка, уход, отзывы - очень хорошая вещь много информации и мало места.
          Внимание вопрос уважаемые знатоки: Как это сделать?

          Я сделал
          Код
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">
          <head>
          <meta http-equiv="content-type" content="text/html; charset=windows-1251">
          <title>Вкладки со скошенными углами | pcvector.net</title>
          <link rel="shortcut icon" href="/favicon.ico" />
          <style>
          html{
          background: #222 url(bg.png);
          }

          body{
          width: 600px;
          margin: 100px auto 0 auto;
          font-family: 'Trebuchet MS', Arial, Helvetica;
          font-size: small;
          }

          h2, h3, p{
          margin: 0 0 15px 0;
          }

          #tabs{
          overflow: auto;
          width: 100%;
          list-style: none;
          margin: 0;
          padding: 0;
          }

          #tabs li{
          margin: 0;
          padding: 0;
          float: left;
          }

          #tabs a{
          -moz-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
          -webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
          box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
          background: #ad1c1c;
          background: -moz-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
          background: -webkit-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
          background: -ms-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
          background: -o-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
          background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
          text-shadow: 0 1px 0 rgba(0,0,0,.5);
          color: #fff;
          float: left;
          font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
          height: 35px;
          padding: 0 30px;
          text-decoration: none;
          }

          #tabs a:hover{
          background: #c93434;
          background: -moz-linear-gradient(220deg, transparent 10px, #c93434 10px);
          background: -webkit-linear-gradient(220deg, transparent 10px, #c93434 10px);
          background: -ms-linear-gradient(220deg, transparent 10px, #c93434 10px);
          background: -o-linear-gradient(220deg, transparent 10px, #c93434 10px);
          background: linear-gradient(220deg, transparent 10px, #c93434 10px);
          }

          #tabs a:focus{
          outline: 0;
          }

          #tabs #current a{
          background: #fff;
          background: -moz-linear-gradient(220deg, transparent 10px, #fff 10px);
          background: -webkit-linear-gradient(220deg, transparent 10px, #fff 10px);
          background: -ms-linear-gradient(220deg, transparent 10px, #fff 10px);
          background: -o-linear-gradient(220deg, transparent 10px, #fff 10px);
          background: linear-gradient(220deg, transparent 10px, #fff 10px);
          text-shadow: none;
          color: #333;
          }

          #content{
          background-color: #fff;
          background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
          background-image: -webkit-linear-gradient(top, #fff, #ddd);
          background-image: -moz-linear-gradient(top, #fff, #ddd);
          background-image: -ms-linear-gradient(top, #fff, #ddd);
          background-image: -o-linear-gradient(top, #fff, #ddd);
          background-image: linear-gradient(top, #fff, #ddd);
          -moz-border-radius: 0 2px 2px 2px;
          -webkit-border-radius: 0 2px 2px 2px;
          border-radius: 0 2px 2px 2px;
          -moz-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
          -webkit-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
          box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
          padding: 30px;
          }

          /* Remove the rule below if you want the content to be "organic" */
          #content div{
          height: 220px;
          }

          /* --- */
          #about{
          color: #999;
          }

          #about a{
          color: #eee;
          }
          </style>
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
          <script>
          $(document).ready(function() {
          $("#content div").hide(); // Initially hide all content
          $("#tabs li:first").attr("id","current"); // Activate first tab
          $("#content div:first").fadeIn(); // Show first tab content

          $('#tabs a').click(function(e) {
          e.preventDefault();
          $("#content div").hide(); //Hide all content
          $("#tabs li").attr("id",""); //Reset id's
          $(this).parent().attr("id","current"); // Activate this
          $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
          });
          })();
          </script>
          </head>

          <body>

          <ul id="tabs">
          <li id="current"><a href="#" title="tab1">Один</a></li>
          <li><a href="#" title="tab2">Два</a></li>
          <li><a href="#" title="tab3">Три</a></li>
          <li><a href="#" title="tab4">Четыре</a></li>
          </ul>

          <div id="content">
          <div style="display: block;" id="tab1">
          <h2>Django (Джанго)</h2>
          <p>Свободный фреймворк для веб-приложений на языке Python. Изначально проект был создан для управления новостными сайтами LJWorld.com, lawrence.com и KUsports.com, принадлежащими компании The World Company (Лоуренс, Канзас (en), США).</p>
          <p>Сайт на Django строится из одного или нескольких приложений, которые рекомендуется делать отчуждаемыми и подключаемыми. Это одно из существенных архитектурных отличий этого фреймворка от некоторых других (например, Ruby on Rails).</p>
          </div>
          <div style="display: none;" id="tab2">
          <h2>Zend Framework</h2>
          <p>Свободный каркас на PHP для разработки веб-приложений и веб-сервисов. Zend пытается следовать духу PHP, предоставляет простые интерфейсы и мощную функциональность для разработки приложений. Он предоставляет расширения для построения современных, быстрых и безопасных сайтов.</p>
          <p>Основывается на идеях MVC. Разрабатывается компанией Zend, являющейся разработчиком самого PHP.</p>
          </div>
          <div style="display: none;" id="tab3">
          <h2>Kohana</h2>
          <p>Kohana, ранее Blue Flame, это PHP5 веб-фреймворк с открытым кодом, который использует архитектурную модель HMVC (Hierarchical Model View Controller - Иерарархические Модель-Контроллер-Вид). Его цели — быть безопасным, легким и простым в использовании.</p>
          <p>Проект Kohana был создан как ветвь PHP фреймворка CodeIgniter под именем Blue Flame. Главной причиной форка был переход к более открытой для общественности модели разработки, потому, что многие пользователи были недовольны скоростью разработки и исправления ошибок в CodeIgniter.</p>

          </div>
          <div style="display: none;" id="tab4">
          <h2>CodeIgniter</h2>
          <p>Популярный MVC фреймворк с открытым исходным кодом, написанный на языке программирования PHP, для разработки полноценных веб-систем и приложений. Разработан компанией EllisLab, а также Риком Эллисом (Rick Ellis) и Полом Бурдиком (Paul Burdick).</p>
          <p>Первый публичный релиз фреймворка произошел 28 февраля 2006 года. С выходом версии 2.0 28го января 2011 года CodeIgniter разделился на две ветки: CodeIgniter Core и CodeIgniter Reactor </p>
          </div>
          </div>

          Просто создал характеристику и вставил туда html код работает, но коряво.
          •
          • 26 января 2015 г.
          • Я вот так обычно делаю

            Script

            Код

            $(".tab").click(function(){
            tab_id = $(this).attr("id");
            $(".tab").removeClass("tab_a");
            $(this).addClass("tab_a");
            $(".tab_d").removeClass("tab_d_a");
            $("."+tab_id).addClass("tab_d_a");
            });


            CSS

            Код

            #tab_s {height:50px;}
            .tab {float:left; padding:10px 20px; background:#e4efef; border-radius:3px; margin-right:10px; cursor:pointer;}
            .tab:hover { background:#edf4f4;}
            .tab_a {background:#FFF !important; border:3px 3px 0 0; border-left:1px #e4efef solid; border-top:1px #e4efef solid; border-right:1px #e4efef solid; cursor:text; padding-bottom:22px;}
            .tab_d {display:none; border:1px #e4efef solid; padding:20px; background:#FFF; border-radius:3px;}
            .tab_d_a {display:block;}
            .tab_s_fix { position:fixed; top:40px; background:#FFF; width:600px; left:0; border-bottom:1px #e4efef solid; padding-top:20px; z-index:1;}


            HTML
            Код
            <div id="tab_service">

            <div class="tabes">
            <div id="tab_s">
            <div class="tab tab_a" id="tab_01">Описание услуги</div>
            <div class="tab" id="tab_02">Для кого</div>
            <div class="tab" id="tab_03">Дополнительная информация</div>
            </div>
            </div>
            <div id="tab_d">

            <div class="tab_d tab_01 tab_d_a">
            1
            </div>
            <div class="tab_d tab_02">
            2
            </div>
            <div class="tab_d tab_03">
            3
            </div>

            </div>

            </div>
            •
            • 26 января 2015 г.
            • Спасибо большое.
              Со скриптом мне не понятно нужно создать файл js ?
              Я вставил в css такой код
              Код
              #tabs{
              overflow: auto;
              width: 100%;
              list-style: none;
              margin: 0;
              padding: 0;
              }

              #tabs li{
              margin: 0;
              padding: 0;
              float: left;
              }

              #tabs a{
              -moz-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
              -webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
              box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
              background: #ad1c1c;
              background: -moz-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
              background: -webkit-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
              background: -ms-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
              background: -o-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
              background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
              text-shadow: 0 1px 0 rgba(0,0,0,.5);
              color: #fff;
              float: left;
              font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
              height: 35px;
              padding: 0 30px;
              text-decoration: none;
              }

              #tabs a:hover{
              background: #c93434;
              background: -moz-linear-gradient(220deg, transparent 10px, #c93434 10px);
              background: -webkit-linear-gradient(220deg, transparent 10px, #c93434 10px);
              background: -ms-linear-gradient(220deg, transparent 10px, #c93434 10px);
              background: -o-linear-gradient(220deg, transparent 10px, #c93434 10px);
              background: linear-gradient(220deg, transparent 10px, #c93434 10px);
              }

              #tabs a:focus{
              outline: 0;
              }

              #tabs #current a{
              background: #fff;
              background: -moz-linear-gradient(220deg, transparent 10px, #fff 10px);
              background: -webkit-linear-gradient(220deg, transparent 10px, #fff 10px);
              background: -ms-linear-gradient(220deg, transparent 10px, #fff 10px);
              background: -o-linear-gradient(220deg, transparent 10px, #fff 10px);
              background: linear-gradient(220deg, transparent 10px, #fff 10px);
              text-shadow: none;
              color: #333;
              }

              #content{
              background-color: #fff;
              background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
              background-image: -webkit-linear-gradient(top, #fff, #ddd);
              background-image: -moz-linear-gradient(top, #fff, #ddd);
              background-image: -ms-linear-gradient(top, #fff, #ddd);
              background-image: -o-linear-gradient(top, #fff, #ddd);
              background-image: linear-gradient(top, #fff, #ddd);
              -moz-border-radius: 0 2px 2px 2px;
              -webkit-border-radius: 0 2px 2px 2px;
              border-radius: 0 2px 2px 2px;
              -moz-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
              -webkit-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
              box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
              padding: 30px;
              }

              /* Remove the rule below if you want the content to be "organic" */
              #content div{
              height: 220px;
              }

              /* --- */
              #about{
              color: #999;
              }

              #about a{
              color: #eee;
              }

              В характеристиках создал (дополнительная информация)(поле с визуальным редактором) в html вставил такой код
              Код
              <script type="text/javascript" src="jquery.min.js"></script>
              <script type="text/javascript">// <![CDATA[
              $(document).ready(function() {
              $("#content div").hide(); // Initially hide all content
              $("#tabs li:first").attr("id","current"); // Activate first tab
              $("#content div:first").fadeIn(); // Show first tab content

              $('#tabs a').click(function(e) {
              e.preventDefault();
              $("#content div").hide(); //Hide all content
              $("#tabs li").attr("id",""); //Reset id's
              $(this).parent().attr("id","current"); // Activate this
              $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
              });
              })();
              // ]]></script>
              <ul id="tabs">
              <li id="current"><a href="#" title="tab1">Один</a></li>
              <li><a href="#" title="tab2">Два</a></li>
              <li><a href="#" title="tab3">Три</a></li>
              <li><a href="#" title="tab4">Четыре</a></li>
              </ul>
              <div id="content">
              <div style="display: block;" id="tab1">
              <h2>Django (Джанго)</h2>
              <p>Свободный фреймворк для веб-приложений на языке Python. Изначально проект был создан для управления новостными сайтами LJWorld.com, lawrence.com и KUsports.com, принадлежащими компании The World Company (Лоуренс, Канзас (en), США).</p>
              <p>Сайт на Django строится из одного или нескольких приложений, которые рекомендуется делать отчуждаемыми и подключаемыми. Это одно из существенных архитектурных отличий этого фреймворка от некоторых других (например, Ruby on Rails).</p>
              </div>
              <div style="display: none;" id="tab2">
              <h2>Zend Framework</h2>
              <p>Свободный каркас на PHP для разработки веб-приложений и веб-сервисов. Zend пытается следовать духу PHP, предоставляет простые интерфейсы и мощную функциональность для разработки приложений. Он предоставляет расширения для построения современных, быстрых и безопасных сайтов.</p>
              <p>Основывается на идеях MVC. Разрабатывается компанией Zend, являющейся разработчиком самого PHP.</p>
              </div>
              <div style="display: none;" id="tab3">
              <h2>Kohana</h2>
              <p>Kohana, ранее Blue Flame, это PHP5 веб-фреймворк с открытым кодом, который использует архитектурную модель HMVC (Hierarchical Model View Controller - Иерарархические Модель-Контроллер-Вид). Его цели &mdash; быть безопасным, легким и простым в использовании.</p>
              <p>Проект Kohana был создан как ветвь PHP фреймворка CodeIgniter под именем Blue Flame. Главной причиной форка был переход к более открытой для общественности модели разработки, потому, что многие пользователи были недовольны скоростью разработки и исправления ошибок в CodeIgniter.</p>
              </div>
              <div style="display: none;" id="tab4">
              <h2>CodeIgniter</h2>
              <p>Популярный MVC фреймворк с открытым исходным кодом, написанный на языке программирования PHP, для разработки полноценных веб-систем и приложений. Разработан компанией EllisLab, а также Риком Эллисом (Rick Ellis) и Полом Бурдиком (Paul Burdick).</p>
              <p>Первый публичный релиз фреймворка произошел 28 февраля 2006 года. С выходом версии 2.0 28го января 2011 года CodeIgniter разделился на две ветки: CodeIgniter Core и CodeIgniter Reactor</p>
              </div>
              </div>

              Нет ли ошибок? Как вынести файл js как его обозвать? Извиняюсь за скорее всего глупые вопросы :) пока изучаю...
              •
              • 26 января 2015 г.
              • скрипты лучше кидать в папку с темой и их прописать в файлк themes -> function - > show_js.php
      •
      • 01 июня 2018 г. , редакция: 01 июня 2018 г.
      • После установки кода, указанного в самом первом сообщении - в корзину кладет не 1, а сразу 2 товара. Происходит потому что submit() еще раз инициирует действие.

        Мой вариант работает, когда удаляю строку
        Код
        $(this).parents('form').submit();
  •
  • 11 августа 2015 г. , редакция: 11 августа 2015 г.
  • Ребят подскажите в чем проблема, после добавления кода перестало работать удаление из корзины...
    ссылка
  • 26 марта 2019 г.
  • Здравствуйте!

    Подскажите в чем может быть дело. КОд из начала темы. Стиль

    #black {position:fixed; top:0; left:0; z-index:50000; background:#000; height:100%; width:100%; opacity:0.8; display:none;}
    #modal_shop{width:400px;position:fixed;display:none;z-index:50000;background:#FFF;box-shadow:0 0 15px #000;top:150px;left:50%;margin-left:-200px}
    .modal_shop{padding:30px}
    .modal_name{text-align:center;font-size:18px;padding:0 0 20px}
    .modal_close{display:block;float:left;width:160px;padding:10px 0;background:#333333;color:#FFF;font-size:14px;text-decoration:none;text-align:center}
    .modal_cart{display:block;float:right;width:160px;padding:10px 0;background:#FFCE00;color:#FFF;font-size:14px;text-decoration:none;text-align:center}
    .modal_close:hover,.modal_cart:hover{color:#FFF !important;opacity:0.8}

    Меняю padding - ничего не меняется. Отступа снизу от кнопок нет. Куда копать?
  • 26 марта 2019 г.
  • Посмотрите стили, пропишите такие:
    Код

    #modal_shop {
    width: 450px; /* Увеличить на 50 px */
    position: fixed;
    display: none;
    z-index: 50000;
    background: #FFF;
    box-shadow: 0 0 15px #000;
    top: 150px;
    left: 50%;
    margin-left: -200px;
    }
    /* Добавьте, у вас его нет */
    .modal_link {
    display: block;
    margin: 0 0 15px 0;
    padding: 10px;
    }
  • 27 марта 2019 г.
  • А кто нибудь подскажет, как сделать чтобы окошко появлялось не просто каждый раз при клике на кнопку "добавить в корзину", а сначала делалась бы проверка, действительно ли товар добавился в корзину. Дело в том что если включен количественный учет товаров, то если добавить больше чем есть в наличии, все равно это окошко появиться, а не должно.

Новости

  • Вышла очередная сборка DIAFAN.CMS 7.2.2
  • 18 июня
  • В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
  • Не пропустите сборку DIAFAN.CMS 7.1.4
  • 24 апреля
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • Сборка DIAFAN.CMS 7.1.3
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
Все новости

Форум

Перейти на форум