С чего начать писать плагин для WordPress - vorst.ru

Калькулятор


Плагин для WordPress подсчета цены по компонентам

Реальная задача при решении которой нужно было написать плагин для WordPress. Плагин был написан и зарегистрирован на портале WordPress.org. В статье дано описание задачи и структуры данных для создания плагина для WordPress, а так же даны ссылки на demo и репозитарий.

Калькулятор

Плагин для WordPress подсчета цены по компонентам

Любой товар состоит из элементов. Довольно часто производитель, поставив задачу написать электронный магазин, позволяет выбирать комплектацию заранее, до производства. Выбирая комплектующие есть возможность сэкономить или наоборот, согласиться с утверждением "Я этого достоин(а)" и заказать по полной.

Например можно представить пиццерию, где в меню указана стоимость составляющих - лепешка, сыр трех сортов, помидоры двух сортов, колбаса 5 видов. Комбинируете вы сами и постоянно видите, как ваш выбор отражается на цене.

Но это отвлеченный пример, а был конкретный - Demo, Plugin.


Task

Мебельная фабрика решила предоставить on-line сервис заказа своей мебели. Нужно написать сайт, где наряду с готовыми изделиями должна быть предоставлена возможность выбрать собственную комплектацию.

Выбор происходит путем ответа на вопросы. Каждый ответ имеет свой вес в денежном выражении или в виде коэффициента, на который умножается итоговая сумма.

Questionnaire

    What you wanna buy?
  • bed
      Age
    • Adult (leave final price as is)
    • Child (increase on 30%)
      Size
    • one person bed (+ 5000р)
        Storage for bedding
      • standard
      • with linen storage (+ 1500р)
    • double (+ 11000р)
        Headboard
      • standard (+ 500р)
      • designe (+ 2500р)
  • sofa
      Age
    • Adult
    • Child (+ 30%)
      Form
    • straight (+ 10000р)
    • corner (+ 15000р)

Если вы выбираете двуспальную кровать для взрослого человека со стандартным изголовьем, то получите цену 11500 рублей. Односпальную для ребенка с ящиком для хранения белья - 8450 рублей.

Requirements

  1. цена заказа должна быть всегда на видном месте, какой бы длинный ни был список вопросов;
  2. цена заказа должна меняться при изменении выбора;
  3. каждый ответ должен иметь картинку, для наглядности осуществляемого выбора;
  4. если выбраны не все пункты, должно выводиться сообщение и не выбранные пункты должны стать более заметными (например вопрос должен изменить цвет).

Data

Написание плагина начнем с организации данных для вопросника. Это поможет представить, как будет организована программа.

Каждый вопрос может иметь несколько ответов. После каждого ответа опять могут быть вопросы и так далее. Вопросы и ответы каждого уровня определим в массиве items.

Сначала выбираем, что мы хотим купить. Ответ будем хранить в переменной what.

<?php
return ['items' => [
  'what' => [
    'question' => __('What do you choose?', 'lcc'),
    'answers' => [
      ['caption' => __('Bed', 'lcc'), 'image' => 'bed.jpg', 'items' => [
        ...
      ],], // Bed
      ['caption' => __('Sofa', 'lcc'), 'image' => 'sofa.jpg', 'items' => [
        ...
      ],], // Sofa
    ],
  ],
]];

Получив ответ, опять задаем вопрос. То есть опять определяем массив items.

<?php
return ['items' => [
  'what' => [
    'question' => __('What you wanna buy?', 'lcc'),
    'answers' => [
      ['caption' => __('Bed', 'lcc'), 'image' => 'bed.jpg', 'items' => [
        'age' => [
          'question' => __('Age', 'lcc'),
          'answers' => [
            [
              'caption' => __('Adult', 'lcc'), 
              'image' => 'men.jpg', 
              'value' => '*1',
            ],
            [
              'caption' => __('Child', 'lcc'), 
              'image' => 'child.jpg', 
              'value' => '*1.3',
            ],
          ],
        ],
        'capacity' => [
          'question' => __('Size', 'lcc'),
          'answers' => [
            [
              'caption' => __('one person bed', 'lcc'), 
              'image' => 'bed1.jpg', 
              'value' => 5000,
              'items' => ['header' => ['question' => __('Storage for bedding', 'lcc'), 'answers' => [
                ['caption' => 'standard', 'image' => 'head-ordinary.jpg', 'value' => 0],
                ['caption' => 'with-storage', 'image' => 'head-storage.jpg', 'value' => 1500],
              ]]],
            ],
            [
              'caption' => __('double', 'lcc'), 
              'image' => 'bed2.jpg', 
              'value' => 11000,
              'items' => ['header' => ['question' => __('Headboard', 'lcc'), 'answers' => [
                ['caption' => __('standard', 'lcc'), 'image' => 'head-ordinary-2.jpg', 'value' => 500],
                ['caption' => __('design', 'lcc'), 'image' => 'head-design-2.jpg', 'value' => 2500],
              ]]],
            ],
          ],
        ],
      ],], // Bed
      ['caption' => __('Sofa', 'lcc'), 'image' => 'sofa.jpg', 'items' => [
        'age' => [
          'question' => __('Age', 'lcc'),
          'answers' => [
            [
              'caption' => __('Adult', 'lcc'), 
              'image' => 'men.jpg', 
              'value' => '*1',
            ],
            [
              'caption' => __('Child', 'lcc'), 
              'image' => 'child.jpg', 
              'value' => '*1.3',
            ],
          ],
        ],
        'form' => [
          'question' => __('Form', 'lcc'),
          'answers' => [
            [
              'caption' => __('straight', 'lcc'), 
              'image' => 'line.jpg', 
              'value' => 10000,
            ],
            [
              'caption' => __('corner', 'lcc'), 
              'image' => 'corner.jpg', 
              'value' => 15000,
            ],
          ],
        ],
      ],], // Sofa
    ],
  ],
]];

Все, предварительно подготовленные, картинки будем располагать в одном каталоге. В этом случае нет необходимости в полном url, достаточно имени файла.

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

Plan

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

Вопросник может быть выведен в любом месте страницы или поста. В WordPress для этого используется shortcode. Значит будем писать shortcode.

Для вывода промежуточной суммы нужна область на экране, которая бы не смещалась во время прокрутки. Лучшее место для такой области - sidebar. Sidebar присутствует почти во всех темах WordPress. Чтобы что-то разместить в sidebar, нужно написать widget. Значит будем писать widget.

Но обо всем этом в следующей статье. Для тех, кому и так все ясно - код на GitHub и Demo.

Заключение

Чтобы написать плагин для вывода калькулятора, нам предстоит разобраться с рекурсией, написать shortcode и widget и настроить последний так, чтобы он не смещался при прокрутке. Но об этом в следующей статье.

Оставьте комментарий

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