Documentación

EDITANDO LOS ARCHIVOS

Índice

Edición de CSS Modificaciones para páginas no editables Modificaciones para tema responsivo Insertando scripts Ejemplos de scripts

EDICIÓN DE CSS

Mercado Shops posee un archivo llamado “personalized.css”. Todas las modificaciones deben realizarse en esos archivos. No se recomienda alterar los otros archivos CSS. Entonces la pista es encontrar la clase que se desea alterar, reescribir en el archivo “personalized.css” y, si es necesario, usar “!important”.

MODIFICACIONES PARA PÁGINAS NO EDITABLES

Superposición de CSS

Algunos elementos pueden ser alterados en páginas sin acceso a HTML, es decir, páginas de categorías, páginas de búsqueda , página de productos y carrito.

Para alterar el color del botón “Comprar” en la página del producto, se debe añadir la siguiente regla en personalized.css:

.component.vip .ch-actions.buttonBuy a {
}

Se puede alterar el color de fondo, color de la letra, borde, etc. Por ejemplo:

.component.vip .ch-actions.buttonBuy a {
  background: #54963d none repeat scroll 0 0;
  border: medium none;
  border-radius: 10px;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
}

Esta superposición sirve para alterar lo siguiente:

Pista: Vale destacar que el cuerpo de las páginas posee IDs y esto facilita mucho las personalizaciones. Por ejemplo, “page-HOME”, ”page-RESULT”, entre otras.

MODIFICACIONES PARA TEMA RESPONSIVO

Para la versión responsiva, la recomendación es reescribir el código HTML modificando algunas clases, ya sea en el encabezado, el pie de página o la página inicial, aprovechando las variables, las entidades disponibles y modificando solamente el grid y algunas clases.

Algunas clases son necesarias para el funcionamiento de JavaScript contenido en el sitio. Por ejemplo: la clase.ch-dropdown, que hace que el menú de categorías presente estilo dropdown.

Algunos componentes del encabezado, el pie de página y la página principal deben duplicarse, como por ejemplo, el menú. En caso de que el layout tenga el menú con las categorías lado a lado, es necesario duplicar el código y modificar las clases iniciales, colocando una clase adicional para la versión responsiva y otra para la versión clásica. Estas clases deben ser alteradas con media query (consulta de medios) y Display (visualización de medios). Por ejemplo:

En HTML tendríamos lo siguiente:

<div class=”menu-responsivo”> ... </div>
<div class=”menu-classico”>... </div>

El CSS quedaría de la siguiente manera::

.menu-responsivo {display:none;}
.menu-classico {display:block;}

@media screen and (max-width: 640px){
  .menu-responsivo {display:block;}
  .menu-classico {display:none;}
}

Otras clases para todo el sitio pueden ser insertadas en Media Query, tanto para ser modificadas como para esconder elementos. Por ejemplo:

Pueden existir varias Medias Queries, ya sea para pantallas grandes y pequeñas como para tabletas, celulares y otros dispositivos.

INSERCIÓN DE SCRIPTS

Mercado Shops acepta la inserción de scripts en su plataforma. Para ello, es necesario insertar una solicitud para los archivos que contienen el archivo de script.

La solicitud debe insertarse en “Administrador", "Mi sitio web", pestaña "Herramientas", sección "Otras".

Imagen

Se debe presionar el botón “Agregar código”. En la caja de selección “Agregar código en”, se debe seleccionar “Para toda el sitio”, colocar un nombre, pegar el código en el campo “Código” y presionar “Guardar”.

Imagen

Ejemplo de código para añadir JS:

<script>
function addFile(s,link) {
var tfile = document.createElement(s);
tfile.src = link;
document.head.appendChild(tfile);
}

document.addEventListener("DOMContentLoaded", function(event) {
addFile('script',"IMAGES/script.js?n=1");
});
</script>

El archivo con el script se debe guardar en la carpeta IMAGES del paquete de tema.

Con los scripts, se pueden agregar recursos a la tienda virtual que no se pueden hacer con CSS, como por ejemplo, agregar un botón “Comprar ahora” en las páginas de categoría. Por ejemplo: Agregar un enlace al producto que lleve directo al carrito. /cartactions?axn=add&itemId=$ITEM_ID&qty=1s

EJEMPLOS DE SCRIPTS

Se pueden crear diversos scripts para interactuar con la tienda de Mercado Shops. A continuación, se presentan algunos ejemplos.

INSERCIÓN DE FAVICON

Para insertar un favicon, es necesario colocar el archivo del icono en la carpeta IMAGES y, en “Herramientas”, insertar el código para solicitud del archivo de script con el siguiente código:

