Как использовать msOptionsPrice2 для управления ценами и характеристиками товаров

Содержание

Краткий видео обзор
Зачем нужно расширенное управление ценами и опциями в miniShop2?
Настройка и интеграция msOptionsPrice2
Подготовка
Покупка и установка плагина
Настройка плагина
Создание модификаций
Вывод модификаций на карточке товара
Вывод модификаций в товарной категории
Письма, корзина и т.д.
Заключение

Краткий видео обзор

Зачем нужно расширенное управление ценами и опциями в miniShop2?

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

Примером может служить интернет-магазин одежды, где стоимость футболки зависит от размера и цвета или магазин электроники, где стоимость гаджета будет зависеть, от объема памяти и прочих доп. функции. При стандартной настройке miniShop2 для каждой комбинации нужно создавать отдельный товар, что сильно усложняет управление каталогом. msOptionsPrice2 позволяет привязать изменение цены к конкретным опциям, что значительно упрощает процесс и улучшает пользовательский опыт.

Настройка и интеграция msOptionsPrice2

Подготовка

Т.к. дополнение msOptionsPrice2 тесно интегрируется с miniShop2, убедитесь в том что ваш магазин / каталог работает именно на нем.

Покупка и установка плагина

Смотрите: как покупать и устанавливать платные дополнения с modstore.pro.

Настройка плагина

Первым делом идем в «Системные настройки» и выбираем там «msoptionsprice».

Находим опцию: Активные шаблоны (msoptionsprice_working_templates) и указываем там id шаблона товара (ов), id шаблонов товарных категории указывать не нужно.

При необходимости можете перенастроить под себя прочие параметры.

Создание модификаций

После того как вы включили плагин в шаблонах товаров, у вас в карточках товара появится вкладка Модификации. Перейдите в нее и нажмите на кнопку создать:

В сплывающем окошке заполняем данные:

Название. Если заполнить можно подставлять это название в заголовок карточки при выборе опции (я обычно этого не делаю)
Тип. Я всегда работаю с типом =, т.е. товар с этой опцией будет стоять столько, сколько указано в цена
Цена. Соответственно указываем цену.
Старая цена, вес и т.д. заполняйте при необходимости (их так же можно на ленту менять в карточке товара при выборе определенных опций). В моем случае это не требуется

Потом нажимаете на Плюс:

В сплывающем окне «Создать», выбираем опцию

В моем случае это Опция магазина с типом Список с автодополнением

И выбираем значение:

Добавляем и сохраняем модификацию.

Если нет значений, заполните их в карточке товара, сохраните ее и повторите выше приведенные шаги.

Дальше заново повторяем процедуру для других значений, в конечном итогде должен появиться список модификаций.

Вывод модификаций на карточке товара

Первым делом в самом верху в шаблоне продукта подключаем стили и скрипты дополнения. Для этого используйте сниппет msOptionsPrice.initialize. Это обеспечит корректную работу интерфейса модификаций на фронтенде.

[[!msOptionsPrice.initialize]]

Затем нужно добавьте необходимые классы в чанк продукта для отображения модификаций:

форма продукта — msoptionsprice-product (обязательно)
стоимость продукта — msoptionsprice-cost msoptionsprice-[[*id]] (обязательно)
заголовок продукта — msoptionsprice-name msoptionsprice-[[*id]]
артикул продукта — msoptionsprice-article msoptionsprice-[[*id]]
вес продукта — msoptionsprice-mass msoptionsprice-[[*id]]

Вот пример размеченного чанка продукта — gist.github.com/vgrish/b6998560c6a64c0f34109a9e632b9b56

Ну и дальше вывести сами опции, вот так:

[[!msOptionsPrice.option?
       &product=`[[*id]]`
       &options=`dopoption`
       &sortOptions=`ASC`
]]

Соответственно в options пишем ключ опции которую вы использовали при создании модификаций.

Переходим на страницу товара и у вас должны вывестись эти созданные модификации:

Корявенько, нужно допиливать, во первых добавить в лексикон ключ опции:

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

Для того чтобы это реализовать, я создал чанк «msproductoptionproduct», вот с таким содержимым:

{foreach $options as $name => $values}
    {foreach $values as $idx => $value}
    <div class="form_radio_btn">
      <input class="form-check-input" type="radio" name="options[{$name}]" id="option_{$name}_{$idx}" value="{$value}"{if $idx == 0} checked{/if}>
      <label class="form-check-label" for="option_{$name}_{$idx}">
        {$value}
      </label>
      <span class="price">{$price}</span>
    </div>
    {/foreach}
{/foreach}

