Come utilizzare Magento 1.9.1.0 Configurabile Campioni nel pacchetto di Default il tema (o un tema personalizzato)?

magento.stackexchange https://magento.stackexchange.com//questions/45948

Domanda

AGGIORNAMENTO: La mia risposta ora supporta la modifica automatizzato del prodotto di base immagine dopo swatch.È inoltre possibile trovare un tutorial più dettagliato su come per fare ciò di cui più immagini qui.

Magento CE 1.9.1.0 viene fornito con una bella novità:Configurabile Campioni.Purtroppo, questo è disponibile solo per la trazione POSTERIORE pacchetto, che viene fornito con il default di installazione di Magento.Questo è un self risposto domanda su come fare Magento Configurabile Campioni disponibili per il pacchetto di Default.Per chi vuole integrare la Configurabile Campioni in un tema personalizzato, questa info può essere utile pure.

Nota 1: Questo vuole essere un introductional guida su come fare la Configurabile Campioni disponibili per Magento pacchetto di Default.Questo potrebbe (ma non può) lavorare per ogni tema personalizzato.Eseguire sempre il backup dei file originali (e database) prima di apportare modifiche.

Nota 2: I campioni di fare il lavoro (immagine sotto), ma non ho ancora l'immagine del prodotto per cambiare automaticamente con i campioni.Io cerco di guardare in questo momento trovo un po ' di tempo.

enter image description here

Sentitevi liberi di contribuire con commenti e suggerimenti!

È stato utile?

Soluzione

  1. Copiare la cartella

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

    e il suo contenuto 

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

    (o il pacchetto di modello di cartella)

  2. Copiare il file

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

    per

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

    (o il pacchetto di modello di cartella)

  3. Copiare il file

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

    per

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

    (o il pacchetto di modello di cartella)

  4. Copiare le cartelle

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

    e che il loro contenuto

    skin/frontend/DEFAULT/default/js/

    (o il pacchetto di pelle cartella)

  5. Copiare il file

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

    per

    skin/frontend/DEFAULT/default/js/

    (o il pacchetto di pelle cartella)

  6. Copiare il file

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

    per

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

    (o il pacchetto di layout cartella)

  7. Creare il file

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

Se il vostro pacchetto layout cartella contiene già un local.xml file, quindi non sovrascrivere il file.Guarda i cambiamenti nel passaggio successivo e copiare la versione di local.xml file.

  1. Aperto fino local.xml e aggiungere il codice riportato di seguito:

    <?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. Aggiungere il seguente css per il vostro gli stili.css file:

    /* ============================================ *
 * 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. Copiare il file

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

    per

    skin/frontend/DEFAULT/default/images/

Altri suggerimenti

La tua soluzione è fantastica ma non mostra il campione di colore nella categoria Elenco o della griglia.Qui aggiungo la soluzione per mostrarlo, testata su Magento 1.9.2.4.

in: app / design / frontend / tema personalizzato / modello / modello / catalogo / prodotto aggiungi linea seguita in list.phtml

1 - Prima di mostrare nella visualizzazione dell'elenco, controllare se c'è questo, se no, aggiornare o modifica (Aroud Line 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>
.

In alternativa può utilizzare questo: 

            <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>
.

Regola immagine Ridimensiona.

2 - Dopo "getratingsummary"= PHP End IF=, Around Line 53, aggiungi questo: 

                        <?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 - Effettuare la stessa modifica della vista GIRD attorno alla linea 120 e 152.

4 - Alla fine del file Aggiungi questo: 

 <?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();
    }
}
?>
.

Questo è stato molto utile!Ho alcuni dettagli aggiuntivi che sono stato in grado di lavorare attraverso per ottenere il cambio d'immagine per lavoro.

  1. Copiare il file 

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

    per

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

    o il vostro tema personalizzato

  2. Copia il seguente elenco di file:

    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)

    per

    app/skin/frontend/DEFAULT/default/js

    o il vostro tema personalizzato

  3. Per includere questi nuovi script, modificare app/design/frontend/DEFAULT/default/layout/page.xml (fare un backup del file prima e assicurarsi di unire le modifiche se si fanno gli aggiornamenti, come il tema di default verrebbe sovrascritto)

    Aggiungere dopo la riga 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>

    Aggiungere dopo la linea 50 (linea 52, se hai già aggiunto le due righe sopra):

        <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. Rimuovere la /* Immagini del Prodotto */ sezione dal tuo gli stili.css file (circa linee 783-803) e incollare il seguente CSS dal RWD stili.file 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;
}

Ultimo, ma non meno importante, alcune ottimizzazioni per il elevateZoom grazie a Google e trovando il seguente post BelVG Blog di Mishel Soiko, Ero in grado di modificare e sfruttare di più le impostazioni per il elevateZoom come lo zoom interno o offset della finestra di zoom, etc.Inoltre, volevo l'immagine per avere un popup fancybox quando si fa clic, che ho attivato con l'aiuto del blog di sopra in giù nei commenti.

  1. Aprire app.js il file è stato copiato nel tuo tema precedente

    Al di sopra della linea 1153 (var ProductMediaManager = {), incolla (copiato dal sopra BelVG blog link):

    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 si desidera che il fancybox popup, al di sopra di ciò che è ora in linea 1227, incollare:

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

    Nota, avrete bisogno di avere il fancybox libreria js dopo il caricamento jQuery nel page.xml o altrove nel vostro tema

    Infine, modificare quello che è adesso la linea 1232 (se non entrambi pastings da sopra) dal:

    image.elevateZoom();

    a:

    image.elevateZoom(settings);

Per una panoramica di tutti i zoomer impostazioni, consultare la pagina ufficiale che descrive il elevateZoom Impostazioni

E che dovrebbe far funzionare il tutto.Se stai lavorando con un tema personalizzato (come ero io) si può avere più a che fare.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a magento.stackexchange
scroll top