0

Modx Evo 1.0.10, Shopkeeper 1.3.5 Пытаюсь сделать быстрый просмотр товаров со страницы категории, не переходя на страницу товара. Во всплывающем окне при нажатии "Купить" удалось вывести цену и названия параметров, но выпадающее меню выбора параметров не отображается, как на странице товара, хотя галочки для шаблона категории ставил, что эти параметры можно отображать на странице категории. В итоге через поп-ап добавляет товар в корзину, но нельзя выбрать параметры. Так же при нажатии на второй, третий и т.д. товар выводится информация первого в поп-апе. Делал так: в чанке листинга товаров категории назначил на кнопку "Купить" вывод модального окна, в нем скопировал код из чанка параметров товара со страницы товара полностью с формой добавления в корзину. Что я сделал не так или что мог упустить? С модх мало знаком. Вот вырезка из кода чанки вывода товара в категориях(начиная с кнопки и заканчивая поп-апом):

                        <div id="add_to_cart_product_page_button">
                            <p class="buttons_bottom_block no-print text-center">
                                <button onclick="show('block');$('body').css('overflow', 'hidden');" type="submit" style="background: #4b9ec3!important;
color: #fff;
padding-right: 5px;" name="shk-submit"
                                        class="btn btn-default ajax_add_to_cart_product_button shk-but">
                                    <span>Купить</span>
                                </button>
                            </p>
                        </div>


      </div>
        <div class="hiddenBox">

            <div class="one-box">
                <span class="availability">
                    [[if?is=`[+product_status+]:=:<span class="in-stock">Наличие по тел.</span>` &then=`<span class="label-default">[+product_status+]</span>`]]
                    [[if?is=`[+product_status+]:=:<span class="insale">В наличии</span>` &then=`<span class="label-success">[+product_status+]</span>`]]
                    [[if?is=`[+product_status+]:=:<span class="outsale">Под заказ</span>` &then=`<span class="label-warning">[+product_status+]</span>`]]
                </span>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
function show(state){           
document.getElementById('cart-popup-window').style.display =  state;                    
document.getElementById('cart-popup-wrap').style.display = state;           
$("body").css("overflow", "visible");
        }
    </script>

<div onclick="show('none')" id="cart-popup-wrap"></div>
<div id="cart-popup-window">
            <img class="close" onclick="show('none')" src="/close.png">

