Zmiana funkcji na klasy
This commit is contained in:
185
README.md
185
README.md
@@ -2,55 +2,108 @@
|
||||
Funkcje js składające się na customowe ramki rekomendacji
|
||||
|
||||
## UWAGI PRZEDWDROŻENIOWE ##
|
||||
- kod zawiera app_shop.fn.idmSetHeight używany do wyrównywania wysokości
|
||||
- kod zawiera app_shop.fn.idmGetOmnibusDetails który jest przerobionym kodem idosella app_shop.fn.getOmnibusDetails używanym w zwykłych ramkach rekomendacji
|
||||
- kod zawiera **app_shop.fn.idmGetOmnibusDetails** który jest przerobionym kodem idosella app_shop.fn.getOmnibusDetails używanym w zwykłych ramkach rekomendacji
|
||||
|
||||
### Pliki ###
|
||||
- bundle.js - całość
|
||||
- 1graphQL.js - graphQL + literały
|
||||
- 2funkcje.js - ogólne funkcje jak dodawanie do koszyka, czy lazy loading
|
||||
- 3markup.js - funkcje związane z markupem np zdjęć, cen
|
||||
- 4init.js - obiekt z ogólnymi ustawieniami Hotspota + init swipera
|
||||
- 5ainsertHotspotHTML.js - wstawienie ramki po kodzie html
|
||||
- 5binsertHotspotObject.js - wstawienie ramki po obiekcie js
|
||||
- 6style.css -
|
||||
- **style.css** - style wstawiane do css
|
||||
- **klasa.js** - kod js
|
||||
|
||||
### Użycie ###
|
||||
1. Wstawienie całego kodu do komponentu/dodatku
|
||||
2. Ustawienie defaultowych ustawień w obiekcie idmGeneralHotspotObjData
|
||||
1. Wstawienie całego kodu do komponentu (najlepiej chyba Hotspoty javascript RAYPATH - #IdoMods
|
||||
w zwykły Javascript)/dodatku(uwaga tutaj na literały)
|
||||
2. Ustawienie defaultowych ustawień na początku klasy w **idmDefaultSwiperConfig** i w **idmDefaultHotspotOptions**
|
||||
3. Wstawienie HTML lub Obiektu js z odpowienimi danymi i wywołanie funkcji od tworzenia ramek
|
||||
|
||||
#### Dodatkowe informacje ####
|
||||
Można użyć extends w innym miejscu (np tym razem w wydzielonym JS) żeby nadpisać jakąś metodę, bez zmian w kodzie ramki. Będzie to przydatne w przypadku gdzie trzeba będzie zaktualizować kod ramki.
|
||||
|
||||
**Przykład**
|
||||
```
|
||||
class IdmRaypathHotspot extends IdmHotspot {
|
||||
markupLabel(prod) {
|
||||
// Standardowe labelki
|
||||
let labelMarkup = super.markupLabel(prod);
|
||||
|
||||
// Customowe labelki
|
||||
const awards = prod?.awardedParameters;
|
||||
if (awards?.length) {
|
||||
const awardParam = awards.find(award => award.name === "Idm_custom_label");
|
||||
const values = awardParam?.values?.map(v => v.name) || [];
|
||||
|
||||
const html = values
|
||||
.map(label => {
|
||||
const [text, bgColor, color] = label.split("||");
|
||||
return `<span class="label --custom" style="background-color:${bgColor}; color:${color}">${text}</span>`;
|
||||
})
|
||||
.join("");
|
||||
|
||||
labelMarkup += html;
|
||||
}
|
||||
|
||||
return labelMarkup;
|
||||
}
|
||||
}
|
||||
```
|
||||
Warto gdzieś później zapisać nową nazwę klasy np w opisie komponentu, albo w opisie szablonu.
|
||||
|
||||
### Literały do uzupełnienia w szablonie ###
|
||||
- Coś poszło nie tak podczas dodawania do koszyka. Spróbuj ponownie lub odśwież stronę
|
||||
- Błąd przy pobieraniu danych
|
||||
- Maksymalna liczba sztuk tego towaru które możesz dodać do koszyka to:
|
||||
- Minimalna liczba sztuk tego towaru które możesz dodać do koszyka to:
|
||||
- Wystąpił błąd z inicjalizacją. Proszę odśwież stronę
|
||||
- Nie znaleziono kontenera
|
||||
- Nie znaleziono metody graphql
|
||||
|
||||
#### Przykład ####
|
||||
##### Jedna ramka - obiekt ######
|
||||
```
|
||||
idmInsertHotspotObject({
|
||||
{
|
||||
id: "idmMainHotspot1",
|
||||
title: "Nowoczesna ramka rekomendacji",
|
||||
classes: "abcdefg",
|
||||
placement: {
|
||||
selector: "#content",
|
||||
insert: "afterbegin"
|
||||
},
|
||||
query: {
|
||||
string: `searchInput: {productsId : [589, 180, 181590,160740, 155978, 153632, 123350, 82542, 37321, 17040, 25065, 25114, 85452]}`,
|
||||
graphFn: IDM_PRODUCTS_GQL
|
||||
},
|
||||
options: {
|
||||
lazy: false,
|
||||
addToBasket: "range",
|
||||
swiper: true,
|
||||
}
|
||||
},
|
||||
})
|
||||
```
|
||||
##### Wszystkie ramki - tablica obiektów ######
|
||||
```
|
||||
idmInsertAllObjectHotspots(hotspotArr);
|
||||
new IdmHotspot({
|
||||
id: "idmTestHotspot1",
|
||||
title: "tescik",
|
||||
placement: {
|
||||
selector: "#content",
|
||||
insert: "beforeend",
|
||||
},
|
||||
source: {
|
||||
productsMenu: 1649
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
#### Wszystkie możliwe dane JS ####
|
||||
```
|
||||
/**
|
||||
* @typedef {object} Hotspot
|
||||
* @property {string} id - Identyfikator ramki (required).
|
||||
* @property {string} title - Tytuł ramki.
|
||||
* @property {string} classes - Dodatkowe klasy CSS.
|
||||
* @property {object} placement - Określa, gdzie wstawić ramkę (required).
|
||||
* @property {string} placement.selector - Selektor miejsca osadzenia.
|
||||
* @property {string} placement.insert - Pozycja wstawienia względem selektora (np. "afterbegin", "beforeend").
|
||||
* @property {object} source - Dane źródłowe dla hotspotu (required).
|
||||
* @property {string} [source.hotspotType] - Typ hotspotu (np. "promotion").
|
||||
* @property {number[]} [source.productsId] - Tablica ID produktów.
|
||||
* @property {number} [source.productsMenu] - Identyfikator menu produktów.
|
||||
* @property {object} query - Dane zapytania, nadpisują source (DEV).
|
||||
* @property {string} query.string - Zapytanie w formacie GraphQL.
|
||||
* @property {Function} query.graphFn - Funkcja do pobierania danych.
|
||||
* @property {object} options - Ustawienia dla hotspotu (required).
|
||||
* @property {boolean} options.lazy - Czy wczytywać w trybie lazy.
|
||||
* @property {boolean|string} options.addToBasket - Obsługa koszyka:
|
||||
* - true = włącz
|
||||
* - false = wyłącz
|
||||
* - "range" = dodaj z zakresem
|
||||
* @property {boolean|object} options.swiper - Slider:
|
||||
* - true = aktywny
|
||||
* - false = nieaktywny
|
||||
* - object = konfiguracja Swiper
|
||||
* @property {Function} options.callbackFn - Funkcja callback która dzieje się po wywołaniu wszystkiego włącznie ze swiperem
|
||||
*
|
||||
* @type {Hotspot[]}
|
||||
*/
|
||||
```
|
||||
|
||||
|
||||
###### Jedna ramka - HTML ######
|
||||
@@ -72,52 +125,24 @@ idmInsertAllObjectHotspots(hotspotArr);
|
||||
idmInsertHotspotElement(document.getElementByid("idmBlogHotspot1"));
|
||||
</script>
|
||||
```
|
||||
|
||||
###### Wszystkie ramki - HTML ######
|
||||
#### Wszystkie możliwe dane HTML####
|
||||
```
|
||||
idmInsertAllHTMLHotspots();
|
||||
/**
|
||||
* Struktura sekcji hotspotu w HTML.
|
||||
*
|
||||
* @typedef {HTMLElement} HotspotSection
|
||||
* @property {string} id - Identyfikator elementu (np. "idmBlogHotspot1").
|
||||
* @property {string} class - Klasy CSS używane do stylowania.
|
||||
*
|
||||
* @attribute {string} data-products-id - Lista ID produktów (rozdzielona przecinkami).
|
||||
* @attribute {number} data-products-menu - Identyfikator menu produktów.
|
||||
* @attribute {string} data-hotspots-type - Typ hotspotu (np. "promotion").
|
||||
* @attribute {boolean} data-lazy - Czy sekcja ma być ładowana w trybie lazy.
|
||||
*
|
||||
* @example
|
||||
*/
|
||||
|
||||
```
|
||||
|
||||
|
||||
### LISTA GLOBALNYCH FUNKCJI, ZMIENNYCH ###
|
||||
##### INIT #####
|
||||
- priceQuery
|
||||
- productQuery
|
||||
- IDM_PRODUCTS_GQL
|
||||
- IDM_HOTSPOTS_GQL
|
||||
- IDM_PRODUCT_GQL
|
||||
- IDM_HOTSPOT_ADD_TO_BASKET
|
||||
- idmHotspotTextObject
|
||||
|
||||
#### FUNKCJE ####
|
||||
- app_shop.fn.idmGetOmnibusDetails
|
||||
- idmHandleAddToBasket
|
||||
- idmRangeMaxAlert
|
||||
- idmRangeMinAlert
|
||||
- idmQuantityButtonClick
|
||||
- idmQuantityInputChange
|
||||
- idmGetHotspotData
|
||||
- idmGetQueryData
|
||||
- idmObserveOnce
|
||||
- app_shop.fn.idmSetHeight
|
||||
|
||||
|
||||
#### MARKUP ####
|
||||
- idmPrepareProductsMarkup
|
||||
- idmPrepareSingleProductMarkup
|
||||
- idmPrepareHotspotImgMarkup
|
||||
- idmPrepareHotspotPriceMarkup
|
||||
- idmPrepareHotspotAddToBasketMarkup
|
||||
|
||||
#### INIT ####
|
||||
- idmPriceType
|
||||
- idmGeneralHotspotObjData
|
||||
- idmHotspotInit
|
||||
|
||||
#### INSERT ####
|
||||
- idmInsertHotspotElement
|
||||
- idmInsertAllHTMLHotspots
|
||||
- idmInsertHotspotObject
|
||||
- idmInsertAllObjectHotspots
|
||||
|
||||
Created by • **[IdoMods](https://idomods.pl/)** • 2025
|
||||
Reference in New Issue
Block a user