Mídias do produto

Exibe as fotos cadastradas no produto.

É composto pelos seguintes widgets:
product_bundle_medias_group
product_medias_selector
product_medias_displayer
product_medias_enlarger
product_medias_zoom

📘

tag: product_medias
componente: WidgetComponent
diretório: product.medias
template: wd.product.medias.template
jsHandler: ""

Exemplo de uso

{% product_medias(
    UseHierarchy=false
) %}

O parâmetro UseHierarchy evita que o produto seja exibido sem uma foto, procurando fotos associadas ao produto principal e variações. Por regra, procura primeiramente se há alguma imagem associada à opção selecionada, caso não tenha, procura no pai e, por último no filho.
Exemplos:
Produto X possui uma imagem associada ao produto principal e outra imagem associada a variação “Azul”. Nesse caso, ao acessar o produto principal ou ao selecionar a variação Vermelho, será exibida a foto associada ao produto principal. Porém, ao selecionar a variação azul (e uma variação filha, como tamanho M, por exemplo), será exibida a foto associada a variação Azul.
Produto Y possui uma imagem associada ao produto principal e nenhuma imagem associada às suas variações. Nesse caso, sempre será exibida a imagem do produto principal.
Produto Z possui apenas uma imagem associada a variação tamanho M. Nesse caso, sempre será exibida a imagem associada à variação tamanho M, independentemente se ela estiver selecionada ou não.

Exemplo mostrando os widgets product_medias_selector e product_medias_displayerExemplo mostrando os widgets product_medias_selector e product_medias_displayer

Exemplo mostrando os widgets product_medias_selector e product_medias_displayer

Parâmetros

Os parâmetros são utilizados para configurar o widget. Veja aqui a lista dos parâmetros globais.

Nome

Descrição

Tipo

Valor padrão

UseHierarchy

Carregar imagem hierarquicamente

Boolean

true

BundleGroupImageSize

Imagem usada nos grupos de kit

Lista de opções:
"Thumbnail", "Small", "Medium" e "Large"

Small

ShowSpecials

Exibir imagens especiais

Boolean

false

product_bundle_medias_group

Galeria de mídias para kit de produtos por grupo

Eventos

'/wd/product/bundle/mediasgroup/change'
'/wd/product/bundle/variationchange/' + productID

product_medias_selector

Exibe as imagens em formato miniatura e seleciona a mídia clicada.

Eventos

'/wd/product/medias/selector/changed/' + productID, { element, widget, mediaType, index, order}
'/wd/product/medias/displayer/no/photo/' + productID, {}
'/wd/product/variation/changed/'

product_medias_displayer

Exibe a mídia clicada em tamanho grande.

Eventos

'/wd/product/medias/displayer/changed/' + productID, { widget, index}
'/wd/product/medias/displayer/clicked/' + productID, { widget, index}
'/wd/product/medias/displayer/mouseover/' + productID, { widget, index}
'/wd/product/medias/displayer/mouseout/' + productID, { widget, index}
'/wd/product/medias/displayer/mouseenter/' + productID, { widget, index}
'/wd/product/medias/displayer/mouseleave/' + productID, { widget, index}
'/wd/product/medias/displayer/no/photo/'
'/wd/product/medias/selector/changed/'

product_medias_enlarger

Botão para exibir a mídia selecionada em tamanho extra grande.

Eventos

'/wd/product/medias/selector/changed/' + productID
'/wd/product/medias/displayer/clicked/' + productID
'/wd/product/variation/changed/' + productID

product_medias_zoom

Exibe a mídia selecionada em tamanho zoom.

Eventos

'/wd/product/medias/displayer/mouseenter'
'/wd/product/medias/displayer/changed'
'/wd/product/medias/displayer/no/photo/' + productID

📘

Os eventos podem ser usados de três formas:
publish: dispara o evento
subscribe: escuta o evento
unsubscribe: deixa de escutar o evento, sendo que, neste caso, deve-se passar o mesmo callback informado no subscribe que deseja-se deixar de executar.

🚧

Importante:

Os argumentos informados nos eventos são opcionais. Ao escutá-los (subscribe) é recomendado validar se o argumento existe antes de utilizá-lo, evitando erros na execução do script.


Did this page help you?