W jaki sposób wygląda integracja wyglądu mojej strony ze sklepem Mnumi?

Aplikacja MnumiShop integruje się ze stroną domową Drukarni. Dzięki temu może ona upodobnić się ze stroną domową, podmieniając określony element strony na zawartość sklepu.

Konfiguracja nowej strony wzorcowej

Do pobierania przez MnumiShop wyglądu z serwisu zewnętrznego, należy przygotować wzorcową stronę dla aplikacji MnumiShop. Najczęściej jest to zwykła podstrona, która ma przewidziane miejsce na Obszar Sklepu. MnumiShop kopiuje wskazaną stronę lokalnie. Po pobraniu wyglądu, cała zawartość sklepu “wklejana jest” w miejsce gdzie jest Obszar Sklepu.

Przy tworzeniu wzorcowej strony należy kierować się następującymi wskazówkami:

  1. Wzorcowa strona musi mieć poprawną składnię HTML, w szczególności jeżeli chodzi o ilość i kolejność otwarć i domknięć znaczników HTML;
  2. Wzorcowa strona nie może mieć żadnych błędów JavaScript (można to sprawdzić np. Firebugiem w Firefoksie lub Narzędziem dla programistów w Google Chrome)
  3. Wzorcowa strona musi mieć sprecyzowane miejsce na Obszar Sklepu, na przykład posiadając w znaczniku atrybut ID
  4. Zalecana szerokość Obszaru Sklepu to 960 pikseli (szersze lub węższe Obszary mogą wymagać dostosowywania stylów CSS)
  5. Wzorcowa strona musi mieć “absolutne ścieżki” (czyli zaczynające się od nazwy domeny) do wszystkich obiektów na stronie oraz linków - to niektóre CMS’y, np. Wordpress oferuje w standardzie;

Przykład konfigurowania:

Utworzona została nowa, pusta strona wzorcowa. Znajduje się ona pod adresem:

Na stronie wzorcowej zostało umieszczone miejsce na Obszar Sklepu, czyli dodano:

<div id="mnumi-content"></div>

Aby MnumiShop pobrał wygląd sklepu w pliku konfiguracyjnym app.yml MnumiShop, ustawiono:

​proxy:
    server:
        frontpage: "/sklep?x=y"
    external_path: "http://example.com"
    content_area: "#mnumi-content"

i wywołano komendę:

/usr/share/mnumi/mnumishop/symfony mnumi:layout
Page "http://mnumi.com/contact/" imported succesfull.

W jaki sposób mogę dostosować wygląd sklepu Mnumi?

Po skonfigurowaniu strony wzorcowej oraz pobraniu wyglądu do sklepu Mnumi, elementy typu nagłówek, menu, czy stopka są automatycznie ostylowane. W przypadku przycisków, bądź innych elementów w sklepie MnumiShop, może być wymagane dodatkowe stylowanie.

Treści Mnumi zawsze są opakowywane przez MnumiShop w kontener: <div> zawierający identyfikator: mns.

<div id="mns">
    /* Zawartość strony MnumiShop (...) */
</div>

W związku z tym, w pliku css widocznym na stronie wzorcowej, należy dopisać style nadpisujące domyślnie ustawione w części Mnumi. Aby zmiana modyfikowała tylko część sklepową, należy w selektorach stylów wykorzystać: #mns, które zapewni że styl będzie dotyczył tylko elementów znajdujących się w MnumiShop.

Przykładowy plik style.css podwiązany do strony wzorcowej

/* Ukrycie paska statusu w MnumiShop */
#mns #status-bar {
    display: none;
}