É composto pelos seguintes widgets:
product_bundle_medias_group
product_medias_selector
product_medias_displayer
product_medias_enlarger
product_medias_zoom
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 à 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_displayer", "sizing": "original"
Parâmetros
Os parâmetros são utilizados para configurar o widget
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