<center>
    <form action="[~[*id*]~]" method="post">
        <div class="content_prices clearfix">
            <div class="all-price-info">
                   <span id="our_price_display">Цена: <span  class="shk-price">[*price*]</span> грн.
                    </span>
                    <meta content="грн."/>

            </div>

            <div class="clear"></div>
        </div>
        <div class="product_actions">
            <input type="hidden" name="shk-id" value="[+id+]" />
            <input type="hidden" name="shk-count" value="1" size="2" maxlength="3" />
            <div class="product_attributes clearfix">

                    <div class="clearfix"></div>
                    <p><span class="700">Выберите комплектацию</span></p>

                    [[if?is=`[+template+]:=:8` &then=`{{product-attributes-entrance}}`]]
                    [[if?is=`[+template+]:=:5` &then=`{{product-attributes-interior}}`]]
                </div>
                `]]
                <div class="clearfix">
                        <p id="quantity_wanted_p">
                            <label for="quantity_wanted">Количество</label>
                            <input type="hidden" name="shk-id" value="[*id*]" />
                            <input type="text"  class="text" id="quantity_wanted"  name="shk-count" value="1" maxlength="5">
                            <a href="#" data-field-qty="shk-count" class="btn btn-default button-minus product_quantity_down">
                                <span><i class="fa fa-minus"></i></span>
                            </a>
                            <a href="#" data-field-qty="shk-count" class="btn btn-default button-plus product_quantity_up">
                                <span><i class="fa fa-plus"></i></span>
                            </a>
                            <span class="clearfix"></span>
                        </p>
                        <div id="add_to_cart_product_page_button">
                            <p class="buttons_bottom_block no-print">
                                <button type="submit" name="shk-submit"
class="btn btn-default ajax_add_to_cart_product_button shk-but"                                                >
                                    <span>Купить</span>
                                </button>
                            </p>
                        </div>
                </div>
            </div>

    </form>
            </center>

        </div>
2
  • Добавь код в вопросе. 17 авг 2017 в 3:16
  • @Владимир , добавил
    – blackish
    17 авг 2017 в 18:02

1 ответ 1

0

Не мудрено, что никто не ответил. Если основательно не заняться этим вопросом, то ответить полноценно не получится в любом случае. Я внедрил парочку костылей и у меня наконец-таки получилось. Во-первых, в коде выше я вызывал один и тот же поп-ап, а нужно было, чтобы у каждого товара была своя модалка и на кнопке ее вызова был анкор с идом модалки. Так уж случилось, что из категории добавляло в корзину не аяксом, а через сабмит, поэтому страница обновлялась и я разметил еще одну модалку с идом "success", в которой предлагается продолжить покупки, либо оформить заказ, иначе после перезагрузки опять выводился поп-ап товара. По поводу параметров товара: так и не удалось вывести функцией, вывел по условиям используемого шаблона сам html-код, грешу на проблемы в сайте, так как я его не создавал, а только дорабатываю. Ниже вылаживаю окончательный код для моего случая, но если разобраться, то можно и себе сделать. Стили модалки:

<style>.modal2{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:10000;-webkit-transition:opacity 500ms ease-in;-moz-transition:opacity 500ms ease-in;transition:opacity 500ms ease-in;opacity:0;pointer-events:none;}
.modal2:target{opacity:1;pointer-events:auto;}
.modal2 > div{width:400px;background:#ffffff;position:relative;margin:10% auto;-webkit-animation:minimise 500ms linear;padding:30px;-moz-border-radius:7px;border-radius:7px;-webkit-box-shadow:0 3px 20px rgba(0,0,0,0.9);-moz-box-shadow:0 3px 20px rgba(0,0,0,0.9);box-shadow:0 3px 20px rgba(0,0,0,0.9);text-shadow:0 1px 0 #fff;}
.modal2:target > div{-webkit-animation-name:bounce;}
.modal2 h2{font-size:36px;padding:0 0 20px;}
@-webkit-keyframes bounce{0%{-webkit-transform:scale3d(0.1,0.1,1);-webkit-box-shadow:0 3px 20px rgba(0,0,0,0.9);}
55%{-webkit-transform:scale3d(1.08,1.08,1);-webkit-box-shadow:0 10px 20px rgba(0,0,0,0);}
75%{-webkit-transform:scale3d(0.95,0.95,1);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.9);}
100%{-webkit-transform:scale3d(1,1,1);-webkit-box-shadow:0 3px 20px rgba(0,0,0,0.9);}
}
@-webkit-keyframes minimise{0%{-webkit-transform:scale3d(1,1,1);}
100%{-webkit-transform:scale3d(0.1,0.1,1);}
}
.modal2 a.close2{position:absolute;right:0;top:0;color:transparent;}
.modal2 a.close2:focus{outline:none;}
.modal2 a.close2:after{content:'X';display:block;position:absolute;right:-10px;top:-10px;width:20px;padding:1px 1px 1px 2px;text-decoration:none;text-shadow:none;text-align:center;font-weight:bold;background:#000;color:#ffffff;border:3px solid #ffffff;-moz-border-radius:20px;border-radius:20px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.5);box-shadow:0 1px 3px rgba(0,0,0,0.5);}
.modal2 a.close2:focus:after,
.modal2 a.close2:hover:after{-webkit-transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);}
.modal2 a.close2:focus:after{outline:0px solid #000;}
a.openModal{}
a.openModal:hover,
a.openModal:focus{}
.modal2 .modal_title{display:block;text-align:center;font-size:22pt;}
</style>

Что я разместил в футере(success модалка):

<div id="success" class="modal2">
<div>
   <div class="text" align="center">
   <span class="layered_subtitle" style="text-align:center;">Товар успешно добавлен в корзину!</span><br><br><br>   
                <a href="http://site.com/path/#close" class="btn btn-default shk-but">Продолжить покупки</a>                
<a class="btn btn-default shk-but" href="/order.html">Оформить заказ</a>
</div>
    <a class="close2" href="http://site.com/path/#close" title="Закрыть">Закрыть</a>
</div>
</div>

Теперь модификация исходного кода в моем вопросе(чуть ниже я его дополнительно разберу):

 <div id="add_to_cart_product_page_button">
                        <p class="buttons_bottom_block no-print text-center">
                            <a href="[!path!]#[+id+]" onclick="$('body').css('overflow', 'hidden');" style="background:#4b9ec3!important;color: #fff;padding: 10px;height:auto;"
                                    class="btn btn-default ajax_add_to_cart_product_button shk-but" >
                                <span>Купить</span>
                            </a>
                        </p>
                    </div>


  </div>
    <div class="hiddenBox">

        <div class="one-box">
            <span class="availability">
                [[if?is=`[+product_status+]:=:<span class="in-stock">Наличие по тел.</span>` &then=`<span class="label-default">[+product_status+]</span>`]]
                [[if?is=`[+product_status+]:=:<span class="insale">В наличии</span>` &then=`<span class="label-success">[+product_status+]</span>`]]
                [[if?is=`[+product_status+]:=:<span class="outsale">Под заказ</span>` &then=`<span class="label-warning">[+product_status+]</span>`]]
            </span>
        </div>
    </div>
</div>
</div>


<div class="modal2" id="[+id+]">
<div>


<center>
<form action="[!path!]#success" method="post">
    <div class="content_prices clearfix">
        <div style="font-size:22px;" class="all-price-info">
               <span id="our_price_display" itemprop="price"
                     content="[+price+]">Цена: <span  class="shk-price">[+price+]</span> грн.
                    </span>

                <meta content="грн."/>

        </div>

        <div class="clear"></div>
    </div>
    <div class="product_actions">
        <input type="hidden" name="shk-id" value="[+id+]" />
        <input type="hidden" name="shk-count" value="1" size="2" maxlength="3" />
        <div class="product_attributes clearfix">

                <div class="clearfix"></div>

               [[if?is=`[+template+]:=:8` &then=`