$(function () {
  $('link[rel="shortcut icon"]').attr('href', '../IMAGES/favicon.ico');
});
MENU DROPDOWN
$(function() {

  $('.dropdown').click(function () {
    var element = $(this).siblings(".dropdown-content");
    var oHeight = $(element)[0].scrollHeight;
    if ($(element).height() === 0) {
      $(element).css("max-height", oHeight);
      $(this).addClass('active');
    } else {
      $(element).css("max-height", "0");
      $(this).removeClass('active');
    }
  });

});

Y en HTML debe estar estructurado de la siguiente forma:

<div class="menu">
  <ul>
    <li class="dropdown">
      <span>MENU</span>
      <ul class="dropdown-content">
        <li>
          <a>Item</a>
        </li>
        <li>
          <a>Item</a>
        </li>
        <li>
          <a>Item</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Y en CSS, debe incluir las siguientes clases:

.menu ul {
  display: inline-block;
}

.dropdown {
  cursor: pointer;
  display: block;
}

.dropdown ul {
  display: block;
}

.dropdown-content {
  max-height: 0;
  overflow: hidden;
  z-index: 2000;
  position: absolute;
  background: #eee;
}

.dropdown-content li {
  display: block;
  text-align: left;
}
BANNER ROTATIVO

El banner de Mercado Shops no es rotativo. Para que se vuelva rotativo, es necesario insertar en el archivo un script y algunas reglas en CSS, y modificar el HTML.

El HTML debe ser:

<div id="banner-row">
  <div id="banner-slider">
    #if($showContent)
      #if($showContentImage)
        #foreach ($contentImage in $contentImageList)
          #if($contentImage.hasLink)
            <a href="$contentImage.link" rel="nofollow" target="_parent" class="banner-link">
              <img class="banner-img" src="$contentImage.src" alt="$contentImage.alt">
            </a>
          #else
            <div class="banner-link">
              <img class="banner-img" src="$contentImage.src" alt="$contentImage.alt">
            </div>
          #end
        #end
      #elseif ($showContentText)
        $contentText
      #end
    #end
  </div>
</div>

En CSS, se deben insertar las siguientes reglas:

#banner-row {
  position: relative;
  z-index: 1;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  max-width: 100%;
  margin: -28px 0 0;
  padding: 0;
  text-align: center;
  overflow: hidden
}

@media screen and (max-width: 768px) {
  #banner-row {
    margin: 0
  }
}

#banner-slider {
  position: relative;
  right: 0;
  width: 99999px;
  -webkit-transition: right .5s;
  transition: right .5s
}

.banner-container {
  float: left;
  text-align: center;
  overflow: hidden;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat
}

.banner-container a {
  display: block
}

.banner-container a img {
  display: block
}

.banner-container.is-smaller {
  background-size: auto;
  background-position: center 0
}

@media screen and (max-width: 960px) {
  .banner-container.is-smaller {
    background-size: cover
  }
}

.banner-size {
  display: inline-block
}

.banner-canvas {
  vertical-align: bottom;
  max-width: 100%
}

@media screen and (min-width: 520px) {
  #big_banner {
    display: inherit
  }
}

#banner-list {
  position: absolute;
  z-index: 20;
  bottom: 0;
  right: 0 !important;
  width: 100%;
  background: transparent;
  text-align: center
}

#banner-list li {
  vertical-align: middle;
  margin-bottom: 8px
}

.banner-slide-number {
  display: inline-block;
  vertical-align: top;
  width: 16px;
  height: 16px;
  margin: 0 5px 0;
  background: #fff200;
  border: none;
  border-radius: 50%;
  font-size: 14px;
  text-indent: -99999px;
  transition: all .2s;
  cursor: pointer
}

.banner-slide-number:hover,
.banner-slide-number.active {
  width: 20px;
  height: 20px;
  background-color: #fff200;
  border: none
}

.banner-slide-number:only-child {
  display: none
}

.arrow-box {
  display: none;
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: 0
}

En el CSS de arriba, existen elementos que pueden ser modificados para lograr un aspecto visual de acuerdo con el proyecto.

Se debe insertar el siguiente script:

