Como usar amostras configuráveis ​​do Magento 1.9.1.0 no tema do pacote padrão (ou um tema personalizado)?

28

ATUALIZAÇÃO: Minha resposta agora suporta alterações automatizadas da imagem base do produto após a amostra. Você também pode encontrar um tutorial mais detalhado sobre como fazer isso, incluindo mais imagens aqui .

O Magento CE 1.9.1.0 vem com um novo recurso muito interessante: Amostras configuráveis. Infelizmente, isso está disponível apenas para o pacote RWD, que vem com a instalação padrão do Magento. Esta é uma pergunta auto-respondida sobre como disponibilizar as amostras configuráveis ​​do Magento para o pacote Padrão. Para quem deseja integrar as amostras configuráveis ​​em um tema personalizado, essas informações também podem ser úteis.

Nota 1: Este é um guia introdutório sobre como disponibilizar as amostras configuráveis ​​para o pacote padrão do Magento. Isso pode (mas pode não) funcionar para todos os temas personalizados. Sempre faça backup dos arquivos originais (e do banco de dados) antes de fazer alterações.

Nota 2: As amostras funcionam (captura de tela abaixo), mas ainda não consegui alterar a imagem do produto automaticamente junto com as amostras. Vou tentar analisar isso quando encontrar algum tempo.

insira a descrição da imagem aqui

Sinta-se livre para contribuir comentando e fazendo sugestões!

Formato
fonte
O link que você adicionou na pergunta não está funcionando: bemaged.com/en/blog/use-magento-swatches-in-custom-theme
Mukesh Chapagain

Respostas:

27
  1. Copie a pasta

    app/design/frontend/RWD/default/template/configurableswatches/

    e seu conteúdo para

    app/design/frontend/DEFAULT/default/template/

    (ou a pasta do modelo de pacote)

  2. Copie o arquivo

    app/design/frontend/RWD/default/template/catalog/product/view/type/options/configurable.phtml

    para

    app/design/frontend/DEFAULT/default/template/catalog/product/view/type/options/

    (ou a pasta do modelo de pacote)

  3. Copie o arquivo

    app/design/frontend/RWD/default/template/catalog/product/view/media.phtml

    para

    app/design/frontend/DEFAULT/default/template/catalog/product/view/

    (ou a pasta do modelo de pacote)

  4. Copie as pastas

    skin/frontend/RWD/default/js/configurableswatches/
    skin/frontend/RWD/default/js/lib/
    

    e seu conteúdo para

    skin/frontend/DEFAULT/default/js/

    (ou a pasta de capa do pacote)

  5. Copie os arquivos

    skin/frontend/RWD/default/js/app.js
    skin/frontend/RWD/default/js/minicart.js
    skin/frontend/RWD/default/js/slideshow.js
    

    para

    skin/frontend/DEFAULT/default/js/

    (ou a pasta de capa do pacote)

  6. Copie o arquivo

    app/design/frontend/RWD/default/layout/configurableswatches.xml

    para

    app/design/frontend/DEFAULT/default/layout/

    (ou a pasta de layout do pacote)

  7. Crie o arquivo

    app/design/frontend/DEFAULT/default/layout/local.xml