<br><p><span style="font-weight:700;">Выберите комплектацию</span></p>
<fieldset class="attribute_fieldset">
                            <label class="attribute_label">Размер двери</label>
                            <div class="attribute_list">

<select class="addparam form-control" name="entrance_door_size__1535" onchange="$.additOpt(this)">
<option value="0__"></option>
<option value="1__">Дверной блок 2050*870 мм. (+ 0 грн.)</option>
<option value="2__350">Дверной блок 2050*970 (+333 грн.)</option>      </select>

                            </div>
                        </fieldset>
                        <fieldset class="attribute_fieldset">
                            <label class="attribute_label">Открывание дверей</label>
                            <div class="attribute_list">

<select class="addparam form-control" name="entrance_door_opening__1535" onchange="$.additOpt(this)">
<option value="0__"></option>
<option value="1__">Левое открывание (+ 0 грн.)</option>
<option value="2__">Правое открывание (+0 грн.)</option></select>

                            </div>
                        </fieldset>
                        <fieldset class="attribute_fieldset">
                            <label class="attribute_label">Монтаж</label>
                            <div class="attribute_list">

<select class="addparam form-control" name="entrance_door_installation__1535" onchange="$.additOpt(this)">
<option value="0__"></option>
<option value="1__">Монтаж в Киеве бесплатно</option></select>

                            </div>
                        </fieldset>
`]]
                [[if?is=`[+template+]:=:5` &then=`
<br><p><span style="font-weight:700;">Выберите комплектацию</span></p>
<fieldset class="attribute_fieldset">
                            <label class="attribute_label">Полотно</label>
                            <div class="attribute_list">

