Apishops JS API 2

Подключаемые к страницам формы оформления заказов и обратных звонков

Знакомство

Подключение

Параметры

Рекомендуемые товары

Темы

Подарки

Свои формы

Отдельная подгрузка данных

FAQ

Конструктор форм



Свои формы

Чтобы подключить наш плагин к своей форме достаточно задать своим инпутам наши "name" атрибуты apishopsFormCount, apishopsFormFio, apishopsFormPhone и apishopsFormAddress для ввода количества товаров, ФИО получателя, номера телефона и адреса получателя соотвественно

Внимание
«apishopsFormCount, apishopsFormFio, apishopsFormPhone и apishopsFormAddress» — это минимальный набор инпутов, который должен быть в вашей форме. Если в форме не будет хватать одного из этих инпутов — наш плагин не подключится к вашей форме и не сможет обрабатывать заказы с этой формы.
Что делать, если в вашей форме недостаточно инпутов?
Если в вашей форме недостаточно инпутв, например, не предусмотрено поле для адреса доставки, тогда вам надо добавить недостающее поле c type=hidden и name=apishopsFormAddress(если не предусмотрено поле для ввода адреса доставки). Примеры таких форм приведены ниже

Упрощенная форма заказа (4 поля)

Пример формы без выбора города и способа доставки, а также метода оплаты

Код

  <div id=container2>
        <form id=customForm3 class="apishopsForm">
            <h1>Моя собственная форма заказа</h1>
            <div class="apishopsFormGroup apishopsFormCount">
                <label>Количество</label>
                <select name='apishopsFormCount' pattern="^[1-9][0-9]*$">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
            <div class="apishopsFormGroup apishopsFormFio">
                <label for="inputSuccess"> &nbsp;</label>
                <input type="text" name='apishopsFormFio' placeholder="ФИО" pattern=".{3,}">
            </div>
            <div class="apishopsFormGroup" >
                <input type="text" name='apishopsFormPhone' placeholder="+380(___) ___ __ __" pattern=".*">
            </div>
            <div class="apishopsFormGroup">
                <input type="text" name='apishopsFormAddress' placeholder="ул.Юннатов, д.1, кв.2" pattern=".*">
            </div>
            <div class="apishopsFormGroup">
                <a href="#" class="apishopsFormButton apishopsFormBuy" onclick='$(this).closest("form").submit(); return false;'> <b>Заказать товар!</b> </a>
            </div>
        </form>
    </div>

Иницициализация плагина с указанием использования специальной формы

    <script>
        $(document).ready( function() {
            $('#container2').apishopsForm({ callback:1,
                type:'inline', /*тип открытия [inline|modal]*/
                form:'#customForm3', /*тип формы [normal|light|jquery-selector]*/
                siteId:38924,
                productId:385751,
                price:990.0, /*цена товара*/
            });
        });
    </script>

Пример

http://help.basing.ru/single/example3.html

Упрощенная форма заказа(3 поля для ввода)

Код

  <div id=container2>
        <form id=customForm3 class="apishopsForm">
            <h1>Моя собственная форма заказа</h1>
            <input type="hidden" name='apishopsFormCount' value=1>
            <div class="apishopsFormGroup apishopsFormFio">
                <label for="inputSuccess"> &nbsp;</label>
                <input type="text" name='apishopsFormFio' placeholder="ФИО" pattern=".{3,}">
            </div>
            <div class="apishopsFormGroup" >
                <input type="text" name='apishopsFormPhone' placeholder="+380(___) ___ __ __" pattern=".*">
            </div>
            <div class="apishopsFormGroup">
                <input type="text" name='apishopsFormAddress' placeholder="ул.Юннатов, д.1, кв.2" pattern=".*">
            </div>
            <div class="apishopsFormGroup">
                <a href="#" class="apishopsFormButton apishopsFormBuy" onclick='$(this).closest("form").submit(); return false;'> <b>Заказать товар!</b> </a>
            </div>
        </form>
    </div>

Иницициализация плагина с указанием использования специальной формы

    <script>
        $(document).ready( function() {
            $('#container2').apishopsForm({ callback:1,
                type:'inline', /*тип открытия [inline|modal]*/
                form:'#customForm3', /*тип формы [normal|light|jquery-selector]*/
                siteId:38924,
                productId:385751,
                price:990.0, /*цена товара*/
            });
        });
    </script>

