определить, доступен ли сайт через iframe? виджет добавьте в корзину

У меня есть корзина, которую я хочу встроить в виджет / iframe на других сайтах пользователей, я вижу три способа сделать это каждый с недостатками. Вот варианты от предполагаемого большинства до наименьшей работы.

  1. воссоздать интерактивный интерфейс корзины покупок в виджете javascript, затем передать значения на серверный скрипт с AJAX, переменные передаются на основной сайт, когда пользователь нажимает "оформить заказ", затем пользователь перенаправляется на основной сайт корзины с переменными, заполненными из вводится в виджет.

    • плюсы: полное
    • плюсы: большинство работ для завершения создания пользовательского интерфейса и AJAX-запроса.

  2. Как-то определить, если пользователь приходит в корзину через iframe, если это так, есть альтернативный код, который открывает новое окно, когда пользователь нажимает "оформить заказ" перенаправление пользователя на безопасную страницу и получение переменных из корзины через AJAX для заполнения окончательного проверка.

    • плюсы: средний объем работы, должен сделать запрос AJAX, чтобы получить переменные из корзины для заполнения окончательной проверки
    • плюсы: можем ли мы легко определить, доступен ли сайт от пользователя в iframe на другом сайте?

  3. завершите весь процесс проверки внутри iframe / widget.

    • плюсы: наименьшее количество работы, просто добавьте корзину в iframe
    • плюсы: не будет показывать https в браузере пользователь может неохотно покупать

каков наилучший вариант?

6
ajax e-commerce iframe

3 ответов

Если бы вы могли предоставить немного больше информации, возможно, я мог бы предложить вам еще лучший вариант. Для начала, с чем вы создали это приложение (языки / фреймворк)? Кроме того, вы бы сказали, что функциональность вашего приложения похожа на Shopify в том, что вы позволяете пользователям размещать сайты электронной коммерции через ваш сервис? Если нет, расскажите нам немного больше о вашем приложении.

вот быстрый ответ на варианты, которые вы предоставили.

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

вариант 2: - это лажа. Вы можете сказать, поступает ли запрос из удаленной формы (например, iframe) с помощью добавление параметров URL. Но подход, который вы предлагаете, не имеет большого смысла.

вариант 3: слишком тяжело, если вы не используете модальный подход, как я упоминал в ответе на Вариант 1.

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

4

Если ваша единственная проблема с вариантом 2-обнаружение, загружается ли ваш контент в iframe, вы можете сделать это с помощью JavaScript, используя "top.кадры.длина" или "верх === собственн."

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

if (top.frames.length == 0) {
    // Show content if not embedded in an iframe.
    document.getElementById('embedded-content').style.display = "none";
    document.getElementById('unembedded-content').style.display = "block";
}
else {
    // Show content if embedded in an iframe.
    document.getElementById('embedded-content').style.display = "block";
    document.getElementById('unembedded-content').style.display = "none";
}
3

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

второй вариант-сладкая середина; вы все еще получаете узнаваемость бренда, и клиенты будут иметь некоторую уверенность в безопасности (через адресную строку); (i) обнаружение кадров легко выполняется простым сравнением JavaScript: top === window. Тем не менее, вы теряете непрерывность и, следовательно, вероятно, потеряете некоторое преобразование. Если этот риск управляемый, я бы пошел на этот вариант в краткосрочной перспективе.

Не в состоянии увидеть сертификат безопасности непосредственно через зеленый lock делает третий вариант наименее желательным. Однако не все потеряно; с помощью умного использования изображений вы все еще можете получить некоторое доверие к своему конечному пользователю, как описано в этот образ, который является частью великого статьи из журнала Smashing.

ваше решение должно быть основано на:

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