Тема: Смена многомерных комплектаций во всплывающем окне.

Здравствуйте.

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

Скажите, так и должно быть, или здесь какая-то ошибка?

Повысить оценку Понизить оценку

Re: Смена многомерных комплектаций во всплывающем окне.

А какой товар в демо у нас не менял артикул и в какой теме Вы смотрели?

3

Re: Смена многомерных комплектаций во всплывающем окне.

Во всех темах проверял.
Например, в этой категории - http://middle.readyscript.ru/catalog/odezhda-obuv/ ни один не меняет.

Повысить оценку Понизить оценку

4 Отредактировано Закусило Александр (09.02.2016 13:50:13)

Re: Смена многомерных комплектаций во всплывающем окне.

Я посмотрел Ваш случай и проверил у нас. Да, действительно такая ошибка выявилась, но цена там меняется. Не меняется только артикул. Дело в том, что отрабатывает js плагин из файла jquery.changeoffer.js
А именно функция с именем changeOffer
Она смотрит на выбранную радиокнопки и ищет там data-change-cost, в неё записывается объект со сведениями о ценах и артикуле выбранной комплектации. Прописывается это всё сразу в шаблоне. Исправление выйдет в ближайщем обновлении. Вам же нужно просто заменить

data-change-cost='{ ".myCost": "{$product->getCost(null, $key)}", ".lastPrice": "{$product->getOldCost($key)}"}'

На

data-change-cost='{ ".offerBarcode": "{$offer.barcode|default:$product.barcode}", ".myCost": "{$product->getCost(null, $key)}", ".lastPrice": "{$product->getOldCost($key)}"}'

offerBarcode - класс селектора с артикулом товара.

Правки выйдут в ближайшем обновлении.

5

Re: Смена многомерных комплектаций во всплывающем окне.

Вы не поверите, но у меня это есть. Вот мой инпут:

<input value="{$key}" type="hidden" name="hidden_offers" class="hidden_offers" {if $smarty.foreach.offers.first}checked{/if} id="offer_{$key}" data-info='{$offer->getPropertiesJson()}' {if $check_quantity}data-num="{$offer.num}"{/if} data-change-cost='{ ".offerBarcode": "{$offer.barcode|default:$product.barcode}", ".myCost": "{$product->getCost(null, $key)}", ".lastPrice": "{$product->getCost('Зачеркнутая цена', $key)}"}' data-images='{$offer->getPhotosJson()}' data-sticks='{$offer->getStickJson()}'/>

Я сейчас еще разок все проверю, может это я где-то ошибся...

Повысить оценку Понизить оценку

6 Отредактировано Закусило Александр (09.02.2016 17:06:19)

Re: Смена многомерных комплектаций во всплывающем окне.

вы не туда смотрите. Смотрите ниже data-change-cost

7

Re: Смена многомерных комплектаций во всплывающем окне.

Я все проверил и похоже на то, что не работает JS из плагина changeoffers в модале. Да и вообще никакой JS, кроме того, который написан в теле модала, не отрабатывает. Похоже, что надо или JS'ом, или через Smarty подгружать необходимые в модале скрипты. Но {addjs}, не работает в модале, что, кстати, не удивительно...

Я не понимаю, почему не отрабатывает JS событие заданное через $.on()? Этот метод, по-моему, специально для таких модалов и всяких появляющихся элементов был разработан ($.live() помните?).

Уверен, что вы мне подскажете самый быстрый вариант из возможных))

Повысить оценку Понизить оценку

8

Re: Смена многомерных комплектаций во всплывающем окне.

В инпуте есть data-change-cost, посмотрите внимательнее

 <input value="{$key}" type="hidden" name="hidden_offers" class="hidden_offers" {if $smarty.foreach.offers.first}checked{/if} id="offer_{$key}" data-info='{$offer->getPropertiesJson()}' {if $check_quantity}data-num="{$offer.num}"{/if} [b]data-change-cost[/b]='{ ".offerBarcode": "{$offer.barcode|default:$product.barcode}", ".myCost": "{$product->getCost(null, $key)}", ".lastPrice": "{$product->getCost('Зачеркнутая цена', $key)}"}' data-images='{$offer->getPhotosJson()}' data-sticks='{$offer->getStickJson()}'/>

Повысить оценку Понизить оценку

Re: Смена многомерных комплектаций во всплывающем окне.

hidden_offers в вашем случае не используется, используется конструкция ниже. А именно:

