Miniwulkan

Dostępność:

dostępny na zamówienie

Example product

Dostępność:

brak informacji

``` -------------------------------- ### Accessing `timeShort` Property Source: https://storefront.developers.shoper.pl/object-api/objects/datetime/time Example of how to access the `timeShort` property to get the formatted time string without seconds. ```APIDOC ## Accessing `timeShort` Property ### Description Access the `timeShort` property to retrieve the formatted time string without seconds. ### Source ```twig {% set time = ObjectApi.getTime("12:30:15") %} {{ time.timeShort }} ``` ### Output Example ``` 12:30 ``` ``` -------------------------------- ### Accessing `iso8601` Property Source: https://storefront.developers.shoper.pl/object-api/objects/datetime/time Example of how to access the `iso8601` property to get the ISO 8601 formatted time string. ```APIDOC ## Accessing `iso8601` Property ### Description Access the `iso8601` property to retrieve the time in ISO 8601 format. ### Source ``` {{ time.iso8601 }} ``` ### Output Example ``` 11:12:13 ``` ``` -------------------------------- ### Example Usage of Bundle Items in Twig Source: https://storefront.developers.shoper.pl/styling/components/bundle/bundle-items Demonstrates how to render bundle items using Twig, iterating through product bundle items and applying necessary classes and configurations. ```twig {% from "@macros/product_bundle_item_tile.twig" import product_bundle_item_tile %} {% set product = ObjectApi.getProduct(product_id) %}

{% for bundleItem in product.bundle.items %} {% if not loop.first %}

+

{% endif %} {% set variantId = moduleInstanceId ~ "-#{bundleItem.variant.product.id}" %} {{ product_bundle_item_tile( bundleItem, moduleConfig|merge({ instanceId: variantId, groupFlashMessengerName }) ) }} {% endfor %}

``` -------------------------------- ### Get All Listeners for a Message Source: https://storefront.developers.shoper.pl/webcomponents/events/buses/query-bus/methods/get-listeners This example demonstrates how to retrieve and log all listeners associated with a particular message name using the `getListeners` method. ```APIDOC ## queryBus.getListeners The `getListeners` method allows to get all listeners of given message. ### Parameters #### Input parameters - **messageName** (string) - Required - The name of the message to get the listeners from. ### Returned value - **TMessageListener[]** - An array of message listeners. ### Example ```javascript useStorefront(async (storefront) => { const listeners = storefront.queryBus.getListeners('my-query'); console.log('listeners of my-query:'); listeners.forEach((listener) => { console.log('listener:', listener) }) }); ``` ``` -------------------------------- ### Render Product Price with Unit Price and Promotion Details Source: https://storefront.developers.shoper.pl/macros/product-price This example renders a product price that includes a unit price and displays promotion details such as duration and the regular price alongside the promotional price. It utilizes `ObjectApi.getProduct` for dynamic promotion data and `options` to control visibility of promotion details. ```twig {% from "@macros/product_price.twig" import product_price %} {% set product = ObjectApi.getProduct(product_id) %} {{ product_price({ priceValue: "$10.35", unitPrice: "$2.24", unitName: "pcs.", hasSpecialOffer: product.hasSpecialOffer, percentageDiscountValue: product.specialOffer.formatDiscount }, { showSpecialOfferDuration: true, showRegularPrice: true }) }} ``` -------------------------------- ### Get Sum of Discounts in Basket Source: https://storefront.developers.shoper.pl/js-api/apis/basket/apis/basket-promotions-api/methods/get-discounts-sum Call the getDiscountsSum method on the basketPromotionsApi to retrieve the total discount amount. This example assumes the basket has been initialized. ```javascript useStorefront(async ({ eventBus, getApi }) => { eventBus.on('basket.initialized', async () => { const basketPromotionsApi = await getApi('basketPromotionsApi'); const discountsSum = basketPromotionsApi.getDiscountsSum(); }); }); ``` -------------------------------- ### HTML Example of Responsiveness Classes Source: https://storefront.developers.shoper.pl/styling/components/responsiveness Demonstrates how to use `hidden-*` classes to control element visibility. Elements with these classes will be hidden on specific screen sizes. ```html

This element is visible on a higher resolution

This element is visible on a lower resolution

``` -------------------------------- ### Search for items with suggestions Source: https://storefront.developers.shoper.pl/js-api/apis/search-api/methods/search This example demonstrates how to use the `search` method to find items based on a suggestion and the original search phrase. It listens for keydown events on a search input to trigger the search. ```javascript useStorefront(async (storefront) => { const searchApi = await storefront.getApi('SearchApi'); const $searchElement = document.querySelector('input[type="search"]'); $searchElement.addEventListener('keydown', (ev) => { if (ev.key.length !== 1) return; const searchPhrase = ev.target.value; const suggestions = await searchApi.getSuggestions(searchPhrase); const searchResultsWithSuggestions = await searchApi.search(suggestions[0], searchPhrase); console.log('search results with suggestions', searchResultsWithSuggestions); }); }); ``` -------------------------------- ### Get Basket Shippings API Source: https://storefront.developers.shoper.pl/js-api/apis/basket/apis/basket-shippings-api/basket-shippings-api To get the `Basket Shippings API` use its name `basketShippingsApi` with the `getApi` method. This API is not automatically initialized. Unless you initialize it by hand or use a proper event like in the example above, you won't be able to fetch the API. ```APIDOC ## Get API To get the `Basket Shippings API` use its name `basketShippingsApi` with the `getApi` method. ```javascript useStorefront(async ({ eventBus, getApi }) => { eventBus.on('basket.initialized', async () => { const basketShippingsApi = await getApi('basketShippingsApi'); }); }); ``` This API is not automatically initialized. Unless you initialize it by hand or use a proper event like in the example above, you won't be able to fetch the API. Read more in the Retrieving basket APIs section ``` -------------------------------- ### Get Basket Payments API Source: https://storefront.developers.shoper.pl/js-api/apis/basket/apis/basket-payments-api/basket-payments-api To get the `Basket Payments API` use its name `basketPaymentsApi` with the `getApi` method. This API is not automatically initialized. Unless you initialize it by hand or use a proper event like in the example above, you won't be able to fetch the API. ```APIDOC ## Get API To get the `Basket Payments API` use its name `basketPaymentsApi` with the `getApi` method. ```javascript useStorefront(async ({ eventBus, getApi }) => { eventBus.on('basket.initialized', async () => { const basketPaymentsApi = await getApi('basketPaymentsApi'); }); }); ``` This API is not automatically initialized. Unless you initialize it by hand or use a proper event like in the example above, you won't be able to fetch the API. Read more in the Retrieving basket APIs section ```

Example header

{{ product.name }}

Miniwulkan

Example product

+