Пример

http://help.basing.ru/single/example4.html

Упрощенная форма заказа(2 поля для ввода)

Код

  <div id=container2>
        <form id=customForm3 class="apishopsForm">
            <h1>Моя собственная форма заказа</h1>
            <input type="hidden" name='apishopsFormCount' value=1>
            <input type="hidden" name='apishopsFormAddress' value=''>
            <div class="apishopsFormGroup apishopsFormFio">
                <label for="inputSuccess"> &nbsp;</label>
                <input type="text" name='apishopsFormFio' placeholder="ФИО" pattern=".{3,}">
            </div>
            <div class="apishopsFormGroup" >
                <input type="text" name='apishopsFormPhone' placeholder="+380(___) ___ __ __" pattern=".*">
            </div>
            <div class="apishopsFormGroup">
                <a href="#" class="apishopsFormButton apishopsFormBuy" onclick='$(this).closest("form").submit(); return false;'> <b>Заказать товар!</b> </a>
            </div>
        </form>
    </div>

Иницициализация плагина с указанием использования специальной формы

    <script>
        $(document).ready( function() {
            $('#container2').apishopsForm({ callback:1,
                type:'inline', /*тип открытия [inline|modal]*/
                form:'#customForm3', /*тип формы [normal|light|jquery-selector]*/
                siteId:38924,
                productId:385751,
                price:990.0, /*цена товара*/
            });
        });
    </script>

Пример

http://help.basing.ru/single/example5.html

Стандартная форма

Разметка формы, используемой по умолчанию. Вы можете подредактировать её так, как вам угодно, и инициализировать её использование

Код

<form id=customForm3 class="apishopsForm">
        <h1>Форма заказа</h1>
        <small>Заполните пожалуйста поля</small>
        <div class="apishopsFormGroup apishopsFormCount">
            <label>Количество</label>
            <select name='apishopsFormCount' pattern="^[1-9][0-9]*$">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
        <div class="apishopsFormGroup apishopsFormFio">
            <label for="inputSuccess"> &nbsp;</label>
            <input type="text" name='apishopsFormFio' placeholder="ФИО" pattern=".{3,}">
        </div>
        <div class="apishopsFormGroup apishopsFormMail">
            <input type="text" name='apishopsFormEmail' placeholder="email@email.com" pattern=".*">
         </div>
        <div class="apishopsFormGroup apishopsFormPhone">
            <input type="text" name='apishopsFormPhone' placeholder="+380(___) ___ __ __" pattern=".{3,}">
        </div>
        <div class="apishopsFormGroup apishopsFormAddress">
            <input type="text" name='apishopsFormAddress' placeholder="ул.Юннатов, д.1, кв.2" pattern=".{3,}">
         </div>

        <div class="apishopsFormGroup apishopsFormCity">
            <label>Выберите город доставки</label>
            <select name='apishopsFormRegion' pattern="^[0-9][0-9]*$">
            </select>
        </div>
        <div class="apishopsFormGroup apishopsFormDelivery apishopsAnimation apishopsSlide">
            <label>Выберите способ доставки</label>
            <select name='apishopsFormDelivery' pattern="^[0-9][0-9]*$">
            </select>
        </div>
        <div class="apishopsFormGroup apishopsFormPayment apishopsAnimation apishopsSlide">
            <label>Выберите способ оплаты</label>
            <select name='apishopsFormPayment' pattern="^[0-9][0-9]*$">
            </select>
        </div>
        <div class="apishopsFormGroup apishopsFormCost apishopsAnimation apishopsSlide apishopsLoading">
            <label><span name='apishopsFormCost'></span></label>
        </div>

        <div class="apishopsFormGroup">
            <a href="#" class="apishopsFormButton apishopsFormBuy" onclick='$(this).closest("form").submit(); return false;'>
                <b>Заказать товар!</b>
            </a>
        </div>
    </form>

Иницициализация плагина с указанием использования специальной формы

$(document).ready( function() {
    $('#container2').apishopsForm({ callback:1,
            type:'inline', /*тип открытия [inline|modal]*/
            form:'#customForm3', /*тип формы [normal|light|jquery-selector]*/
            siteId:10221,
            productId:632879,
            price:1017.41, /*цена товара*/
        });
});