{elseif $product->isOffersUse()}
                {* Простые комплектации *}
                <div class="packages">
                    <div class="package">
                        <span class="pname">{$product.offer_caption|default:'Комплектация'}</span>
                        <div class="values">
                            {if count($product.offers.items)>5}
                                <select name="offer">
                                    {foreach from=$product.offers.items key=key item=offer name=offers}
                                    <option value="{$key}" {if $smarty.foreach.offers.first}checked{/if} {if $check_quantity}data-num="{$offer.num}"{/if} data-change-cost='{ ".myCost": "{$product->getCost(null, $key)}", ".lastPrice": "{$product->getOldCost($key)}"}' data-images='{$offer->getPhotosJson()}' data-sticks='{$offer->getStickJson()}'>{$offer.title}</option>
                                    {/foreach}
                                </select>
                            {else}
                                {foreach from=$product.offers.items key=key item=offer name=offers}
                                    <div class="packageItem">
                                        <input value="{$key}" type="radio" name="offer" {if $smarty.foreach.offers.first}checked{/if} id="offer_{$key}" {if $check_quantity}data-num="{$offer.num}"{/if} data-change-cost='{ ".myCost": "{$product->getCost(null, $key)}", ".lastPrice": "{$product->getOldCost($key)}"}' data-images='{$offer->getPhotosJson()}' data-sticks='{$offer->getStickJson()}'/>
                                        <label for="offer_{$key}">{$offer.title}</label>
                                    </div>
                                {/foreach}
                            {/if}
                        </div>
                    </div>
                </div><br>
            {/if}

jquery.changeoffer.js у Вас должен подключаться в list_product.tpl - шаблон со списком товаров общий в модуле catalog.

10

Re: Смена многомерных комплектаций во всплывающем окне.

Ниже идут одномерные комплектации, а мы ими пока не пользуемся. Вот весь шаблон:

[spoiler]

{assign var=shop_config value=ConfigLoader::byModule('shop')}
{assign var=check_quantity value=$shop_config.check_quantity}

{*Подгружаем цвета*}
{modulegetvars name="\Colors\Controller\BlockValues" var="colors"}

