Integracja z edrone – dostosowanie szablonu

Darmowe szablony Comarch od wersji 2018.1 posiadają wbudowaną integrację z zaawansowanym systemem do zarządzania relacjami z klientami edrone. Jeżeli korzystasz z innych szablonów, to ten artykuł może być dla Ciebie pomocny.

Poniżej znajduje się lista kroków, które należy wykonać w celu integracji z edrone.

  1. Ustawiamy swój App ID z edrone w panelu administracyjnym (Ustawienia/Ustawienia Sklepu/Ogólne/Integracja z edrone)
  2. W głównym folderze szablonu tworzymy folder edrone, w którym umieszczamy pliki, których zawartość znajduje się w kolejnych punktach
  3. W pliku html, na końcu sekcji head includujemy plik edrone/head.html (dodajemy {% include ‘edrone/head.html’ -%} )

    {% if config.External.Edrone.AppId != '' -%}
    <script type="text/javascript">
    (function (srcjs) {
    window._edrone = window._edrone || {};
    _edrone.app_id = '{{ config.External.Edrone.AppId }}';
    _edrone.version = '1.0.0';
    _edrone.platform_version = '{{ config.Version }}';
    _edrone.platform = 'comarch';
    _edrone.shop_lang = '{{ page.Language }}';    {% if page.PageId != config.DefinedPages.Order.Id -%}
    _edrone.action_type = 'other’;
    {% if usr.Authenticated -%}
    {% if customer.Address.Name != ” -%}
    {% assign FullName = customer.Address.Name -%}
    {% if FullName contains ’ ’ -%}
    {% assign HalfName = FullName | Split:’ ’ -%}
    {% endif %}
    _edrone.first_name = '{% if HalfName[0] -%}{{ HalfName[0] }}{% else %}{{ FullName }}{% endif %}’;
    {% if HalfName[1] -%}
    _edrone.last_name = '{{ HalfName[1] }}’;
    {% endif %}
    {% endif -%}
    {% if customer.Address.Country != ” -%}
    _edrone.country = '{{ customer.Address.Country }}’;
    {% endif -%}
    {% if customer.Address.City != ” -%}
    _edrone.city = '{{ customer.Address.City }}’;
    {% endif -%}
    {% if customer.Address.Phone != ” -%}
    _edrone.phone = '{{ customer.Address.PhoneNo }}’;
    {% endif -%}
    _edrone.email = '{{ customer.Email }}’;
    {% endif -%}
    {% endif -%}

    var doc = document.createElement(’script’);
    doc.type = 'text/javascript’;
    doc.async = true;
    doc.src = (’https:’ == document.location.protocol ? 'https:’ : 'http:’) + srcjs;
    var s = document.getElementsByTagName(’script’)[0];
    s.parentNode.insertBefore(doc, s);
    })(„//d3bo67muzbfgtl.cloudfront.net/edrone_2_0.js”);
    </script>
    {% endif -%}

  4. W pliku html, na końcu sekcji body includujemy pliki edrone/product-presentation.html oraz edrone/subscribe.html

    • product-presentation.html

    {% if page.PageId == config.DefinedPages.ProductDetails.Id and config.External.Edrone.AppId != '' -%}
    <script type="text/javascript">
    {% if productdetails -%}
    {% assign product-presentation = productdetails -%}
    {% elseif product-details -%}
    {% assign product-presentation = product-details -%}
    {% endif -%}

    window._edrone = window._edrone || {};
    _edrone.action_type = 'product_view’;
    _edrone.product_ids = '{{ product-presentation.Product.Id }}’;
    _edrone.product_titles = '{{ product-presentation.Product.Name }}’;
    {% if product-presentation.Product.ImageId > 0 -%}
    _edrone.product_images = 'http:{{ page.BaseHref }}img/large/{{ product-presentation.Product.ImageId }}/{% if product-presentation.Product.Images[0].Name != „” -%}{{ product-presentation.Product.Images[0].Name }}{% else %}.jpg{% endif %}’;
    {% endif -%}
    {% if product-presentation.Product.Code != ” -%}
    _edrone.product_skus = '{{ product-presentation.Product.Code }}’;
    {% endif -%}
    _edrone.product_urls = '{{ page.CanonicalLink }}’;
    _edrone.product_category_ids = '{{ page.GroupId }}’;
    _edrone.product_category_names = '{{ page.CurrentSiteNode.Name }}’;
    </script>
    {% endif %}

    Wskazówka
    Jeżeli w swoim szablonie obiekt ze szczegółami produktu ma inną nazwę, to należy zmodyfikować warunek.
    • subscribe.html

    {% if config.External.Edrone.AppId != '' -%}
    {% if page.PageId == config.DefinedPages.Home.Id or page.PageId == config.DefinedPages.CustomerProfile.Id -%}
    <script type="text/javascript">
    $(document).ajaxSuccess(function(a,b,c,d) {
    if(d && d.action && (d.action.Action == 'Newsletter/Subscribe' || d.action.Action == 'newsletter/subscribe') && d.action.Result){
    var queryString = c.data.split('&');
    for(i=0; i<queryString.length; i++){
    if(queryString[i].indexOf('email') != -1){
    var email = queryString[i].split('=')[1].replace('%40','@');
    }
    }
    _edrone.customer_tags = 'From Newsletter Subscribe';
    _edrone.email = email;
    _edrone.subscriber_status = '1';
    _edrone.action_type = 'subscribe';
    _edrone.init();
    }
    });
    </script>
    {% endif %}
    {% if page.PageId == config.DefinedPages.CustomerProfile.Id -%}
    <script type="text/javascript">
    $(document).ajaxSuccess(function(a,b,c,d) {
    if(d && d.action && (d.action.Action == 'Newsletter/Unsubscribe' || d.action.Action == 'newsletter/unsubscribe') && d.action.Result){
    var queryString = c.data.split('&');
    for(i=0; i<queryString.length; i++){
    if(queryString[i].indexOf('email') != -1){
    var email = queryString[i].split('=')[1].replace('%40','@');
    }
    }
    _edrone.customer_tags = 'From Newsletter Subscribe';
    _edrone.email = email;
    _edrone.subscriber_status = '0';
    _edrone.action_type = 'subscribe';
    _edrone.init();
    }
    });
    </script>
    {% endif %}
    {% endif %}

    Wskazówka
    Jeżeli w swoim szablonie umożliwiasz zapis do newslettera z innych stron niż strona główna i profil klienta oraz pozwalasz na wypisanie poza profilem klienta, to należy zmodyfikować powyższy plik.
    Uwaga
    W wersji 2018.7 z domyślnych szablonów Comarch usunięto akcję dotyczącą zapisu i wypisu z newslettera, ponieważ dane przekazywane są przez Comarch e-Sklep w tle.
  5. W szablonach Agat, Bursztyn i Opal, w tym samym miejscu includujemy również plik edrone/add-to-cart.html

    {% if page.PageId == config.DefinedPages.ProductDetails.Id and config.External.Edrone.AppId != '' -%}
    <script type="text/javascript">
    $(document).ajaxSuccess(function(a,b,c,d) {
    if(d && d.action && (d.action.Action == 'Cart/Add' || d.action.Action == 'cart/add') && d.action.Result ){
    _edrone.action_type = 'add_to_cart';
    _edrone.init();
    }
    });
    </script>
    {% endif %}
    Wskazówka
    Plik należy dodać do wszystkich szablonów, które nie są oparte o najnowszą wersję szablonu Szafir (w tym szablonie dodawanie do koszyka w edrone obsłużone jest bezpośrednio w funkcjach szablonu – spowodowane jest to możliwością dodawania kilku towarów jednocześnie czego inne szablony nie posiadają).
  6. W szablonie Bursztyn, w tym samym miejscu includujemy również plik edrone/add-to-cart-with-data.html

    {% if config.External.Edrone.AppId != '' -%}
    {% if page.PageId == config.DefinedPages.Home.Id or page.PageId == config.DefinedPages.ProductList.Id -%}
    <script type="text/javascript">
    $(document).ajaxSuccess(function(a,b,c,d) {
    if(d && d.action && (d.action.Action == 'Cart/Add' || d.action.Action == 'cart/add') && d.action.Result ){
    window._edrone = window._edrone || {};    var products = d.collection[„customer.Cart”].Products;
    var size = products.length;
    var product = products[size-1];

    _edrone.product_ids = product.Id;
    _edrone.product_titles = product.NameNoHtml;
    if(product.ImageId > 0){
    _edrone.product_images = 'http:{{ page.BaseHref }}img/large/’+product.ImageId+’/.jpg’;
    }
    if(product.Code != ”){
    _edrone.product_skus = product.Code;
    }
    _edrone.product_urls = 'http:{{ page.BaseHref }}’+product.Url;
    _edrone.product_category_ids = product.DefaultGroup;

    _edrone.action_type = 'add_to_cart’;
    _edrone.init();
    }
    });
    </script>
    {% endif %}
    {% endif %}

    Wskazówka
    Kod działa dla dodawania do koszyka ze strony głównej i listy towarów. Jeżeli pozwalasz na dodawanie do koszyka z innych stron, należy go zmodyfikować.
  7. W pliku z podziękowaniami za zakup (Agat – partials/cart/summary.html, Bursztyn i Opal – order/thank-you.html, Szafir – order/thx.html), na końcu pliku (tuż pod includem rich-snippetów), includujemy plik edrone/order.html

    {% if config.External.Edrone.AppId != '' -%}
    <script type="text/javascript">
    _edrone.action_type = 'order';    {% if cart -%}
    {% assign order = cart -%}
    {% endif -%}

    {% assign FullName = order.Customer.DeliveryAddress.Name -%}
    {% if FullName contains ’ ’ -%}
    {% assign HalfName = FullName | Split:’ ’ -%}
    {% endif %}
    _edrone.first_name = '{% if HalfName[0] -%}{{ HalfName[0] }}{% else %}{{ FullName }}{% endif %}’;
    {% if HalfName[1] -%}
    _edrone.last_name = '{{ HalfName[1] }}’;
    {% endif %}
    _edrone.country = '{{ order.Customer.DeliveryAddress.Country }}’;
    {% if order.Customer.DeliveryAddress.City != ” -%}
    _edrone.city = '{{ order.Customer.DeliveryAddress.City }}’;
    {% endif %}
    {% if order.Customer.DeliveryAddress.PhoneNo != ” -%}
    _edrone.phone = '{{ order.Customer.DeliveryAddress.PhoneNo }}’;
    {% endif %}
    _edrone.email = '{{ order.Customer.Email }}’;

    {% assign size = order.PlacedOrder.Products | Size -%}
    var ids = ”;
    var titles = ”;
    var images = ”;
    var skus = ”;
    var urls = ”;
    var categoryIds = ”;
    var counts = ”;
    {% for product in order.PlacedOrder.Products -%}
    ids += '{{ product.Id }}{% if forloop.index != size -%}|{% endif -%}’;
    titles += '{{ product.NameNoHtml }}{% if forloop.index != size -%}|{% endif -%}’;
    images += '{% if product.ImageId > 0 -%}http:{{ page.BaseHref }}img/large/{{ product.ImageId }}/.jpg{% endif -%}{% if forloop.index != size -%}|{% endif -%}’;
    skus += '{{ product.Code }}{% if forloop.index != size -%}|{% endif -%}’;
    urls += 'http:{{ page.BaseHref }}{{ product.Url }}{% if forloop.index != size -%}|{% endif -%}’;
    categoryIds += '{{ product.DefaultGroup }}{% if forloop.index != size -%}|{% endif -%}’;
    counts += '{{ product.Quantity | Normalize }}{% if forloop.index != size -%}|{% endif -%}’;
    {% endfor -%}

    _edrone.product_ids = ids;
    _edrone.product_titles = titles;
    _edrone.product_images = images;
    _edrone.product_skus = skus;
    _edrone.product_urls = urls;
    _edrone.product_category_ids = categoryIds;
    _edrone.product_counts = counts;

    _edrone.order_id = '{{ order.PlacedOrder.Id }}’;
    _edrone.base_currency = '{{ order.Currency }}’;
    _edrone.order_currency = '{{ order.Currency }}’;
    _edrone.base_payment_value = '{{ order.OrderTotalValue | ToString | Replace:”,”,”.” }}’;
    _edrone.order_payment_value = '{{ order.OrderTotalValue | ToString | Replace:”,”,”.” }}’;
    _edrone.init();
    </script>
    {% endif -%}

     

    Wskazówka
    Jeżeli w swoim szablonie używasz dla koszyka innej nazwy obiektu niż cart lub order, to powyższy kod należy zmodyfikować.

 

Edrone i dodawanie towarów w szablonie Szafir:

  1. Plik js/init-ui1.js
  • Funkcja serialAddingToCart

Na samym początku funkcji znajduje się pętla “each”, a w niej instrukcja warunkowa „if (quantity > 0)”. Na końcu tej instrukcji warunkowej wklejamy poniższy kod:
if(typeof _edrone !== 'undefined') {
var product = form.parents('.product-item-lq');
var base = $('[data-base]').data('base');

if (first) {
_edrone.product_ids = productId;
_edrone.product_titles = product.find(’.product-name-lq’).text();
_edrone.product_images = base + product.find(’img’).data(’src’);
_edrone.product_skus = product.find(’.product-code-lq’).text();
_edrone.product_urls = base + product.find(’a’).attr(’href’);
_edrone.product_category_ids = $('[data-group-id]’).data(’group-id’);
_edrone.product_category_names = $('[data-group-name]’).data(’group-name’);
first = false;
} else {
_edrone.product_ids += '|’ + productId;
_edrone.product_titles += '|’ + product.find(’.product-name-lq’).text();
_edrone.product_images += '|’ + base + product.find(’img’).data(’src’);
_edrone.product_skus += '|’ + product.find(’.product-code-lq’).text();
_edrone.product_urls += '|’ + base + product.find(’a’).attr(’href’);
_edrone.product_category_ids += '|’ + $('[data-group-id]’).data(’group-id’);
_edrone.product_category_names += '|’ + $('[data-group-name]’).data(’group-name’);
}
}
Kilkanaście linijek niżej (w tej samej funkcji) jest instrukcja warunkowa “if (resGuardian)”. Na początku tej instrukcji warunkowej wklejamy poniższy kod:
if(typeof _edrone !== 'undefined') {
_edrone.action_type = 'add_to_cart';
_edrone.init();
}

  • Funkcja addManyProducts

Na samym początku funkcji znajduje się pętla “for(var i=0; i<products.length; i++)” iterująca po produktach. Tuż przed nią należy dodać poniższą linijkę:
var first = true;
Następnie, w tej pętli znajduje się instrukcja warunkowa „if(products[i].askForPriceChild == false && products[i].quantity > 0)”. Na samym jej końcu należy dodać poniższy kod:
if(parameters && !validationError && products[i].supply != undefined && typeof _edrone !== 'undefined'){
if(first){
_edrone.product_ids = products[i].supply;
_edrone.product_images = products[i].img;
_edrone.product_skus = products[i].code;
var name = _edrone.product_titles;
var url = _edrone.product_urls;
var categoryId = _edrone.product_category_ids;
var categoryName = _edrone.product_category_names;
first = false;
} else {
_edrone.product_ids += '|' + products[i].supply;
_edrone.product_images += '|' + products[i].img;
_edrone.product_skus += '|' + products[i].code;
_edrone.product_titles += '|' + name;
_edrone.product_urls += '|' + url;
_edrone.product_category_ids += '|' + categoryId;
_edrone.product_category_names += '|' + categoryName;
}
}
Kilkanaście linijek niżej (w tej samej funkcji) jest “$.post”. Na samym jego początku należy dodać poniższy kod:
if(typeof _edrone !== 'undefined') {
_edrone.action_type = 'add_to_cart';
_edrone.init();
}

  • Dodanie funkcji simpleAddToCartSuccess

Na końcu pliku js/init-ui1.js należy dodać poniższy kod:
function simpleAddToCartSuccess(e){
updateClientArea();
if(typeof _edrone !== 'undefined') {
if ($('.add-from-presentation-lq').index() == -1) {
var product = $(e.currentTarget).parents('.product-item-lq');
var base = product.parents('[data-base]').data('base');
_edrone.product_ids = product.data('product-id');
_edrone.product_titles = product.find('.product-name-lq').text();
_edrone.product_images = base + product.find('img').attr('src');
_edrone.product_skus = product.find('.product-code-lq').text();
_edrone.product_urls = base + product.find('a').attr('href');
_edrone.product_category_ids = product.parents('[data-group-id]').data('group-id');
_edrone.product_category_names = product.parents('[data-group-name]').data('group-name');
}
_edrone.action_type = 'add_to_cart';
_edrone.init();
}
}
Następnie należy zmodyfikować “event”, który jest wywoływany przy kliknięciu w element z klasą “add-to-cart-update-client-area-lq”. Zmieniamy zawartość tego eventa na:
app.post(e, simpleAddToCartSuccess, e);
Cały event powinien wyglądać następująco:
$('body').on('click', '.add-to-cart-update-client-area-lq', function(e) {
app.post(e, simpleAddToCartSuccess, e);
});

  1. Plik js/init-ui2.js
  • Funkcja serialAddingFromWishlist

Na samym początku funkcji znajduje się pętla “each”. Tuż przed nią należy dodać poniższą linijkę:
var first = true;
Następnie, w tej pętli znajduje się instrukcja warunkowa „if (quantity > 0)”. Na samym jej końcu należy dodać poniższy kod:
if(typeof _edrone !== 'undefined') {
if (first) {
_edrone.product_ids = productId;
_edrone.product_titles = productContainer.find('.product-name-lq').text();
_edrone.product_images = base + productContainer.find('img').attr('src');
_edrone.product_skus = productContainer.find('.product-code-lq').text();
_edrone.product_urls = base + productContainer.find('a').attr('href');
_edrone.product_category_ids = categoryId;
first = false;
} else {
_edrone.product_ids += '|' + productId;
_edrone.product_titles += '|' + productContainer.find('.product-name-lq').text();
_edrone.product_images += '|' + base + productContainer.find('img').attr('src');
_edrone.product_skus += '|' + productContainer.find('.product-code-lq').text();
_edrone.product_urls += '|' + base + productContainer.find('a').attr('href');
_edrone.product_category_ids += '|' + categoryId;
}
}
Kilkanaście linijek niżej (w tej samej funkcji) jest instrukcja warunkowa “if (resGuardian)”. Na początku tej instrukcji warunkowej wklejamy poniższy kod:
if(typeof _edrone !== 'undefined') {
_edrone.action_type = 'add_to_cart';
_edrone.init();
}
 

Czy ten artykuł był pomocny?

Wyślij opnie