Se a pasta de layout do pacote já contiver um local.xmlarquivo, não o substitua. Veja as alterações na próxima etapa e copie-as para sua versão do local.xmlarquivo.

  1. Abra local.xmle adicione o seguinte código:

    <?xml version="1.0"?>
    <layout>
    
        <default>
    
            <reference name="head">
    
                    <action method="addJs"><script>lib/jquery/jquery-1.10.2.min.js</script></action>
                    <action method="addJs"><script>lib/jquery/noconflict.js</script></action>
    
                    <action method="addItem"><type>skin_js</type><name>js/lib/modernizr.custom.min.js</name></action>
                    <action method="addItem"><type>skin_js</type><name>js/lib/selectivizr.js</name></action>
                    <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.js</name></action>
                    <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.addListener.js</name></action>
                    <action method="addItem"><type>skin_js</type><name>js/lib/enquire.js</name></action>
                    <action method="addItem"><type>skin_js</type><name>js/app.js</name></action>
                    <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.min.js</name></action>
                    <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.swipe.min.js</name></action>
                    <action method="addItem"><type>skin_js</type><name>js/slideshow.js</name></action>
                    <action method="addItem"><type>skin_js</type><name>js/lib/imagesloaded.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/minicart.js</name></action>
    
            </reference>
    
        </default>
    
        <catalog_product_view>
    
            <reference name="head">
    
                <action method="addItem"><type>skin_js</type><script>js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js</script></action>
    
            </reference>
    
            <reference name="product.info.media">
    
                <block type="core/text_list" name="product.info.media.after" as="after" />
    
            </reference>
    
        </catalog_product_view>
    
        <PRODUCT_TYPE_configurable>
    
            <reference name="product.info.options.configurable">
    
                <block type="core/text_list" name="product.info.options.configurable.renderers" as="attr_renderers">
                            <block type="configurableswatches/catalog_product_view_type_configurable_swatches" template="configurableswatches/catalog/product/view/type/options/configurable/swatches.phtml" />
                </block>
                <block type="core/text_list" name="product.info.options.configurable.after" as="after">
                <block type="core/template" template="configurableswatches/catalog/product/view/type/configurable/swatch-js.phtml" />
                </block>
    
            </reference>
    
        </PRODUCT_TYPE_configurable>
    
    </layout>
    
  2. Adicione o seguinte css ao seu arquivo styles.css :

    /* ============================================ *
     * Configurable Swatches
     * ============================================ */
    /* Clears */
    .clearfix:after,
    .configurable-swatch-list:after,
    .product-view .product-options .swatch-attr:after {
      content: '';
      display: table;
      clear: both;
    }
    
    /* General Swatch Styling */
    .swatch-link,
    .swatch-label {
      display: block;
      border-radius: 3px;
      font-size: 14px;
      text-align: center;
      color: #636363;
      text-decoration: none;
      box-sizing: content-box;
    }
    
    .swatch-link {
      border: 1px solid #cccccc;
      margin: 0 0 3px;
    }
    .swatch-link img {
      border-radius: 2px;
    }
    .swatch-link:hover {
      cursor: pointer;
      text-decoration: none;
    }
    .swatch-link .x {
      display: none;
      text-indent: -999em;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: url(../images/bg_x.png) center no-repeat transparent;
      z-index: 10;
    }
    .swatch-link.has-image .swatch-label {
      position: relative;
    }
    .swatch-link.has-image img {
      position: absolute;
      top: 0;
      left: 0;
    }
    
    .swatch-label {
      border: 1px solid #fff;
      margin: 0;
      white-space: nowrap;
      background: #f4f4f4;
    }
    
    .configurable-swatch-list {
      margin-left: -3px;
      zoom: 1;
      clear: both;
      -webkit-transform: translateZ(0px);
    }
    .configurable-swatch-list li {
      float: left;
      zoom: 1;
      margin: 0 0 0 3px;
    }
    .products-grid .configurable-swatch-list li {
      display: inline-block;
      float: none;
      margin: 0;
      vertical-align: top;
    }
    .configurable-swatch-list .not-available .x {
      display: block;
    }
    .configurable-swatch-list .not-available .swatch-link {
      border-color: #ededed;
      position: relative;
    }
    .configurable-swatch-list .not-available .swatch-link.has-image img {
      opacity: 0.4;
      filter: alpha(opacity=40);
    }
    .configurable-swatch-list .not-available .swatch-label {
      color: #aaa;
      background: #fff;
    }
    .configurable-swatch-list .wide-swatch .swatch-label {
      padding: 0 6px;
    }
    .configurable-swatch-list .not-available a:focus {
      outline: 0;
    }
    
    #narrow-by-list dd .configurable-swatch-list li {
      margin: 0 0 0 3px;
      width: 47%;
    }
    #narrow-by-list dd .swatch-link {
      border: none;
      line-height: 25px;
      margin-right: 2px;
      text-align: left;
    }
    #narrow-by-list dd .swatch-link.has-image {
      line-height: inherit;
    }
    #narrow-by-list dd .swatch-link:hover .swatch-label {
      border-color: #3399cc;
    }
    #narrow-by-list dd .swatch-label {
      background: #f4f4f4;
      border: 1px solid #cccccc;
      border-radius: 3px;
      display: block;
      float: left;
      line-height: 1.5em;
      margin: 0 5px 0 0;
      padding: 1px 5px;
      white-space: nowrap;
    }
    #narrow-by-list dd .swatch-label img {
      border: 1px solid #fff;
      border-radius: 3px;
      box-sizing: content-box;
    }
    #narrow-by-list dd .has-image .swatch-label {
      padding: 0;
    }
    
    @media only screen and (max-width: 770px) {
      #narrow-by-list dd .configurable-swatch-list li:nth-child(odd) {
        clear: left;
      }
    }
    .currently .swatch-current {
      position: relative;
    }
    .currently .swatch-current .btn-remove {
      margin-top: -10px;
      position: absolute;
      right: 0;
      top: 50%;
    }
    .currently .swatch-current span {
      display: block;
      float: left;
    }
    .currently .swatch-link {
      display: inline-block;
      margin: 0 0 0 3px;
    }
    .currently .swatch-link:hover {
      border-color: #cccccc;
      cursor: default;
    }
    
    /* Other Swatch States */
    .configurable-swatch-list .hover .swatch-link,
    .configurable-swatch-list .selected .swatch-link,
    .swatch-link:hover {
      border-color: #3399cc;
    }
    
    .configurable-swatch-box {
      background: none !important;
    }
    .configurable-swatch-box select.swatch-select {
      display: none;
    }
    .configurable-swatch-box .validation-advice {
      margin: 0 0 5px;
      background: #df280a;
      padding: 2px 5px !important;
      font-weight: bold;
      color: #fff !important;
      float: left;
      display: block;
      border-radius: 3px;
    }
    .product-view .product-img-box .product-image img {
        max-width: 100%;
        max-height: 750px;
        margin: 0px auto;
    }
    .product-view .product-img-box .product-image-zoom {
        z-index: 0;
    }
    .product-view .product-image-thumbs img {
        max-width: 100%;
        max-height: 100%;
    }
    
  3. Copie o arquivo

    skin/frontend/RWD/default/images/bg_x.png

    para

    skin/frontend/DEFAULT/default/images/