<div class="authorization formStyle reserveForm complectsPopup">
    <div class="multiComplectations{if !$product->isAvailable()} notAvaliable{/if}{if $product->canBeReserved()} canBeReserved{/if}{if $product.reservation == 'forced'} forcedReserve{/if}" data-id="{$product.id}">
        <div class="row">
            <div class="col-md-24">
                <h1>{$product.title}</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 leftColumn">
                <div class="image">
                    {$main_image=$product->getMainImage()}
                    <img src="{$main_image->getUrl(275, 380)}" class="photo" alt="{$main_image.title|default:"{$product.title}"}"/>
                </div>
            </div>
            <div class="col-md-12 rightColumn">
                <div class="fcost">
                    {*assign var=last_price value=$product->getCost('Зачеркнутая цена')}
                    {if $last_price>0}<div class="lastPrice">{$last_price}</div>{/if*}
                    <span class="myCost">{$product->getCost()} {$product->getCurrency()}</span>
                </div>
                {if $product.barcode}
                    <p class="barcode"><span class="cap">Артикул:</span> <strong class="offerBarcode">{$product.barcode}</strong></p>
                {/if}



                {*<div class="multiOffers">
                        <div class="title">Размер</div>
                        <div class="multiofferBlock multiofferBlock2">
                            <div class="moItem active"><div class="moItemInner">48</div></div>
                            <div class="moItem"><div class="moItemInner">50</div></div>
                            <div class="moItem"><div class="moItemInner">52</div></div>
                            <div class="moItem"><div class="moItemInner">54</div></div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="title">Цвет</div>
                        <div class="multiofferBlock multiofferBlock1">
                            <div class="moItem active"><div class="moItemInner" style="background-color:#fff;background-image: linear-gradient( -45deg, #ff9100 0%, #ff9100 50%, #c78800 50%, #c78800 50%);" title="Коричнево-оранжевый">Коричнево-оранжевый</div></div>
                            <div class="moItem"><div class="moItemInner" style="background-color:#fff;background-image: linear-gradient( -45deg, #ff0000 0%, #ff0000 50%, #ff0000 50%, #ff0000 50%);" title="Красный">Красный</div></div>
                            <div class="moItem"><div class="moItemInner" style="background-color:#fff;background-image: linear-gradient( -45deg, #c4c4c4 0%, #c4c4c4 50%, #c4c4c4 50%, #c4c4c4 50%);" title="Серый">Серый</div></div>
                            <div class="moItem"><div class="moItemInner" style="background-color:#fff;background-image: linear-gradient( -45deg,  0%,  50%,  50%,  50%);" title="Тёмно-бордовый">Тёмно-бордовый</div></div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="title">Мех</div>
                        <div class="multiofferBlock multiofferBlock3">
                            <div class="moItem active"><div class="moItemInner">Енот Grey</div></div>
                            <div class="moItem"><div class="moItemInner">Енот натуральный</div></div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="quantity">Кол-во на складе: <span class="text-success">много</span></div>
                        <div class="clearfix"></div>
                        <div class="toCartWrap">
                            <a data-href="#" class="button showMultiOffers inDialog noShowCart compPopupButt">
                                <img src="/templates/autofashion/resource/img/cart.png" alt="Add to Cart" width="20px" height="20px">
                                <div class="toCartText">
                                    В корзину
                                </div>
                            </a>
                        </div>
                        <div class="clearfix"></div>
                    </div>*}





                <div class="multiOffers">
                    {foreach $product.multioffers.levels as $level}
                        {if !empty($level.values) && $level.title != 'Цвет'}
                            <div class="multiofferTitle">{if $level.title}{$level.title}{else}{$level.prop_title}{/if}</div>
                            {if !$level.is_photo && !isset($level.values_photos)} {* Если отображать не как фото (выпадающим списком)*}
                                <select name="multioffers[{$level.prop_id}]" data-prop-title="{if $level.title}{$level.title}{else}{$level.prop_title}{/if}">
                                    {foreach $level.values as $value}
                                        <option value="{$value.val_str}">{$value.val_str}</option>
                                    {/foreach}
                                </select>
                                <div class="multiofferBlock multiofferBlock{$level.prop_id}">
                                    {foreach $level.values as $value key=i}
                                        <div class="moItem{if $i == 1} active{/if}"><div class="moItemInner">{$value.val_str}</div></div>
                                    {/foreach}
                                </div>
                                <div class="clearfix"></div>
                            {else}
                                <div class="multiOfferValues">
                                    <input type="hidden" name="multioffers[{$level.prop_id}]" data-prop-title="{if $level.title}{$level.title}{else}{$level.prop_title}{/if}"/>
                                    {foreach $level.values as $value}
                                        {if isset($level.values_photos[$value.val_str])}
                                            <a class="multiOfferValueBlock {if $value@first}sel{/if}" data-value="{$value.val_str}" title="{$value.val_str}"><img src="{$level.values_photos[$value.val_str]->getUrl(40,40,'axy')}"/></a>
                                        {else}
                                            <a class="multiOfferValueBlock likeString {if $value@first}sel{/if}" data-value="{$value.val_str}" title="{$value.val_str}">{$value.val_str}</a>
                                        {/if}
                                    {/foreach}
                                </div>
                            {/if}
                        {else if !empty($level.values) && $level.title == 'Цвет'}
                            <div class="multiofferTitle">{if $level.title}{$level.title}{else}{$level.prop_title}{/if}</div>
                            <select name="multioffers[{$level.prop_id}]" data-prop-title="{if $level.title}{$level.title}{else}{$level.prop_title}{/if}">
                                {foreach $level.values as $value}
                                    <option value="{$value.val_str}">{$value.val_str}</option>
                                {/foreach}
                            </select>
                            <div class="multiofferBlock multiofferBlock{$level.prop_id}">
                                {foreach $level.values as $value key=i}
                                    <div class="moItem{if $i == 1} active{/if}"><div class="moItemInner" style="background-color:#fff;background-image: linear-gradient( -45deg, {$colors.colors[$value.val_str].color2} 0%, {$colors.colors[$value.val_str].color2} 50%, {$colors.colors[$value.val_str].color1} 50%, {$colors.colors[$value.val_str].color1} 50%);" title="{$value.val_str}">{$value.val_str}</div></div>
                                {/foreach}
                            </div>
                            <div class="clearfix"></div>
                        {/if}
                    {/foreach}
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-24">
                <div class="information">
                {if $product.description}
                    <p class="descr">{$product.description|strip_tags|teaser:510}</p>
                {/if}
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
            <div class="leftColumn" style="display: none;">
            {if $product->isMultiOffersUse()}
                {* Многомерные комплектации *}
                <!-- <span class="pname">{$product.offer_caption|default:'Комплектация'}</span> -->
                {* Подгрузим у многомерных комплектаций фото к их вариантам *}
                {$product->fillMultiOffersPhotos()}
                {* Переберём доступные многомерные комплектации *}
                <div class="multiOffers">
                </div>
                {if $product->isOffersUse()}
                    {foreach from=$product.offers.items key=key item=offer name=offers}
                        <input value="{$key}" type="hidden" name="hidden_offers" class="hidden_offers" {if $smarty.foreach.offers.first}checked{/if} id="offer_{$key}" data-info='{$offer->getPropertiesJson()}' {if $check_quantity}data-num="{$offer.num}"{/if} data-change-cost='{ ".offerBarcode": "{$offer.barcode|default:$product.barcode}", ".myCost": "{$product->getCost(null, $key)}", ".lastPrice": "{$product->getCost('Зачеркнутая цена', $key)}"}' data-images='{$offer->getPhotosJson()}' data-sticks='{$offer->getStickJson()}'/>
                    {/foreach}

                    <input type="hidden" name="offer" value="0"/>
                {/if}
            {elseif $product->isOffersUse()}
                {* Простые комплектации *}
                <div class="packages">
                    <div class="package">
                        <span class="pname">{$product.offer_caption|default:'Комплектация'}</span>
                        <div class="values">
                            {if count($product.offers.items)>5}
                                <select name="offer">
                                    {foreach from=$product.offers.items key=key item=offer name=offers}
                                    <option value="{$key}" {if $smarty.foreach.offers.first}checked{/if} data-num="{$offer.num}" data-change-cost='{ ".myCost": "{$product->getCost(null, $key)}", ".lastPrice": "{$product->getCost('Зачеркнутая цена', $key)}"}' data-images='{$offer->getPhotosJson()}' data-sticks='{$offer->getStickJson()}'>{$offer.title}</option>
                                    {/foreach}
                                </select>
                            {else}
                                {foreach from=$product.offers.items key=key item=offer name=offers}
                                    <input value="{$key}" type="radio" name="offer" {if $smarty.foreach.offers.first}checked{/if} id="offer_{$key}" data-num="{$offer.num}" data-change-cost='{ ".myCost": "{$product->getCost(null, $key)}", ".lastPrice": "{$product->getCost('Зачеркнутая цена', $key)}"}' data-images='{$offer->getPhotosJson()}' data-sticks='{$offer->getStickJson()}'>
                                    <label for="offer_{$key}">{$offer.title}</label><br>
                                {/foreach}
                            {/if}
                        </div>
                    </div>
                </div>
            {/if}

            <div class="buttons">
                <a data-href="{$router->getUrl('shop-front-reservation', ["product_id" => $product.id])}" class="button reserve inDialog">Заказать</a>
                <span class="unobtainable">Нет в наличии</span>
                <a data-href="{$router->getUrl('shop-front-cartpage', ["add" => $product.id])}" class="button addToCart noShowCart">В корзину</a>
            </div>
        </div>
    </div>