И соответственно указал в вызове:

[[!msOptionsPrice.option?
        &product=`[[*id]]`
        &options=`dopoption`
        &sortOptions=`ASC`
        &tpl=`msproductoptionproduct`
]]

По большому счету я заменил select на отдельные радиокнопки, если взглянуть на html было изначально (с базовым чанком):

<div class="form-group row align-items-center">
        <label class="col-6 col-md-3 text-right text-md-left col-form-label" for="option_dopoption">Название которое указали в лексиконе:</label>
        <div class="col-6 col-md-9">
            <select name="options[dopoption]" class="form-control col-md-6" id="option_dopoption">
                   <option value="Без покрытия">Без покрытия</option>
                   <option value="С напылением 1мм">С напылением 1мм</option>
                   <option value="С протяжкой 2-3мм">С протяжкой 2-3мм</option>
            </select>
        </div>
</div>

Стало вот так:

<div class="form_radio_btn">
      <input class="form-check-input" type="radio" name="options[dopoption]" id="option_dopoption_0" value="Без покрытия" checked>
      <label class="form-check-label" for="option_dopoption_0">
        Без покрытия      </label>
      <span class="price"></span>
    </div>
        <div class="form_radio_btn">
      <input class="form-check-input" type="radio" name="options[dopoption]" id="option_dopoption_1" value="С напылением 1мм">
      <label class="form-check-label" for="option_dopoption_1">
        С напылением 1мм      </label>
      <span class="price"></span>
    </div>
        <div class="form_radio_btn">
      <input class="form-check-input" type="radio" name="options[dopoption]" id="option_dopoption_2" value="С протяжкой 2-3мм">
      <label class="form-check-label" for="option_dopoption_2">
        С протяжкой 2-3мм      </label>
      <span class="price"></span>
</div>

Ну и соответственно стилизовал данные радиокнопки (превратил визуально в кнопки), при помощи CSS (см. урок: Стилизация чекбоксов). В конечном итоге получилось следующее:

Так же в комплекте идет еще 1 сниппет msOptionsPrice.modification, который выводит модификации вот в таком виде:

Для этого достаточно просто вызвать сниппет: [[!msOptionsPrice.modification]], а в категории вот так

[[!msOptionsPrice.modification? &product_id=`[[*id]]`]]

Вывод модификаций в товарной категории

Вывод модификаций в категориях аналогичен выводу в карточках, вам точно также нужно подключить стили с скрипты в шаблоне категории, вызвав (1 раз) сниппет:

[[!msOptionsPrice.initialize]]

Далее нужно открыть чанк который формирует карточку в листинге, и точно также разметить ее классами, только уже вместо *, использовать +:

форма продукта — msoptionsprice-product (обязательно)
стоимость продукта — msoptionsprice-cost msoptionsprice-[[+id]] (обязательно)
заголовок продукта — msoptionsprice-name msoptionsprice-[[+id]]
артикул продукта — msoptionsprice-article msoptionsprice-[[+id]]
вес продукта — msoptionsprice-mass msoptionsprice-[[+id]]

И точно так же * заменить на + в вызове:

[[!msOptionsPrice.option? &product=`[[+id]]` &options=`dopoption` &sortOptions=`ASC` &tpl=`msproductoptionproduct` ]]

И дальше в зависимости от шаблона:

Может сразу все работать как надо.
Может быть проблема как возникла у меня: при переключении любой радиокнопки, значение цены менялось только у первой, пришлось немного модифицировать чанк (соответственно создал другой), до вот такого формата:

{foreach $options as $name => $values}
    {foreach $values as $idx => $value}
    <div class="form_radio_btn">
      <input class="form-check-input" type="radio" name="options[{$name}]" id="option_{$name}_{$idx}_{$product.id}" value="{$value}"{if $idx == 0} checked{/if}>
      <label class="form-check-label" for="option_{$name}_{$idx}_{$product.id}">
        {$value}
      </label>
      <span class="price">{$price}</span>
    </div>
    {/foreach}
{/foreach}

Фишка для тех кто использует fenom:

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