/*-------------------------------------------
BANNER ROTATIVO
-------------------------------------------*/
$(window).load(function() {
    var viewportSize = $(window).innerWidth(),
        siteContainer = parseInt($('.content-box').css('max-width'), 10),
        imgWidth = 0,
        imgHeight = 0,
        ratio = 0,
        slideNumber = $('.banner-link').length,
        slideIndex = 0,
        interval = 5000,
        timer,
        bg = 0,
        actualHeight = 0,
        aux = 0;

    //Wrapping
    $('.banner-link').wrap('<div class="banner-container"></div>');

    //Setting Size
    $('.banner-container').css('width', viewportSize);

    $('.banner-container').each(function(num) {

        if ($(this).children('.banner-img').width() & lt; = 960) {
            $(this).addClass('is-smaller');
        }

        //Getting and Adding BG
        bg = $(this).find('.banner-img').attr('src');
        $(this).css('background-image', 'url(' + bg + ')').find('.bannerlink').wrap('<div
            class = & quot; size - holder & quot; id = & quot; size - holder ' + (num + 1) +
            '"></div>');

        //Getting Size
        imgHeight = $(this).find('.banner-img').height();

        //Calculating Ratio
        ratio = siteContainer / imgHeight;

        //Setting Size Holder Max Width, Max Height, Height and Ratio
        $('#size-holder' + (num + 1)).css('max-width',
            siteContainer).css('max-height', imgHeight).css('height', viewportSize /
            ratio).attr('ratio', ratio);

    });

    //Removing image
    $('.banner-img').css('opacity', '0');

    //Creating list
    $('#banner-row').append('<ul id="banner-list"></ul>');
    for (aux = 0; aux & lt; slideNumber; aux += 1) {
        $('#banner-list').append('<li class="banner-slide-number" id="slide-' +
            (aux + 1) + '">' + (aux + 1) + '</li>');
    }

    //Banner list position
    var PositionNav = (viewportSize - siteContainer) / 2;
    $('#banner-list').css('right', PositionNav);
    $('.prev-banner').css('left', PositionNav);
    $('.next-banner').css('right', PositionNav);

    //Adding Active Class to First Slide and number
    $('.banner-container').first().addClass('active');
    $('.banner-slide-number').first().addClass('active');

    //Setting Banner Slide Height
    actualHeight = $('.banner-container.active').height();
    $('#banner-slider').css('height', actualHeight);

    //Rotate
    autoRotate();

    //Change Slide On Number Click
    $('.banner-slide-number').click(function() {

        //Get Index
        slideIndex = $(this).index();
        changeActive();
    });

    //Change slide on arrow click
    $('.next-banner').click(function() {
        if (slideNumber & gt; 1) {
            $('.banner-slide-number').eq(slideIndex).removeClass('active');
            if (slideIndex & lt; slideNumber - 1) {
                slideIndex++;
            } else {
                slideIndex = 0;
            }
            $('.banner-slide-number:nth-of-type(' + (slideIndex + 1) +
                ')').addClass('active');
            $('#banner-slider').css('right', (slideIndex * viewportSize));
        }
    });

    $('.prev-banner').click(function() {
        if (slideNumber & gt; 1) {
            $('.banner-slide-number').eq(slideIndex).removeClass('active');
            if (slideIndex & gt; 0) {
                slideIndex--;
            } else {
                slideIndex = slideNumber - 1;
            }
            $('.banner-slide-number:nth-of-type(' + (slideIndex + 1) +
                ')').addClass('active');
            $('#banner-slider').css('right', (slideIndex * viewportSize));
        }
    });

    //Resizing changes
    $(window).resize(function() {

        //Updating Viewport Size
        viewportSize = $(window).innerWidth();

        //Updating Banner list position
        PositionNav = (viewportSize - siteContainer) / 2;

        $('.size-holder').each(function() {
            imgWidth = $(this).width();
            ratio = $(this).attr('ratio');
            $(this).css('height', imgWidth / ratio);
        });

        //Updating Banner Container Size and Position
        if (viewportSize & lt; siteContainer) {
            $('.banner-container').css('max-width', viewportSize);
        } else {
            $('.banner-container').css('max-width', 'none').css('width',
                viewportSize);
            $('#banner-slider').css('right', (slideIndex * viewportSize));
            $('#banner-list').css('right', PositionNav);
            $('.prev-banner').css('left', PositionNav);
            $('.next-banner').css('right', PositionNav);
        }

        //Setting Banner Slide Height
        actualHeight = $('.banner-container.active').height();
        $('#banner-slider').css('height', actualHeight);
        slideIndex = 0;
        changeActive();
    });

    //Checking if its Hovered to Stop Auto Rotation
    $('#banner-row').on('mouseover', function() {
        clearInterval(timer);
    });

    //Checking if its leave to begin Auto Rotation
    $('#banner-row').on('mouseleave', function() {
        autoRotate();
    });

    //Creating Function to rotate
    function autoRotate() {
        timer = setInterval(function() {
            if (slideNumber & gt; 1) {
                if (slideIndex & lt; slideNumber - 1) {
                    slideIndex += 1;
                } else {
                    slideIndex = 0;
                }
                changeActive();
            }
        }, 5000);
    }

    function changeActive() {

        //Remove Active Class from All
        $('.banner-container').removeClass('active');
        $('.banner-slide-number').removeClass('active');

        //Add Active
        $('.banner-slide-number:nth-of-type(' + (slideIndex + 1) +
            ')').addClass('active');
        $('.banner-container:nth-of-type(' + (slideIndex + 1) +
            ')').addClass('active');

        //Move Banner Slider
        $('#banner-slider').css('right', (slideIndex * viewportSize));

        //Setting Banner Slide Height
        actualHeight = $('.banner-container.active').height();
        $('#banner-slider').css('height', actualHeight);
    }

});