</div>

{literal}
    <script type="text/javascript">
        $(function() {
            $('[name="offer"]').changeOffer({
                multiOffers: true
            });
            $('.multiComplectations .addToCart').on('click',function(){
                $.colorbox.close();
            });
            // Меняем селекты по нажатию на блок
            $('.moItem').on('click', function() {
                var value = $(this).text();
                $(this).addClass('active').siblings('.moItem').removeClass('active');
                $(this).parent().prev().val(value).trigger('change');
            });
        });

    </script>
{/literal}

[/spoiler]

Нужен спойлер))

Повысить оценку Понизить оценку

Re: Смена многомерных комплектаций во всплывающем окне.

Денис пишет:

Я все проверил и похоже на то, что не работает JS из плагина changeoffers в модале. Да и вообще никакой JS, кроме того, который написан в теле модала, не отрабатывает. Похоже, что надо или JS'ом, или через Smarty подгружать необходимые в модале скрипты. Но {addjs}, не работает в модале, что, кстати, не удивительно...

Я не понимаю, почему не отрабатывает JS событие заданное через $.on()? Этот метод, по-моему, специально для таких модалов и всяких появляющихся элементов был разработан ($.live() помните?).

Уверен, что вы мне подскажете самый быстрый вариант из возможных))

Не нужно всё и так будет работать. live - метод который является depricated, т.е. устаревшим и его уже нет в jquery

12

Re: Смена многомерных комплектаций во всплывающем окне.

