Задать вопрос
VibesDriver
@VibesDriver
cms

Как создать и передать опцию товара в корзину MODX?

Пытался узнать ответ в профильном сообществе, но увы - безрезультатно.
Реализовал на сайте скрипт на JS для вывода изображения в галерее при выборе пользователем цвета на странице товара. Галерея — Fotorama. Плагин — minishop2.

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

<style>
  #pickYourColor ul {
      list-style-type: none;
  }


#pickYourColor { 
    margin: 15px 0; }
    
    #colorintro { 
    margin: 15px 0; }
  
  #pickYourColor ul li {
      border-radius: 2px;
      display: inline-block;
      margin-right: 3px;
      border: 2px solid transparent;
      padding: 10px;
      transition: all 100ms ease-in-out;
  }

  #pickYourColor ul li:hover {
      cursor: pointer;
      box-shadow: 0px 2px 4px 1px #ccc;
  }

  #pickYourColor ul li.selected {
      transform: scale(1.2);
      box-shadow: 0px 2px 4px 1px #ccc;
  }
</style>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>

<script>
   function changeColor(color) {
    document.forms["tovarcart"].elements["color"].value = color;
}
 
function loadGalleryPictures(pictures) {
    let data = [];
    for (let picture of pictures) {
        data.push({img: picture, thumb: picture});
    }
    $("#fotorama").data('fotorama').load(data);
}
 
$(function () {
    $("#pickYourColor").on("click", (event) => {
        let target = $(event.target);
 
        if (target.is("li")) {
            $(this).find("li.selected").removeClass("selected");
            target.addClass("selected");
            
            loadGalleryPictures(target.data('pictures'));
            changeColor(target.data('name'));
        }
    });
});
</script>


<body>
 <div id="colorintro">
     <p><h3>Выбор цвета:</h3></p>
   
<img src="https://pp.userapi.com/c848616/v848616407/db686/j_A39ev7v4w.jpg" />
<div id="pickYourColor">
  <ul>
    <li class="selected" style="background-color: #FAE7B5" data-name="бежевый" data-color="#FAE7B5" data-pictures='["url","url","url"]'></li>
    <li style="background-color: #EF0097" data-name="фуксия" data-color="#EF0097" data-pictures='["url"]'></li>
    <li style="background-color: #FDDB6D" data-name="сахара" data-color="#FDDB6D" data-pictures='["url"]'></li>
    <li style="background-color: #A86540" data-name="светло-коричневый" data-color="#A86540" data-pictures='["url"]'></li>
    <li style="background-color: #000000" data-name="черный" data-color="#000000" data-pictures='["url"]'></li>
    <li style="background-color: #FF6800" data-name="оранжевый" data-color="#FF6800" data-pictures='["url"]'></li>
    <li style="background-color: #C8A2C8" data-name="сиреневый" data-color="#C8A2C8" data-pictures='["url"]'></li>
    <li style="background-color: #641C34" data-name="бордовый" data-color="#641C34" data-pictures='["url"]'></li>
    <li style="background-color: #0E294B" data-name="синий" data-color="#0E294B" data-pictures='["url"]'></li>
    <li style="background-color: #F19CBB" data-name="розовый" data-color="#F19CBB" data-pictures='["url"]'></li>
    <li style="background-color: #FF0000" data-name="красный" data-color="#FF0000" data-pictures='["url"]'></li>
    <li style="background-color: #BEF574" data-name="фисташковый" data-color="#BEF574" data-pictures='["url"]'></li>
    <li style="background-color: #35170C" data-name="темно-коричневый" data-color="#35170C" data-pictures='["url"]'></li>
    <li style="background-color: #77DDE7" data-name="бирюза" data-color="#77DDE7" data-pictures='["url"]'></li>
  </ul>
</div>
</div>


Информация на сервер отправляется:
5c0fbcc5dd56d230993795.jpeg
  • Вопрос задан
  • 1050 просмотров
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 1
ig0r74
@ig0r74
MODX-разработчик
Вместо li используй input type radio. Используется стандартное поле товара color.
Тут можешь посмотреть пример:
https://ideecasa.ru/sushilka-dlya-belya-foppapedre...

<div class="option-group">
    <label class="col-md-2 control-label" for="options[color]">Цвет: <span class="selected-color">{$_modx->resource.color[0]}</span></label>
    <div class="list">
        {foreach $_modx->resource.color as $value}
            {set $color_translit = $value | translit | replace : "/" : "_"}
            <span>
                <input type="radio" name="options[color]" id="{$color_translit}" value="{$value}" {if $value@index == 0}checked="checked"{/if}>
                <label for="{$color_translit}" class="color-item" style="background-image:url(/assets/templates/images/background/{$color_translit}.gif);" title="{$value}"></label>
            </span>
        {/foreach}
    </div>
</div>


Сниппет translit:
<?php
$result = $input;
$options = array('friendly_alias_word_delimiter'=>'_');
$generator = $modx->newObject('modResource');
$result = $generator->cleanAlias($result, $options);

return $result;
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Разработчик CMS Битрикс
Студия Фонарь
от 120 000 до 140 000 ₽
Fullstack разработчик Bitrix
PERFONE
До 200 000 ₽
Разработчик Bitrix
Awelite
До 150 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Настроить и запустить FB на прилки и PWA сфера iGaming
29 нояб. 2024, в 13:48
120000 руб./за проект
Доработка СРМ laravel
29 нояб. 2024, в 13:46
20000 руб./за проект
Отрисовка страницы “About Us” для сайта Recovery Toolbox
29 нояб. 2024, в 13:30
4000 руб./за проект
Ещё заказы