Formato
fonte
1
Como você adicionaria as amostras aos produtos individuais no Catálogo / Produto / Lista? No RWD padrão, você pode selecionar as diferentes amostras diretamente daqui sem precisar clicar no produto. Obviamente, é necessário ativar a configuração no back-end: "Atributo do produto a ser usado para amostras na lista de produtos" primeiro.
21414 Joe
Além disso, eu recomendaria adicionar .product-image-zoom.zoom-available .gallery-image { display: none; } .product-image-zoom.zoom-available .gallery-image.visible { display: block; }ao final do CSS, pois sem ele, você verá a última imagem do produto adicionada ao visitar um produto, mas ao passar o mouse, verá a imagem principal.
precisa saber é o seguinte
1
A imagem da galeria não está mudando ao clicar na cor da amostra. Você pode me dizer como fazê-lo funcionar?
Tahir Yasin
2

sua solução é ótima, mas não mostra amostra de cores na lista ou grade de categorias. Aqui eu adiciono a solução para mostrá-lo, testada no magento 1.9.2.4.

Em: app / design / frontend / TEMA PERSONALIZADO / modelo / catálogo / produto, adicione a linha seguida em list.phtml

1 - primeiro a mostrar na exibição de lista, verifique se há, se não, atualização ou alteração (em torno da linha 39):

<?php $_imgSize = 300; ?>
            <img id="product-collection-image-<?php echo $_product->getId(); ?>"
                 src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize($_imgSize); ?>"
                 alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
        </a>