jquery.changeoffer.js у Вас должен подключаться в list_product.tpl - шаблон со списком товаров общий в модуле catalog.

так он подключен, просто в colorbox не работает почему-то
зайдите проверьте http://22.groupvm.z8.ru/catalog/dlya-muzhchin/

даже мой код из theme.js не работает

Повысить оценку Понизить оценку

Re: Смена многомерных комплектаций во всплывающем окне.

Не используете $(this).parent().prev()
Логичнее использовать $(this).closest('Класс нужного объекта'), или siblings

14

Re: Смена многомерных комплектаций во всплывающем окне.

Я в курсе, live это и есть on. Я же об этом и говорил.

Повысить оценку Понизить оценку

Re: Смена многомерных комплектаций во всплывающем окне.

theme.js у Вас срабатывает. У Вас в шаблоне используются многомерные комплектации. Поэтому Вам надо посмотреть метод changeMultiOffer.
Попробуйте использовать console.log и вывести для себя, заходит ли в этот метод JS и посмотрите, что у Вас в переменных. Возможно у Вас просто не инициализируются по классам переменные. Попробуйте повыводить их значения с помощью console.log() в Firebug

16

Re: Смена многомерных комплектаций во всплывающем окне.

$(this).parent().prev()

этого кода вообще там не должно быть, он находится здесь http://22.groupvm.z8.ru/templates/autof … s/theme.js
он там и есть, только не работает

сейчас сделаю как вы советуете.

Повысить оценку Понизить оценку

17 Отредактировано Закусило Александр (09.02.2016 17:33:20)

Re: Смена многомерных комплектаций во всплывающем окне.

$('[name="offer"]').changeOffer({
                multiOffers: true
            });

Вам признак  multiOffers: true здесь не нужен. Скрипт всё должен и так подхватить. Можно просто оставить

$('[name="offer"]').changeOffer();

Re: Смена многомерных комплектаций во всплывающем окне.

Денис пишет:

$(this).parent().prev()

этого кода вообще там не должно быть, он находится здесь http://22.groupvm.z8.ru/templates/autof … s/theme.js
он там и есть, только не работает

сейчас сделаю как вы советуете.

Странно, т.к. он приведён в Вашем коде выше с модальным окном в самом низу.

19

Re: Смена многомерных комплектаций во всплывающем окне.

theme.js у Вас срабатывает. У Вас в шаблоне используются многомерные комплектации. Поэтому Вам надо посмотреть метод changeMultiOffer.

