Jak włączyć widget ratalny PayU w eSklepie home.pl?

W ramach płatności elektronicznych PayU możesz włączyć opcję płatności ratalnych. Dzięki temu ułatwisz klientom zakup droższych produktów i zwiększysz wartość koszyka zakupowego w sklepie.

Poniższa instrukcja opisuje włączenie widgeta ratalnego na kartach produktów w eSklepie home.pl. Poniższy kod dodajesz tylko raz, widget wyświetlany będzie w szczegółach wszystkich pozycji w sklepie.

Jak włączyć widget ratalny PayU w eSklepie home.pl?

1. Utwórz kopię aktywnego w sklepie stylu graficznego. W tym celu przejdź do sekcji Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny
   
2. Po utworzeniu kopii stylu przejdź do zakładki Edycja Zaawansowana (z lewej).
   
3. Odszukaj plik product/index.tpl i przejdź do jego edycji klikając przycisk obok jego nazwy.
   
   
4. Odszukaj linie 521-523:

     </ul>
    </div>
   {/if}

   i dodaj za ostatnim znacznikiem jak wyżej (w lini 524) kod:

   <p><span id="installment-mini"></span></p>
   {literal}
   <script>
   var openpayu = openpayu || {};
   openpayu.options = {
     creditAmount: {/literal}‘{currency value=$product->defaultStock->getPrice()}’,  // wartość w PLN {literal}
     posId: ‘XXXXXX’,         // identyfikator punktu płatności
     key: ‘XX’,              // pierwsze dwa znaki klucza api
     showLongDescription: true
   };
   OpenPayU.Installments.miniInstallment(‘#installment-mini’);
   </script>
   {/literal}

   W miejscu postId: ‘XXXXXX’ wpisz identyfikator punktu płatności. Adekwatnie postępuj w przypadku key: ‘XX’, wpisując pierwsze dwa znaki klucza API.

5. Odszukaj linię 158-160:

      {/if}
     </div>
   {/if}

   Za ostatnim znacznikiem (linia 161) wklej następujący kod:

   <!--payu kod--!>
   {literal}
   <script type="text/javascript">
     var openpayu = openpayu || {};  
     openpayu.options = { {/literal}      
   
      creditAmount: {if $product->specialOffer}{$product->defaultStock->getSpecialOfferPrice()}{else} {$product->defaultStock->getPrice()}{/if},
      {literal} posId: 'XXXXXX',
      key: 'XX',
      showLongDescription: true
    };   
      OpenPayU.Installments.miniInstallment('#installment-mini');  
   </script>{/literal}  
   <!--koniec--!>

   Identycznie jak w przypadku poprzedniego punktu, zmień wartości znajdujące się w pojedynczych cudzysłowach przy wartościach posId: oraz key:.

6. Udaj się do linii 145, która powinna zawierać następujący kod:

   <em class="main-price">{currency value=$product->defaultStock->getPrice()}</em>

   Następnie za znacznikiem </em> kliknij klawisz Enter i wklej taki oto fragment kodu:

   <!--raty payu--!>
   <p><span id="installment-mini"></span></p>
   <p id="text">{translate key="rata"}
   <!--koniec--!>

7. Udaj się do linii 135. Powinieneś w niej widzieć następujący kod:

   <del>{currency value=$product->defaultStock->getPrice()}</del>
   

   Po </del> klikamy Enter i wklejamy następujący kod:

   <!—raty payu--!>
     <p><span id="installment-mini"></span></p>   
   <p id="text">{translate key="rata"}   
   <!--koniec--!>

8. Zapisz zmiany wprowadzone do pliku product/index.tpl
9. Dodaj poniższy kod do sekcji head w Konfiguracja / Integracje / Integracje własne:

   <script src="https://static.payu.com/res/v2/jquery.payu.min.js"></script>
   <script src="https://static.payu.com/res/v2/jquery-ui.payu.min.js"></script>
   <script src="https://static.payu.com/res/v2/jquery.i18n.payu.js"></script>
   <script src="https://static.payu.com/res/v2/jsrender.js"></script>
   <script src="https://static.payu.com/res/v2/openpayu-2.0.js"></script>
   <script src="https://static.payu.com/res/v2/widget-installments-2.1.js"></script>

10. Dodaj nową frazę, która wyświetli opis wyliczenia ratalnego na karcie produktu w sekcji Konfiguracja / Ustawienia regionalne / Języki / Frazy:

    klucz: rata
    wartość: Symulacja została wykonana dla produktu podstawowego

11. Dodaj poniższy kod do sekcji Konfiguracja / Wygląd / Aktywny styl graficzny / Własny styl CSS (na samym dole pliku).

    /*--Raty PayU--*/
    #installment-mini a {
         font-size: 14px !important;
    }
    .payu-widget-installments-mini-amount {
        margin-left: 9% !important;
        font-size: 15px;
        font-weight: bold;
        color: #a6c307;
    }
    /*--ramka--*/
    #installment-mini {
       box-shadow: 1px 2px 5px #a6c307;
    }
    #text {
        text-align: justify;
        font-size: 9px;
    }
    /*--Raty PayU--*/

12. Ustaw edytowany styl graficzny jako aktywny w sklepie i, dla pewności, wyczyść pamięć cache (Konfiguracja / Administracja, system / Pamięć cache) sklepu.

Gotowe! Udało Ci się dodać widget ratalny PayU w eSklepie home.pl

Jeśli wszystko wykonałeś zgodnie z instrukcją, na karcie produktu tuż pod jego ceną pojawi się symulacja płatności ratalnych, a kliknięcie w nią wyświetli okno ze szczegółami płatności ratalnych.