Em alternativa, pode usar isto:

            <img id="product-collection-image-<?php echo $_product->getId(); ?>"
          src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(230,279); ?>" class="small-image" 
          alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />             

        </a>

ajustar redimensionar imagem.

2 - depois de "getRatingSummary" = php end if =, na linha 53, adicione isto:

                        <?php
                    // Provides extra blocks on which to hang some features for products in the list
                    // Features providing UI elements targeting this block will display directly below the product name
                    if ($this->getChild('name.after')) {
                        $_nameAfterChildren = $this->getChild('name.after')->getSortedChildren();
                        foreach ($_nameAfterChildren as $_nameAfterChildName) {
                            $_nameAfterChild = $this->getChild('name.after')->getChild($_nameAfterChildName);
                            $_nameAfterChild->setProduct($_product);
                            echo $_nameAfterChild->toHtml();
                        }
                    }
                    ?>

3 - faça a mesma alteração para girar a vista em torno das linhas 120 e 152.

4 - no final do arquivo, adicione este:

 <?php
// Provides a block where additional page components may be attached, primarily good for in-page JavaScript
if ($this->getChild('after')) {
    $_afterChildren = $this->getChild('after')->getSortedChildren();
    foreach ($_afterChildren as $_afterChildName) {
        $_afterChild = $this->getChild('after')->getChild($_afterChildName);
        //set product collection on after blocks
        $_afterChild->setProductCollection($_productCollection);
        echo $_afterChild->toHtml();
    }
}
?>
Joso
fonte
1

Isso foi muito útil! Tenho alguns detalhes extras que pude trabalhar para que a imagem funcione.

  1. Copie o arquivo

    app/design/frontend/RWD/default/template/catalog/product/view/media.phtml

    para

    app/design/frontend/DEFAULT/default/template/catalog/product/view/

    ou seu tema personalizado

  2. Copie a seguinte lista de arquivos:

    app/skin/frontend/RWD/default/js/app.js
    app/skin/frontend/RWD/default/js/slideshow.js
    app/skin/frontend/RWD/default/js/lib/* (all files and the elevatezoom folder)

    para

    app/skin/frontend/DEFAULT/default/js

    ou seu tema personalizado

  3. Para incluir esses novos scripts, edite app / design / frontend / DEFAULT / padrão / layout / page.xml (faça um backup desse arquivo primeiro e certifique-se de mesclar as alterações se você fizer atualizações, pois o tema padrão seria substituído)

    Adicionar após a linha 38:

    <action method="addJs"><script>lib/jquery/jquery-1.10.2.min.js</script></action>
    <action method="addJs"><script>lib/jquery/noconflict.js</script></action>

    Adicione após a linha 50 (linha 52, se você já adicionou as duas linhas acima):

        <action method="addItem"><type>skin_js</type><name>js/lib/modernizr.custom.min.js</name></action>
        <action method="addItem"><type>skin_js</type><name>js/lib/selectivizr.js</name></action>
        <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.js</name></action>
        <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.addListener.js</name></action>
        <action method="addItem"><type>skin_js</type><name>js/lib/enquire.js</name></action>
        <action method="addItem"><type>skin_js</type><name>js/app.js</name></action>
        <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.min.js</name></action>
        <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.swipe.min.js</name></action>
        <action method="addItem"><type>skin_js</type><name>js/slideshow.js</name></action>
        <action method="addItem"><type>skin_js</type><name>js/lib/imagesloaded.js</name></action>
  4. Remova a seção / * Product Images * / do arquivo styles.css (em torno das linhas 783-803) e cole o seguinte CSS no arquivo RWD styles.css:

    * Product Images */
    .product-img-box {
      width: 50%;
      float: left;
    }
    .product-img-box .product-name h1 {
      border: 0;
    }
    .product-img-box .product-image {
      margin-bottom: 10px;
    }
    .product-img-box .product-image img {
      max-width: 100%;
      max-height: 750px;
      margin: 0px auto;
    }
    
    @media only screen and (max-width: 479px) {
      .product-img-box .product-image img {
        max-height: 450px;
      }
    }
    .product-image-gallery {
      position: relative;
    }
    .product-image-gallery .gallery-image {
      display: none;
    }
    .product-image-gallery .gallery-image.visible {
      display: block;
    }
    .product-image-gallery .gallery-image.visible.hidden {
      visibility: hidden;
    }
    .product-image-gallery:before, .product-image-gallery:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      display: none;
    }
    .product-image-gallery:before {
      background-color: white;
      opacity: 0.8;
      z-index: 2;
    }
    .product-image-gallery:after {
      background-image: url("../images/opc-ajax-loader.gif");
      background-repeat: no-repeat;
      background-position: center;
      z-index: 3;
    }
    .product-image-gallery.loading {
      position: relative;
    }
    .product-image-gallery.loading:before, .product-image-gallery.loading:after {
      display: block;
    }
    
    .product-image-thumbs li {
      display: inline-block;
    }
    .product-image-thumbs li:first-child {
      margin-left: -1px;
    }
    .product-image-thumbs a {
      display: inline-block;
      border: 1px solid transparent;
    }
    
    .no-touch .product-image-thumbs a:hover {
      border-color: #c7c7c7;
    }