<select class="addparam form-control" name="interior_door_leaf__1241" onchange="$.additOpt(this)">
<option value="0__00">Полотно 600x2000 мм</option>
<option value="1__00">Полотно 700x2000 мм</option>
<option value="2__00">Полотно 800x2000 мм</option>
<option value="3__00">Полотно 900x2000 мм</option></select>

                            </div>
                        </fieldset>
                        <fieldset class="attribute_fieldset">
                            <label class="attribute_label">Коробка</label>
                            <div class="attribute_list">

<select class="addparam form-control" name="interior_door_frame__1241" onchange="$.additOpt(this)">
<option value="0__"></option>
<option value="1__327">Дверная коробка 80 мм. дерево (+327 грн.)</option>
<option value="2__356">Дверная коробка 100 мм.дерево. (+356   грн.)</option>
<option value="3__402">Дверная коробка 80 мм. дерево с упл. (+402 грн.)</option>
<option value="4__431">Дверная коробка 100 мм. дерево с упл. (+431 грн.)</option></select>

                            </div>
                        </fieldset>
                        <fieldset class="attribute_fieldset">
                            <label class="attribute_label">Наличники</label>
                            <div class="attribute_list">

<select class="addparam form-control" name="interior_door_trim__1241" onchange="$.additOpt(this)">
<option value="0__"></option>
<option value="1__210">Односторонний наличник 3 шт. (+210 грн.)</option>
<option value="2__420">Двусторонний наличник 5 шт. (+420 грн.)</option></select>

                            </div>
                        </fieldset>
                        <fieldset class="attribute_fieldset">
                            <label class="attribute_label">Доборная доска  <a href="/articles/dobornaya-doska-dvernoj-ogranichitel-chto-eto-takoe.html" target="_blank" title="Что это?" alt="Что это?">?</a></label>
                            <div class="attribute_list">

<select class="addparam form-control" name="interior_door_d_board__1241" onchange="$.additOpt(this)">
<option value="0__"></option>
<option value="1__270">Доборная доска 120 мм. (+270 грн.)</option>
<option value="2__305">Доборная доска 150 мм. (+305  грн.)</option>
<option value="3__430">Доборная доска 250 мм. (+430 грн.)</option>  </select>

                            </div>
                        </fieldset>
                        <fieldset class="attribute_fieldset">
                            <label class="attribute_label">Монтаж</label>
                            <div class="attribute_list">

<select class="addparam form-control" name="interior_door_installation__1241" onchange="$.additOpt(this)">
<option value="0__"></option>
<option value="1__390">Монтаж в Киеве (+390 грн.*)</option></select>

                            </div>
                        </fieldset>
`]]
            </div>

            <div class="clearfix">
                    <p id="quantity_wanted_p">
                       <br> <label for="quantity_wanted">Количество</label><input type="hidden" name="shk-id" value="[+id+]" />&nbsp;&nbsp;<input type="text" style="width:40px;text-align:center;" class="text" id="quantity_wanted"  name="shk-count" value="1" maxlength="5">

                        <span class="clearfix"></span>
                    </p>
                    <div id="add_to_cart_product_page_button">
                        <p class="buttons_bottom_block no-print">
                            <button type="submit" name="shk-submit" class="btn btn-default ajax_add_to_cart_product_button shk-but"                                      >
                                <span>Купить</span>
                            </button>
                        </p>
                    </div>
 <a onclick="$('body').css('overflow', 'visible');" class="close2" href="[!path!]#close" title="Закрыть">Закрыть</a>
            </div>
        </div>

</form>
        </center>

[!path!] - так как у меня листинг отдельно от категории, а в категории просто вызывается, то [~[+id+]~] как вывод ссылки не прокатывал(выводил ссылку на товар, а надо было на текущую страницу), это сниппет, который php-кодом выводит домен и request_uri. при выводе выбора параметров в зависимости от шаблона товара(их было 2), выводились разные опции, опции скопированы из исходного кода ctrl+u на странице товара. в общем, ребят, костыльно, но работает. можете обращаться по похожей проблеме, так как я с ней запарился, то и вам бы подсказал, так как жалко время)

модальное окно быстрого просмотра товара модальное окно успешного добавления в корзину

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.