Documentação

EDITANDO OS ARQUIVOS

Indice

Editando o CSS Modificações para páginas não editáveis Modificações para tema responsivo Inserindo scripts Exemplos de scripts

EDITANDO O CSS

O MercadoShops possui um arquivo chamado “personalized.css”. Todas as alterações devem ser feitas nesses arquivos. Não é recomendado alterar os outros arquivos CSS, então a dica é encontrar a classe que deseja alterar, reescrever no arquivo “personalized.css” e, se necessário, usar “!important”.

MODIFICAÇÕES PARA PÁGINAS NÃO EDITÁVEIS

Sobreposição de CSS

Alguns elementos podem ser alterados em páginas sem acesso ao HTML, ou seja, página de categorias, página de busca, página de produto e carrinho.

Para alterar a cor do botão “Comprar” na página de produto, deve-se adicionar no personlized.css a seguinte regra:

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

Podendo alterar a cor de fundo, cor da letra, borda etc., por exemplo:

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

Essa sobreposição de CSS serve para alterar:

Dica: vale notar que o body das páginas possuem Ids e isso facilita muito nas personalizações, por exemplo: “page-HOME”, “page-VIP”, “page-RESULT” entre outras.

MODIFICAÇÕES PARA TEMA RESPONSIVO

Para a versão responsiva, a recomendação é reescrever o código HTML, modificando algumas classes, seja no header, footer ou home, aproveitando as variáveis e entidades disponíveis, modificando apenas o grid e algumas classes.

Algumas classes são necessárias para funcionamento do JavaScript contido no site, por exemplo a classe .ch-dropdown, que faz com que o menu de categorias fique com dropdown.

Alguns componentes do header, footer e home, precisam ser duplicados, como o menu, por exemplo. Caso o layout tenha o menu com as categorias lado a lado, é necessário duplicar o código e modificar as classes iniciais, colocando uma classe extra para o responsivo e outra para a versão clássica.

Essas classes devem ser alteradas com Media Query e Display. Por exemplo:

No HTML teríamos:

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

O CSS ficaria:

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

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

Outras classes, para todo o site podem ser inseridas no Media Query, tanto para que sejam modificadas quanto para esconder elementos, por exemplo:

Podem existir vários Media Queries, seja para telas grandes e pequenas como para tablets, celulares e outros

INSERINDO SCRIPTS

O MercadoShops aceita a inserção de scripts em sua plataforma. Para isso, é necessário inserir uma requisição para o arquivos que contém o arquivo de script.

A requisição deve ser inserida no Administrador > Minha Loja aba Ferramentas, seção Outros.

Imagen

Deve-se clicar no botão “Adicionar o código”. Na caixa de seleção “Localizar o código em:” deve-se selecionar “Para toda a loja”, nomeá-lo, colar o código no campo “Código” e clicar em “Salvar”.

Imagen

Exemplo do código da requisição:

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

O arquivo com o script deve ser salvo na pasta IMAGES do pacote do tema.

Com os scripts, pode-se adicionar recursos à loja virtual que não pode ser feitos por CSS, como por exemplo: Adicionar um botão “COMPRAR AGORA” nas páginas de categoria, por exemplo: agregar um link ao produto que leve direto para o carrinho: /cartactions?axn=add&itemId=$ITEM_ID&qty=1s

EXEMPLOS DE SCRIPTS

Pode-se criar diversos scripts para interagir com a loja do MercadoShops. A seguir, alguns exemplos:

INSERIR FAVICON

Para inserir um favicon, é necessário colocar o arquivo do ícone na pasta IMAGES, inserir nas “Ferramentas” o código para requisição do arquivo do script com o código abaixo:

$(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');
    }
  });

});

O HTML deve estar estruturado da seguinte 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>

No CSS, deve-se inserir as seguintes classes:

.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

O banner do MercadoShops não é rotativo. Para torna-lo rotativo é necessário inserir no arquivo um script, algumas regras no CSS e modificar o HTML.

O HTML deve 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>

NO CSS, as seguintes regras devem ser inseridas:

#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
}

No CSS acima, existem elementos que podem ser modificados para ficarem visualmente de acordo com o projeto.

O script abaixo deve ser inserido:

/*-------------------------------------------
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);
    }

});