такого метода нет(
http://yowish.yellowmarker.ru/shutter.png

или я не там ищу? или у меня theme.js старый


Вам признак  multiOffers: true здесь не нужен. Скрипт всё должен и так подхватить. Можно просто оставить

Я просто попробовал.

Странно, т.к. он приведён в Вашем коде выше с модальным окном в самом низу.

Код там появился именно потому, что не работает из theme.js

Там и пара кусков закомментированных есть, я не стал чистить для полноты картины.

PS Ну и проблема же фотку добавить у вас, может drop-область привязать прямо слева от textarea?

Повысить оценку Понизить оценку

Re: Смена многомерных комплектаций во всплывающем окне.

Вам нужен файл jquery.changeoffer.js

21

Re: Смена многомерных комплектаций во всплывающем окне.

Вам нужен файл jquery.changeoffer.js

Для проверки отключил свой JS, оставил только ваш, и все равно, смена комплектаций не работает в модальном окне.

В итоге, после 2,5 часов дебага я выяснил, что ошибка действительно, в jquery.changeoffer.js, а именно в этой функции во вложенных циклах, я пометил:

changeMultiOffer = function (){
                var context = $this.closest(data.options.context);

                var selected = []; //Массив, что выбрано
                //Соберём информацию, что изменилось
                $(data.options.multiOfferName,context).each(function(i){
                    selected[i]          = {};
                    selected[i]['title'] = $(this).data('propTitle');
                    selected[i]['value'] = $(this).val();
                });

                //Найдём инпут с комплектацией
                var input_info = data.options.multiOffersInfo;
                var offer      = false; //Cпрятанная комплектация, которую мы выбрали

                for(var j=0;j<input_info.length;j++){
                    var info = input_info[j]['info']; //Группа с информацией
                    // console.log("input_info", input_info[j]);
                    var found = 0;                //Флаг, что найдены все совпадения
                    for(var m=0;m<info.length;m++){
                        for(var i=0;i<selected.length;i++){
                           if ((selected[i]['title']==info[m][0])&&(selected[i]['value']==info[m][1])){
                               found++;
                                // console.log("found", found);
                                // console.log("selected_match", selected[i]);
                           }
                        }
                        if (found==selected.length){ //Если удалось найди совпадение, то выходим
                            offer = input_info[j]['id'] // ВОТ ЗДЕСЬ ДАННЫЕ НЕКОРРЕКТНЫЕ ВЫНИМАЮТСЯ
                            // console.log("compl", selected[i]);
                            break;
                        }
                    }
                }

                //Отметим выбранную комплектацию
                var offer_val = 0;
                if (offer){ // Если комплектация выбранная присутствует
                   offer_val = $(offer).val();
                   $(data.options.theOffer,context).val(offer_val);
                }else{ // Если комплектации такой не нашлось, выберем нулевую компл.
                   $(data.options.theOffer,context).val(offer_val);
                }

                //Добавим параметр комплектаций к ссылке купить в 1 клик, если купить в 1 клик присутствует
                if ($(data.options.buyOneClick,context).length>0){
                   var clickHref = $(data.options.buyOneClick,context).data('href').split('?'); //Получим урл
                   //Соберём информацию что выбрано из многомерных
                   var multi_selected = [];
                   $(selected).each(function(i){
                       multi_selected.push('multioffers[]='+encodeURIComponent(selected[i]['title'])+": "+encodeURIComponent(selected[i]['value']));
                   });
                   multi_selected = multi_selected.join('&');
                   //Запишем урл
                   $(data.options.buyOneClick,context).data('href',clickHref[0]+"?"+multi_selected);
                }

                $(data.options.offerProperty).addClass(data.options.hiddenClass);
                $(data.options.offerProperty+'[data-offer="'+offer_val+'"]').removeClass('hidden');

                //Поменяем цену за комплектацию
                var dataCost = $(offer).data('changeCost');
                for(var i in dataCost){
                    $(i,context).html(dataCost[i]);
                }


                //Сменим единицу измерения, если нужно
                if ((typeof($(offer).data('unit'))!='undefined') && ($(offer).data('unit')!="")){
                   $(data.options.unitBlock,context).show();
                   $(data.options.unitBlock+" .unit",context).text($(offer).data('unit'));
                }else{
                   $(data.options.unitBlock,context).hide();
                }

                //Показываем фото комплектаций
                if ($(data.options.hiddenOffersName+"[value='"+offer_val+"']",context).length>0){
                    $selected = $(data.options.hiddenOffersName+"[value='"+offer_val+"']",context);
                    showOfferPhotos($selected);
                }

                //Покажем наличие товара после выбора комплектации
                showAvailability(offer_val);
            },

Еще проблема, что мой имеющийся рабочий (на странице товара) JS код, который инициализирует смену селекта (и комплектации соотв.) по клику на квадратик не работает в модальном окне. Это как раз тот код, по которому вы делали мне замечания.

$('.moItem').on('click', function() {
                var value = $(this).text();
                $(this).addClass('active').siblings('.moItem').removeClass('active');
                $(this).parent().closest('[name^="multioffers["]').val(value).trigger('change');
            });

Повысить оценку Понизить оценку

22 Отредактировано Закусило Александр (10.02.2016 11:58:34)

Re: Смена многомерных комплектаций во всплывающем окне.

Ну в шаблоне по умолчанию вроде у нас всё работает. Попробуйте, свой шаблон убрать и отобразить, тот что должен по умолчанию.
значения которые вы указали
Назначаются в этом коде

$(data.options.hiddenOffersName,context).each(function(i){

Попробуйте его подебажить, может у Вас что-то не то выбирается.
И на всякий случай Возьмите ещё код jquery.changeoffer.js из дефолтной темы.

Что касается Вашего кода. Ваших ссылках записать во первых в data id(идентификатор) выпадающего списка, который реализует отображение вариантов с выбором, тогда можно считать точный селектор того выпадающего списка. И в другой data записать значение, которое нужно выбрать из этого списка. Т.е. при нажатии на вашу ссылку, вы сразу знаете какой выпадающий список и его значение нужно применить. Применяете это значение к селекту и уже у него вызываете событие change. Тогда код по идее точно отработает. Возможно, что вы просто не тому селекту присваиваете значения.
Попробуйте покосолеложить выбранные селекты.

Re: Смена многомерных комплектаций во всплывающем окне.

Получилось?

24

Re: Смена многомерных комплектаций во всплывающем окне.

Да, получилось, проблема была в следующем:

{* Многомерные комплектации *}
<span class="pname">{$product.offer_caption|default:'Комплектация'}</span>
{* Подгрузим у многомерных комплектаций фото к их вариантам *}
{$product->fillMultiOffersPhotos()}
{* Переберём доступные многомерные комплектации *}
<div class="multiOffers">
    {foreach $product.multioffers.levels as $level}
        {if !empty($level.values)}
            <div class="title">{if $level.title}{$level.title}{else}{$level.prop_title}{/if}</div>
====>    {if !$level.is_photo && !isset($level.values_photos)} {* Если отображать не как фото (выпадающим списком)*}
                <select name="multioffers[{$level.prop_id}]" data-prop-title="{if $level.title}{$level.title}{else}{$level.prop_title}{/if}">
                    {foreach $level.values as $value}
                        <option value="{$value.val_str}">{$value.val_str}</option>   
                    {/foreach}
                </select>
            {else} {* Как фото *}
                <div class="multiOfferValues">
                    <input type="hidden" name="multioffers[{$level.prop_id}]" data-prop-title="{if $level.title}{$level.title}{else}{$level.prop_title}{/if}"/>
                    {foreach $level.values as $value}
                        {if isset($level.values_photos[$value.val_str])}
                            <a class="multiOfferValueBlock {if $value@first}sel{/if}" data-value="{$value.val_str}" data-image="{$level.values_photos[$value.val_str]->getUrl(310,310,'axy')}" data-is-dialog="1" title="{$value.val_str}"><img src="{$level.values_photos[$value.val_str]->getUrl(30,30,'axy')}"/></a>
                        {else}
                            <a class="multiOfferValueBlock likeString {if $value@first}sel{/if}" data-value="{$value.val_str}" data-is-dialog="1" title="{$value.val_str}">{$value.val_str}</a>
                        {/if}
                    {/foreach}
                </div>
            {/if}
        {/if}
    {/foreach}
</div>
{if $product->isOffersUse()}
    {foreach from=$product.offers.items key=key item=offer name=offers}
        <input value="{$key}" type="hidden" name="hidden_offers" class="hidden_offers" {if $smarty.foreach.offers.first}checked{/if} id="offer_{$key}" data-info='{$offer->getPropertiesJson()}' {if $check_quantity}data-num="{$offer.num}"{/if} data-change-cost='{ ".offerBarcode": "{$offer.barcode|default:$product.barcode}", ".myCost": "{$product->getCost(null, $key)}", ".lastPrice": "{$product->getOldCost($key)}"}' data-images='{$offer->getPhotosJson()}' data-sticks='{$offer->getStickJson()}'/>
    {/foreach}
    
    <input type="hidden" name="offer" value="0"/>
{/if}

Где стрелка - там показывается комплектация цвет, а называется фото. Хотя у вас в документации http://readyscript.ru/dev-manual/dev_co … v_code_var написано:

Имя переменной должно отражать суть её содержимого.

Я не был в курсе, что photo - это цвет, а наш макет не подразумевает фотографий в месте смены комплектаций (у нас просто квадраты), и поэтому, в первый раз, я сделал вот так:

<div class="multiOffers">
    {foreach $product.multioffers.levels as $level}
        {if !empty($level.values) && $level.title != 'Цвет'}
            <div class="multiofferTitle">{if $level.title}{$level.title}{else}{$level.prop_title}{/if}</div>
            {if !$level.is_photo && !isset($level.values_photos)} {* Если отображать не как фото (выпадающим списком)*}
                <select name="multioffers[{$level.prop_id}]" data-prop-title="{if $level.title}{$level.title}{else}{$level.prop_title}{/if}">
                    {foreach $level.values as $value}
                        <option value="{$value.val_str}">{$value.val_str}</option>
                    {/foreach}
                </select>
                <div class="multiofferBlock multiofferBlock{$level.prop_id}">
                    {foreach $level.values as $value key=i}
                        <div class="moItem{if $i == 1} active{/if}"><div class="moItemInner">{$value.val_str}</div></div>
                    {/foreach}
                </div>
                <div class="clearfix"></div>
            {else}
                <div class="multiOfferValues">
                    <input type="hidden" name="multioffers[{$level.prop_id}]" data-prop-title="{if $level.title}{$level.title}{else}{$level.prop_title}{/if}"/>
                    {foreach $level.values as $value}
                        {if isset($level.values_photos[$value.val_str])}
                            <a class="multiOfferValueBlock {if $value@first}sel{/if}" data-value="{$value.val_str}" title="{$value.val_str}"><img src="{$level.values_photos[$value.val_str]->getUrl(40,40,'axy')}"/></a>
                        {else}
                            <a class="multiOfferValueBlock likeString {if $value@first}sel{/if}" data-value="{$value.val_str}" title="{$value.val_str}">{$value.val_str}</a>
                        {/if}
                    {/foreach}
                </div>
            {/if}
        {else if !empty($level.values) && $level.title == 'Цвет'}
            <div class="multiofferTitle">{if $level.title}{$level.title}{else}{$level.prop_title}{/if}</div>
            <select name="multioffers[{$level.prop_id}]" data-prop-title="{if $level.title}{$level.title}{else}{$level.prop_title}{/if}">
                {foreach $level.values as $value}
                    <option value="{$value.val_str}">{$value.val_str}</option>
                {/foreach}
            </select>
            <div class="multiofferBlock multiofferBlock{$level.prop_id}">
                {foreach $level.values as $value key=i}
                    <div class="moItem{if $i == 1} active{/if}"><div class="moItemInner" style="background-color:#fff;background-image: linear-gradient( -45deg, {$colors.colors[$value.val_str].color2} 0%, {$colors.colors[$value.val_str].color2} 50%, {$colors.colors[$value.val_str].color1} 50%, {$colors.colors[$value.val_str].color1} 50%);" title="{$value.val_str}">{$value.val_str}</div></div>
                {/foreach}
            </div>
            <div class="clearfix"></div>
        {/if}
    {/foreach}
</div>

Сейчас все нормально, спасибо за подсказки.

Но с JS вы "здорово" придумали. Посмотрите на код - у меня там дублируется цикл и таким образом генерирует значение, так что мне его не нужно получать, оно априори есть в $(this). В итоге - это было последнее, исправление. Поменял обратно на prev(), тк как closest() начистую отказался работать.
Кстати, а чем вас prev() не устраивает? По-моему, хороший метод. Сам не проверял, но по логике, должен работать в разы быстрее чем closest() так как объекты на prev и next у каждого объекта jquery при инициализации прописываются.

Скажите, а предусмотрена ли (или может в планах) такая вещь, как скрытие пустых комплектаций (с 0 остатком)? Чтобы при смене, например, цвета, менялся и список остальных свойств, в зависимости от наличия на складе.

И еще вопрос - у вас в демках и в моей теме тоже остатки отображаются стиками, индикатором, возможно ли как то быстро отказаться от этой системы, и выводить остатки обычным числом?

Повысить оценку Понизить оценку

Re: Смена многомерных комплектаций во всплывающем окне.

Где стрелка - там показывается комплектация цвет, а называется фото.

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


Кстати, а чем вас prev() не устраивает? По-моему, хороший метод. Сам не проверял, но по логике, должен работать в разы быстрее чем closest() так как объекты на prev и next у каждого объекта jquery при инициализации прописываются.

Дело в том, что prev и next это неточные обращения. Особенно если, кто-то захочет поменять вёрстку, то надо будет и javascript Ваш менять, и несколько раз допустим прописывать ещё prev prev prev. А если обращаться по идентификатору, как указано выше или через closest, то можно имея класс или идентификатор сразу обратиться к нужному элементу, не особо следя за вёрсткой.

Скажите, а предусмотрена ли (или может в планах) такая вещь, как скрытие пустых комплектаций (с 0 остатком)? Чтобы при смене, например, цвета, менялся и список остальных свойств, в зависимости от наличия на складе.

Да, в этом году поставлено задачей.

И еще вопрос - у вас в демках и в моей теме тоже остатки отображаются стиками, индикатором, возможно ли как то быстро отказаться от этой системы, и выводить остатки обычным числом?

Можно. Но нужно немного допилить js и вёрстку. Остатки по складам, присутствуют у каждой комплектации. Догрузить из можно с помощью двух методов у объекта товара

$full_stock=$product->getWarehouseFullStock() - остатки общие для комплектациям по складам

и

$offers_stock=$product->getWarehouseStock() - остатки по складам и комплектациям

Плюс у комплектаций есть поле num с общим остатком по складам.

Т.е. можно при смене комплектации например брать num и подставлять в каждый нужный класс отображения.

Товар также обладает полем num - общий остаток по всем складам.