Por fim, mas não menos importante, algumas otimizações para o elevateZoom graças ao Google e encontrando a seguinte postagem no BelVG Blog de Mishel Soiko , fui capaz de modificar e tirar proveito de mais configurações do elevateZoom, como zoom interno ou deslocamento da janela de zoom , etc. Além disso, queria que a imagem tivesse uma caixa de pop-up pop-up quando clicada, o que ativei com a ajuda do blog acima nos comentários.

  1. Abra o arquivo app.js que você copiou para o seu tema anteriormente

    Acima da linha 1153 ( var ProductMediaManager = {), cole (copiado do link acima do blog BelVG):

    var settings = {
    
        // set tint background
        tint:true,
        tintColour:'#F90',
        tintOpacity:0.5,
    
        // Size
        zoomWindowHeight: 300,
        zoomWindowWidth: 400,
        borderSize: 0,
    
        // Position
        zoomWindowOffetx: 10,
        zoomWindowOffety: 0,
    
        // Additional settings for Zoomer positioning.
        // zoomWindowPosition: 1,
        // zoomType: "inner",
    
        // Fade-in speed settings
        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 500,
        lensFadeIn: 500,
        lensFadeOut: 500,
    
        // Ability to zoom by using the mouse scroll.
        scrollZoom : true,
    
        // inertia - my favorite one 
        easing: true
    }

    Se você deseja o popup fancybox, acima da linha 1227, cole:

    $j(".product-image-gallery").on("click", function(e) {
        var src = $j('.product-image img.visible').attr('src');
    $j.fancybox(src);
    });

    Observe que você precisará carregar a biblioteca js do fancybox após o jQuery em seu page.xml ou em outro local do seu tema

    Por fim, modifique o que agora é a linha 1232 (se você fez os dois pastos acima) de:

    image.elevateZoom();

    para:

    image.elevateZoom(settings);

Para uma visão geral de todas as configurações do zoom, consulte a página oficial que descreve as configurações do elevateZoom

E isso deve fazê-lo funcionar. Se você estiver trabalhando com um tema personalizado (como eu estava), poderá ter mais o que fazer.

Mike
fonte
Com uma abordagem um pouco diferente, eu também consegui fazer a troca automática de imagens funcionar. Na minha abordagem, estou usando local.xmlpara carregar todos os .jsarquivos no headda página. Atualizarei minha resposta quando encontrar algum tempo. Até lá, você pode encontrar um tutorial detalhado que escrevi sobre como fazer isso aqui .
formato
0 baixo voto configuráveis Amostras não vai mudar a imagem do produto configurável Verifique isso, ravichomal.blogspot.in/2015/12/...
Ravi Chomal