<div class="ms2_product col-lg-4 col-sm-6 mb-5 mb-md-3 product" itemtype="http://schema.org/Product" itemscope>
    <meta itemprop="description" content="{$description = $description ?: $pagetitle}">
    <form method="post" class="card tovars-card ms2_form msoptionsprice-product">
		<input type="hidden" name="id" value="{$id}">
		<input type="hidden" name="count" value="1">
		<input type="hidden" name="options" value="[]">
        <a href="{$id | url}">{if $thumb?}<img src="{$thumb}" class="card-img-top" alt="{$pagetitle}" itemprop="image"/>{else}
            <img src="{'assets_url' | option}components/minishop2/img/web/ms2_small.png" srcset="{'assets_url' | option}components/minishop2/img/web/ms2_small@2x.png 2x" class="card-img-top" alt="{$pagetitle}"/>
            {/if}</a>
            <div class="card-body" itemtype="http://schema.org/AggregateOffer" itemprop="offers" itemscope>
                <meta itemprop="category" content="{$parent | resource: "pagetitle"}">
                <meta itemprop="name" content="{$pagetitle}">
                <meta itemprop="offerCount" content="1">
                <meta itemprop="price" content="{$price | replace:" ":""}">
                <meta itemprop="lowPrice" content="{$price | replace:" ":""}">
                <meta itemprop="priceCurrency" content="RUR">
                <div class="card-text">
                    <a href="{$id | url}" class="h5 card-title msoptionsprice-name msoptionsprice-{$id}">{$pagetitle}</a>
                </div>
                <hr>
    {set $OptionsPrice = '!msOptionsPrice.option'|snippet:[
        'product' => $id,
        'options' => 'dopoption',
        'sortOptions' => 'ASC',
        'tpl' => 'msoptionproduct'
    ]}

    {if $OptionsPrice}
                <div class="card-text row">
                    <div class="col-md-6">

    {$OptionsPrice}
                    </div>
                    <div class="col-md-6">
                        <div class="price-box text-center">
                            <p class="h6 mb-1">Цена:</p>
{if $price?}<p class="price ml-md-2 mb-1"><span class="msoptionsprice-cost msoptionsprice-{$id}">{$price}</span> {*'ms2_frontend_currency' | lexicon*}₽ / пог. м</p>{else}<p class="price ml-md-3 mb-0">Не указана</p>{/if}
                        			<button class="btn btn-sm btn-outline-danger mb-1 w-100" type="submit" name="ms2_action" value="cart/add">В корзину</button>
                        </div>
                    </div>
                </div>
        
    {else}
        <div class="card-text">
                        <div class="price-box text-center">
                            <p class="h6 mb-1">Цена:</p>
{if $price?}<p class="price ml-md-2 mb-1"><span class="msoptionsprice-cost msoptionsprice-{$id}">{$price}</span> {*'ms2_frontend_currency' | lexicon*}₽ / пог. м</p>{else}<p class="price ml-md-3 mb-0">Не указана</p>{/if}
                        			<button class="btn btn-sm btn-outline-danger mb-1 w-100" type="submit" name="ms2_action" value="cart/add">В корзину</button>
                        </div>
        </div>   
    {/if}

            </div>

    </form>
</div>

В общем конечный результат в категории на сайте:

Письма, корзина и т.д.

Теперь если вы положите такой товар в корзину, вместо названия опции вы увидите array? чтобы это исправить, заменяем вот такие конструкции:

{if $product.options?}
      <div class="small">
             {$product.options | join : '; '}
       </div>
{/if}

Примерно на такие:

{if $product.options?}
    {foreach $product.options as $key => $option}
        {* exclude the option key *}
        {if $key in ['modification','modifications','msal']}{continue}{/if}

        {set $caption = ('ms2_product_' ~ $key)|lexicon}
        {if $option is array}
            {$caption} - {$option | join : '; '}
        {else}
            {$caption} - {$option}
        {/if}
    {/foreach}
{/if}

Так же у плагина есть возможность привязывать изображения модификаций к галереи и его можно спарить с mFilter2, подробнее об этом можно посмотреть на странице плагина.

PS. Т.к. плагин платный, у него есть тех. поддержка, поэтому, если что-то не получается обращайтесь туда.

Заключение

msOptionsPrice2 — это мощный инструмент для интернет-магазинов на базе MODX и miniShop2, который значительно расширяет возможности управления ценами и опциями товаров. Он позволяет легко настраивать динамическое изменение цен в зависимости от выбранных пользователями параметров, что делает процесс покупки более интуитивным и привлекательным.

Основные преимущества использования msOptionsPrice2 включают:

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

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

Рекомендуем владельцам интернет-магазинов на MODX и miniShop2 обратить внимание на msOptionsPrice2, чтобы расширить возможности управления ценами и опциями товаров, а также повысить эффективность работы их бизнеса. Это инвестиция, которая окупается за счет повышения продаж и улучшения пользовательского опыта.

< Open Source: Особенность свободно распространяемого программного обеспечения

Локальный сервер для компьютера >